Update js/proa.js

js/proa.js

@@ -1,12 +1,12 @@
-// js/proa.js - Lógica para el visor de Guías PROA (v6 - Basado en JSON y Dropdowns en Cascada)
+// js/proa.js - Lógica para el visor de Guías PROA (v6.1 - Dropdowns + Debugging)
 
 // ======================================================================
 // BLOCK START: DOM Elements Selection & Initial Setup
 // ======================================================================
-console.log("[proa.js v6] Script cargado. Esperando DOMContentLoaded...");
+console.log("[proa.js v6.1] Script cargado. Esperando DOMContentLoaded...");
 
 window.addEventListener('DOMContentLoaded', () => {
-  console.log("[proa.js v6] DOMContentLoaded detectado. Iniciando setup...");
+  console.log("[proa.js v6.1] DOMContentLoaded detectado. Iniciando setup...");
 
   // Selectores principales
   const categorySelector = document.getElementById('categorySelector');
@@ -15,14 +15,14 @@ window.addEventListener('DOMContentLoaded', () => {
   const guideContentDisplay = document.getElementById('guide-content-display');
   const togglePediatricCheckbox = document.getElementById('togglePediatric');
 
-  const guidesDataUrl = 'guides_data.json'; // Ruta al archivo JSON (en proa/)
+  const guidesDataUrl = 'guides_data.json'; // Asume que está en proa/
 
-  // Verificar elementos críticos
   if (!categorySelector || !guideSelector || !guideSelectorContainer || !guideContentDisplay || !togglePediatricCheckbox) {
-    console.error("[proa.js v6] Error Crítico: No se encontraron elementos DOM esenciales (selectores, contenedor o display).");
-    guideContentDisplay.innerHTML = '<p class="text-red-500 font-semibold text-center py-10">Error: No se pudo inicializar la interfaz.</p>';
+    console.error("[proa.js v6.1] Error Crítico: No se encontraron elementos DOM esenciales.");
+    guideContentDisplay.innerHTML = '<p class="text-red-500 font-semibold text-center py-10">Error: Interfaz no inicializada.</p>';
     return;
   }
+  console.log("[proa.js v6.1] Elementos DOM encontrados.");
   // ======================================================================
   // BLOCK END: DOM Elements Selection & Initial Setup
   // ======================================================================
@@ -30,9 +30,9 @@ window.addEventListener('DOMContentLoaded', () => {
   // ======================================================================
   // BLOCK START: State Variables
   // ======================================================================
-  let allGuides = []; // Datos del JSON
-  let currentGuideFile = null; // Nombre del archivo de la guía activa
-  let categories = []; // Lista única de categorías
+  let allGuides = []; 
+  let currentGuideFile = null;
+  let categories = []; 
   // ======================================================================
   // BLOCK END: State Variables
   // ======================================================================
@@ -41,9 +41,8 @@ window.addEventListener('DOMContentLoaded', () => {
   // BLOCK START: Function to Fetch Guides Data (from JSON)
   // ======================================================================
   async function loadGuidesData() {
-    console.log(`[proa.js v6] Cargando datos de guías desde: ${guidesDataUrl}`);
-    // Limpiar selectores y contenido
-    categorySelector.innerHTML = '<option value="">Cargando categorías...</option>';
+    console.log(`[proa.js v6.1] Iniciando loadGuidesData desde: ${guidesDataUrl}`);
+    categorySelector.innerHTML = '<option value="">Cargando...</option>';
     guideSelector.innerHTML = '<option value="">-- Seleccione Guía --</option>';
     guideSelectorContainer.classList.add('hidden');
     guideContentDisplay.innerHTML = '<div class="text-center py-16"><i class="fas fa-spinner fa-spin text-3xl text-gray-400"></i><p class="mt-2 text-gray-500">Cargando datos...</p></div>';
@@ -51,24 +50,41 @@ window.addEventListener('DOMContentLoaded', () => {
     categories = [];
 
     try {
-      const response = await fetch(guidesDataUrl);
-      if (!response.ok) throw new Error(`Error HTTP ${response.status} al cargar ${guidesDataUrl}`);
-      allGuides = await response.json();
-      if (!Array.isArray(allGuides)) throw new Error("JSON no es un array válido.");
+      console.log("[proa.js v6.1] Realizando fetch...");
+      const response = await fetch(guidesDataUrl); 
+      console.log(`[proa.js v6.1] Fetch completado. Status: ${response.status}`);
+      if (!response.ok) {
+         throw new Error(`Error HTTP ${response.status} al cargar ${guidesDataUrl}. ¿Existe el archivo en proa/ y es accesible?`);
+      }
+      
+      console.log("[proa.js v6.1] Parseando JSON...");
+      allGuides = await response.json(); 
+      console.log("[proa.js v6.1] JSON parseado.");
+
+      if (!Array.isArray(allGuides)) {
+          console.error("[proa.js v6.1] El contenido parseado no es un Array:", allGuides);
+          throw new Error("El archivo JSON no contiene un array válido.");
+       }
+       
+      // Filtrar por si alguna entrada no tiene los campos mínimos
       allGuides = allGuides.filter(g => g.id && g.title && g.category && g.file);
+      console.log(`[proa.js v6.1] Guías válidas filtradas: ${allGuides.length}`);
       
       // Extraer y ordenar categorías únicas
+      console.log("[proa.js v6.1] Extrayendo y ordenando categorías...");
       categories = [...new Set(allGuides.map(g => g.category))].sort();
+      console.log(`[proa.js v6.1] Categorías encontradas: ${categories.join(', ')}`);
       
-      console.log(`[proa.js v6] Datos JSON cargados (${allGuides.length} guías, ${categories.length} categorías).`);
-      
-      populateCategorySelector(); // Poblar el primer dropdown
-      resetToInitialState(); // Poner la UI en estado inicial limpio
+      console.log("[proa.js v6.1] Llamando a populateCategorySelector...");
+      populateCategorySelector(); 
+      console.log("[proa.js v6.1] Llamando a resetToInitialState...");
+      resetToInitialState(); 
+      console.log("[proa.js v6.1] Carga inicial completada con éxito.");
 
     } catch (error) {
-      console.error("[proa.js v6] Error fatal al cargar o parsear el JSON:", error);
-      categorySelector.innerHTML = '<option value="">Error al cargar</option>';
-      guideContentDisplay.innerHTML = `<p class="text-red-600 font-semibold text-center py-10">Error: ${error.message}.</p>`;
+      console.error("[proa.js v6.1] Error durante loadGuidesData:", error);
+      categorySelector.innerHTML = '<option value="">Error carga</option>';
+      guideContentDisplay.innerHTML = `<p class="text-red-600 font-semibold text-center py-10">Error al cargar datos: ${error.message}. Revisa la consola.</p>`;
     }
   }
   // ======================================================================
@@ -79,34 +95,175 @@ window.addEventListener('DOMContentLoaded', () => {
   // BLOCK START: UI Update Functions
   // ======================================================================
 
-  // Pone la UI en el estado inicial (sin selecciones)
   function resetToInitialState() {
-       categorySelector.value = "";
-       guideSelector.innerHTML = '<option value="">-- Seleccione Guía --</option>';
-       guideSelectorContainer.classList.add('hidden');
-       guideContentDisplay.innerHTML = '<div class="text-center py-16"><i class="fas fa-file-alt text-5xl text-gray-300 mb-4"></i><p class="text-gray-500">Selecciona una categoría y luego una guía específica.</p></div>';
-       currentGuideFile = null;
+       console.log("[proa.js v6.1] Reseteando a estado inicial.");
+       try {
+           categorySelector.value = "";
+           guideSelector.innerHTML = '<option value="">-- Seleccione Guía --</option>';
+           guideSelectorContainer.classList.add('hidden');
+           guideContentDisplay.innerHTML = '<div class="text-center py-16 text-gray-400"><i class="fas fa-file-alt text-5xl mb-4"></i><p>Selecciona una categoría y guía.</p></div>';
+           currentGuideFile = null;
+       } catch (e) {
+            console.error("[proa.js v6.1] Error en resetToInitialState:", e);
+       }
   }
 
-  // Llena el selector de categorías
   function populateCategorySelector() {
-      categorySelector.innerHTML = '<option value="">-- Seleccione Categoría --</option>'; // Opción por defecto
-      categories.forEach(category => {
-          const option = document.createElement('option');
-          option.value = category;
-          option.textContent = category;
-          categorySelector.appendChild(option);
-      });
-      console.log("[proa.js v6] Selector de categorías poblado.");
+      console.log("[proa.js v6.1] Poblando selector de categorías...");
+      try {
+          categorySelector.innerHTML = '<option value="">-- Seleccione Categoría --</option>'; 
+          if (categories.length === 0) {
+               console.warn("[proa.js v6.1] No hay categorías para poblar.");
+                categorySelector.innerHTML = '<option value="">No hay categorías</option>'; 
+               return;
+          }
+          categories.forEach(category => {
+              const option = document.createElement('option');
+              option.value = category;
+              option.textContent = category;
+              categorySelector.appendChild(option);
+          });
+          console.log("[proa.js v6.1] Selector de categorías poblado OK.");
+      } catch (e) {
+          console.error("[proa.js v6.1] Error en populateCategorySelector:", e);
+           categorySelector.innerHTML = '<option value="">Error</option>'; 
+      }
   }
 
-  // Llena el selector de guías específicas basado en la categoría y el filtro pediátrico
   function populateGuideSelector() {
       const selectedCategory = categorySelector.value;
       const showOnlyPediatric = togglePediatricCheckbox.checked;
-      guideSelector.innerHTML = '<option value="">-- Seleccione Guía --</option>'; // Resetear opciones
-      currentGuideFile = null; // Deseleccionar guía al cambiar categoría o filtro
+      console.log(`[proa.js v6.1] Poblando selector de guías para Categoría: '${selectedCategory}', Solo Pediátricas: ${showOnlyPediatric}`);
+      
+      try {
+          guideSelector.innerHTML = '<option value="">-- Seleccione Guía --</option>'; 
+          currentGuideFile = null; 
+
+          if (!selectedCategory) {
+              guideSelectorContainer.classList.add('hidden'); 
+              // No resetear contenido aquí, solo ocultar selector
+              console.log("[proa.js v6.1] No hay categoría seleccionada, ocultando selector de guías.");
+              return;
+          }
+
+          const guidesInCategory = allGuides.filter(guide => 
+              guide.category === selectedCategory && 
+              guide.isPediatric === showOnlyPediatric
+          );
+          
+          guidesInCategory.sort((a,b) => a.title.localeCompare(b.title)); 
+
+          if (guidesInCategory.length > 0) {
+              guidesInCategory.forEach(guide => {
+                  const option = document.createElement('option');
+                  option.value = guide.file; 
+                  option.textContent = guide.title;
+                  guideSelector.appendChild(option);
+              });
+              guideSelectorContainer.classList.remove('hidden'); 
+              console.log(`[proa.js v6.1] Selector de guías poblado con ${guidesInCategory.length} guías.`);
+              // Si el contenido estaba mostrando algo, lo limpiamos al cambiar las opciones de guía
+              if (guideContentDisplay.firstChild && !guideContentDisplay.firstChild.classList?.contains('text-gray-400')) {
+                   guideContentDisplay.innerHTML = '<div class="text-center py-16 text-gray-400"><i class="fas fa-hand-pointer text-5xl mb-4"></i><p>Selecciona una guía específica.</p></div>';
+              }
+          } else {
+              guideSelector.innerHTML = '<option value="">-- No hay guías --</option>'; 
+              guideSelectorContainer.classList.remove('hidden'); 
+               guideContentDisplay.innerHTML = `<div class="text-center py-16 text-gray-400"><i class="fas fa-info-circle text-5xl mb-4"></i><p>No hay guías ${showOnlyPediatric ? 'pediátricas' : 'de adultos'} para '${selectedCategory}'.</p></div>`;
+              console.log(`[proa.js v6.1] No se encontraron guías para los filtros actuales.`);
+          }
+       } catch (e) {
+            console.error("[proa.js v6.1] Error en populateGuideSelector:", e);
+             guideSelector.innerHTML = '<option value="">Error</option>'; 
+             guideSelectorContainer.classList.add('hidden');
+       }
+  }
+  // ======================================================================
+  // BLOCK END: UI Update Functions
+  // ======================================================================
+
+  // ======================================================================
+  // BLOCK START: Function to Load External Guide Content (Sin cambios v5->v6.1)
+  // ======================================================================
+  async function loadGuideContent(guideFileName) {
+    if (!guideFileName) { 
+         // Si se selecciona "-- Seleccione Guía --", limpiar contenido
+         guideContentDisplay.innerHTML = '<div class="text-center py-16 text-gray-400"><i class="fas fa-hand-pointer text-5xl mb-4"></i><p>Selecciona una guía específica.</p></div>';
+         currentGuideFile = null;
+         return;
+    }
+    console.log(`[proa.js v6.1] Solicitando contenido de: ${guideFileName}`);
+    guideContentDisplay.innerHTML = '<div class="text-center py-20"><i class="fas fa-spinner fa-spin text-3xl text-gray-400"></i><p class="mt-2 text-gray-500">Cargando contenido...</p></div>'; 
+    const guideUrl = guideFileName; 
+    currentGuideFile = guideFileName; 
+
+    try {
+      const response = await fetch(guideUrl); 
+      if (!response.ok) throw new Error(`Error HTTP ${response.status} al cargar ${guideUrl}`);
+      const htmlText = await response.text();
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(htmlText, 'text/html');
+      // Selector del contenido principal en las guías individuales
+      const contentNode = doc.querySelector('.max-w-4xl.mx-auto.px-4.py-8') || doc.body; 
+
+      if (contentNode) {
+        const clonedContent = contentNode.cloneNode(true);
+        const scripts = clonedContent.querySelectorAll('script');
+        scripts.forEach(script => script.remove());
+        if (scripts.length > 0) console.log(`[proa.js v6.1] Eliminados ${scripts.length} script(s) de ${guideFileName}.`);
+        
+        guideContentDisplay.innerHTML = ''; 
+        guideContentDisplay.appendChild(clonedContent); 
+        console.log(`[proa.js v6.1] Contenido de ${guideFileName} mostrado.`);
+        guideContentDisplay.scrollTop = 0; 
+
+      } else {
+         throw new Error(`No se encontró nodo de contenido en '${guideFileName}'.`);
+      }
+    } catch (error) {
+       console.error(`[proa.js v6.1] Error al cargar/mostrar ${guideFileName}:`, error);
+       guideContentDisplay.innerHTML = `<div class="text-center py-20 text-red-600">Error: ${error.message}</div>`;
+       currentGuideFile = null; 
+    }
+  }
+  // ======================================================================
+  // BLOCK END: Function to Load External Guide Content
+  // ======================================================================
+
+  // ======================================================================
+  // BLOCK START: Event Listeners Setup
+  // ======================================================================
+  categorySelector.addEventListener('change', () => {
+      console.log("[proa.js v6.1] Cambió la categoría.");
+      guideContentDisplay.innerHTML = ''; // Limpiar contenido
+      populateGuideSelector(); 
+  });
+
+  guideSelector.addEventListener('change', (event) => {
+       console.log("[proa.js v6.1] Cambió la guía específica.");
+      loadGuideContent(event.target.value); 
+  });
+
+  togglePediatricCheckbox.addEventListener('change', () => {
+      console.log('[proa.js v6.1] Cambiado filtro pediátrico.');
+      // Limpiar contenido y repoblar selector de guías (manteniendo categoría)
+      guideContentDisplay.innerHTML = ''; 
+      populateGuideSelector(); 
+  });
+  console.log("[proa.js v6.1] Listeners añadidos.");
+  // ======================================================================
+  // BLOCK END: Event Listeners Setup
+  // ======================================================================
+
+  // ======================================================================
+  // BLOCK START: Initial Execution
+  // ======================================================================
+  loadGuidesData(); // Cargar JSON e iniciar UI
+  console.log("[proa.js v6.1] Llamada inicial a loadGuidesData() realizada.");
+  // ======================================================================
+  // BLOCK END: Initial Execution
+  // ======================================================================
+
+}); // Fin DOMContentLoaded
 
-      if (!selectedCategory) {
-          guideSelectorContainer.classList.add('hidden'); // Ocultar si no hay categoría
-          resetToInitialState(); // Volver al mensaje
+console.log("[proa.js v6.1] Script completamente definido.");