// components/ResolutionsTable.tsx
// Phase 4 — displays every entry in `ysterbaard_resolutions` for the
// "4 — Resolution appointment and resignation" tab.
//
// Columns: company · meeting date · resigned/appointed counts · path ·
//          status · signature progress · actions.
//
// EVERY action lives in the row's kebab (⋯) menu — Preview, Send/Resend,
// Cancel, View details — rather than as inline buttons. Inline buttons made
// the Actions column wide enough to squeeze the other columns on smaller
// screens, and each row ended up with four separate targets to hit.
//
// Cancel + Resend are both wired to real endpoints:
//   POST /api/resolutions/<id>/cancel  — soft cancel (status → cancelled,
//       pending signers → expired). Signed resolutions are refused with 409.
//   PATCH /api/resolutions/<id>/attendees  {send_for_signature:true} — first
//       send: creates signers, emails everyone marked "must sign" with the
//       letter attached, flips to "pending_signatures".
//   POST /api/resolutions/<id>/resend  — re-sends to signers still pending.
//
// Cancel is a SOFT cancel, not a delete: the resolution and its minutes stay on
// record for audit. Only "draft" and "pending_signatures" can be cancelled.
//
// THE INTENDED FLOW (nothing is emailed on creation):
//   1. "+ New resolution" → POST /create → status "draft", NOT sent.
//   2. [Preview letter] → renders the letter inline in a new tab. Sends nothing.
//   3. [Send for signature] → creates signers, emails everyone marked
//      "must sign" with the letter attached, flips to "pending_signatures".
//      A partially-failed send reports exactly which addresses failed instead
//      of claiming success.
//   4. [Resend to signers] → re-sends only to signers still pending.
//   5. [Cancel resolution] → soft cancel; pending signers become "expired".

"use client";

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { createPortal } from "react-dom";
import Link from "next/link";
import { useRouter } from "next/navigation";
import type {
  PBList,
  YsterbaardNewResolution,
  NewResolutionStatus,
  ResolutionPath,
} from "@/lib/types";
import StatusBadge from "@/components/StatusBadge";

type StatusVariant = "muted" | "warn" | "success" | "danger";

/** One place a document can be filed. Each slot holds exactly one file. */
type UploadTarget = {
  collection: string;
  field: string;
  label: string;
  /** Required when collection is a director collection: whose record to file it
   *  against. The route resolves (company + director) to the real record. */
  directorId?: string;
  /** True when the slot already holds a file, so the operator is warned. */
  filled?: boolean;
};

/** An expanded director, as PocketBase actually returns it. */
type DirectorRef = { id: string; first_names?: string; surname?: string };

function statusVariant(s: NewResolutionStatus): StatusVariant {
  switch (s) {
    case "draft":             return "muted";
    case "pending_signatures": return "warn";
    case "signed":            return "success";
    case "cancelled":         return "danger";
  }
}

function statusLabel(s: NewResolutionStatus): string {
  switch (s) {
    case "draft":             return "Draft";
    case "pending_signatures": return "Pending signatures";
    case "signed":            return "Signed";
    case "cancelled":         return "Cancelled";
  }
}

function formatDate(iso: string | null | undefined): string {
  if (!iso) return "—";
  return new Date(iso).toLocaleDateString("en-ZA", {
    day: "2-digit", month: "short", year: "numeric",
  });
}

function fullName(d: { first_names?: string; surname?: string } | undefined): string {
  if (!d) return "—";
  return [d.first_names, d.surname].filter(Boolean).join(" ").trim() || "—";
}

interface ActionMenuProps {
  resolutionId: string;
  status: NewResolutionStatus;
  /** True once a signed document has been attached — drives the upload label. */
  hasDocument?: boolean;
  /** Every slot this resolution's paperwork can be filed into. */
  uploadTargets?: UploadTarget[];
  /** Reload the table after a mutation (router.refresh() alone won't re-run this
   *  component's own fetch, so the badge would stay stale). */
  onChanged?: () => void;
}

/** A resolution can only be cancelled while it is still open. */
function canCancelStatus(status: NewResolutionStatus): boolean {
  return status !== "cancelled" && status !== "signed";
}

