Confirm Dialog

"use client";

import { useState, type ReactNode } from "react";
import { AlertDialog } from "radix-ui";
import { AlertTriangle } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ConfirmDialogProps {
  trigger?: ReactNode;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  title?: string;
  description?: string;
  confirmLabel?: string;
  cancelLabel?: string;
  /** Require typing this word to enable the confirm button. */
  confirmText?: string;
  onConfirm?: () => void;
  da?: string;
}

/** Destructive confirmation (Radix AlertDialog): red warning icon, title, consequence text, optional “type VOID to confirm” guard, cancel + red confirm. */
export function ConfirmDialog({
  trigger,
  open,
  defaultOpen,
  onOpenChange,
  title = "Void invoice INV-2039?",
  description = "The customer will no longer be able to pay it and a credit note will be created in NetSuite. This can’t be undone.",
  confirmLabel = "Void invoice",
  cancelLabel = "Cancel",
  confirmText = "VOID",
  onConfirm,
  da = "neo-corporate",
}: ConfirmDialogProps) {
  const [typed, setTyped] = useState("");
  const ok = !confirmText || typed.trim().toUpperCase() === confirmText.toUpperCase();
  return (
    <AlertDialog.Root
      open={open}
      defaultOpen={defaultOpen}
      onOpenChange={(o) => {
        if (!o) setTyped("");
        onOpenChange?.(o);
      }}
    >
      {trigger && <AlertDialog.Trigger asChild>{trigger}</AlertDialog.Trigger>}
      <AlertDialog.Portal>
        <AlertDialog.Overlay
          data-da={da}
          className="fixed inset-0 z-50 bg-da-overlay transition-opacity duration-(--da-duration) starting:opacity-0 motion-reduce:transition-none"
        />
        <AlertDialog.Content
          data-da={da}
          className="da-stroke fixed top-1/2 left-1/2 z-50 w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-da-lg bg-da-surface p-6 text-da-surface-fg shadow-da-lg outline-none transition-[opacity,scale] duration-(--da-duration) starting:scale-[0.98] starting:opacity-0 motion-reduce:transition-none"
        >
          <div className="flex gap-4">
            <span aria-hidden className="grid size-10 shrink-0 place-items-center rounded-full bg-da-danger/10 text-da-danger">
              <AlertTriangle className="size-5" />
            </span>
            <div className="min-w-0">
              <AlertDialog.Title className="font-da-display text-lg font-bold">{title}</AlertDialog.Title>
              <AlertDialog.Description className="mt-1.5 text-sm text-da-muted-fg">{description}</AlertDialog.Description>
              {confirmText && (
                <label className="mt-4 grid gap-1.5 text-sm">
                  <span>
                    Type <span className="font-da-mono font-semibold">{confirmText}</span> to confirm
                  </span>
                  <input
                    value={typed}
                    onChange={(e) => setTyped(e.target.value)}
                    autoComplete="off"
                    className="da-stroke h-10 rounded-da-md bg-da-surface px-3 font-da-mono outline-none focus:border-da-danger focus:ring-3 focus:ring-da-danger/20"
                  />
                </label>
              )}
            </div>
          </div>
          <div className="mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
            <AlertDialog.Cancel className="da-focus da-stroke h-10 rounded-da-md bg-da-surface px-4 text-sm font-semibold hover:bg-da-surface-2">
              {cancelLabel}
            </AlertDialog.Cancel>
            <AlertDialog.Action
              disabled={!ok}
              onClick={onConfirm}
              className={cn(
                "da-focus h-10 rounded-da-md bg-da-danger px-4 text-sm font-semibold text-da-danger-fg hover:bg-da-danger/90",
                !ok && "cursor-not-allowed opacity-50",
              )}
            >
              {confirmLabel}
            </AlertDialog.Action>
          </div>
        </AlertDialog.Content>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
}

export default ConfirmDialog;