// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

import { BancasWidget } from './components/BancasWidget'
import { CongresoWidget } from './components/CongresoWidget'
import MapaBsAs from './components/MapaBsAs'
import { DipSenTickerWidget } from './components/DipSenTickerWidget'
import { TelegramaWidget } from './components/TelegramaWidget'
import { ConcejalesWidget } from './components/ConcejalesWidget'
import MapaBsAsSecciones from './components/MapaBsAsSecciones'
import { SenadoresWidget } from './components/SenadoresWidget'
import { DiputadosWidget } from './components/DiputadosWidget'
import { ResumenGeneralWidget } from './components/ResumenGeneralWidget'
import { SenadoresTickerWidget } from './components/SenadoresTickerWidget'
import { DiputadosTickerWidget } from './components/DiputadosTickerWidget'
import { ConcejalesTickerWidget } from './components/ConcejalesTickerWidget'
import { DiputadosPorSeccionWidget } from './components/DiputadosPorSeccionWidget'
import { SenadoresPorSeccionWidget } from './components/SenadoresPorSeccionWidget'
import { ConcejalesPorSeccionWidget } from './components/ConcejalesPorSeccionWidget'
import { ResultadosTablaDetalladaWidget } from './components/ResultadosTablaDetalladaWidget';
import { DevApp } from './components/DevApp';
import './index.css';


const queryClient = new QueryClient();

// Mapeamos el nombre del widget (del atributo data) al componente de React
const WIDGET_MAP: Record<string, React.ElementType> = {
    'resumen-senadores': SenadoresWidget,
    'resumen-diputados': DiputadosWidget,
    'resumen-concejales': ConcejalesWidget,
    'congreso-provincial': CongresoWidget,
    'distribucion-bancas': BancasWidget,
    'mapa-municipios': MapaBsAs,
    'mapa-secciones': MapaBsAsSecciones,
    'consulta-telegramas': TelegramaWidget,
    'ticker-senadores': SenadoresTickerWidget,
    'ticker-diputados': DiputadosTickerWidget,
    'ticker-concejales': ConcejalesTickerWidget,
    'ticker-dip-sen': DipSenTickerWidget,
    'resumen-general': ResumenGeneralWidget,
    'diputados-por-seccion': DiputadosPorSeccionWidget,
    'senadores-por-seccion': SenadoresPorSeccionWidget,
    'concejales-por-seccion': ConcejalesPorSeccionWidget,
    'resultados-tabla-detallada-por-seccion' : ResultadosTablaDetalladaWidget,
};

// Vite establece `import.meta.env.DEV` a `true` cuando ejecutamos 'npm run dev'
if (import.meta.env.DEV) {
    // --- MODO DESARROLLO ---
    // Renderizamos nuestra página de showcase en el div#root
    ReactDOM.createRoot(document.getElementById('root')!).render(
        <React.StrictMode>
            <QueryClientProvider client={queryClient}>
                <DevApp />
            </QueryClientProvider>
        </React.StrictMode>
    );
} else {
    // --- MODO PRODUCCIÓN ---
    // Exponemos la función de renderizado para el bootstrap.js
    const renderWidgets = () => {
        console.log('%cReact: La función renderWidgets() ha sido EJECUTADA.', 'color: green; font-weight: bold;');
        
        const widgetContainers = document.querySelectorAll('[data-elecciones-widget]');
        
        console.log(`React: Se encontraron ${widgetContainers.length} contenedores con el atributo [data-elecciones-widget].`);

        if (widgetContainers.length === 0) {
            console.warn('React: ADVERTENCIA - No se encontró ningún elemento en el DOM para renderizar un widget. Verifica que el HTML contenga <div data-elecciones-widget="...">.');
        }

        widgetContainers.forEach(container => {
            const widgetName = (container as HTMLElement).dataset.eleccionesWidget;
            console.log(`React: Procesando contenedor para el widget: "${widgetName}"`);
            
            if (widgetName && WIDGET_MAP[widgetName]) {
                const WidgetComponent = WIDGET_MAP[widgetName];
                const root = ReactDOM.createRoot(container);
                console.log(`React: Renderizando el widget "${widgetName}" en el contenedor.`);
                root.render(
                    <React.StrictMode>
                        <QueryClientProvider client={queryClient}>
                            <WidgetComponent />
                        </QueryClientProvider>
                    </React.StrictMode>
                );
            } else {
                 console.error(`React: ERROR - No se encontró un componente para el nombre de widget: "${widgetName}"`);
            }
        });
    };

    (window as any).EleccionesWidgets = {
        render: renderWidgets
    };
    console.log('React: El objeto EleccionesWidgets ha sido asignado a window.');
}