// frontend/public/bootstrap.js

(function () {
  // El dominio donde se alojan los widgets
  const WIDGETS_HOST = 'https://elecciones2025.eldia.com';

  // Función para cargar dinámicamente un script
  function loadScript(src) {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.type = 'module';
      script.src = src;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }

  // Función para cargar dinámicamente una hoja de estilos
  function loadCSS(href) {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = href;
    document.head.appendChild(link);
  }

  // Función principal
  async function initWidgets() {
    try {
      // 1. Obtener el manifest.json para saber los nombres de archivo actuales
      const response = await fetch(`${WIDGETS_HOST}/manifest.json`);
      if (!response.ok) {
        throw new Error('No se pudo cargar el manifest de los widgets.');
      }
      const manifest = await response.json();

      // 2. Encontrar el punto de entrada principal (nuestro main.tsx)
      const entryKey = Object.keys(manifest).find(key => manifest[key].isEntry);
      if (!entryKey) {
        throw new Error('No se encontró el punto de entrada en el manifest.');
      }

      const entry = manifest[entryKey];
      const jsUrl = `${WIDGETS_HOST}/${entry.file}`;

      // 3. Cargar el CSS si existe
      if (entry.css && entry.css.length > 0) {
        entry.css.forEach(cssFile => {
          const cssUrl = `${WIDGETS_HOST}/${cssFile}`;
          loadCSS(cssUrl);
        });
      }

      // 4. Cargar el JS principal y esperar a que esté listo
      await loadScript(jsUrl);

      console.log('Bootstrap: Intentando llamar a render...');
      if (window.EleccionesWidgets && typeof window.EleccionesWidgets.render === 'function') {
        console.log('Bootstrap: La función render existe. Llamando ahora.');
        window.EleccionesWidgets.render();
      } else {
        console.error('Bootstrap: La función render no se encontró en window.EleccionesWidgets.');
      }

      // 5. Una vez cargado, llamar a la función de renderizado
      if (window.EleccionesWidgets && typeof window.EleccionesWidgets.render === 'function') {
        console.log('Bootstrap: La función render existe. Llamando ahora.');
        // Encontramos los contenedores aquí y pasamos sus props.
        const widgetContainers = document.querySelectorAll('[data-elecciones-widget]');
        widgetContainers.forEach(container => {
          // 'dataset' es un objeto que contiene todos los atributos data-*
          // container.dataset = { eleccionesWidget: 'mapa-municipios', focoMunicipio: 'LA PLATA' }
          window.EleccionesWidgets.render(container, container.dataset);
        });
      } else {
        console.error('Bootstrap: ERROR CRÍTICO - La función render() NO SE ENCONTRÓ en window.EleccionesWidgets.');
        console.log('Bootstrap: Contenido de window.EleccionesWidgets:', window.EleccionesWidgets);
      }

    } catch (error) {
      console.error('Error al inicializar los widgets de elecciones:', error);
    }
  }

  if (document.readyState === 'loading') { // Aún cargando
    document.addEventListener('DOMContentLoaded', initWidgets);
  } else { // Ya cargado
    initWidgets();
  }

})();