import React from 'react';
import { Modal } from './modal';
import { Button } from './button';
import { cn } from '@/lib/utils';
import { AlertCircle, Info } from 'lucide-react';

/**
 * DialogProps - Propriétés du composant Dialog
 *
 * @interface DialogProps
 */
export interface DialogProps {
  /**
   * Si `true`, le dialogue est ouvert
   */
  open: boolean;

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

  /**
   * Fonction appelée lorsque l'état ouvert change (mode contrôlé)
   *
   * @param {boolean} open - Nouvel état ouvert
   */
  onOpenChange?: (open: boolean) => void;

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

  /**
   * Contenu du dialogue
   */
  children: React.ReactNode;

  /**
   * Footer personnalisé (remplace les boutons par défaut si fourni)
   */
  footer?: React.ReactNode;

  /**
   * Variant du dialogue
   *
   * - `default`: Dialogue standard
   * - `alert`: Dialogue d'alerte (icône AlertCircle rouge)
   * - `confirm`: Dialogue de confirmation (icône AlertCircle cyan)
   * - `info`: Dialogue d'information (icône Info cyan)
   *
   * @default 'default'
   */
  variant?: 'default' | 'alert' | 'confirm' | 'info';

  /**
   * Fonction appelée lors de la confirmation (peut être async)
   */
  onConfirm?: () => void | Promise<void>;

  /**
   * Fonction appelée lors de l'annulation
   */
  onCancel?: () => void;

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

  /**
   * Texte du bouton d'annulation
   *
   * @default 'Cancel'
   */
  cancelLabel?: string;

  /**
   * Si `true`, affiche le bouton d'annulation
   *
   * @default true
   */
  showCancel?: boolean;

  /**
   * Taille du dialogue
   *
   * - `sm`: Petit
   * - `md`: Moyen - par défaut
   * - `lg`: Grand
   * - `xl`: Très grand
   *
   * @default 'md'
   */
  size?: 'sm' | 'md' | 'lg' | 'xl';
}

/**
 * Dialog - Composant de dialogue avancé avec design system Kodo
 *
 * Composant de dialogue modal avec support pour :
 * - Header avec titre et icône optionnelle
 * - Body avec contenu personnalisé
 * - Footer avec boutons d'action
 * - Variants (alert, confirm, info)
 * - Tailles personnalisables
 *
 * @example
 * ```tsx
 * // Dialogue simple
 * <Dialog
 *   open={isOpen}
 *   onClose={() => setIsOpen(false)}
 *   title="Confirmation"
 * >
 *   <p>Êtes-vous sûr de vouloir continuer ?</p>
 * </Dialog>
 * ```
 *
 * @example
 * ```tsx
 * // Dialogue avec actions
 * <Dialog
 *   open={showDialog}
 *   onOpenChange={setShowDialog}
 *   title="Supprimer"
 *   variant="alert"
 *   onConfirm={handleDelete}
 *   confirmLabel="Supprimer"
 *   cancelLabel="Annuler"
 * >
 *   <p>Cette action est irréversible.</p>
 * </Dialog>
 * ```
 *
 * @component
 * @param {DialogProps} props - Propriétés du composant
 * @returns {JSX.Element} Modal avec contenu de dialogue stylisé
 */

const variantIcons = {
  alert: AlertCircle,
  confirm: AlertCircle,
  info: Info,
  default: undefined,
};

const variantStyles = {
  alert: 'text-kodo-red',
  confirm: 'text-kodo-cyan',
  info: 'text-kodo-cyan',
  default: '',
};

/**
 * Composant Dialog avancé avec header, body, footer et actions - Design Kodo
 */