/** Shared cancel call so the visible button and the ⋯ menu behave identically. */
async function cancelResolution(resolutionId: string): Promise<void> {
  const res = await fetch(`/api/resolutions/${resolutionId}/cancel`, { method: "POST" });
  if (!res.ok) {
    let msg = `HTTP ${res.status}`;
    try {
      const body = await res.json();
      if (body?.error) msg = body.error;
    } catch {
      /* non-JSON error body — keep the HTTP status */
    }
    throw new Error(msg);
  }
}

/**
 * Preview the letter exactly as the signers will receive it — regenerated from
 * current attendees/signers, served inline, and **nothing is emailed**.
 *
 * This is the operator's approval step: read it, then hit Send.
 */
function previewLetter(resolutionId: string) {
  // Open immediately: browsers block window.open() after an await.
  const url = `/api/resolutions/${resolutionId}/letter?preview=true&download=false`;
  const win = window.open("", "_blank");
  if (!win) {
    window.open(url, "_blank", "noopener");
    return;
  }
  win.document.title = "Preparing letter…";
  win.document.body.innerHTML =
    '<p style="font:14px system-ui;padding:24px;color:#555">Rendering the resolution letter…</p>';
  win.location.href = url;
}

/**
 * First send (draft → pending_signatures) or resend (pending_signatures).
 * Both attach the rendered PDF; neither is available once signed/cancelled.
 */
async function sendForSignature(
  resolutionId: string,
  status: NewResolutionStatus,
  onChanged?: () => void
): Promise<void> {
  const isDraft = status === "draft";
  const label = isDraft
    ? "Send this resolution for signature?\n\n" +
      "Every attendee marked “must sign” will be emailed the letter. " +
      "Preview it first if you have not already."
    : "Resend the letter to everyone who has not signed yet?";
  if (!confirm(label)) return;

  try {
    // NOTE: /attendees is a PATCH endpoint (it also handles attendee edits and
    // external adds). POSTing to it returns 405 and the send silently never
    // happens — which is exactly what it did the first time.
    const res = await fetch(
      isDraft
        ? `/api/resolutions/${resolutionId}/attendees`
        : `/api/resolutions/${resolutionId}/resend`,
      {
        method: isDraft ? "PATCH" : "POST",
        headers: { "Content-Type": "application/json" },
        body: isDraft ? JSON.stringify({ send_for_signature: true }) : "{}",
      }
    );
    const body = await res.json().catch(() => null);
    if (!res.ok) {
      throw new Error(body?.error || `HTTP ${res.status}`);
    }

    // Surface partial failures instead of claiming success.
    const sent: Array<{ to: string; ok: boolean; error?: string }> =
      body?.emails_sent || body?.emailed || [];
    const failed = sent.filter((e) => !e.ok);
    if (failed.length > 0) {
      alert(
        `${sent.length - failed.length} of ${sent.length} email(s) sent.\n\n` +
          "FAILED:\n" +
          failed.map((e) => `• ${e.to || "(no address)"} — ${e.error}`).join("\n")
      );
    } else {
      alert(
        isDraft
          ? `Sent for signature to ${sent.length || "all"} signer(s).`
          : `Resent to ${sent.length} pending signer(s).`
      );
    }
    onChanged?.();
  } catch (err) {
    alert(`Send failed: ${err instanceof Error ? err.message : "unknown"}`);
  }
}

