"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState, useTransition } from "react";
import { Button, StatusBadge } from "@/components/ui";
import { buttonClass } from "@/components/ui/button";
import { bulkEntriesAction } from "@/lib/actions/content";

export interface EntryRow { id: string; title: string; slug: string; status: string; createdAt: string; category: string | null; tagged: boolean }

export function EntriesTable({ rows, siteId, typeKey, hrefBase, canManage }: { rows: EntryRow[]; siteId: string; typeKey: string; hrefBase: string; canManage: boolean }) {
  const router = useRouter();
  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 [rowArmed, setRowArmed] = useState<string | null>(null);
  const allSelected = rows.length > 0 && selected.size === rows.length;

  const toggle = (id: string) => setSelected((s) => { const n = new Set(s); if (n.has(id)) n.delete(id); else n.add(id); return n; });
  function run(action: "publish" | "unpublish" | "archive" | "delete") {
    setMsg(null);
    start(async () => {
      const res = await bulkEntriesAction({ siteId, typeKey, ids: [...selected], action });
      if (res.ok) { setSelected(new Set()); setConfirmDelete(false); setMsg({ ok: true, text: res.message ?? "Done" }); router.refresh(); }
      else setMsg({ ok: false, text: res.error });
    });
  }

  function deleteOne(id: string) {
    setMsg(null);
    start(async () => {
      const res = await bulkEntriesAction({ siteId, typeKey, ids: [id], action: "delete" });
      setRowArmed(null);
      if (res.ok) { setSelected(new Set()); setMsg({ ok: true, text: "Entry deleted" }); router.refresh(); } else setMsg({ ok: false, text: res.error });
    });
  }

  return (
    <div>
      {!canManage && msg ? <p aria-live="polite" className="px-4 py-2 text-sm text-danger">{msg.text}</p> : null}
      {canManage ? (
        <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 || selected.size === 0} onClick={() => run("publish")}>Publish</Button>
          <Button variant="secondary" disabled={pending || selected.size === 0} onClick={() => run("unpublish")}>Unpublish</Button>
          <Button variant="secondary" disabled={pending || selected.size === 0} onClick={() => run("archive")}>Archive</Button>
          {confirmDelete ? (
            <><Button variant="danger" disabled={pending} onClick={() => run("delete")}>Confirm delete {selected.size}</Button><Button variant="ghost" onClick={() => setConfirmDelete(false)}>Cancel</Button></>
          ) : (
            <Button variant="ghost" disabled={pending || selected.size === 0} onClick={() => setConfirmDelete(true)}>Delete</Button>
          )}
          <span aria-live="polite" className={msg?.ok ? "text-sm text-success" : "text-sm text-danger"}>{msg?.text}</span>
        </div>
      ) : null}
      <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>
              {canManage ? <th className="w-10 px-4 py-2"><input type="checkbox" aria-label="Select all" checked={allSelected} onChange={() => setSelected(allSelected ? new Set() : new Set(rows.map((r) => r.id)))} /></th> : null}
              <th scope="col" className="px-4 py-2 font-medium">Name</th><th scope="col" className="px-4 py-2 font-medium">Date Created</th><th scope="col" className="px-4 py-2 font-medium">Tagged</th><th scope="col" className="px-4 py-2 font-medium">Status</th><th scope="col" className="px-4 py-2 font-medium"><span className="sr-only">Actions</span></th>
            </tr>
          </thead>
          <tbody className="divide-y divide-border">
            {rows.map((r) => (
              <tr key={r.id}>
                {canManage ? <td className="px-4 py-2"><input type="checkbox" aria-label={`Select ${r.title}`} checked={selected.has(r.id)} onChange={() => toggle(r.id)} /></td> : null}
                <td className="px-4 py-3 font-medium"><Link href={`${hrefBase}/${r.id}`} className="hover:underline">{r.title}</Link><span className="block text-xs font-normal text-muted-foreground">/{r.slug}{r.category ? ` · ${r.category}` : ""}</span></td>
                <td className="px-4 py-3">{new Date(r.createdAt).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" })}</td>
                <td className="px-4 py-3">{r.tagged ? <span aria-label="Tagged">✓</span> : <span aria-label="Not tagged" className="text-muted-foreground">—</span>}</td>
                <td className="px-4 py-3"><StatusBadge value={r.status} /></td>
                <td className="px-4 py-3"><div className="flex items-center justify-end gap-1">
                  <Link href={`${hrefBase}/${r.id}`} className={buttonClass("secondary")} aria-label={`Edit entry ${r.title}`}>Edit Entry</Link>
                  {canManage ? (
                    <details className="relative" onToggle={(e) => { if (!(e.currentTarget as HTMLDetailsElement).open) setRowArmed(null); }}>
                      <summary aria-label={`More actions for ${r.title}`} className={buttonClass("secondary", "w-10 cursor-pointer list-none px-0")}>▾</summary>
                      <div className="absolute right-0 z-10 mt-1 w-44 rounded-md border border-border bg-card p-1 text-sm shadow-md">
                        {rowArmed === r.id ? (
                          <div className="flex gap-1 p-1"><Button variant="danger" className="h-8 px-3 text-xs" disabled={pending} onClick={() => deleteOne(r.id)}>Confirm delete</Button><Button variant="ghost" className="h-8 px-3 text-xs" onClick={() => setRowArmed(null)}>Cancel</Button></div>
                        ) : <button type="button" className="block w-full rounded px-3 py-1.5 text-left hover:bg-muted" onClick={() => setRowArmed(r.id)}>Delete Entry</button>}
                      </div>
                    </details>
                  ) : null}
                </div></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}