import { Link } from 'react-router-dom';
import {
  Zap,
  AlertTriangle,
  ChevronRight,
  Droplet,
  BookOpen,
  Cloud,
} from 'lucide-react';

// Simplified components
const BackButton = ({ to, label }: { to: string; label: string }) => (
  <Link to={to} className="flex items-center gap-3 p-4 bg-card border border-border rounded-xl hover:border-primary/50 transition-colors">
    <AlertTriangle className="w-5 h-5" />
    <span>{label}</span>
  </Link>
);

// Mock shock protocol data
interface ShockStep {
  id: string;
  instruction: string;
}

interface ShockProtocol {
  id: string;
  title: string;
  category: string;
  description: string;
  steps: ShockStep[];
  warnings?: string[];
  keyPoints?: string[];
  equipment?: string[];
  drugs?: string[];
}

const mockShockProtocol: ShockProtocol = {
  id: 'shock-hemorragico',
  title: 'Shock Hemorrágico',
  category: 'shock',
  description: 'Protocolo de manejo del shock por pérdida de sangre.',
  steps: [
    'Reconocer signos de shock: piel pálida, fría y húmeda; taquicardia; hipotensión; oliguria.',
    'Controlar la hemorragia externa aplicando presión directa sobre la herida.',
    'Colocar al paciente en posición supina con piernas elevadas (posición de Trendelenburg) si no hay lesión de columna.',
    'Administrar oxígeno suplementario para mantener saturación >94%.',
    'Iniciar acceso venoso periférico de gran calibre (14-16G) o acceso intraóseo si no se logra venoso.',
    'Iniciar reposición volémica con cristaloides isotónicos (solución salina 0.9% o lactato de Ringer).',
    'Monitorizar constantes vitales, diuresis y nivel de conciencia continuamente.',
    'Considerar uso de fármacos vasopresores si la presión arterial no responde a reposición de volúmenes.',
    'Preparar traslado urgente a centro con capacidad quirúrgica y de transfusión.',
    'Documentar todo el proceso clínico y terapéutico para traspaso al equipo receptor.',
  ],
  warnings: [
    'No retrasar el traslado definitivo a centro quirúrgico para realizar estudios complementarios en el lugar.',
    'Evitar la sobrecarga volémica en pacientes con insuficiencia cardíaca conocida.',
    'En embarazadas, considerar displacemiento uterino lateral para evitar síndrome de hipotensión de decúbito supino.',
    'Monitorizar signos de síndrome de compartimento en extremidades con vendajes compressive o fracturas.',
  ],
  keyPoints: [
    'El control temprano de la hemorragia es el factor más determinante para la supervivencia.',
    'La hipotensión permisiva (PA 80-90 mmHg) puede ser beneficiosa en algunos casos de shock hemorrágico sin TCE.',
    'Cada minuto de retraso en el control quirúrgico aumenta la mortalidad en aproximadamente 1%.',
    'La temperatura corporal debe mantenerse >36°C para evitar coagulopatía por hipotermia.',
  ],
  equipment: [
    'Guantes de protección',
    'Mascarilla y protección ocular',
    'Juego de curas estéril para heridas abiertas',
    'Solución salina 0.9% o lactato de Ringer',
    'Catéteres venosos periféricos de 14-16G',
    'Set de administración de fluidos',
    'Monitor de signos vitales',
    'Oxígeno suplementario con mascarilla',
  ],
  drugs: [
    'Ácido tranexámico (1g IV bolus, luego 1g en 8h si indicado)',
    'Oximetazolina tópica para hemorragia nasal (si aplica)',
    'Vasopresores (noradrenalina, adrenalina) si shock refractario a fluidos',
  ],
};

