"use client";

// components/DeleteDocumentButton.tsx
//
// Removes ONE document from the "View documents" page.
//
// This clears a single file slot on a record — it never deletes the resolution,
// the resignation record, or any other document. PocketBase file deletion is
// irreversible, so the operator confirms first and sees the exact filename they
// are discarding.

import { useRouter } from "next/navigation";
import { useState } from "react";

export default function DeleteDocumentButton({
  recordId,
  collection,
  field,
  filename,
  label,
}: {
  recordId: string;
  collection: string;
  field: string;
  filename: string;
  label: string;
}) {
  const router = useRouter();
  const [confirming, setConfirming] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function remove() {
    setBusy(true);
    setError(null);
    try {
      const q = new URLSearchParams({ collection, field });
      const res = await fetch(
        `/api/resolutions/${encodeURIComponent(recordId)}/document?${q.toString()}`,
        { method: "DELETE" }
      );
      const body = await res.json().catch(() => null);
      if (!res.ok) {
        setError(body?.error || `HTTP ${res.status}`);
        return;
      }
      setConfirming(false);
      router.refresh();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Could not remove the document");
    } finally {
      setBusy(false);
    }
  }

  if (confirming) {
    return (
      <span className="flex flex-wrap items-center gap-2">
        <span className="text-xs text-danger font-semibold">Remove this file?</span>
        <button
          onClick={remove}
          disabled={busy}
          className="px-2.5 py-1 text-xs font-semibold rounded bg-danger text-white hover:opacity-90 disabled:opacity-50"
          title={`Permanently remove ${filename}`}
        >
          {busy ? "Removing…" : "Yes, remove"}
        </button>
        <button
          onClick={() => {
            setConfirming(false);
            setError(null);
          }}
          disabled={busy}
          className="px-2.5 py-1 text-xs font-semibold rounded border border-border hover:border-accent disabled:opacity-50"
        >
          Keep
        </button>
        {error && <span className="text-xs text-danger">{error}</span>}
      </span>
    );
  }

  return (
    <button
      onClick={() => {
        setConfirming(true);
        setError(null);
      }}
      disabled={busy}
      className="px-2.5 py-1 text-xs font-semibold rounded border border-border bg-surface text-muted no-underline hover:border-danger hover:text-danger disabled:opacity-50"
      title={`Remove “${label}” (${filename}) from this record`}
    >
      Remove
    </button>
  );
}