veza/apps/web/src/components/ui/confirmation-dialog.tsx

import { Dialog } from './dialog';
import { AlertTriangle } from 'lucide-react';

// FE-COMP-004: Add confirmation dialogs for destructive actions

/**
 * ConfirmationDialogProps - Propriétés du composant ConfirmationDialog
 *
 * @interface ConfirmationDialogProps
 */
export interface ConfirmationDialogProps {
  /**
   * Si `true`, le dialogue est ouvert
   *
   * @example
   * ```tsx
   * <ConfirmationDialog open={showDialog} onClose={() => setShowDialog(false)} />
   * ```
   */
  open: boolean;

  /**
   * Fonction appelée pour fermer le dialogue
   */
  onClose: () => void;

  /**
   * Fonction appelée lors de la confirmation
   *
   * @example
   * ```tsx
   * <ConfirmationDialog
   *   onConfirm={() => handleDelete()}
   * />
   * ```
   */
  onConfirm: () => void;

  /**
   * Titre du dialogue
   */
  title: string;

  /**
   * Description du dialogue
   */
  description: string;

  /**
   * Texte du bouton de confirmation
   *
   * @default 'Confirm'
   */
  confirmLabel?: string;

  /**
   * Texte du bouton d'annulation (utilisé par Dialog en interne)
   * @internal
   */
  cancelLabel?: string;

  /**
   * Variant du dialogue
   *
   * - `default`: Dialogue standard
   * - `destructive`: Dialogue pour actions destructives (affiche une icône d'alerte)
   *
   * @default 'destructive'
   */
  variant?: 'default' | 'destructive';

  /**
   * Si `true`, affiche un état de chargement et désactive les boutons
   *
   * @default false
   */
  isLoading?: boolean;
}

/**
 * ConfirmationDialog - Composant réutilisable pour les confirmations d'actions destructives
 *
 * Composant de dialogue de confirmation pour demander confirmation avant d'effectuer
 * une action, particulièrement utile pour les actions destructives.
 *
 * FE-COMP-004: Add confirmation dialogs for destructive actions
 *
 * @example
 * ```tsx
 * // Dialogue de confirmation destructif
 * <ConfirmationDialog
 *   open={showDialog}
 *   onClose={() => setShowDialog(false)}
 *   onConfirm={() => {
 *     handleDelete();
 *     setShowDialog(false);
 *   }}
 *   title="Supprimer l'élément"
 *   description="Cette action est irréversible. Êtes-vous sûr de vouloir continuer ?"
 *   confirmLabel="Supprimer"
 *   variant="destructive"
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Avec état de chargement
 * <ConfirmationDialog
 *   open={showDialog}
 *   onClose={() => setShowDialog(false)}
 *   onConfirm={handleConfirm}
 *   title="Confirmer l'action"
 *   description="Voulez-vous continuer ?"
 *   isLoading={isProcessing}
 * />
 * ```
 *
 * @component
 * @param {ConfirmationDialogProps} props - Propriétés du composant
 * @returns {JSX.Element} Dialogue de confirmation stylisé
 */
export function ConfirmationDialog({
  open,
  onClose,
  onConfirm,
  title,
  description,
  confirmLabel = 'Confirm',
  cancelLabel: _cancelLabel = 'Cancel', // Unused but kept for API compatibility
  variant = 'destructive',
  isLoading = false,
}: ConfirmationDialogProps) {
  const handleConfirm = () => {
    if (!isLoading) {
      onConfirm();
    }
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      title={title}
      onConfirm={handleConfirm}
      confirmLabel={isLoading ? 'Processing...' : confirmLabel}
      onCancel={onClose}
      showCancel
    >
      <div className="space-y-4 py-4">
        <div className="flex items-start gap-4">
          {variant === 'destructive' && (
            <div className="flex-shrink-0">
              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-kodo-red/10 dark:bg-kodo-red/20">
                <AlertTriangle className="h-5 w-5 text-destructive dark:text-destructive" />
              </div>
            </div>
          )}
          <div className="flex-1">
            <p className="text-sm text-muted-foreground">{description}</p>
          </div>
        </div>
      </div>
    </Dialog>
  );
}