import { ReactNode } from 'react';
import { X, Info, CheckCircle, AlertTriangle, AlertCircle } from 'lucide-react';
import { cn } from '@/lib/utils';

export interface AlertProps {
  variant?: 'info' | 'success' | 'warning' | 'error';
  title?: string;
  children: ReactNode;
  onClose?: () => void;
  dismissible?: boolean;
  className?: string;
}

const ALERT_ICONS = {
  info: Info,
  success: CheckCircle,
  warning: AlertTriangle,
  error: AlertCircle,
};

const ALERT_STYLES = {
  info: 'bg-kodo-steel/10 border-kodo-steel/30 text-kodo-text-main dark:bg-kodo-steel/20 dark:border-kodo-steel/40 dark:text-kodo-steel',
  success:
    'bg-kodo-lime/10 border-kodo-lime/30 text-kodo-text-main dark:bg-kodo-lime/20 dark:border-kodo-lime/40 dark:text-kodo-lime',
  warning:
    'bg-kodo-gold/10 border-kodo-gold/30 text-kodo-text-main dark:bg-kodo-gold/20 dark:border-kodo-gold/40 dark:text-kodo-gold',
  error:
    'bg-kodo-red/10 border-kodo-red/30 text-kodo-text-main dark:bg-kodo-red/20 dark:border-kodo-red/40 dark:text-kodo-red',
};

const ICON_STYLES = {
  info: 'text-kodo-steel dark:text-kodo-steel',
  success: 'text-kodo-lime dark:text-kodo-lime',
  warning: 'text-kodo-gold dark:text-kodo-gold',
  error: 'text-kodo-red dark:text-kodo-red',
};

/**
 * Composant Alert pour afficher des messages d'information, d'avertissement ou d'erreur.
 */
export function Alert({
  variant = 'info',
  title,
  children,
  onClose,
  dismissible = false,
  className,
}: AlertProps) {
  const Icon = ALERT_ICONS[variant];

  return (
    <div
      role="alert"
      className={cn(
        'relative rounded-lg border p-4',
        ALERT_STYLES[variant],
        className,
      )}
    >
      <div className="flex items-start gap-4">
        <Icon
          className={cn('h-5 w-5 flex-shrink-0 mt-0.5', ICON_STYLES[variant])}
        />
        <div className="flex-1 min-w-0">
          {title && (
            <h3 className="mb-1 font-semibold leading-none tracking-tight">
              {title}
            </h3>
          )}
          <div className="text-sm [&_p]:leading-relaxed">{children}</div>
        </div>
        {dismissible && onClose && (
          <button
            onClick={onClose}
            className="flex-shrink-0 rounded-md p-1 text-current opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2"
            aria-label="Fermer"
          >
            <X className="h-4 w-4" />
          </button>
        )}
      </div>
    </div>
  );
}
