import type { ConfirmDialogTone } from '../../lib/confirm-texts';

import { Button } from './button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from './dialog';

/** Tone hint used to colour the confirm button. */
export type { ConfirmDialogTone };

/** Props for {@link ConfirmDialog}. */
export interface ConfirmDialogProps {
  /** Controls visibility - mirror this in the caller's state. */
  open: boolean;
  /** Called when the modal requests to close (Esc, backdrop, cancel). */
  onOpenChange: (next: boolean) => void;
  /** Short headline rendered as the dialog title. */
  title: string;
  /** Longer body copy explaining what will happen on confirm. */
  description: string;
  /** Label of the affirmative button. Defaults to "Yes". */
  confirmLabel?: string;
  /** Label of the dismissive button. Defaults to "No". */
  cancelLabel?: string;
  /** Visual tone of the confirm button. Defaults to ``"default"``. */
  tone?: ConfirmDialogTone;
  /** Disables both buttons while a parent-side request is in flight. */
  busy?: boolean;
  /** Optional label shown on the confirm button while ``busy`` is true. */
  busyLabel?: string;
  /** Fired when the user confirms; the parent runs the actual side effect. */
  onConfirm: () => void;
}

/**
 * Generic Yes/No confirmation modal. Lifts the decision out of
 * ``window.confirm`` so destructive actions get a real, themed dialog with
 * keyboard + backdrop handling. The caller owns the side effect and the
 * open/close state - this component is intentionally dumb.
 */
function ConfirmDialog({
  open,
  onOpenChange,
  title,
  description,
  confirmLabel = 'Yes',
  cancelLabel = 'No',
  tone = 'default',
  busy = false,
  busyLabel,
  onConfirm,
}: ConfirmDialogProps): JSX.Element {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription>{description}</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button
            type="button"
            variant="outline"
            disabled={busy}
            onClick={() => onOpenChange(false)}
          >
            {cancelLabel}
          </Button>
          <Button
            type="button"
            variant={tone === 'destructive' ? 'destructive' : 'default'}
            disabled={busy}
            onClick={onConfirm}
          >
            {busy && busyLabel ? busyLabel : confirmLabel}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

export default ConfirmDialog;