import { cn } from "@/lib/utils";
import { AlertTriangle, ArrowRight, LucideIcon, Loader2 } from "lucide-react";

// ============================================
// VARIANTES DE COULEURS
// ============================================

type ColorVariant = 'warning' | 'danger' | 'info' | 'success';

const colorVariants: Record<ColorVariant, {
  border: string;
  bg: string;
  accent: string;
  iconBg: string;
  iconColor: string;
  title: string;
  description: string;
  hoverBorder: string;
  hoverBg: string;
}> = {
  warning: {
    border: 'border-amber-200 dark:border-amber-800',
    bg: 'bg-amber-50 dark:bg-amber-900/20',
    accent: 'bg-amber-500',
    iconBg: 'bg-amber-100 dark:bg-amber-900/50',
    iconColor: 'text-amber-600 dark:text-amber-400',
    title: 'text-amber-900 dark:text-amber-100',
    description: 'text-amber-700 dark:text-amber-300',
    hoverBorder: 'hover:border-amber-400 dark:hover:border-amber-600',
    hoverBg: 'hover:bg-amber-100/50 dark:hover:bg-amber-900/30',
  },
  danger: {
    border: 'border-red-200 dark:border-red-800',
    bg: 'bg-red-50 dark:bg-red-900/20',
    accent: 'bg-red-500',
    iconBg: 'bg-red-100 dark:bg-red-900/50',
    iconColor: 'text-red-600 dark:text-red-400',
    title: 'text-red-900 dark:text-red-100',
    description: 'text-red-700 dark:text-red-300',
    hoverBorder: 'hover:border-red-400 dark:hover:border-red-600',
    hoverBg: 'hover:bg-red-100/50 dark:hover:bg-red-900/30',
  },
  info: {
    border: 'border-blue-200 dark:border-blue-800',
    bg: 'bg-blue-50 dark:bg-blue-900/20',
    accent: 'bg-blue-500',
    iconBg: 'bg-blue-100 dark:bg-blue-900/50',
    iconColor: 'text-blue-600 dark:text-blue-400',
    title: 'text-blue-900 dark:text-blue-100',
    description: 'text-blue-700 dark:text-blue-300',
    hoverBorder: 'hover:border-blue-400 dark:hover:border-blue-600',
    hoverBg: 'hover:bg-blue-100/50 dark:hover:bg-blue-900/30',
  },
  success: {
    border: 'border-emerald-200 dark:border-emerald-800',
    bg: 'bg-emerald-50 dark:bg-emerald-900/20',
    accent: 'bg-emerald-500',
    iconBg: 'bg-emerald-100 dark:bg-emerald-900/50',
    iconColor: 'text-emerald-600 dark:text-emerald-400',
    title: 'text-emerald-900 dark:text-emerald-100',
    description: 'text-emerald-700 dark:text-emerald-300',
    hoverBorder: 'hover:border-emerald-400 dark:hover:border-emerald-600',
    hoverBg: 'hover:bg-emerald-100/50 dark:hover:bg-emerald-900/30',
  },
};

// ============================================
// INTERFACES
// ============================================

interface ValidationWarningCardProps {
  icon?: LucideIcon;
  title: string;
  description: string;
  variant?: ColorVariant;
  onClick?: () => void;
  isLoading?: boolean;
  loadingText?: string;
  disabled?: boolean;
  actionLabel?: string;
  className?: string;
}

// ============================================
// COMPOSANT PRINCIPAL
// ============================================

