// MFM Chat — Dialog.
// A reusable confirmation / alert modal. Not destructive-only: use `variant`
// to switch the confirm button between a normal action and a destructive one.
// Uses the shared <Button> primitive so hover/focus styling stays consistent.

const Dialog = ({
  open,
  title,
  description,
  cancelLabel = "Cancel",
  confirmLabel = "Confirm",
  variant = "default", // "default" | "destructive"
  onCancel,
  onConfirm,
}) => {
  // ESC closes the dialog
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onCancel?.(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onCancel]);

  if (!open) return null;

  const confirmVariant = variant === "destructive" ? "destructive" : "default";

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="dd-title"
      className="fixed inset-0 z-[100] flex items-center justify-center p-4"
      style={{ background: "rgba(0,0,0,0.55)" }}
      onClick={onCancel}
    >
      <div
        className="bg-background border border-border rounded-lg p-6 w-full max-w-md"
        style={{ boxShadow: "var(--shadow-lg)" }}
        onClick={(e) => e.stopPropagation()}
      >
        <h3 id="dd-title" className="text-lg font-semibold text-foreground mb-1.5">
          {title}
        </h3>
        <p className="text-sm text-muted-foreground leading-relaxed mb-5">
          {description}
        </p>
        <div className="flex justify-end gap-2">
          <Button variant="outline" onClick={onCancel}>
            {cancelLabel}
          </Button>
          <Button variant={confirmVariant} onClick={onConfirm} autoFocus>
            {confirmLabel}
          </Button>
        </div>
      </div>
    </div>
  );
};

// `DestructiveDialog` kept as a backward-compatible alias.
const DestructiveDialog = (props) => <Dialog variant="destructive" {...props} />;

Object.assign(window, { Dialog, DestructiveDialog });