import { useState, useEffect } from 'react';
import yaml from 'js-yaml';

export interface Protocol {
  id: string;
  titulo: string;
  subtitulo?: string;
  categoria: string;
  urgencia: 'critica' | 'alta' | 'media' | 'baja';
  version: string;
  descripcion?: string; // Soportado por Estilo 2
  fuente?: string;
  actualizado?: string;
  alertas?: { tipo: 'warning' | 'danger' | 'info'; texto: string }[];
  grupos_edad?: { id: string; label: string; sublabel?: string }[];
  parametros_por_grupo?: Record<string, Record<string, string>>;
  pasos?: ProtocolStep[]; // Estilo 1
  fases?: ProtocolPhase[]; // Estilo 2
  farmacos?: Drug[];
  equipamiento?: string[];
}

export interface ProtocolPhase extends Omit<ProtocolStep, 'titulo'> {
  id: string | number;
  nombre: string; // En Estilo 2 se llama 'nombre' en vez de 'titulo'
  icono?: string;
  pregunta?: string; // Para tipo 'decision' en Estilo 2
  ramas?: { condicion: string; destino: string | number }[]; // Para tipo 'decision' en Estilo 2
}

export interface ProtocolStep {
  tipo: 'checklist' | 'decision' | 'tecnica' | 'info';
  titulo: string;
  descripcion?: string;
  items?: string[];
  urgencia?: 'critica';
  badge?: string;
  parametros?: { label: string; valor: string; destacado?: boolean }[];
  si?: string;
  no?: string;
  imagen?: string; // Ruta a imagen en public/media
  video?: string;  // Ruta a vídeo en public/media
}

export interface Drug {
  nombre: string;
  filas: { label: string; valor: string }[];
  formula?: string;
}

export function useProtocol(id: string) {
  const [protocol, setProtocol] = useState<Protocol | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const loadProtocol = async () => {
      setLoading(true);
      try {
        const response = await fetch(`/protocols/${id}.yaml`);
        
        if (!response.ok) {
          throw new Error(`Protocolo '${id}' no encontrado`);
        }
        
        const text = await response.text();
        const data = yaml.load(text) as Protocol;
        
        setProtocol(data);
        setError(null);
      } catch (err) {
        console.error('Error loading protocol:', err);
        setError(err instanceof Error ? err.message : 'Error cargando protocolo');
        setProtocol(null);
      } finally {
        setLoading(false);
      }
    };

    if (id) {
      loadProtocol();
    }
  }, [id]);

  return { protocol, loading, error };
}

export function useProtocolList() {
  const [list, setList] = useState<{ id: string; titulo: string; categoria: string; urgencia: string }[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Lista de protocolos disponibles
    const protocols = [
      { id: 'rcp-adulto', titulo: 'RCP Adulto', categoria: 'soporte-vital-basico', urgencia: 'critica' },
    ];
    
    setList(protocols);
    setLoading(false);
  }, []);

  return { list, loading };
}