"use client";
import * as React from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogBody } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

export interface ConfirmDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: React.ReactNode;
  description?: React.ReactNode;
  confirmLabel?: string;
  cancelLabel?: string;
  destructive?: boolean;
  /** When set, the user must type this exact string to enable the confirm button. */
  typeToConfirm?: string;
  onConfirm: () => Promise<void> | void;
  children?: React.ReactNode;
}

export function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", destructive, typeToConfirm, onConfirm, children }: ConfirmDialogProps) {
  const [busy, setBusy] = React.useState(false);
  const [typed, setTyped] = React.useState("");
  const canConfirm = !typeToConfirm || typed.trim() === typeToConfirm;

  const handleOpenChange = (v: boolean) => {
    if (!v) setTyped("");
    onOpenChange(v);
  };

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent size="sm">
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          {description ? <DialogDescription>{description}</DialogDescription> : null}
        </DialogHeader>
        {children || typeToConfirm ? (
          <DialogBody className="space-y-3">
            {children}
            {typeToConfirm ? (
              <div className="space-y-1.5">
                <p className="text-xs text-fg-muted">
                  Type <span className="font-mono font-medium text-fg">{typeToConfirm}</span> to confirm.
                </p>
                <Input value={typed} onChange={(e) => setTyped(e.target.value)} autoComplete="off" spellCheck={false} aria-label="Confirmation text" />
              </div>
            ) : null}
          </DialogBody>
        ) : null}
        <DialogFooter>
          <Button variant="ghost" onClick={() => handleOpenChange(false)} disabled={busy}>
            {cancelLabel}
          </Button>
          <Button
            variant={destructive ? "danger" : "primary"}
            loading={busy}
            disabled={!canConfirm}
            onClick={async () => {
              setBusy(true);
              try {
                await onConfirm();
                handleOpenChange(false);
              } finally {
                setBusy(false);
              }
            }}
          >
            {confirmLabel}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}