import { Link } from 'react-router-dom';
import { 
  AlertTriangle, 
  Heart, 
  Brain, 
  Wind, 
  Activity, 
  Clock,
  ChevronRight 
} from 'lucide-react';

const protocolosUrgencia = [
  {
    id: 'pcr-adulto',
    titulo: 'PCR Adulto',
    subtitulo: 'Parada Cardiorrespiratoria',
    icono: Heart,
    color: 'bg-red-500',
    path: '/rcp',
    urgencia: 'critica' as const,
  },
  {
    id: 'ovace',
    titulo: 'OVACE',
    subtitulo: 'Obstrucción Vía Aérea',
    icono: Wind,
    color: 'bg-orange-500',
    path: '/via-aerea',
    urgencia: 'critica' as const,
  },
  {
    id: 'anafilaxia',
    titulo: 'Anafilaxia',
    subtitulo: 'Reacción alérgica grave',
    icono: AlertTriangle,
    color: 'bg-purple-500',
    path: '/protocolo/anafilaxia',
    urgencia: 'alta' as const,
  },
  {
    id: 'sca',
    titulo: 'SCA',
    subtitulo: 'Síndrome Coronario Agudo',
    icono: Activity,
    color: 'bg-red-600',
    path: '/protocolo/sca',
    urgencia: 'critica' as const,
  },
  {
    id: 'ictus',
    titulo: 'Ictus',
    subtitulo: 'Accidente cerebrovascular',
    icono: Brain,
    color: 'bg-blue-500',
    path: '/ictus',
    urgencia: 'critica' as const,
  },
  {
    id: 'shock',
    titulo: 'Shock',
    subtitulo: 'Estado de shock',
    icono: Activity,
    color: 'bg-yellow-500',
    path: '/shock',
    urgencia: 'critica' as const,
  },
];

const Urgencias = () => {
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-foreground mb-1 flex items-center gap-2">
          <AlertTriangle className="w-6 h-6 text-red-500" />
          Urgencias
        </h1>
        <p className="text-muted-foreground text-sm">
          Protocolos críticos para situaciones de emergencia
        </p>
      </div>

      <div className="bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 rounded-lg p-4">
        <div className="flex items-start gap-3">
          <Clock className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
          <div className="text-sm text-red-800 dark:text-red-200">
            <p className="font-semibold mb-1">Tiempo crítico</p>
            <p>En emergencias, cada segundo cuenta. Acceso rápido a los protocolos más importantes.</p>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-2 gap-3">
        {protocolosUrgencia.map((protocolo) => (
          <Link
            key={protocolo.id}
            to={protocolo.path}
            className="group"
          >
            <div className="bg-card border rounded-xl p-4 h-full hover:shadow-md transition-all hover:border-primary/50">
              <div className="flex items-start gap-3">
                <div className={`${protocolo.color} p-2.5 rounded-lg text-white`}>
                  <protocolo.icono className="w-5 h-5" />
                </div>
                <div className="flex-1 min-w-0">
                  <h3 className="font-bold text-foreground truncate">
                    {protocolo.titulo}
                  </h3>
                  <p className="text-xs text-muted-foreground line-clamp-2">
                    {protocolo.subtitulo}
                  </p>
                </div>
                <ChevronRight className="w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors" />
              </div>
              {protocolo.urgencia === 'critica' && (
                <div className="mt-2">
                  <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400">
                    Crítico
                  </span>
                </div>
              )}
            </div>
          </Link>
        ))}
      </div>

      <div className="text-center">
        <Link
          to="/telefono"
          className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-primary"
        >
          ¿Necesitas guía transtelefónica?
          <ChevronRight className="w-4 h-4" />
        </Link>
      </div>
    </div>
  );
};

export default Urgencias;