function ActionMenu({ resolutionId, status, hasDocument, uploadTargets, onChanged }: ActionMenuProps) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [acting, setActing] = useState(false);
  const [mounted, setMounted] = useState(false);
  const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
  const btnRef = useRef<HTMLButtonElement>(null);
  const menuRef = useRef<HTMLDivElement>(null);

  // Fall back to the resolution's own slot when the row supplied no list.
  const targets: UploadTarget[] =
    uploadTargets && uploadTargets.length > 0
      ? uploadTargets
      : [
          {
            collection: "ysterbaard_resolutions",
            field: "signed_letter",
            label: "This resolution — signed resolution",
            filled: hasDocument,
          },
        ];

  useEffect(() => setMounted(true), []);

  // The menu is PORTALLED to <body>, not rendered inside the table.
  //
  // The card wrapping the table is `overflow-hidden` (it needs that for the
  // rounded corners on the header). An absolutely-positioned dropdown inside
  // it is therefore clipped: on the LAST row there is no room below, so the
  // menu was sliced off at the card edge and effectively invisible. Rows above
  // happened to work only because another row sat beneath them to draw over.
  //
  // Portalling renders the menu in body coordinates, so no ancestor can clip it.
  const place = useCallback(() => {
    const el = btnRef.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const MENU_W = 192; // must match the w-48 class below
    // Tallest menu is draft status: View details, View documents, Preview letter,
    // Download as Word, Upload document, Send, Mark complete, Cancel — plus the
    // dividers. Under-counting here makes the flip-above test fire too late and
    // the bottom of the menu lands off-screen.
    const MENU_H = 380;
    const GAP = 4;
    let top = r.bottom + GAP;
    // Flip above the button when there isn't room below.
    if (top + MENU_H > window.innerHeight - 8 && r.top - MENU_H - GAP > 8) {
      top = r.top - MENU_H - GAP;
    }
    const left = Math.max(
      8,
      Math.min(r.right - MENU_W, window.innerWidth - MENU_W - 8)
    );
    setPos({ top, left });
  }, []);

  useEffect(() => {
    if (!open) return;
    place();
    const reposition = () => place();
    window.addEventListener("scroll", reposition, true);
    window.addEventListener("resize", reposition);
    return () => {
      window.removeEventListener("scroll", reposition, true);
      window.removeEventListener("resize", reposition);
    };
  }, [open, place]);

  // Close on outside click. The menu lives in <body>, so BOTH the trigger and
  // the portalled panel have to be checked.
  useEffect(() => {
    if (!open) return;
    const handler = (e: MouseEvent) => {
      const t = e.target as HTMLElement | null;
      // e.target is not always an Element (e.g. document, or a synthetic event
      // dispatched on a non-Node) — calling .closest() blindly threw
      // "target.closest is not a function".
      if (t && typeof t.closest === "function" && t.closest(`[data-actionmenu="${resolutionId}"]`)) {
        return;
      }
      if (menuRef.current && t && typeof t.closest === "function" && menuRef.current.contains(t)) {
        return;
      }
      setOpen(false);
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, [open, resolutionId]);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open]);

  const isDraft = status === "draft";
  const canCancel = canCancelStatus(status);
  const canSend = isDraft || status === "pending_signatures";
  const canComplete = status === "pending_signatures" || isDraft;
  const [uploading, setUploading] = useState(false);
  const uploadRef = useRef<HTMLInputElement>(null);
  // Destination chosen for the NEXT upload, and whether the picker is showing.
  const [pendingTarget, setPendingTarget] = useState<UploadTarget | null>(null);
  const [showTargets, setShowTargets] = useState(false);

  const handleUpload = async (file: File, target: UploadTarget) => {
    setUploading(true);
    try {
      const form = new FormData();
      form.append("file", file);
      const q = new URLSearchParams({ collection: target.collection, field: target.field });
      if (target.directorId) q.set("director", target.directorId);
      const res = await fetch(
        `/api/resolutions/${resolutionId}/upload?${q.toString()}`,
        { method: "POST", body: form }
      );
      const body = await res.json().catch(() => null);
      if (!res.ok) {
        throw new Error(body?.error || `HTTP ${res.status}`);
      }
      // Say WHERE it went, and whether anything was displaced. A bare
      // "uploading again replaces it" was ambiguous enough that people uploaded
      // a second document and lost the first without realising.
      const displaced = body?.replaced && target.filled;
      alert(
        `Uploaded to ${target.label}:\n${body?.filename ?? file.name} (${Math.round(
          (body?.bytes ?? file.size) / 1024
        )} KB)` +
          (displaced
            ? `\n\nThis replaced the document already stored in that slot.`
            : "")
      );
      onChanged?.();
      router.refresh();
    } catch (err) {
      alert(`Upload failed: ${err instanceof Error ? err.message : "unknown"}`);
    } finally {
      setUploading(false);
    }
  };

  return (
    <div className="relative inline-block" data-actionmenu={resolutionId}>
      <button
        ref={btnRef}
        onClick={() => setOpen((v) => !v)}
        disabled={acting}
        className="px-2.5 py-1.5 rounded-md border border-border bg-surface text-fg text-sm font-semibold hover:border-accent hover:text-accent transition-colors disabled:opacity-40"
        aria-label="Actions"
      >
        ⋯
      </button>
      {open && mounted && pos &&
        createPortal(
          <div
            ref={menuRef}
            style={{ top: pos.top, left: pos.left }}
            className="fixed z-[100] w-48 bg-surface border border-border rounded-lg shadow-xl overflow-hidden"
          >
            <Link
              href={`/resolutions/${resolutionId}`}
              className="block px-4 py-2.5 text-sm text-fg hover:bg-surface-warm transition-colors no-underline"
            >
              View details →
            </Link>

            <div className="border-t border-border-soft" />

            {/* Shows EVERY document attached to this resolution — the resolution's own copy
                plus each director's resignation / appointment paperwork. This
                replaces the old single-field "View signed document" link, which
                read one file off the resolution record and hid everything stored
                on the directors' records. Always rendered: the paperwork may sit
                on the director's record even when the resolution has nothing on
                it. */}
            <Link
              href={`/resolutions/${resolutionId}/documents`}
              className="block px-4 py-2.5 text-sm text-fg hover:bg-surface-warm transition-colors no-underline"
              title="Every document uploaded for this resolution and its directors"
            >
              View documents
            </Link>

            <button
              onClick={() => {
                previewLetter(resolutionId);
                setOpen(false);
              }}
              className="w-full text-left px-4 py-2.5 text-sm text-fg hover:bg-surface-warm transition-colors"
              title="Preview the letter — nothing is emailed"
            >
              Preview letter
            </button>

            {/* Same action, same wording as section 5's kebab, so an operator
                moving between the two tabs finds it in the same place. An <a>
                with an href, not a button + fetch: the browser then owns the
                download, and a plain link keeps working if JS is slow or the
                row re-renders mid-click. `format=docx` skips the PDF
                conversion, so this lands in about a second. */}
            <a
              href={`/api/resolutions/${resolutionId}/letter?format=docx`}
              className="block w-full text-left px-4 py-2.5 text-sm text-fg hover:bg-surface-warm transition-colors no-underline"
              title="Download the editable Word document"
            >
              Download as Word (.docx)
            </a>

            {showTargets ? (
              /* Destination picker.

                 Every slot holds exactly ONE file, so uploading twice to the
                 same slot silently destroyed the first document. Picking the
                 destination first makes that impossible by accident — each
                 option is named after the record it files against, and an
                 occupied slot says so before you commit to it. */
              <>
                <div className="px-4 py-2 text-[11px] font-semibold uppercase tracking-wide text-muted border-b border-border-soft">
                  File this document to
                </div>
                {targets.map((t) => (
                  <button
                    key={`${t.collection}.${t.field}`}
                    onClick={() => {
                      setPendingTarget(t);
                      uploadRef.current?.click();
                    }}
                    disabled={uploading}
                    className="w-full text-left px-4 py-2.5 text-sm text-fg hover:bg-surface-warm transition-colors disabled:opacity-40"
                    title={t.filled ? "This slot already has a file — uploading will replace it" : "Empty slot"}
                  >
                    <span className="block">{t.label}</span>
                    {t.filled && (
                      <span className="block text-[11px] text-danger font-semibold">
                        already has a file — will be replaced
                      </span>
                    )}
                  </button>
                ))}
                <div className="border-t border-border-soft" />
                <button
                  onClick={() => setShowTargets(false)}
                  className="w-full text-left px-4 py-2.5 text-sm text-muted hover:bg-surface-warm transition-colors"
                >
                  ← Back
                </button>
              </>
            ) : (
              <>
            <button
              onClick={() => setShowTargets(true)}
              disabled={uploading}
              className="w-full text-left px-4 py-2.5 text-sm text-fg hover:bg-surface-warm transition-colors disabled:opacity-40"
              title="Choose where this document should be filed"
            >
              {uploading ? "Uploading…" : "Upload document"}
            </button>
              </>
            )}

            {canSend && (
              <button
                onClick={async () => {
                  setOpen(false);
                  setActing(true);
                  try {
                    await sendForSignature(resolutionId, status, onChanged);
                  } finally {
                    setActing(false);
                    router.refresh();
                  }
                }}
                disabled={acting}
                className="w-full text-left px-4 py-2.5 text-sm text-accent font-semibold hover:bg-surface-warm transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
                title={
                  isDraft
                    ? "Send the letter to all must-sign attendees"
                    : "Resend to signers who have not signed yet"
                }
              >
                {acting ? "Sending…" : isDraft ? "Send for signature" : "Resend to signers"}
              </button>
            )}

            {canComplete && (
              <button
                onClick={async () => {
                  if (
                    !confirm(
                      "Mark this resolution as complete?\n\n" +
                        "The status becomes Signed and everyone still outstanding " +
                        "is counted as signed, so the progress bar reads in full."
                    )
                  ) {
                    return;
                  }
                  setOpen(false);
                  setActing(true);
                  try {
                    const res = await fetch(
                      `/api/resolutions/${resolutionId}/complete`,
                      { method: "POST", headers: { "Content-Type": "application/json" }, body: "{}" }
                    );
                    const body = await res.json().catch(() => null);
                    if (!res.ok) {
                      throw new Error(body?.error || `HTTP ${res.status}`);
                    }
                    alert(
                      body?.already_signed
                        ? "This resolution was already marked complete."
                        : `Marked complete. ${body?.signers_closed ?? 0} outstanding signer(s) closed out.`
                    );
                    onChanged?.();
                  } catch (err) {
                    alert(
                      `Could not complete: ${err instanceof Error ? err.message : "unknown"}`
                    );
                  } finally {
                    setActing(false);
                    router.refresh();
                  }
                }}
                disabled={acting}
                className="w-full text-left px-4 py-2.5 text-sm text-success font-semibold hover:bg-surface-warm transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
                title="Mark as complete — for resolutions signed outside the app"
              >
                Mark as complete
              </button>
            )}

            {canCancel && (
              <button
                onClick={async () => {
                  if (
                    !confirm(
                      "Cancel this resolution?\n\n" +
                        "Pending signers will be marked expired and will no longer " +
                        "be able to sign. The resolution and its minutes stay on record.\n\n" +
                        "This cannot be undone."
                    )
                  ) {
                    return;
                  }
                  setOpen(false);
                  setActing(true);
                  try {
                    await cancelResolution(resolutionId);
                    onChanged?.();
                  } catch (err) {
                    alert(
                      `Cancel failed: ${err instanceof Error ? err.message : "unknown"}`
                    );
                  } finally {
                    setActing(false);
                    router.refresh();
                  }
                }}
                disabled={acting}
                className="w-full text-left px-4 py-2.5 text-sm text-danger hover:bg-surface-warm transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
                title="Cancel this resolution"
              >
                Cancel resolution
              </button>
            )}
          </div>,
          document.body
        )}

      {/* The picker must NOT live inside the portal above.

          The portal only renders while the menu is open, so an <input type=file>
          placed inside it was unmounted the moment the menu closed — which
          happens before the user has chosen a file in the OS dialog. The
          resulting `change` event fired on a detached node, never bubbled to
          the React root, and `onChange` silently never ran: the button
          appeared to do nothing and nothing was ever uploaded.

          Hoisting it here keeps it mounted for the whole lifetime of the row,
          so the file lands no matter what the menu does. */}
      <input
        ref={uploadRef}
        type="file"
        accept=".pdf,application/pdf"
        className="hidden"
        onChange={(e) => {
          const f = e.target.files?.[0];
          // Reset immediately so picking the same file twice still fires.
          e.target.value = "";
          const target = pendingTarget;
          setPendingTarget(null);
          setShowTargets(false);
          if (f && target) void handleUpload(f, target);
        }}
      />
    </div>
  );
}

