"use client";

import { useRouter } from "next/navigation";
import { useId, useState, useTransition } from "react";
import { Button, Card } from "@/components/ui";
import { changeModuleFieldAction } from "@/lib/actions/modules";
import type { FieldDef } from "@/lib/blocks/defs";
import { describeField } from "@/lib/modules/schema";
import { FieldRow, blankField, fromDef, toDef, type EField } from "./field-editor";

/** Super-admin CRUD for the fields of one custom module: every change is saved straight away, one field at a time. */
export function ModuleFields({ moduleKey, fields, core, customised }: { moduleKey: string; fields: FieldDef[]; core?: boolean; customised?: boolean }) {
  const uid = useId();
  const router = useRouter();
  const [editing, setEditing] = useState<string | "new" | null>(null);
  const [draft, setDraft] = useState<EField>(blankField());
  const [armed, setArmed] = useState<string | null>(null);
  const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);
  const [pending, start] = useTransition();

  const run = (change: Parameters<typeof changeModuleFieldAction>[1], after?: () => void) => start(async () => {
    const r = await changeModuleFieldAction(moduleKey, change);
    setMsg({ ok: r.ok, text: r.ok ? (r.message ?? "Saved") : (r.fieldErrors && Object.values(r.fieldErrors)[0]) || r.error });
    if (r.ok) { after?.(); router.refresh(); }
  });
  const open = (k: string | "new", f: EField) => { setEditing(k); setDraft(f); setArmed(null); setMsg(null); };
  const save = () => run(editing === "new" ? { op: "add", field: toDef(draft) } : { op: "update", fieldKey: editing as string, field: toDef(draft) }, () => setEditing(null));

  const editor = (
    <div className="space-y-2">
      <ul><FieldRow f={draft} idp={`${uid}-ed`} index={0} count={1} onChange={setDraft} onRemove={() => setEditing(null)} onMove={() => {}} /></ul>
      <div className="flex gap-2">
        <Button disabled={pending} onClick={save}>{pending ? "Saving…" : editing === "new" ? "Add field" : "Save field"}</Button>
        <Button variant="ghost" disabled={pending} onClick={() => setEditing(null)}>Cancel</Button>
      </div>
    </div>
  );

  return (
    <Card className="space-y-3 p-4">
      <div className="flex items-center justify-between gap-2">
        <h2 className="text-sm font-semibold">Fields</h2>
        <div className="flex gap-2">
          {core && customised ? <Button variant="ghost" disabled={pending || editing !== null} onClick={() => run({ op: "reset" })}>Reset to default fields</Button> : null}
          <Button variant="secondary" disabled={pending || editing !== null} onClick={() => open("new", blankField())}>Add field</Button>
        </div>
      </div>
      <p className="text-xs text-muted-foreground">Every entry also has a title, URL name, status, SEO fields and an optional category and image. Each change below is saved immediately and applies on every website that has this module. Deleting a field hides it; values already saved for it are dropped the next time an entry is saved.</p>
      <ul className="divide-y divide-border rounded-md border border-border">
        {fields.map((f, i) => (
          <li key={f.key} className="p-3">
            {editing === f.key ? editor : (
              <div className="flex flex-wrap items-center justify-between gap-2">
                <div className="min-w-0"><p className="text-sm font-medium">{f.label} <span className="font-normal text-muted-foreground">({f.key})</span></p><p className="text-xs text-muted-foreground">{describeField(f)}</p></div>
                <div className="flex flex-wrap items-center gap-1">
                  <Button variant="ghost" aria-label={`Move ${f.label} up`} disabled={pending || i === 0} onClick={() => run({ op: "move", fieldKey: f.key, dir: -1 })}>↑</Button>
                  <Button variant="ghost" aria-label={`Move ${f.label} down`} disabled={pending || i === fields.length - 1} onClick={() => run({ op: "move", fieldKey: f.key, dir: 1 })}>↓</Button>
                  <Button variant="secondary" disabled={pending || editing !== null} aria-label={`Edit ${f.label}`} onClick={() => open(f.key, fromDef(f))}>Edit</Button>
                  {armed === f.key ? (<><Button variant="danger" disabled={pending} onClick={() => run({ op: "delete", fieldKey: f.key }, () => setArmed(null))}>Confirm delete</Button><Button variant="ghost" onClick={() => setArmed(null)}>Cancel</Button></>) : <Button variant="ghost" disabled={pending || editing !== null} aria-label={`Delete ${f.label}`} onClick={() => setArmed(f.key)}>Delete</Button>}
                </div>
              </div>
            )}
          </li>
        ))}
        {editing === "new" ? <li className="p-3">{editor}</li> : null}
      </ul>
      <p role="status" aria-live="polite" className={msg ? (msg.ok ? "text-sm text-success" : "text-sm text-danger") : "sr-only"}>{msg?.text}</p>
    </Card>
  );
}