Confirm Dialog

"use client";

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

export interface ConfirmDialogProps {
  trigger: ReactNode;
  title: string;
  description: string;
  /** The user must type this exact text to enable the confirm button. */
  confirmText?: string;
  confirmLabel?: string;
  cancelLabel?: string;
  consequences?: string[];
  onConfirm?: () => void | Promise<void>;
  da?: string;
}

export function ConfirmDialog({
  trigger,
  title,
  description,
  confirmText,
  confirmLabel = "Delete",
  cancelLabel = "Cancel",
  consequences = [],
  onConfirm,
  da = "brutalist",
}: ConfirmDialogProps) {
  const [typed, setTyped] = useState("");
  const [pending, setPending] = useState(false);
  const [open, setOpen] = useState(false);
  const inputId = useId();
  const armed = !confirmText || typed === confirmText;

  return (
    <AlertDialog.Root
      open={open}
      onOpenChange={(o) => {
        setOpen(o);
        setTyped("");
      }}
    >
      <AlertDialog.Trigger asChild>{trigger}</AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Overlay data-da={da} className="fixed inset-0 z-50 bg-da-overlay [background-image:repeating-linear-gradient(-45deg,transparent_0_18px,rgb(0_0_0/0.25)_18px_22px)]" />
        <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 bg-da-surface text-da-surface-fg shadow-da-lg outline-none"
        >
          <div className="da-stroke-b flex items-center gap-3 bg-da-danger px-5 py-3 text-da-danger-fg">
            <span aria-hidden className="da-stroke grid size-8 place-items-center bg-da-surface font-da-display text-da-surface-fg">
              !
            </span>
            <span className="font-da-mono text-xs font-bold tracking-da-label uppercase">Danger zone</span>
          </div>
          <div className="p-6">
            <AlertDialog.Title className="font-da-display text-2xl leading-tight tracking-da-display uppercase">{title}</AlertDialog.Title>
            <AlertDialog.Description className="mt-3 text-da-muted-fg">{description}</AlertDialog.Description>
            {consequences.length > 0 && (
              <ul className="da-stroke mt-5 divide-y-0 bg-da-surface-2">
                {consequences.map((c, i) => (
                  <li key={c} className={cn("flex gap-3 px-4 py-2.5 text-sm font-bold", i > 0 && "da-stroke-t")}>
                    <span aria-hidden>✕</span>
                    {c}
                  </li>
                ))}
              </ul>
            )}
            {confirmText && (
              <div className="mt-5 grid gap-2">
                <label htmlFor={inputId} className="text-sm">
                  Type <code className="da-stroke bg-da-muted px-1 font-da-mono font-bold">{confirmText}</code> to confirm
                </label>
                <input
                  id={inputId}
                  value={typed}
                  onChange={(e) => setTyped(e.target.value)}
                  autoComplete="off"
                  spellCheck={false}
                  className="da-focus da-stroke bg-da-input px-3 py-2.5 font-da-mono font-bold"
                />
              </div>
            )}
          </div>
          <div className="da-stroke-t flex flex-col-reverse gap-3 bg-da-surface-2 p-5 sm:flex-row sm:justify-end">
            <AlertDialog.Cancel className="da-focus da-stroke bg-da-surface px-5 py-3 font-bold text-da-surface-fg">{cancelLabel}</AlertDialog.Cancel>
            <AlertDialog.Action
              disabled={!armed || pending}
              onClick={async (e) => {
                if (!onConfirm) return;
                e.preventDefault();
                setPending(true);
                try {
                  await onConfirm();
                  setOpen(false);
                } finally {
                  setPending(false);
                }
              }}
              className="da-focus da-stroke bg-da-danger px-5 py-3 font-bold text-da-danger-fg shadow-da-sm hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none disabled:cursor-not-allowed disabled:opacity-40 disabled:shadow-none"
            >
              {pending ? "Deleting…" : confirmLabel}
            </AlertDialog.Action>
          </div>
        </AlertDialog.Content>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
}

export default ConfirmDialog;