Create proa.js

js/proa.js

@@ -0,0 +1,280 @@
+// js/proa.js - Lógica para el visor de Guías PROA
+
+// ======================================================================
+// BLOCK START: DOM Elements Selection & Initial Setup
+// ======================================================================
+console.log("[proa.js] 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...");
+
+  // 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 = 'index.html'; 
+
+  // 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
+  }
+  // ======================================================================
+  // BLOCK END: DOM Elements Selection & Initial Setup
+  // ======================================================================
+
+  // ======================================================================
+  // BLOCK START: State Variable
+  // ======================================================================
+  // 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 = []; 
+  // ======================================================================
+  // BLOCK END: State Variable
+  // ======================================================================
+
+  // ======================================================================
+  // BLOCK START: Function to Fetch and Parse Guide Index (Cargar Índice)
+  // ======================================================================
+  // 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>';
+    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)
+      if (!response.ok) {
+        throw new Error(`Error HTTP ${response.status} al cargar ${guideIndexUrl}: ${response.statusText}`);
+      }
+      
+      // 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);
+        }
+      });
+
+      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(); 
+
+    } 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>
+        <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>';
+    }
+  }
+  // ======================================================================
+  // BLOCK END: Function to Fetch and Parse Guide Index
+  // ======================================================================
+
+  // ======================================================================
+  // BLOCK START: Function to Render Guide List (Mostrar Lista en UI)
+  // ======================================================================
+  // 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
+    const showPediatric = togglePediatricCheckbox.checked;
+    console.log(`[proa.js] 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; 
+    });
+
+    // 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.");
+        return;
+    }
+
+    // Crear y añadir cada elemento de la lista al contenedor
+    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
+
+      // 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.textContent = 'PED';
+        listItem.appendChild(tag); // Añadir la etiqueta al final del texto del título
+      }
+
+      // 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
+      });
+
+      guideListContainer.appendChild(listItem); // Añadir el elemento creado al contenedor de la lista
+    });
+    console.log(`[proa.js] Lista renderizada con ${filteredGuides.length} guías.`);
+  }
+  // ======================================================================
+  // BLOCK END: Function to Render Guide List
+  // ======================================================================
+
+  // ======================================================================
+  // BLOCK START: Function to Load Guide Content (Cargar Contenido Guía)
+  // ======================================================================
+  // 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>'; 
+
+    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);
+      if (!response.ok) {
+        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...`);
+
+      // 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">
+      const contentNode = doc.querySelector('.max-w-4xl.mx-auto.px-4.py-8'); 
+
+      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í.
+        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.`);
+        }
+        
+        // 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.`);
+
+      } 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.");
+      }
+
+    } 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>`;
+    }
+  }
+  // ======================================================================
+  // BLOCK END: Function to Load 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 ...
+  // ======================================================================
+  // BLOCK END: Event Listeners Setup
+  // ======================================================================
+
+  // ======================================================================
+  // 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.");
+  // ======================================================================
+  // BLOCK END: Initial Execution
+  // ======================================================================
+
+}); // Fin del listener DOMContentLoaded
+
+console.log("[proa.js] Script completamente definido.");