"use client";

import { useState, useTransition } from "react";
import { Button, Card } from "@/components/ui";
import { Field, inputClass } from "@/components/ui/form";
import { deleteFormAction, saveFormAction, setFormStatusAction } from "@/lib/actions/forms";
import { FIELD_TYPES, OPTION_TYPES, type FormField } from "@/lib/forms/schema";

export interface BuilderProps {
  base: string;
  formId: string;
  status: "ACTIVE" | "PAUSED";
  siteId: string;
  initial: { name: string; slug: string; fields: FormField[]; notifyEmails: string[]; consentText: string; successMessage: string; retentionDays: number | null };
  submissionCount: number;
  canManage: boolean;
}

const TYPE_LABELS: Record<(typeof FIELD_TYPES)[number], string> = { text: "Short text", email: "Email", phone: "Phone", textarea: "Long text", number: "Number", date: "Date", select: "Dropdown", radio: "Choose one (radio)", checkbox: "Single checkbox", checkboxGroup: "Choose many (checkboxes)" };

const toId = (label: string) => label.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^[^a-z]+/, "").replace(/_+$/, "").slice(0, 40);

export function FormBuilder({ base, formId, status, initial, submissionCount, canManage }: BuilderProps) {
  const [name, setName] = useState(initial.name);
  const [slug, setSlug] = useState(initial.slug);
  const [fields, setFields] = useState<FormField[]>(initial.fields);
  const [emails, setEmails] = useState(initial.notifyEmails.join("\n"));
  const [consent, setConsent] = useState(initial.consentText);
  const [success, setSuccess] = useState(initial.successMessage);
  const [retention, setRetention] = useState(initial.retentionDays === null ? "" : String(initial.retentionDays));
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);
  const [pending, start] = useTransition();
  const [confirmDelete, setConfirmDelete] = useState(false);
  const ro = !canManage;

  const patch = (i: number, p: Partial<FormField>) => { setFields((fs) => fs.map((f, j) => (j === i ? { ...f, ...p } : f))); setMsg(null); };
  const move = (i: number, d: -1 | 1) => setFields((fs) => { const n = [...fs]; const a = n[i], b = n[i + d]; if (!a || !b) return fs; n[i] = b; n[i + d] = a; return n; });
  function addField() {
    let n = fields.length + 1;
    while (fields.some((f) => f.id === `field_${n}`)) n++;
    setFields([...fields, { id: `field_${n}`, type: "text", label: "New field", required: false, helpText: "", placeholder: "", options: [] }]);
  }

  function save() {
    setErrors({});
    start(async () => {
      const res = await saveFormAction(formId, {
        name, slug, fields,
        notifyEmails: emails.split(/[\n,;]+/).map((e) => e.trim()).filter(Boolean),
        consentText: consent, successMessage: success, retentionDays: retention.trim() === "" ? null : Number(retention),
      });
      if (res.ok) setMsg({ ok: true, text: "Form saved" });
      else { setErrors(res.fieldErrors ?? {}); setMsg({ ok: false, text: res.error }); }
    });
  }

  return (
    <div className="space-y-4">
      <Card className="grid gap-4 p-4 sm:grid-cols-2">
        <Field id="fb-name" label="Form name" error={errors.name}><input id="fb-name" value={name} disabled={ro} maxLength={120} onChange={(e) => setName(e.target.value)} className={inputClass} /></Field>
        <Field id="fb-slug" label="URL name" error={errors.slug}><input id="fb-slug" value={slug} disabled={ro} onChange={(e) => setSlug(e.target.value.toLowerCase())} className={inputClass} /></Field>
        <Field id="fb-emails" label="Notify these addresses" help="One per line. Leave empty for no emails." error={errors.notifyEmails}><textarea id="fb-emails" rows={3} value={emails} disabled={ro} onChange={(e) => setEmails(e.target.value)} className={inputClass} /></Field>
        <div className="space-y-4">
          <Field id="fb-success" label="Thank-you message" error={errors.successMessage}><input id="fb-success" value={success} disabled={ro} maxLength={500} onChange={(e) => setSuccess(e.target.value)} className={inputClass} /></Field>
          <Field id="fb-retention" label="Delete submissions after (days)" help="Leave empty to keep them until deleted manually." error={errors.retentionDays}><input id="fb-retention" type="number" min={1} max={3650} value={retention} disabled={ro} onChange={(e) => setRetention(e.target.value)} className={inputClass} /></Field>
        </div>
        <Field id="fb-consent" label="Consent checkbox text" help="Shown as a required checkbox, e.g. “I agree to the privacy policy”. Leave empty for none." error={errors.consentText} className="sm:col-span-2"><input id="fb-consent" value={consent} disabled={ro} maxLength={500} onChange={(e) => setConsent(e.target.value)} className={inputClass} /></Field>
      </Card>

      <Card className="p-4">
        <h2 className="mb-3 text-sm font-semibold">Fields</h2>
        {errors.fields ? <p role="alert" className="mb-2 text-sm text-danger">{errors.fields}</p> : null}
        <ol className="space-y-3">
          {fields.map((f, i) => {
            const e = (k: string) => errors[`fields.${i}.${k}`];
            const hasOptions = OPTION_TYPES.includes(f.type);
            return (
              <li key={i} className="rounded-md border border-border p-3">
                <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
                  <span className="text-xs font-medium">Field {i + 1}</span>
                  {!ro ? <div className="flex gap-1">
                    <Button variant="ghost" disabled={i === 0} aria-label={`Move field ${i + 1} up`} onClick={() => move(i, -1)}>↑</Button>
                    <Button variant="ghost" disabled={i === fields.length - 1} aria-label={`Move field ${i + 1} down`} onClick={() => move(i, 1)}>↓</Button>
                    <Button variant="ghost" aria-label={`Remove field ${i + 1}`} onClick={() => setFields(fields.filter((_, j) => j !== i))}>Remove</Button>
                  </div> : null}
                </div>
                <div className="grid gap-3 sm:grid-cols-2">
                  <Field id={`f${i}-label`} label="Label" error={e("label")}><input id={`f${i}-label`} value={f.label} disabled={ro} maxLength={120} onChange={(ev) => patch(i, { label: ev.target.value })} className={inputClass} /></Field>
                  <Field id={`f${i}-type`} label="Type"><select id={`f${i}-type`} value={f.type} disabled={ro} onChange={(ev) => patch(i, { type: ev.target.value as FormField["type"] })} className={inputClass}>{FIELD_TYPES.map((t) => <option key={t} value={t}>{TYPE_LABELS[t]}</option>)}</select></Field>
                  <Field id={`f${i}-id`} label="Field name" help="Used in exports. Lowercase letters, numbers, underscores." error={e("id")}><input id={`f${i}-id`} value={f.id} disabled={ro} onChange={(ev) => patch(i, { id: ev.target.value })} onBlur={() => { if (!f.id) patch(i, { id: toId(f.label) || `field_${i + 1}` }); }} className={inputClass} /></Field>
                  <Field id={`f${i}-help`} label="Help text" error={e("helpText")}><input id={`f${i}-help`} value={f.helpText} disabled={ro} maxLength={250} onChange={(ev) => patch(i, { helpText: ev.target.value })} className={inputClass} /></Field>
                  {f.type !== "checkbox" && !hasOptions && f.type !== "date" ? <Field id={`f${i}-ph`} label="Placeholder" error={e("placeholder")}><input id={`f${i}-ph`} value={f.placeholder} disabled={ro} maxLength={120} onChange={(ev) => patch(i, { placeholder: ev.target.value })} className={inputClass} /></Field> : null}
                  {f.type === "checkbox" ? <Field id={`f${i}-ph`} label="Checkbox text"><input id={`f${i}-ph`} value={f.placeholder} disabled={ro} maxLength={120} onChange={(ev) => patch(i, { placeholder: ev.target.value })} className={inputClass} /></Field> : null}
                  {f.type === "text" || f.type === "textarea" ? <Field id={`f${i}-max`} label="Maximum length" error={e("maxLength")}><input id={`f${i}-max`} type="number" min={1} max={5000} value={f.maxLength ?? ""} disabled={ro} onChange={(ev) => patch(i, { maxLength: ev.target.value === "" ? undefined : Number(ev.target.value) })} className={inputClass} /></Field> : null}
                  {hasOptions ? <Field id={`f${i}-opts`} label="Options" help="One per line, at least two." error={e("options")} className="sm:col-span-2"><textarea id={`f${i}-opts`} rows={4} value={f.options.join("\n")} disabled={ro} onChange={(ev) => patch(i, { options: ev.target.value.split("\n").map((o) => o.trim()).filter(Boolean) })} className={inputClass} /></Field> : null}
                  <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={f.required} disabled={ro} onChange={(ev) => patch(i, { required: ev.target.checked })} /> Required</label>
                </div>
              </li>
            );
          })}
        </ol>
        {!ro ? <div className="mt-3"><Button variant="secondary" onClick={addField} disabled={fields.length >= 40}>Add field</Button></div> : null}
      </Card>

      {!ro ? (
        <div className="flex flex-wrap items-center gap-3">
          <Button onClick={save} disabled={pending}>{pending ? "Saving…" : "Save form"}</Button>
          <Button variant="secondary" disabled={pending} onClick={() => start(async () => { const r = await setFormStatusAction(formId, status === "ACTIVE" ? "PAUSED" : "ACTIVE"); if (r.ok) window.location.reload(); else setMsg({ ok: false, text: r.error }); })}>{status === "ACTIVE" ? "Pause form" : "Resume form"}</Button>
          {confirmDelete ? (
            <><Button variant="danger" disabled={pending} onClick={() => start(async () => { const r = await deleteFormAction(base, formId); if (r && !r.ok) { setMsg({ ok: false, text: r.error }); setConfirmDelete(false); } })}>Confirm delete</Button><Button variant="ghost" onClick={() => setConfirmDelete(false)}>Cancel</Button></>
          ) : <Button variant="ghost" onClick={() => setConfirmDelete(true)}>Delete form{submissionCount ? ` (${submissionCount} submissions)` : ""}</Button>}
          {msg ? <p role={msg.ok ? "status" : "alert"} className={msg.ok ? "text-sm text-success" : "text-sm text-danger"}>{msg.text}</p> : null}
        </div>
      ) : <p className="text-sm text-muted-foreground">You can view this form but not change it.</p>}
    </div>
  );
}