import {
  AlertCircle,
  Flame,
  Zap,
  AlertTriangle,
  CheckCircle,
  DollarSign,
  Calendar,
} from "lucide-react";

interface AnimalAlertsProps {
  alerts: any[];
}

export default function AnimalAlerts({ alerts }: AnimalAlertsProps) {
  if (!Array.isArray(alerts) || alerts.length === 0) {
    return null;
  }

  return (
    <div className="w-full rounded-xl bg-gradient-to-r from-surface-dark via-[#3a2e26] to-surface-dark border border-primary/30 p-1">
      <div className="bg-background-dark/50 rounded-lg p-6 backdrop-blur-sm">
        <h4 className="text-white font-bold text-xl mb-5 flex items-center gap-2">
          <AlertCircle className="w-6 h-6 text-pink-400" />
          Alertas Activas
        </h4>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          {alerts.map((alert: any, idx: number) => {
            // Determinar el tipo de alerta
            const alertType = alert.type || alert.alert_type || '';
            const description = alert.description || '';
            const lowerDesc = description.toLowerCase();
            
            // Detectar tipo de alerta
            const isCelo = alertType === 'celo' || lowerDesc.includes('celo');
            const isSemental = alertType === 'semental' || lowerDesc.includes('semental');
            const isRobado = alertType === 'robado' || lowerDesc.includes('robado');
            const isRecuperado = alertType === 'recuperado' || lowerDesc.includes('recuperado');
            const isVenta = alertType === 'venta' || lowerDesc.includes('venta');
            
            // Configuración de estilos según tipo
            let bgColor = 'bg-slate-500/20';
            let borderColor = 'border-slate-500/30';
            let iconColor = 'text-slate-400';
            let icon = <AlertCircle className="w-5 h-5" />;
            let label = 'Alerta';
            
            if (isCelo) {
              bgColor = 'bg-pink-500/20';
              borderColor = 'border-pink-500/40';
              iconColor = 'text-pink-400';
              icon = <Flame className="w-5 h-5" />;
              label = 'En Celo';
            } else if (isSemental) {
              bgColor = 'bg-amber-500/20';
              borderColor = 'border-amber-500/40';
              iconColor = 'text-amber-400';
              icon = <Zap className="w-5 h-5" />;
              label = 'Semental';
            } else if (isRobado) {
              bgColor = 'bg-red-500/20';
              borderColor = 'border-red-500/40';
              iconColor = 'text-red-400';
              icon = <AlertTriangle className="w-5 h-5" />;
              label = 'Robado';
            } else if (isRecuperado) {
              bgColor = 'bg-emerald-500/20';
              borderColor = 'border-emerald-500/40';
              iconColor = 'text-emerald-400';
              icon = <CheckCircle className="w-5 h-5" />;
              label = 'Recuperado';
            } else if (isVenta) {
              bgColor = 'bg-blue-500/20';
              borderColor = 'border-blue-500/40';
              iconColor = 'text-blue-400';
              icon = <DollarSign className="w-5 h-5" />;
              label = 'En Venta';
            }
            
            return (
              <div key={idx} className={`${bgColor} ${borderColor} border rounded-lg p-4 transition-all hover:scale-[1.02]`}>
                <div className="flex items-start gap-3">
                  <div className={`${iconColor} shrink-0 mt-0.5`}>
                    {icon}
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-white font-semibold text-base mb-1.5">
                      {label}
                    </p>
                    {description && (
                      <p className="text-slate-300 text-sm leading-relaxed mb-2">
                        {description}
                      </p>
                    )}
                    {alert.created_at && (
                      <p className="text-slate-400 text-xs flex items-center gap-1">
                        <Calendar className="w-3 h-3" />
                        {new Date(alert.created_at).toLocaleDateString('es-ES', {
                          day: 'numeric',
                          month: 'short',
                          year: 'numeric'
                        })}
                      </p>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}