// 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 './index.css';
import { DevApp } from './components/DevApp';

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,
};

// 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 = () => {
        const widgetContainers = document.querySelectorAll('[data-elecciones-widget]');
        widgetContainers.forEach(container => {
            const widgetName = (container as HTMLElement).dataset.eleccionesWidget;
            if (widgetName && WIDGET_MAP[widgetName]) {
                const WidgetComponent = WIDGET_MAP[widgetName];
                const root = ReactDOM.createRoot(container);
                root.render(
                    <React.StrictMode>
                        <QueryClientProvider client={queryClient}>
                            <WidgetComponent />
                        </QueryClientProvider>
                    </React.StrictMode>
                );
            }
        });
    };

    (window as any).EleccionesWidgets = {
        render: renderWidgets
    };
}