// 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 { ResultadosRankingMunicipioWidget } from './components/ResultadosRankingMunicipioWidget';
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,
    'resultados-tabla-detallada-por-municipio' : ResultadosRankingMunicipioWidget,
};

// 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
    // La función de renderizado acepta el contenedor y las props
    const renderWidgets = (container: HTMLElement, props: DOMStringMap) => {
        const widgetName = props.eleccionesWidget;
        
        if (widgetName && WIDGET_MAP[widgetName]) {
            const WidgetComponent = WIDGET_MAP[widgetName];
            const root = ReactDOM.createRoot(container);
            
            // Pasamos todas las props (ej. { eleccionesWidget: '...', focoMunicipio: '...' })
            // al componente que se va a renderizar.
            root.render(
                <React.StrictMode>
                    <QueryClientProvider client={queryClient}>
                        <WidgetComponent {...props} />
                    </QueryClientProvider>
                </React.StrictMode>
            );
        } else {
             console.error(`React: ERROR - No se encontró un componente para el nombre de widget: "${widgetName}"`);
        }
    };

    // La función expuesta ahora se llamará por cada widget, no una sola vez.
    (window as any).EleccionesWidgets = {
        render: renderWidgets 
    };
}