export const ModalValidationWarningCard: React.FC<ValidationWarningCardProps> = ({
  icon: Icon = AlertTriangle,
  title,
  description,
  variant = 'warning',
  onClick,
  isLoading = false,
  loadingText = 'Chargement...',
  disabled = false,
  actionLabel,
  className,
}) => {
  const colors = colorVariants[variant];
  const isClickable = !!onClick && !disabled && !isLoading;

  const content = (
    <>
      {/* Accent gauche */}
      <span
        className={cn(
          "absolute left-0 top-0 h-full w-1 rounded-l-2xl transition-all duration-200",
          colors.accent,
          isClickable && "group-hover:w-1.5"
        )}
      />

      <div className="flex items-start gap-4">
        {/* Icône */}
        <div
          className={cn(
            "flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl",
            "transition-all duration-200",
            colors.iconBg,
            isClickable && "group-hover:scale-110"
          )}
        >
          {isLoading ? (
            <Loader2 className={cn("h-6 w-6 animate-spin", colors.iconColor)} />
          ) : (
            <Icon className={cn("h-6 w-6", colors.iconColor)} />
          )}
        </div>

        {/* Contenu */}
        <div className="flex-1 min-w-0">
          <h4 className={cn(
            "flex items-center gap-2 font-semibold",
            colors.title
          )}>
            {isLoading ? loadingText : title}
            {isClickable && (
              <ArrowRight className={cn(
                "h-4 w-4 flex-shrink-0 transition-all duration-200",
                "translate-x-[-4px] opacity-0",
                "group-hover:translate-x-0 group-hover:opacity-100",
                colors.iconColor
              )} />
            )}
          </h4>
          <p className={cn(
            "mt-1 text-sm leading-relaxed",
            colors.description
          )}>
            {description}
          </p>
          
          {/* Action label optionnel */}
          {actionLabel && isClickable && (
            <span className={cn(
              "inline-flex items-center gap-1 mt-2 text-xs font-medium",
              colors.iconColor,
              "opacity-0 translate-y-1 transition-all duration-200",
              "group-hover:opacity-100 group-hover:translate-y-0"
            )}>
              {actionLabel}
              <ArrowRight className="h-3 w-3" />
            </span>
          )}
        </div>
      </div>
    </>
  );

  // Si cliquable, utiliser un bouton
  if (onClick) {
    return (
      <button
        onClick={onClick}
        disabled={disabled || isLoading}
        className={cn(
          "group relative w-full text-left rounded-2xl border p-4",
          "transition-all duration-200",
          colors.border,
          colors.bg,
          isClickable && colors.hoverBorder,
          isClickable && colors.hoverBg,
          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
          variant === 'warning' && "focus-visible:ring-amber-500",
          variant === 'danger' && "focus-visible:ring-red-500",
          variant === 'info' && "focus-visible:ring-blue-500",
          variant === 'success' && "focus-visible:ring-emerald-500",
          (disabled || isLoading) && "opacity-60 cursor-not-allowed",
          className
        )}
      >
        {content}
      </button>
    );
  }

  // Sinon, utiliser une div
  return (
    <div
      className={cn(
        "relative w-full rounded-2xl border p-4",
        colors.border,
        colors.bg,
        className
      )}
    >
      {content}
    </div>
  );
};

// ============================================
// COMPOSANTS PRÉ-CONFIGURÉS
// ============================================

interface SimpleWarningProps {
  title: string;
  description: string;
  onClick?: () => void;
  isLoading?: boolean;
  loadingText?: string;
  disabled?: boolean;
  className?: string;
}

export const WarningCard: React.FC<SimpleWarningProps> = (props) => (
  <ModalValidationWarningCard {...props} variant="warning" icon={AlertTriangle} />
);

export const DangerCard: React.FC<SimpleWarningProps> = (props) => (
  <ModalValidationWarningCard {...props} variant="danger" icon={AlertTriangle} />
);

export const InfoCard: React.FC<SimpleWarningProps & { icon?: LucideIcon }> = (props) => (
  <ModalValidationWarningCard {...props} variant="info" />
);

export const SuccessCard: React.FC<SimpleWarningProps & { icon?: LucideIcon }> = (props) => (
  <ModalValidationWarningCard {...props} variant="success" />
);

export default ModalValidationWarningCard;