import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '../ui/alert-dialog';
import { useDialogState } from '../../stores';

/**
 * Props for the Dialogs component
 */
export interface DialogsProps {
  /** Callback to confirm node deletion */
  onConfirmDeleteNode: () => void;
  /** Callback to cancel node deletion */
  onCancelDeleteNode: () => void;
  /** Callback when leaving without saving */
  onLeaveWithoutSaving: () => void;
}

/**
 * Dialogs component for the FlowBuilder
 *
 * Contains all confirmation dialogs used in the workflow builder:
 * - Node deletion confirmation
 * - Unsaved workflow changes confirmation
 *
 * Reads dialog state from UIStore for centralized state management.
 */
export function Dialogs({
  onConfirmDeleteNode,
  onCancelDeleteNode,
  onLeaveWithoutSaving,
}: DialogsProps) {
  const { nodeToDelete, showUnsavedDialog, setShowUnsavedDialog } = useDialogState();

  return (
    <>
      {/* Node deletion confirmation dialog */}
      <AlertDialog open={!!nodeToDelete} onOpenChange={(open) => !open && onCancelDeleteNode()}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete Node</AlertDialogTitle>
            <AlertDialogDescription>
              Are you sure you want to delete "{nodeToDelete?.name}"? This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={onCancelDeleteNode}>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={onConfirmDeleteNode} className="bg-error hover:bg-red-700">
              Delete
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* Unsaved changes confirmation dialog (workflow level) */}
      <AlertDialog open={showUnsavedDialog} onOpenChange={setShowUnsavedDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Unsaved Changes</AlertDialogTitle>
            <AlertDialogDescription>
              You have unsaved changes. Are you sure you want to leave? Your changes will be lost.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={onLeaveWithoutSaving} className="bg-error hover:bg-red-700">
              Leave Without Saving
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}