"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { AdminDialog } from "@/components/ui/admin-dialog";

type ActionResult = { ok: true } | { error: string };

interface Props {
  open: boolean;
  onOpenChange: (v: boolean) => void;
  label: string;
  onConfirm: () => Promise<ActionResult>;
}

export function DeleteConfirmDialog({ open, onOpenChange, label, onConfirm }: Props) {
  const router = useRouter();
  const [error, setError] = useState("");
  const [isPending, startTransition] = useTransition();

  function handleClose() {
    if (isPending) return;
    setError("");
    onOpenChange(false);
  }

  function handleConfirm() {
    setError("");
    startTransition(async () => {
      const result = await onConfirm();
      if ("error" in result) {
        setError(result.error);
      } else {
        onOpenChange(false);
        router.refresh();
      }
    });
  }

  return (
    <AdminDialog title={`Delete ${label}?`} open={open} onClose={handleClose}>
      <div className="space-y-4">
        <p className="text-sm text-neutral-600">
          This action cannot be undone. Are you sure you want to permanently delete{" "}
          <span className="font-semibold text-neutral-900">{label}</span>?
        </p>
        {error && (
          <p className="text-sm text-danger-700 bg-danger-50 rounded-lg px-3 py-2">{error}</p>
        )}
        <div className="flex justify-end gap-3 pt-1">
          <button
            type="button"
            onClick={handleClose}
            disabled={isPending}
            className="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50 disabled:opacity-60"
          >
            Cancel
          </button>
          <button
            type="button"
            onClick={handleConfirm}
            disabled={isPending}
            className="rounded-lg bg-danger px-4 py-2 text-sm font-semibold text-white hover:bg-danger-700 disabled:opacity-60 transition-colors"
          >
            {isPending ? "Deleting…" : "Delete"}
          </button>
        </div>
      </div>
    </AdminDialog>
  );
}