"use client";

import { useRouter } from "next/navigation";
import { useRef, useState, useTransition } from "react";
import { Button, StatusBadge } from "@/components/ui";
import { deleteSubmissionsAction, updateSubmissionStatusAction } from "@/lib/actions/forms";
import { displayValue } from "@/lib/forms/format";
import type { FormField } from "@/lib/forms/schema";
import { formatDateTime } from "@/lib/utils";

export interface SubmissionRow { id: string; status: string; data: Record<string, unknown>; consentGiven: boolean; createdAt: string }

export function SubmissionsTable({ formId, fields, rows, canManage }: { formId: string; fields: FormField[]; rows: SubmissionRow[]; canManage: boolean }) {
  const router = useRouter();
  const dialog = useRef<HTMLDialogElement>(null);
  const [open, setOpen] = useState<SubmissionRow | null>(null);
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [pending, start] = useTransition();
  const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);
  const [confirmDelete, setConfirmDelete] = useState(false);
  const preview = fields.slice(0, 3);
  const toggle = (id: string) => setSelected((s) => { const n = new Set(s); if (n.has(id)) n.delete(id); else n.add(id); return n; });
  const ids = [...selected];

  function run(fn: () => Promise<{ ok: boolean; error?: string; message?: string }>) {
    start(async () => { const r = await fn(); if (r.ok) { setSelected(new Set()); setConfirmDelete(false); setMsg({ ok: true, text: r.message ?? "Done" }); dialog.current?.close(); router.refresh(); } else setMsg({ ok: false, text: r.error ?? "Something went wrong" }); });
  }
  const known = new Set(fields.map((f) => f.id));

  return (
    <div>
      <div className="flex flex-wrap items-center gap-2 border-b border-border px-4 py-3" role="group" aria-label="Bulk actions">
        <span className="text-sm text-muted-foreground">{selected.size} selected</span>
        <Button variant="secondary" disabled={pending || !ids.length} onClick={() => run(() => updateSubmissionStatusAction(formId, ids, "READ"))}>Mark read</Button>
        <Button variant="secondary" disabled={pending || !ids.length} onClick={() => run(() => updateSubmissionStatusAction(formId, ids, "SPAM"))}>Mark spam</Button>
        <Button variant="secondary" disabled={pending || !ids.length} onClick={() => run(() => updateSubmissionStatusAction(formId, ids, "ARCHIVED"))}>Archive</Button>
        {canManage ? (confirmDelete ? <><Button variant="danger" disabled={pending} onClick={() => run(() => deleteSubmissionsAction(formId, ids))}>Confirm delete {ids.length}</Button><Button variant="ghost" onClick={() => setConfirmDelete(false)}>Cancel</Button></> : <Button variant="ghost" disabled={pending || !ids.length} onClick={() => setConfirmDelete(true)}>Delete</Button>) : null}
        <span aria-live="polite" className={msg?.ok ? "text-sm text-success" : "text-sm text-danger"}>{msg?.text}</span>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-left text-sm">
          <thead className="border-b border-border text-xs text-muted-foreground"><tr><th className="w-10 px-4 py-2"><input type="checkbox" aria-label="Select all" checked={rows.length > 0 && selected.size === rows.length} onChange={() => setSelected(selected.size === rows.length ? new Set() : new Set(rows.map((r) => r.id)))} /></th><th className="px-4 py-2 font-medium">Received</th>{preview.map((f) => <th key={f.id} className="px-4 py-2 font-medium">{f.label}</th>)}<th className="px-4 py-2 font-medium">Status</th><th className="px-4 py-2" /></tr></thead>
          <tbody className="divide-y divide-border">
            {rows.map((r) => (
              <tr key={r.id} className={r.status === "NEW" ? "font-medium" : ""}>
                <td className="px-4 py-2"><input type="checkbox" aria-label="Select submission" checked={selected.has(r.id)} onChange={() => toggle(r.id)} /></td>
                <td className="whitespace-nowrap px-4 py-2">{formatDateTime(r.createdAt)}</td>
                {preview.map((f) => <td key={f.id} className="max-w-[16rem] truncate px-4 py-2">{displayValue(r.data[f.id]) || "—"}</td>)}
                <td className="px-4 py-2"><StatusBadge value={r.status} /></td>
                <td className="px-4 py-2 text-right"><Button variant="ghost" onClick={() => { setOpen(r); dialog.current?.showModal(); if (r.status === "NEW") void updateSubmissionStatusAction(formId, [r.id], "READ").then(() => router.refresh()); }}>View</Button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <dialog ref={dialog} aria-label="Submission details" className="m-auto w-[min(36rem,92vw)] rounded-lg border border-border bg-card p-4 text-foreground backdrop:bg-black/40">
        {open ? (
          <div className="space-y-3">
            <h2 className="text-sm font-semibold">Submission · {formatDateTime(open.createdAt)}</h2>
            <dl className="space-y-2 text-sm">
              {fields.map((f) => <div key={f.id}><dt className="text-xs text-muted-foreground">{f.label}</dt><dd className="whitespace-pre-wrap break-words">{displayValue(open.data[f.id]) || "—"}</dd></div>)}
              {Object.keys(open.data).filter((k) => !known.has(k)).map((k) => <div key={k}><dt className="text-xs text-muted-foreground">{k} (removed field)</dt><dd className="whitespace-pre-wrap break-words">{displayValue(open.data[k]) || "—"}</dd></div>)}
              <div><dt className="text-xs text-muted-foreground">Consent given</dt><dd>{open.consentGiven ? "Yes" : "No"}</dd></div>
            </dl>
            <div className="flex gap-2"><Button variant="secondary" disabled={pending} onClick={() => run(() => updateSubmissionStatusAction(formId, [open.id], "SPAM"))}>Mark spam</Button><Button variant="secondary" disabled={pending} onClick={() => run(() => updateSubmissionStatusAction(formId, [open.id], "ARCHIVED"))}>Archive</Button><Button variant="ghost" onClick={() => dialog.current?.close()}>Close</Button></div>
          </div>
        ) : null}
      </dialog>
    </div>
  );
}