export function Dialog({
  open,
  onClose,
  onOpenChange,
  title,
  children,
  footer,
  variant = 'default',
  onConfirm,
  onCancel,
  confirmLabel = 'Confirm',
  cancelLabel = 'Cancel',
  showCancel = true,
  size = 'md',
}: DialogProps) {
  const handleClose = () => {
    if (onOpenChange) {
      onOpenChange(false);
    } else if (onClose) {
      onClose();
    }
  };

  const handleConfirm = async () => {
    if (onConfirm) {
      await onConfirm();
    }
    handleClose();
  };

  const handleCancel = () => {
    if (onCancel) {
      onCancel();
    }
    handleClose();
  };

  const IconComponent = variantIcons[variant];
  const iconStyle = variantStyles[variant];

  return (
    <Modal
      open={open}
      onClose={handleClose}
      size={size}
      closeOnOverlayClick={variant === 'default'}
      title={title}
      footer={
        footer || onConfirm || onCancel ? (
          footer ? (
            footer
          ) : (
            <div className="flex justify-end gap-2">
              {showCancel && (
                <Button variant="outline" onClick={handleCancel}>
                  {cancelLabel}
                </Button>
              )}
              {onConfirm && (
                <Button
                  variant={variant === 'alert' ? 'destructive' : 'default'}
                  onClick={handleConfirm}
                >
                  {confirmLabel}
                </Button>
              )}
            </div>
          )
        ) : undefined
      }
    >
      {title && IconComponent && (
        <div className="flex items-center gap-3 mb-4">
          <IconComponent className={cn('h-5 w-5', iconStyle)} />
        </div>
      )}
      {children}
    </Modal>
  );
}

export interface DialogHeaderProps {
  children: React.ReactNode;
  variant?: 'default' | 'alert' | 'confirm' | 'info';
  className?: string;
}

export function DialogHeader({
  children,
  variant: _variant = 'default',
  className,
}: DialogHeaderProps) {
  return (
    <div
      className={cn(
        'flex items-center justify-between p-6 border-b border-kodo-steel',
        className,
      )}
    >
      {children}
    </div>
  );
}

export interface DialogBodyProps {
  children: React.ReactNode;
  variant?: 'default' | 'alert' | 'confirm' | 'info';
  className?: string;
}

export function DialogBody({
  children,
  variant = 'default',
  className,
}: DialogBodyProps) {
  return (
    <div
      className={cn('p-6', variant === 'alert' && 'text-kodo-red', className)}
    >
      {children}
    </div>
  );
}

export interface DialogFooterProps {
  children: React.ReactNode;
  className?: string;
}

export function DialogFooter({ children, className }: DialogFooterProps) {
  return (
    <div
      className={cn(
        'flex items-center justify-end gap-2 p-6 border-t border-kodo-steel',
        className,
      )}
    >
      {children}
    </div>
  );
}

// Radix UI-style components for compatibility
export interface DialogContentProps {
  children: React.ReactNode;
  className?: string;
}

export function DialogContent({ children, className }: DialogContentProps) {
  return <div className={cn('p-6', className)}>{children}</div>;
}

export interface DialogDescriptionProps {
  children: React.ReactNode;
  className?: string;
}

export function DialogDescription({
  children,
  className,
}: DialogDescriptionProps) {
  return <p className={cn('text-sm text-gray-400', className)}>{children}</p>;
}

export interface DialogTitleProps {
  children: React.ReactNode;
  className?: string;
}

export function DialogTitle({ children, className }: DialogTitleProps) {
  return (
    <h2
      className={cn(
        'text-2xl font-semibold leading-none tracking-tight text-white font-display',
        className,
      )}
    >
      {children}
    </h2>
  );
}

export interface DialogTriggerProps {
  children: React.ReactNode;
  asChild?: boolean;
  onClick?: () => void;
}

export function DialogTrigger({
  children,
  asChild,
  onClick,
}: DialogTriggerProps) {
  // If asChild, we expect the child to handle the click
  if (asChild && React.isValidElement(children)) {
    return React.cloneElement(children, {
      onClick: onClick || children.props.onClick,
    } as any);
  }
  return (
    <div onClick={onClick} style={{ display: 'inline-block' }}>
      {children}
    </div>
  );
}
