Elecciones-2025/Elecciones-Web/frontend/src/App.tsx

// src/App.tsx
import { useState, useEffect } from 'react';
import { MunicipioWidget } from './components/MunicipioWidget';
import { MunicipioSelector } from './components/MunicipioSelector';
import { getMunicipios, type MunicipioSimple } from './services/api';
import './App.css';
import { ResumenProvincialWidget } from './components/ResumenProvincialWidget';
import { BancasWidget } from './components/BancasWidget';
import { TelegramasView } from './components/TelegramasView';
import { MapaD3Widget } from './components/MapaD3Widget';

function App() {
  const [selectedMunicipioId, setSelectedMunicipioId] = useState<string | null>(null);
  const [listaMunicipios, setListaMunicipios] = useState<MunicipioSimple[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getMunicipios()
      .then(setListaMunicipios)
      .catch(err => console.error("Error al cargar la lista de municipios", err))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <h1>Cargando datos iniciales...</h1>;

  return (
    <>
      <h1>Elecciones 2025 - Resultados en Vivo</h1>
      <section>
        <ResumenProvincialWidget distritoId="02" />
      </section>

      <hr />
      
      <section style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '20px' }}>
        <div>
          <h2>Mapa de Resultados</h2>
          <MapaD3Widget
            municipios={listaMunicipios} 
            onMunicipioClick={setSelectedMunicipioId} 
          />
        </div>
        <div>
          <h2>Consulta por Municipio</h2>
          <MunicipioSelector 
            municipios={listaMunicipios} 
            onMunicipioChange={setSelectedMunicipioId} 
          />
          {selectedMunicipioId && (
            <div style={{ marginTop: '20px' }}>
              <MunicipioWidget municipioId={selectedMunicipioId} />
            </div>
          )}
        </div>
      </section>
      
      <section>
        {/* Usamos el ID del distrito de Bs As ("02") */}
        <ResumenProvincialWidget distritoId="02" />
      </section>

      <hr />
      
      <section>
        <h2>Consulta por Municipio</h2>
        <MunicipioSelector onMunicipioChange={setSelectedMunicipioId} municipios={[]} />
        {selectedMunicipioId && (
          <div style={{ marginTop: '20px' }}>
            <MunicipioWidget municipioId={selectedMunicipioId} />
          </div>
        )}
      </section>
      
      <section>
        <h2>Proyección de Bancas</h2>
        {/* Usamos el ID de la sección de La Plata ("0001") como ejemplo */}
        <BancasWidget seccionId="0001" /> 
      </section>

      <hr />
      
      <section>
        <h2>Consulta de Resultados por Municipio</h2>
        <MunicipioSelector onMunicipioChange={setSelectedMunicipioId} municipios={[]} />
        {selectedMunicipioId && (
          <div style={{ marginTop: '20px' }}>
            <MunicipioWidget municipioId={selectedMunicipioId} />
          </div>
        )}
      </section>

      <hr />

      <section>
        <h2>Explorador de Telegramas</h2>
        <TelegramasView />
      </section>
    </>
  );
}

export default App;