const Shock = () => {
  const [isChecklistMode, setIsChecklistMode] = useState(false);
  const [checkedItems, setCheckedItems] = useState<Set<number>>(new Set());

  const handleToggleChecklist = () => {
    setIsChecklistMode(!isChecklistMode);
    if (!isChecklistMode) {
      setCheckedItems(new Set());
    }
  };

  const handleStepToggle = (index: number) => {
    const newChecked = new Set(checkedItems);
    if (newChecked.has(index)) {
      newChecked.delete(index);
    } else {
      newChecked.add(index);
    }
    setCheckedItems(newChecked);
  };

  return (
    <div className="space-y-6">
      <BackButton to="/" label="Volver al inicio" />

      {/* Header */}
      <div className="space-y-4">
        <div className="flex items-center gap-3">
          <div className="w-12 h-12 rounded-xl bg-yellow-500/20 flex items-center justify-center">
            <Zap className="w-7 h-7 text-yellow-500" />
          </div>
          <div className="flex-1">
            <div className="flex items-center gap-2">
              <h1 className="text-3xl font-bold text-foreground">Shock Hemorrágico</h1>
              <span className="inline-flex items-center gap-1 px-2 py-1 text-xs bg-blue-500/10 text-blue-500 border border-blue-500/20 rounded-md">
                <Cloud className="w-3 h-3" />
                Externo
              </span>
            </div>
            <p className="text-muted-foreground">Protocolo de manejo del shock por pérdida de sangre</p>
          </div>
        </div>
      </div>

      {/* Clasificación */}
      <div className="bg-card border border-border rounded-xl p-6 space-y-4">
        <h2 className="text-xl font-semibold text-foreground">Clasificación del Shock Hemorrágico</h2>
        
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div className="bg-green-500/10 border border-green-500/30 rounded-lg p-4">
            <div className="font-bold text-green-600 dark:text-green-400 mb-2">Clase I</div>
            <div className="text-sm text-muted-foreground space-y-1">
              <div>Pérdida: &lt;15%</div>
              <div>FC: Normal</div>
              <div>TA: Normal</div>
              <div>Signos: Mínimos</div>
            </div>
          </div>
          <div className="bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-4">
            <div className="font-bold text-yellow-600 dark:text-yellow-400 mb-2">Clase II</div>
            <div className="text-sm text-muted-foreground space-y-1">
              <div>Pérdida: 15-30%</div>
              <div>FC: ↑ Taquicardia</div>
              <div>TA: Normal</div>
              <div>Signos: Ansiedad</div>
            </div>
          </div>
          <div className="bg-orange-500/10 border border-orange-500/30 rounded-lg p-4">
            <div className="font-bold text-orange-600 dark:text-orange-400 mb-2">Clase III</div>
            <div className="text-sm text-muted-foreground space-y-1">
              <div>Pérdida: 30-40%</div>
              <div>FC: ↑↑ Taquicardia</div>
              <div>TA: ↓ Hipotensión</div>
              <div>Signos: Confusión</div>
            </div>
          </div>
          <div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4">
            <div className="font-bold text-red-600 dark:text-red-400 mb-2">Clase IV</div>
            <div className="text-sm text-muted-foreground space-y-1">
              <div>Pérdida: &gt;40%</div>
              <div>FC: ↓ Bradicardia</div>
              <div>TA: ↓↓ Severa</div>
              <div>Signos: Letargo</div>
            </div>
          </div>
        </div>
      </div>

      {/* Protocolo */}
      <div className="bg-card border border-border rounded-xl p-6 space-y-4">
        <div className="flex items-center justify-between">
          <h2 className="text-xl font-semibold text-foreground">Protocolo de Actuación</h2>
          <span className="px-3 py-1 bg-red-500/20 text-red-600 dark:text-red-400 rounded-full text-xs font-medium">
            Crítico
          </span>
        </div>

        {/* Puentes Formativos - Fase B2 - Enlaces Bidireccionales */}
        <div className="flex flex-col sm:flex-row gap-2 pt-2 border-t border-border">
          <Link
            to="/manual"
            className="flex items-center justify-center gap-2 px-4 py-2.5 bg-purple-500/10 hover:bg-purple-500/20 border border-purple-500/30 rounded-lg text-purple-600 dark:text-purple-400 transition-colors font-medium text-sm"
          >
            <BookOpen className="w-4 h-4" />
            <span>📘 Ver Manual Completo</span>
          </Link>
        </div>

        <div className="space-y-4">
          <div>
            <h3 className="font-semibold text-foreground mb-2 flex items-center gap-2">
              <AlertTriangle className="w-4 h-4 text-yellow-500" />
              Pasos del Protocolo
            </h3>
            <ol className="space-y-2 list-decimal list-inside">
              {mockShockProtocol.steps.map((step, index) => (
                <li key={index} className="text-foreground pl-2">
                  {step.instruction}
                </li>
              ))}
            </ol>
          </div>

          {/* Advertencias */}
          {mockShockProtocol.warnings && mockShockProtocol.warnings.length > 0 && (
            <div>
              <h3 className="font-semibold text-foreground mb-2">Advertencias Importantes</h3>
              <ul className="space-y-1">
                {mockShockProtocol.warnings.map((warning, index) => (
                  <li key={index} className="text-sm text-muted-foreground flex items-start gap-2">
                    <span className="text-orange-500 mt-1">•</span>
                    <span>{warning}</span>
                  </li>
                ))}
              </ul>
            </div>
          )}

          {/* Key Points */}
          {mockShockProtocol.keyPoints && mockShockProtocol.keyPoints.length > 0 && (
            <div>
              <h3 className="font-semibold text-foreground mb-2">Puntos Clave</h3>
              <ul className="space-y-1">
                {mockShockProtocol.keyPoints.map((point, index) => (
                  <li key={index} className="text-sm text-muted-foreground flex items-start gap-2">
                    <span className="text-primary mt-1">✓</span>
                    <span>{point}</span>
                  </li>
                ))}
              </ul>
            </div>
          )}

          {/* Equipment */}
          {mockShockProtocol.equipment && mockShockProtocol.equipment.length > 0 && (
            <div>
              <h3 className="font-semibold text-foreground mb-2">Material Necesario</h3>
              <div className="flex flex-wrap gap-2">
                {mockShockProtocol.equipment.map((item, index) => (
                  <span
                    key={index}
                    className="px-3 py-1 bg-muted rounded-full text-sm text-foreground"
                  >
                    {item}
                  </span>
                ))}
              </div>
            </div>
          )}

          {/* Drugs */}
          {mockShockProtocol.drugs && mockShockProtocol.drugs.length > 0 && (
            <div>
              <h3 className="font-semibold text-foreground mb-2">Fármacos</h3>
              <div className="flex flex-wrap gap-2">
                {mockShockProtocol.drugs.map((drug, index) => (
                  <span
                    key={index}
                    className="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm"
                  >
                    {drug}
                  </span>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Hipotensión Permisiva */}
      <div className="bg-blue-500/10 border border-blue-500/30 rounded-xl p-6 space-y-3">
        <h3 className="font-semibold text-blue-600 dark:text-blue-400 flex items-center gap-2">
          <AlertTriangle className="w-5 h-5" />
          Hipotensión Permisiva
        </h3>
        <p className="text-sm text-muted-foreground">
          En shock hemorrágico sin trauma craneoencefálico (TCE), mantener TAS objetivo de 80-90 mmHg
          hasta control quirúrgico de la hemorragia. Esto reduce la pérdida de sangre y mejora la supervivencia.
        </p>
        <p className="text-sm text-muted-foreground font-semibold">
          ⚠️ EXCEPCIÓN: En TCE, mantener TAS &gt;90 mmHg para preservar perfusión cerebral.
        </p>
      </div>

      {/* Enlaces relacionados */}
      <div className="bg-muted/50 border border-border rounded-xl p-4">
        <h3 className="font-semibold text-foreground mb-3">Protocolos Relacionados</h3>
        <div className="space-y-2">
          <Link
            to="/soporte-vital"
            className="flex items-center justify-between p-3 bg-card rounded-lg hover:bg-accent transition-colors"
          >
            <span className="text-foreground">Ver todos los protocolos de Soporte Vital</span>
            <ChevronRight className="w-5 h-5 text-muted-foreground" />
          </Link>
          <Link
            to="/farmacos"
            className="flex items-center justify-between p-3 bg-card rounded-lg hover:bg-accent transition-colors"
          >
            <span className="text-foreground">Fármacos: Ácido Tranexámico</span>
            <ChevronRight className="w-5 h-5 text-muted-foreground" />
          </Link>
        </div>
      </div>
    </div>
  );
};

export default Shock;