"use client";

import { useRef, useState } from "react";
import { useFormStatus } from "react-dom";
import { Trash2 } from "lucide-react";
import ConfirmDialog from "@/components/ui/ConfirmDialog";

/**
 * Client only because deletion is confirmed first — the dialog needs `open`
 * state and `useFormStatus` needs a form to sit inside. The click is
 * intercepted, and confirming re-submits the enclosing form through
 * `requestSubmit`, so the server action runs unchanged.
 */
export default function DeleteStaffButton({ name }: { name: string }) {
  const { pending } = useFormStatus();
  const btnRef = useRef<HTMLButtonElement>(null);
  const [open, setOpen] = useState(false);

  return (
    <>
      <button
        ref={btnRef}
        type="submit"
        onClick={(e) => {
          e.preventDefault();
          setOpen(true);
        }}
        disabled={pending}
        className="inline-flex items-center gap-1 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs font-medium text-red-700 hover:bg-red-100 disabled:opacity-60"
      >
        <Trash2 className="h-3.5 w-3.5" /> Delete
      </button>

      <ConfirmDialog
        open={open}
        title="Delete staff member?"
        description={`This will permanently remove "${name}" from your staff list.`}
        confirmLabel="Delete"
        loading={pending}
        onCancel={() => setOpen(false)}
        onConfirm={() => {
          setOpen(false);
          const btn = btnRef.current;
          btn?.form?.requestSubmit(btn);
        }}
      />
    </>
  );
}