Update js/proa.js

js/proa.js

@@ -1,265 +1,210 @@
-// js/proa.js - Lógica para el visor de Guías PROA
+// js/proa.js - Lógica para el visor de Guías PROA (v3 - Basado en JSON y Carga Externa)
 
 // ======================================================================
 // BLOCK START: DOM Elements Selection & Initial Setup
 // ======================================================================
-console.log("[proa.js] Script cargado. Esperando DOMContentLoaded...");
+console.log("[proa.js v3] Script cargado. Esperando DOMContentLoaded...");
 
-// Usamos DOMContentLoaded para asegurarnos que el HTML está completamente cargado y parseado
 window.addEventListener('DOMContentLoaded', () => {
-  console.log("[proa.js] DOMContentLoaded detectado. Iniciando setup...");
+  console.log("[proa.js v3] DOMContentLoaded detectado. Iniciando setup...");
 
-  // Seleccionar los elementos del DOM que necesitaremos manipular
-  const guideListContainer = document.getElementById('guide-list-container'); // Div donde irá la lista de guías
-  const guideContentArea = document.getElementById('guide-content-area');   // Div donde se mostrará el contenido de la guía
-  const togglePediatricCheckbox = document.getElementById('togglePediatric'); // Checkbox para filtrar guías pediátricas
-  
-  // URL del archivo que contiene el índice principal de las guías (el index.html con los enlaces a cada guía)
-  // Asegúrate de que este archivo esté en la raíz de tu proyecto en Hugging Face
-  const guideIndexUrl = 'proa_guide_index.html';
+  const guideIndexContainer = document.getElementById('guide-index-container'); // Div donde irá la lista dinámica
+  const guideContentDisplay = document.getElementById('guide-content-display'); // Div donde se mostrará el contenido
+  const togglePediatricCheckbox = document.getElementById('togglePediatric');   // Checkbox de filtro
 
-  // Verificación de que los elementos esenciales existen en proa.html
-  if (!guideListContainer || !guideContentArea || !togglePediatricCheckbox) {
-    console.error("[proa.js] Error Crítico: No se encontraron elementos esenciales del DOM (contenedor lista, área contenido o checkbox). Revisa proa.html.");
-    // Mostrar un error en la interfaz si falta algo
-    if(guideListContainer) guideListContainer.innerHTML = '<p class="text-red-500 font-semibold">Error: No se pudo inicializar la interfaz del visor de guías.</p>';
-    return; // Detener la ejecución del script si falta algo crítico
+  // --- Ruta al archivo JSON de datos ---
+  const guidesDataUrl = 'guides_data.json'; // Asume que está en la misma carpeta (proa/) que proa.html
+  // ------------------------------------
+
+  // Verificación de elementos
+  if (!guideIndexContainer || !guideContentDisplay || !togglePediatricCheckbox) {
+    console.error("[proa.js v3] Error Crítico: No se encontraron elementos DOM (contenedor índice, display o checkbox).");
+    if(guideIndexContainer) guideIndexContainer.innerHTML = '<p class="text-red-500 font-semibold">Error: Interfaz no inicializada.</p>';
+    return; 
   }
   // ======================================================================
   // BLOCK END: DOM Elements Selection & Initial Setup
   // ======================================================================
 
   // ======================================================================
-  // BLOCK START: State Variable
+  // BLOCK START: State Variables
   // ======================================================================
-  // Variable para almacenar los datos de todas las guías una vez cargados del índice
-  // Estructura: [{ title: "Nombre Guía", url: "archivo.html", isPediatric: true/false }, ...]
-  let allGuidesData = []; 
+  let allGuides = []; // Almacenará los datos del JSON: [{ id, title, isPediatric, file }, ...]
+  let currentGuideUrl = null; // Para saber qué guía está activa
   // ======================================================================
-  // BLOCK END: State Variable
+  // BLOCK END: State Variables
   // ======================================================================
 
   // ======================================================================
-  // BLOCK START: Function to Fetch and Parse Guide Index (Cargar Índice)
+  // BLOCK START: Function to Fetch Guides Data (from JSON)
   // ======================================================================
-  // Función asíncrona para cargar y procesar el archivo index.html de las guías
-  async function loadGuideIndex() {
-    console.log(`[proa.js] Cargando índice de guías desde: ${guideIndexUrl}`);
-    // Mostrar indicador de carga inicial en la lista
-    guideListContainer.innerHTML = '<p class="text-gray-500">Cargando lista de guías...</p>';
+  async function loadGuidesData() {
+    console.log(`[proa.js v3] Cargando datos de guías desde: ${guidesDataUrl}`);
+    guideIndexContainer.innerHTML = '<p class="text-gray-500 text-sm">Cargando guías...</p>';
+    allGuides = []; // Resetear
+
     try {
-      // Intentar obtener el contenido del archivo índice usando fetch
-      // NOTA: Requiere que la página se sirva desde un servidor (http:// o https://), 
-      // no funcionará correctamente si se abre como archivo local (file:///) por CORS.
-      const response = await fetch(guideIndexUrl); 
-      
-      // Verificar si la carga fue exitosa (status 200 OK)
+      const response = await fetch(guidesDataUrl); // Fetch al archivo JSON
       if (!response.ok) {
-        throw new Error(`Error HTTP ${response.status} al cargar ${guideIndexUrl}: ${response.statusText}`);
+        throw new Error(`Error HTTP ${response.status} al cargar ${guidesDataUrl}: ${response.statusText}`);
       }
+      allGuides = await response.json(); // Parsear la respuesta como JSON
       
-      // Obtener el contenido HTML como texto
-      const htmlText = await response.text();
-      console.log("[proa.js] Índice HTML cargado correctamente, iniciando parseo...");
-
-      // Usar DOMParser para convertir el texto HTML en un documento DOM manipulable
-      const parser = new DOMParser();
-      const doc = parser.parseFromString(htmlText, 'text/html');
-
-      // Buscar todos los enlaces ('a') que tengan la clase 'category-card' dentro del div con clase 'grid'
-      // (Basado en la estructura de tu archivo index.html de guías)
-      const guideLinks = doc.querySelectorAll('.grid a.category-card'); 
-      console.log(`[proa.js] Parseo completado. Encontrados ${guideLinks.length} enlaces de guías en el índice.`);
-
-      allGuidesData = []; // Limpiar datos previos por si se recarga
-
-      // Iterar sobre cada enlace encontrado para extraer la información
-      guideLinks.forEach((link, index) => {
-        const url = link.getAttribute('href'); // Obtener el archivo HTML de la guía (ej. "digestivo.html")
-        const titleElement = link.querySelector('.category-text'); // Elemento que contiene el título
-        
-        // Extraer el título base y verificar si tiene la etiqueta pediátrica
-        let title = 'Título Desconocido';
-        let isPediatric = false;
-        
-        if (titleElement) {
-             // Clonamos el nodo para poder manipularlo sin afectar al original durante el proceso
-             const titleClone = titleElement.cloneNode(true);
-             // Buscamos y eliminamos la etiqueta pediátrica si existe DENTRO del clon
-             const pediatricTag = titleClone.querySelector('.pediatric-tag');
-             if (pediatricTag) {
-                 isPediatric = true;
-                 pediatricTag.remove(); // Eliminar la etiqueta del clon para obtener solo el título base
-             }
-             title = titleClone.textContent.trim(); // Obtener el texto limpio
-        }
-
-        // Si tenemos URL y un título válido, guardar los datos
-        if (url && title !== 'Título Desconocido') {
-          allGuidesData.push({
-            title: title,         // Nombre limpio de la guía
-            url: url,             // Archivo HTML de la guía
-            isPediatric: isPediatric // Booleano indicando si es pediátrica
-          });
-        } else {
-            console.warn(`[proa.js] Enlace de guía #${index+1} omitido por falta de URL o título claro:`, link.outerHTML);
-        }
-      });
+      if (!Array.isArray(allGuides)) {
+           throw new Error("El archivo JSON no contiene un array válido.");
+      }
 
-      console.log("[proa.js] Datos de guías extraídos y almacenados:", allGuidesData);
-      
-      // Una vez extraídos los datos, llamar a la función para mostrar la lista en la UI
-      renderGuideList(); 
+      console.log(`[proa.js v3] Datos JSON cargados (${allGuides.length} guías).`);
+      renderGuideIndex(); // Renderizar el índice inicial
 
     } catch (error) {
-      // Manejo de errores durante la carga o el parseo
-      console.error("[proa.js] Error fatal al cargar o parsear el índice de guías:", error);
-      guideListContainer.innerHTML = `
-        <p class="text-red-600 font-semibold">Error al cargar lista de guías.</p>
+      console.error("[proa.js v3] Error fatal al cargar o parsear el JSON de guías:", error);
+      guideIndexContainer.innerHTML = `
+        <p class="text-red-600 font-semibold">Error al cargar datos.</p>
         <p class="text-sm text-gray-600 mt-1">Detalle: ${error.message}.</p>
-        <p class="text-xs text-gray-500 mt-2">Asegúrate de que el archivo '${guideIndexUrl}' exista en la raíz del proyecto y que la aplicación se ejecute desde un servidor web (Hugging Face o local), no como archivo local (file:///...).</p>`;
-      // Limpiar también el área de contenido en caso de error
-      guideContentArea.innerHTML = '<p class="text-gray-500 text-center mt-10">Error al cargar guías.</p>';
+        <p class="text-xs text-gray-500 mt-2">Verifica que '${guidesDataUrl}' exista en 'proa/' y sea un JSON válido.</p>`;
+      guideContentDisplay.innerHTML = '<p class="text-gray-500 text-center mt-10">Error al cargar datos de guías.</p>';
     }
   }
   // ======================================================================
-  // BLOCK END: Function to Fetch and Parse Guide Index
+  // BLOCK END: Function to Fetch Guides Data (from JSON)
   // ======================================================================
 
   // ======================================================================
-  // BLOCK START: Function to Render Guide List (Mostrar Lista en UI)
+  // BLOCK START: Function to Render Guide Index (from JSON data)
   // ======================================================================
-  // Función para generar el HTML de la lista de guías y mostrarlo
-  function renderGuideList() {
-    console.log("[proa.js] Renderizando lista de guías en la UI...");
-    guideListContainer.innerHTML = ''; // Limpiar el contenedor antes de añadir nuevos elementos
-    
-    // Verificar el estado del checkbox para saber si mostrar las guías pediátricas
+  function renderGuideIndex() {
+    console.log("[proa.js v3] Renderizando índice de guías...");
+    guideIndexContainer.innerHTML = ''; // Limpiar contenedor
     const showPediatric = togglePediatricCheckbox.checked;
-    console.log(`[proa.js] Filtro pediátrico activado: ${showPediatric}`);
+    console.log(`[proa.js v3] Filtro pediátrico activado: ${showPediatric}`);
 
-    // Filtrar la lista completa de guías según el estado del checkbox
-    const filteredGuides = allGuidesData.filter(guide => {
-      // Mantener la guía si NO es pediátrica, O si ES pediátrica Y el checkbox está marcado
-      return !guide.isPediatric || showPediatric; 
-    });
+    const filteredGuides = allGuides.filter(guide => !guide.isPediatric || showPediatric);
 
-    // Si no hay guías tras filtrar, mostrar un mensaje
     if (filteredGuides.length === 0) {
-        guideListContainer.innerHTML = '<p class="text-gray-500">No hay guías para mostrar.</p>';
-        console.log("[proa.js] No hay guías para mostrar con el filtro actual.");
+        guideIndexContainer.innerHTML = '<p class="text-gray-500 text-sm">No hay guías para mostrar.</p>';
         return;
     }
 
-    // Crear y añadir cada elemento de la lista al contenedor
+    // Crear elementos del índice
     filteredGuides.forEach(guide => {
-      const listItem = document.createElement('a'); // Usamos 'a' para que sea semánticamente un enlace/botón
-      listItem.href = '#'; // Usamos '#' para evitar navegación, el click lo maneja JS
-      listItem.className = 'guide-list-item block'; // Aplicar clases de estilo definidas en proa.html
-      listItem.dataset.url = guide.url; // Guardar la URL real en un atributo data-* para fácil acceso
-      listItem.textContent = guide.title; // Poner el título base como texto
+      const indexItem = document.createElement('a'); 
+      indexItem.href = '#'; 
+      indexItem.className = 'dynamic-guide-item block'; 
+      indexItem.dataset.file = guide.file; // Guardar el nombre del archivo HTML
+      indexItem.dataset.id = guide.id;     // Guardar el ID por si acaso
+      indexItem.textContent = guide.title;
+
+      // Marcar el item activo si es el que está cargado
+      if (guide.file === currentGuideUrl) {
+           indexItem.classList.add('active');
+      }
 
-      // Si la guía es pediátrica, añadir la clase y la etiqueta visual
       if (guide.isPediatric) {
-        listItem.classList.add('pediatric'); // Clase para posible estilo específico
         const tag = document.createElement('span');
-        tag.className = 'pediatric-tag-inline'; // Clase para la etiqueta "PED"
+        tag.className = 'pediatric-tag-inline'; 
         tag.textContent = 'PED';
-        listItem.appendChild(tag); // Añadir la etiqueta al final del texto del título
+        indexItem.appendChild(tag); 
       }
 
-      // Añadir el listener para que al hacer clic se cargue el contenido de esta guía
-      listItem.addEventListener('click', (event) => {
-        event.preventDefault(); // Prevenir el comportamiento por defecto del enlace '#'
-        console.log(`[proa.js] Clic en guía: ${guide.title} (${guide.url})`);
-        loadGuideContent(guide.url); // Llamar a la función que carga el contenido
+      // Listener para cargar contenido
+      indexItem.addEventListener('click', (event) => {
+        event.preventDefault(); 
+        console.log(`[proa.js v3] Clic en guía: ${guide.title} (Archivo: ${guide.file})`);
+        // Desmarcar el item activo anterior
+        const currentActive = guideIndexContainer.querySelector('.dynamic-guide-item.active');
+        if(currentActive) currentActive.classList.remove('active');
+        // Marcar este como activo
+        indexItem.classList.add('active');
+        currentGuideUrl = guide.file; // Guardar URL actual
+        loadGuideContent(guide.file); 
       });
 
-      guideListContainer.appendChild(listItem); // Añadir el elemento creado al contenedor de la lista
+      guideIndexContainer.appendChild(indexItem); 
     });
-    console.log(`[proa.js] Lista renderizada con ${filteredGuides.length} guías.`);
+    console.log(`[proa.js v3] Índice renderizado con ${filteredGuides.length} guías.`);
   }
   // ======================================================================
-  // BLOCK END: Function to Render Guide List
+  // BLOCK END: Function to Render Guide Index
   // ======================================================================
 
   // ======================================================================
-  // BLOCK START: Function to Load Guide Content (Cargar Contenido Guía)
+  // BLOCK START: Function to Load External Guide Content (Similar a v1)
   // ======================================================================
-  // Función asíncrona para cargar el contenido HTML de una guía específica
-  async function loadGuideContent(guideUrl) {
-    console.log(`[proa.js] Solicitando contenido de la guía: ${guideUrl}`);
-    // Mostrar indicador de carga en el área de contenido
-    guideContentArea.innerHTML = '<p class="text-gray-500 text-center mt-10"><i class="fas fa-spinner fa-spin mr-2"></i>Cargando contenido de la guía...</p>'; 
+  async function loadGuideContent(guideFileName) {
+    console.log(`[proa.js v3] 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>'; 
+    
+    // Asumimos que el archivo está en la misma carpeta 'proa/' que 'proa.html'
+    const guideUrl = guideFileName; // El path es relativo a proa.html
 
     try {
-      // Intentar obtener el contenido del archivo HTML de la guía específica
-      // NOTA: También requiere ejecución desde servidor (http:// o https://) por CORS.
-      const response = await fetch(guideUrl);
+      const response = await fetch(guideUrl); 
       if (!response.ok) {
-        throw new Error(`Error HTTP ${response.status} al cargar ${guideUrl}: ${response.statusText}`);
+           // Intenta cargar sin la extensión por si acaso el JSON la tenía por error
+           if (guideUrl.endsWith('.html')) {
+               const urlWithoutExt = guideUrl.replace('.html', '');
+               console.warn(`[proa.js v3] Fallo al cargar ${guideUrl}, intentando sin extensión: ${urlWithoutExt}`);
+               return loadGuideContent(urlWithoutExt); // Llama recursivamente
+           }
+           throw new Error(`Error HTTP ${response.status} al cargar ${guideUrl}: ${response.statusText}`);
       }
-      
-      // Obtener el contenido HTML como texto
       const htmlText = await response.text();
-      console.log(`[proa.js] Contenido HTML de ${guideUrl} cargado, extrayendo sección relevante...`);
+      console.log(`[proa.js v3] Contenido HTML de ${guideFileName} cargado.`);
 
-      // Parsear el HTML de la guía
       const parser = new DOMParser();
       const doc = parser.parseFromString(htmlText, 'text/html');
 
-      // Extraer el nodo de contenido principal. ¡Este selector es CRUCIAL!
-      // Debe coincidir con el contenedor principal en TODOS tus archivos HTML de guías.
-      // Basado en tus archivos, parece ser: <div class="max-w-4xl mx-auto px-4 py-8">
+      // Selector para el contenido principal dentro de CADA archivo de guía individual
+      // ¡¡ASEGÚRATE que este selector sea correcto para TUS archivos de guías!!
       const contentNode = doc.querySelector('.max-w-4xl.mx-auto.px-4.py-8'); 
+      // Alternativa si no es ese: const contentNode = doc.body; (Carga todo el body)
 
       if (contentNode) {
-        // Clonamos el nodo para asegurar que no modificamos el documento parseado original
         const clonedContent = contentNode.cloneNode(true);
-
-        // **Importante:** Eliminar los scripts internos de las guías cargadas.
-        // Tus guías tienen un script al final para manejar su propio selector interno.
-        // Si no lo eliminamos, podría interferir o dar errores al cargarlo aquí.
+        // Eliminar scripts internos de las guías individuales
         const scripts = clonedContent.querySelectorAll('script');
         scripts.forEach(script => script.remove());
-        if (scripts.length > 0) {
-            console.log(`[proa.js] Eliminados ${scripts.length} script(s) internos de la guía cargada.`);
-        }
+        if (scripts.length > 0) console.log(`[proa.js v3] Eliminados ${scripts.length} script(s) de ${guideFileName}.`);
         
-        // Limpiar el área de contenido y añadir el contenido extraído de la guía
-        guideContentArea.innerHTML = '';
-        guideContentArea.appendChild(clonedContent);
-        console.log(`[proa.js] Contenido de ${guideUrl} mostrado correctamente.`);
+        guideContentDisplay.innerHTML = ''; // Limpiar área
+        guideContentDisplay.appendChild(clonedContent); // Añadir contenido clonado
+        console.log(`[proa.js v3] Contenido de ${guideFileName} mostrado.`);
+        guideContentDisplay.scrollTop = 0; // Scroll al inicio del contenido
 
       } else {
-        // Error si no se encuentra el contenedor esperado dentro del HTML de la guía
-        console.error(`[proa.js] No se pudo encontrar el nodo de contenido principal (selector: '.max-w-4xl.mx-auto.px-4.py-8') en ${guideUrl}`);
-        throw new Error("Estructura interna del archivo de guía no reconocida.");
+         console.error(`[proa.js v3] No se pudo encontrar el nodo de contenido principal en ${guideFileName} usando el selector.`);
+         throw new Error(`Estructura interna de '${guideFileName}' no reconocida.`);
       }
 
     } catch (error) {
-       // Manejo de errores al cargar o procesar el contenido de la guía
-       console.error(`[proa.js] Error al cargar o mostrar el contenido de ${guideUrl}:`, error);
-       guideContentArea.innerHTML = `
-        <p class="text-red-600 font-semibold text-center mt-10">Error al cargar el contenido de la guía.</p>
-        <p class="text-sm text-gray-600 mt-1 text-center">Detalle: ${error.message}.</p>
-        <p class="text-xs text-gray-500 mt-2 text-center">Verifica que el archivo '${guideUrl}' exista y que la aplicación se ejecute desde un servidor web.</p>`;
+       console.error(`[proa.js v3] Error al cargar/mostrar ${guideFileName}:`, error);
+       guideContentDisplay.innerHTML = `
+        <div class="text-center py-20 bg-red-50 p-4 rounded border border-red-200">
+           <i class="fas fa-exclamation-triangle text-4xl text-red-400 mb-4"></i>
+           <p class="text-red-700 font-semibold">Error al cargar contenido.</p>
+           <p class="text-sm text-gray-600 mt-1">Detalle: ${error.message}.</p>
+           <p class="text-xs text-gray-500 mt-2">Verifica que el archivo '${guideFileName}' exista en 'proa/' y revisa la consola.</p>
+        </div>`;
+        currentGuideUrl = null; // Resetear URL actual en caso de error
+        // Desmarcar item activo en la lista si hubo error
+         const currentActive = guideIndexContainer.querySelector('.dynamic-guide-item.active');
+         if(currentActive) currentActive.classList.remove('active');
     }
   }
   // ======================================================================
-  // BLOCK END: Function to Load Guide Content
+  // BLOCK END: Function to Load External Guide Content
   // ======================================================================
 
   // ======================================================================
   // BLOCK START: Event Listeners Setup
   // ======================================================================
-  // Añadir listener al checkbox de filtro pediátrico.
-  // Cada vez que cambie su estado (marcado/desmarcado), volver a renderizar la lista.
-  togglePediatricCheckbox.addEventListener('change', renderGuideList);
-  console.log("[proa.js] Listener añadido al checkbox pediátrico.");
-
-  // (Opcional: Añadir aquí listeners para el botón de Configuración IA si se activa en proa.html)
-  // const btnConfigProa = document.getElementById('btnConfigProa'); ... etc ...
+  togglePediatricCheckbox.addEventListener('change', () => {
+      // Al cambiar el filtro, simplemente re-renderizar el índice
+      // No limpiamos el contenido mostrado, podría ser confuso
+      renderGuideIndex(); 
+  });
+  console.log("[proa.js v3] Listener añadido al checkbox pediátrico.");
   // ======================================================================
   // BLOCK END: Event Listeners Setup
   // ======================================================================
@@ -267,14 +212,12 @@ window.addEventListener('DOMContentLoaded', () => {
   // ======================================================================
   // BLOCK START: Initial Execution
   // ======================================================================
-  // Llamar a la función para cargar el índice de guías tan pronto como el DOM esté listo.
-  // Esto iniciará todo el proceso.
-  loadGuideIndex(); 
-  console.log("[proa.js] Llamada inicial a loadGuideIndex() realizada.");
+  loadGuidesData(); // Cargar los datos del JSON e iniciar la UI
+  console.log("[proa.js v3] Llamada inicial a loadGuidesData() realizada.");
   // ======================================================================
   // BLOCK END: Initial Execution
   // ======================================================================
 
-}); // Fin del listener DOMContentLoaded
+}); // Fin DOMContentLoaded
 
-console.log("[proa.js] Script completamente definido.");
+console.log("[proa.js v3] Script completamente definido.");