// frontend/public/bootstrap.js
(function() {
  // El dominio donde se alojan los widgets
  const WIDGETS_HOST = 'https://widgets.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
      const response = await fetch(`${WIDGETS_HOST}/manifest.json`);
      if (!response.ok) {
        throw new Error('No se pudo cargar el manifest de los widgets de mercados.');
      }
      const manifest = await response.json();

      // 2. Encontrar el punto de entrada principal
      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 de mercados.');
      }
      
      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
      await loadScript(jsUrl);

      // 5. Una vez cargado, llamar a la función de renderizado para CADA WIDGET
      if (window.MercadosWidgets && typeof window.MercadosWidgets.render === 'function') {
        console.log('Bootstrap Mercados: La función render existe. Renderizando widgets...');
        
        // Buscamos los contenedores específicos para los widgets de mercados
        const widgetContainers = document.querySelectorAll('[data-mercado-widget]');

        if (widgetContainers.length === 0) {
            console.warn('Bootstrap Mercados: No se encontraron contenedores de widget en la página.');
        }
        
        widgetContainers.forEach(container => {
          // Pasamos el contenedor y su dataset (props) a la función de renderizado
          window.MercadosWidgets.render(container, container.dataset);
        });
      } else {
        console.error('Bootstrap Mercados: La función window.MercadosWidgets.render no fue encontrada.');
      }

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

  // Esperamos a que el DOM esté listo para ejecutar
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initWidgets);
  } else {
    initWidgets();
  }

})();