Settings Form

/**
 * VibeBox Motion · Settings Form
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
export { SettingsForm, type SettingsFormProps } from "./settings-form.client";

/**
 * VibeBox Motion · Settings Form
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
"use client";

import { useId, useState } from "react";
import { cn } from "@/lib/utils";
import { accentStyle } from "@/lib/vibebox/app-accent";

export type Setting = { id: string; label: string; help?: string; on?: boolean };
export type SettingsFormProps = { title?: string; name?: string; settings?: Setting[]; onSave?: (values: { name: string; settings: Record<string, boolean> }) => void; accent?: string; className?: string };

const SAMPLE: Setting[] = [
  { id: "email", label: "Email me about new bookings", help: "One email per booking, never more.", on: true },
  { id: "sms", label: "Text reminders to clients", help: "Sent the day before.", on: true },
  { id: "digest", label: "Weekly summary", on: false },
];

/** A settings panel: a labelled text field and switches with help text; Save reports the values. */
export function SettingsForm({ title = "Notifications", name = "Casa Verde Studio", settings = SAMPLE, onSave, accent, className }: SettingsFormProps) {
  const [label, setLabel] = useState(name);
  const [state, setState] = useState<Record<string, boolean>>(() => Object.fromEntries(settings.map((s) => [s.id, Boolean(s.on)])));
  const uid = useId();
  return (
    <form
      data-vb="settings-form"
      style={accentStyle(accent)}
      className={cn("grid gap-4 rounded-xl border border-border bg-card p-5", className)}
      onSubmit={(event) => {
        event.preventDefault();
        onSave?.({ name: label, settings: state });
      }}
    >
      <h2 className="text-body font-semibold">{title}</h2>
      <label className="grid gap-1.5 text-small font-medium" htmlFor={`${uid}-name`}>
        Studio name
        <input id={`${uid}-name`} value={label} onChange={(e) => setLabel(e.target.value)} className="h-10 rounded-md border border-border bg-background px-3 text-[1rem] font-normal focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--app-accent)]" />
      </label>
      <ul className="grid divide-y divide-border">
        {settings.map((s) => (
          <li key={s.id} className="flex items-start justify-between gap-4 py-3">
            <span id={`${uid}-${s.id}`} className="grid gap-0.5 text-small"><span className="font-medium">{s.label}</span>{s.help && <span className="text-muted-foreground">{s.help}</span>}</span>
            <button
              type="button"
              role="switch"
              aria-checked={state[s.id]}
              aria-labelledby={`${uid}-${s.id}`}
              onClick={() => setState((c) => ({ ...c, [s.id]: !c[s.id] }))}
              className="relative mt-0.5 h-6 w-10 shrink-0 rounded-full bg-muted transition-colors aria-checked:bg-[var(--app-accent)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
            >
              <span className={cn("absolute top-0.5 left-0.5 size-5 rounded-full bg-white shadow transition-transform", state[s.id] && "translate-x-4")} />
            </button>
          </li>
        ))}
      </ul>
      <div className="flex justify-end">
        <button type="submit" className="h-10 rounded-md bg-[var(--app-accent)] px-4 text-small font-semibold text-[var(--app-accent-fg,#fff)] transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring">Save changes</button>
      </div>
    </form>
  );
}