interface SignatureProgressProps {
  total: number;
  signed: number;
  status: NewResolutionStatus;
}

function SignatureProgress({ total, signed, status }: SignatureProgressProps) {
  if (status === "draft") {
    return (
      <span className="text-xs text-muted italic">Not yet sent</span>
    );
  }
  if (total === 0) {
    return <span className="text-xs text-muted italic">No signers</span>;
  }
  const pct = Math.round((signed / total) * 100);
  const complete = status === "signed";
  return (
    <div className="flex items-center gap-2">
      <div className="flex-1 min-w-[80px] h-2 rounded-full bg-surface-warm overflow-hidden border border-border-soft">
        <div
          className={`h-full transition-all ${
            complete ? "bg-success" : "bg-accent"
          }`}
          style={{ width: `${pct}%` }}
        />
      </div>
      <span className="text-xs font-semibold tabular-nums text-fg whitespace-nowrap">
        {signed} / {total}
      </span>
    </div>
  );
}

interface DirectorsPillProps {
  resigned: Array<{ id: string; first_names?: string; surname?: string }>;
  appointed: Array<{ id: string; first_names?: string; surname?: string }>;
}

function DirectorsPill({ resigned, appointed }: DirectorsPillProps) {
  const rN = resigned.length;
  const aN = appointed.length;
  if (rN === 0 && aN === 0) {
    return <span className="text-xs text-muted italic">No directors</span>;
  }
  return (
    <div className="flex flex-wrap gap-1">
      {rN > 0 && (
        <span
          className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-semibold bg-danger/10 text-danger"
          title={resigned.map(fullName).join(", ")}
        >
          −{rN} resign{rN === 1 ? "" : "ed"}
        </span>
      )}
      {aN > 0 && (
        <span
          className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-semibold bg-success/10 text-success"
          title={appointed.map(fullName).join(", ")}
        >
          +{aN} appoint{aN === 1 ? "ed" : "ed"}
        </span>
      )}
    </div>
  );
}

