import React from 'react';
import ReactMarkdown from 'react-markdown';

// In a real implementation, we would fetch these from a CMS or file system
// For now, we'll simulate with mock data

interface ProtocolViewerProps {
  protocolId: string;
}

const ProtocolViewer = ({ protocolId }: ProtocolViewerProps) => {
  // Mock protocol data - in reality this would come from MDX files or CMS
  const mockProtocols: Record<string, any> = {
    'rcp-telephone-adult': {
      title: 'RCP Transtelefónica - Adultos',
      shortTitle: 'RCP Adulto',
      category: 'rcp',
      ageGroup: 'adulto',
      description: 'Guía paso a paso para que un testigo realice RCP en un adulto mientras llega la ambulancia.',
      source: 'BLOQUE_04_1_RCP_ADULTOS.md',
      content: `
## Evaluación Inicial

1. ¿Está la persona consciente? ¿Responde si le habla o le toca?
2. ¿Está respirando normalmente? (No cuente boqueadas o respiraciones muy lentas)
3. ¿Es seguro acercarse? (No hay riesgo de tráfico, electricidad, fuego, violencia)

## Pasos

### 1. Activar Emergencias
**Instrucción:** Primero, active el servicio de emergencias. ¿Ya ha llamado al 112?
**Verificación:** Confirme que ha llamado al 112 o que alguien más lo está haciendo
**Notas:** Si no ha llamado, guíe para que llame primero o que otra persona llame
**Crítico:** Sí

### 2. Colocar en Superficie Firme
**Instrucción:** Coloque a la persona boca arriba sobre una superficie firme y plana, como el suelo.
**Verificación:** ¿Está la persona boca arriba sobre una superficie firme?
**Crítico:** Sí
      `
    },
    'anafilaxia-protocol': {
      title: 'Protocolo de Anafilaxia',
      shortTitle: 'Anafilaxia',
      category: 'sca',
      ageGroup: 'todos',
      description: 'Manejo inmediato de la anafilaxia y reacción alérgica grave.',
      source: 'Guía de Anafilaxia',
      content: `
## Evaluación Inicial

1. ¿Hay exposición conocida a alérgenos? (Comida, medicación, picaduras)
2. ¿Síntomas cutáneos? (Urticaria, rubor, picor)
3. ¿Síntomas respiratorios? (Disnea, sibilancias, estridor)
4. ¿Síntomas gastrointestinales? (Náuseas, vómitos, dolor abdominal)
5. ¿Hipotensión o síntomas de shock? (Mareo, pérdida de conciencia)

## Pasos

### 1. Seguridad y Activación
**Instrucción:** Asegure la vía aérea y active el servicio de emergencias (112) inmediatamente si hay compromiso respiratorio o cardiovascular.
**Verificación:** ¿Ha activado el 112? ¿Está la vía aérea segura?
**Crítico:** Sí

### 2. Administración de Epinefrina (Adrenalina)
**Instrucción:** Administre epinefrina intramuscular 0.3-0.5 mg (1:1000) en el muslo lateral. Repetir cada 5-15 minutos si no hay mejora.
**Verificación:** ¿Se ha administrado epinefrina? ¿Dosis correcta en muslo?
**Notas:** No retrasar la administración. Es el tratamiento de primera línea.
**Crítico:** Sí

### 3. Posicionamiento
**Instrucción:** Coloque al paciente en posición de decúbito supino con elevación de piernas si hay hipotensión. Si hay dificultad respiratoria, permitir posición semisentada.
**Verificación:** ¿Está en posición adecuada según síntomas?
**Crítico:** Sí

### 4. Oxigeno
**Instrucción:** Administrar oxígeno suplementario a alto flujo si hay hipoxia o dificultad respiratoria.
**Verificación:** ¿Saturación de oxígeno >94%?
**Crítico:** No

### 5. Vía Venosa
**Instrucción:** Canular vena periférica y administrar líquidos isotónicos (suero salino o Ringer lactato) si hay hipotensión.
**Verificación:** ¿Vía venosa permeable? ¿Fluidos administrados?
**Crítico:** Sí (si hipotensión)

## Notas Importantes

- La epinefrina es el tratamiento clave: no retrasar.
- Monitorear constantemente: signos vitales, saturación, conciencia.
- Prepararse para reacción bifásica (recurrencia de síntomas horas después).
- derivación a urgencias siempre que se administre epinefrina.
      `
    }
  };

  const protocol = mockProtocols[protocolId];

  if (!protocol) {
    return (
      <div className="p-6 bg-red-50 border border-red-200 rounded-lg">
        <h2 className="text-red-800 font-semibold mb-4">Protocolo no encontrado</h2>
        <p className="text-red-600">El protocolo con ID '{protocolId}' no está disponible.</p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between border-b pb-2">
        <div>
          <h1 className="text-2xl font-bold">{protocol.title}</h1>
          <p className="text-sm text-muted-foreground">
            {protocol.shortTitle} • {protocol.category} • {protocol.ageGroup}
          </p>
        </div>
        <div className="flex items-center gap-2">
          <span className="px-2 py-0.5 rounded bg-primary/20 text-primary">
            Fuente: {protocol.source}
          </span>
        </div>
      </div>
      
      <div className="prose prose-sm max-w-none">
        <p>{protocol.description}</p>
      </div>
      
      <div className="border-t pt-4">
        <ReactMarkdown className="prose prose-sm max-w-none">
          {protocol.content}
        </ReactMarkdown>
      </div>
    </div>
  );
};

export default ProtocolViewer;