function pathLabel(p: ResolutionPath): string {
  return p === "letter_generated"
    ? "Generated"
    : "Letters received";
}

export default function ResolutionsTable() {
  const [data, setData] = useState<PBList<YsterbaardNewResolution> | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const load = async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch("/api/resolutions/list", { cache: "no-store" });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const json = (await res.json()) as PBList<YsterbaardNewResolution>;
      setData(json);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to load resolutions");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    load();
  }, []);

  const items = useMemo(() => {
    if (!data) return [];

    // Cancelled resolutions are hidden entirely. They stay in PocketBase (the
    // record and its attendees are an audit trail) but they are noise in the
    // working list — you cancelled it, you don't need to keep seeing it.
    const visible = data.items.filter((r) => r.status !== "cancelled");

    const time = (v: string | null | undefined) =>
      v ? new Date(v).getTime() : Number.NEGATIVE_INFINITY;

    return visible.sort((a, b) => {
      // 1. Signed (complete) resolutions sink to the bottom.
      const aDone = a.status === "signed" ? 1 : 0;
      const bDone = b.status === "signed" ? 1 : 0;
      if (aDone !== bDone) return aDone - bDone;

      // 2. Newest meeting date first within each group.
      const byMeeting = time(b.meeting_date) - time(a.meeting_date);
      if (byMeeting !== 0) return byMeeting;

      // 3. Tie-break on created — several resolutions often share one meeting
      //    date (e.g. repeated tests), and without this the order is arbitrary.
      return time(b.created) - time(a.created);
    });
  }, [data]);

  if (loading) {
    return (
      <div className="bg-surface border border-border rounded-lg p-8 text-center text-muted text-sm">
        Loading resolutions…
      </div>
    );
  }
  if (error) {
    return (
      <div className="bg-surface border border-danger/40 rounded-lg p-6 text-sm">
        <p className="text-danger font-semibold mb-1">Failed to load resolutions</p>
        <p className="text-muted">{error}</p>
        <button
          onClick={load}
          className="mt-3 px-3 py-1.5 bg-accent text-accent-on rounded text-sm font-semibold"
        >
          Retry
        </button>
      </div>
    );
  }
  if (items.length === 0) {
    // Distinguish "you have never made one" from "they're all cancelled" —
    // the second case otherwise nags you to create one you already created.
    const allCancelled =
      (data?.items.length ?? 0) > 0 &&
      data!.items.every((r) => r.status === "cancelled");
    return (
      <div className="bg-surface border border-border rounded-lg p-12 text-center">
        <p className="text-fg font-semibold">
          {allCancelled ? "No active resolutions" : "No resolutions yet"}
        </p>
        <p className="text-muted text-sm mt-1">
          {allCancelled ? (
            <>
              All {data!.items.length} resolution
              {data!.items.length === 1 ? "" : "s"} have been cancelled and are
              hidden from this list. They remain in the database as a record.
            </>
          ) : (
            <>
              Click <span className="font-mono">+ New resolution</span> above to
              create one.
            </>
          )}
        </p>
      </div>
    );
  }

  return (
    <div className="bg-surface border border-border rounded-lg overflow-hidden">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b border-border bg-surface-warm">
            <th className="text-left px-4 py-3 text-xs font-semibold text-muted uppercase tracking-wide">
              Company
            </th>
            <th className="text-left px-4 py-3 text-xs font-semibold text-muted uppercase tracking-wide hidden md:table-cell">
              Meeting date
            </th>
            <th className="text-left px-4 py-3 text-xs font-semibold text-muted uppercase tracking-wide">
              Directors
            </th>
            <th className="text-left px-4 py-3 text-xs font-semibold text-muted uppercase tracking-wide hidden lg:table-cell">
              Path
            </th>
            <th className="text-left px-4 py-3 text-xs font-semibold text-muted uppercase tracking-wide">
              Status
            </th>
            <th className="text-left px-4 py-3 text-xs font-semibold text-muted uppercase tracking-wide">
              Signatures
            </th>
            <th className="text-right px-4 py-3 text-xs font-semibold text-muted uppercase tracking-wide">
              Actions
            </th>
          </tr>
        </thead>
        <tbody className="divide-y divide-border-soft">
          {items.map((r) => {
            const company = r.expand?.company;
            const companyName =
              company?.enterprise_name ||
              (typeof r.company === "string" ? r.company : "—");
            const companyNo = company?.enterprise_no || "";
            const resignedRaw = r.expand?.resigned_directors || [];
            const appointedRaw = r.expand?.appointed_directors || [];
            // The declared expand type only carries `id`, but PocketBase returns
            // whole director records, so first_names/surname are present at
            // runtime and used to label the upload targets.
            const resigned = resignedRaw as unknown as DirectorRef[];
            const appointed = appointedRaw as unknown as DirectorRef[];
            const sig = r.signature_progress || { total: 0, signed: 0 };

            // Every slot this resolution's paperwork can be filed into. Uploading
            // twice to ONE slot replaces the first file, so the operator picks
            // the destination explicitly instead of guessing.
            const uploadTargets: UploadTarget[] = [
              {
                collection: "ysterbaard_resolutions",
                field: "signed_letter",
                label: "This resolution — signed resolution",
                filled: Boolean(r.signed_letter),
              },
              ...resigned.flatMap((d) => [
                {
                  collection: "ysterbaard_director_resignations",
                  field: "letter",
                  label: `${fullName(d)} — resignation letter`,
                  directorId: d.id,
                },
                {
                  collection: "ysterbaard_director_resignations",
                  field: "signature",
                  label: `${fullName(d)} — signed resignation`,
                  directorId: d.id,
                },
              ]),
              ...appointed.flatMap((d) => [
                {
                  collection: "ysterbaard_director_appointments",
                  field: "letter",
                  label: `${fullName(d)} — appointment letter`,
                  directorId: d.id,
                },
                {
                  collection: "ysterbaard_director_appointments",
                  field: "signature",
                  label: `${fullName(d)} — signed appointment`,
                  directorId: d.id,
                },
              ]),
            ];
            return (
              <tr key={r.id} className="hover:bg-surface-warm transition-colors">
                {/* Company */}
                <td className="px-4 py-3.5">
                  <div className="flex flex-col">
                    <span className="font-semibold text-fg truncate max-w-[260px]">
                      {companyName}
                    </span>
                    {companyNo && (
                      <span className="text-xs text-muted font-mono">
                        {companyNo}
                      </span>
                    )}
                  </div>
                </td>
                {/* Meeting date */}
                <td className="px-4 py-3.5 hidden md:table-cell">
                  <span className="text-fg-2 tabular-nums">
                    {formatDate(r.meeting_date)}
                  </span>
                </td>
                {/* Directors (resigned / appointed) */}
                <td className="px-4 py-3.5">
                  <DirectorsPill resigned={resigned} appointed={appointed} />
                </td>
                {/* Path */}
                <td className="px-4 py-3.5 hidden lg:table-cell">
                  <span className="text-xs text-muted">{pathLabel(r.path)}</span>
                </td>
                {/* Status */}
                <td className="px-4 py-3.5">
                  <StatusBadge variant={statusVariant(r.status)}>
                    {statusLabel(r.status)}
                  </StatusBadge>
                </td>
                {/* Signatures */}
                <td className="px-4 py-3.5">
                  <SignatureProgress
                    total={sig.total}
                    signed={sig.signed}
                    status={r.status}
                  />
                </td>
                {/* Actions */}
                <td className="px-4 py-3.5 text-right">
                  <ActionMenu
                    resolutionId={r.id}
                    status={r.status}
                    hasDocument={Boolean(r.signed_letter)}
                    uploadTargets={uploadTargets}
                    onChanged={load}
                  />
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}