Elecciones-2025/Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacionalWidget.tsx

// src/features/legislativas/nacionales/PanelNacionalWidget.tsx
import { useMemo, useState, Suspense } from 'react';
import { useSuspenseQuery } from '@tanstack/react-query';
import { getPanelElectoral } from '../../../apiService';
import { MapaNacional } from './components/MapaNacional';
import { PanelResultados } from './components/PanelResultados';
import { Breadcrumbs } from './components/Breadcrumbs';
import './PanelNacional.css';
import Select from 'react-select';
import type { PanelElectoralDto } from '../../../types/types';
import { FiMap, FiList } from 'react-icons/fi';
import { useMediaQuery } from './hooks/useMediaQuery';

interface PanelNacionalWidgetProps {
  eleccionId: number;
}

type AmbitoState = {
  id: string | null;
  nivel: 'pais' | 'provincia' | 'municipio';
  nombre: string;
  provinciaNombre?: string;
  provinciaDistritoId?: string | null;
};

const CATEGORIAS_NACIONALES = [
  { value: 2, label: 'Diputados Nacionales' },
  { value: 1, label: 'Senadores Nacionales' },
];

const PanelContenido = ({ eleccionId, ambitoActual, categoriaId }: { eleccionId: number, ambitoActual: AmbitoState, categoriaId: number }) => {
  const { data } = useSuspenseQuery<PanelElectoralDto>({
    queryKey: ['panelElectoral', eleccionId, ambitoActual.id, categoriaId],
    queryFn: () => getPanelElectoral(eleccionId, ambitoActual.id, categoriaId),
  });
  return <PanelResultados resultados={data.resultadosPanel} estadoRecuento={data.estadoRecuento} />;
};

export const PanelNacionalWidget = ({ eleccionId }: PanelNacionalWidgetProps) => {
  const [ambitoActual, setAmbitoActual] = useState<AmbitoState>({ id: null, nivel: 'pais', nombre: 'Argentina', provinciaDistritoId: null });
  const [categoriaId, setCategoriaId] = useState<number>(2);
  const [isPanelOpen, setIsPanelOpen] = useState(true);
  const [mobileView, setMobileView] = useState<'mapa' | 'resultados'>('mapa');
  // --- DETECCIÓN DE VISTA MÓVIL ---
  const isMobile = useMediaQuery('(max-width: 800px)');

  const handleAmbitoSelect = (nuevoAmbitoId: string, nuevoNivel: 'provincia' | 'municipio', nuevoNombre: string) => {
    setAmbitoActual(prev => ({
      id: nuevoAmbitoId,
      nivel: nuevoNivel,
      nombre: nuevoNombre,
      provinciaNombre: nuevoNivel === 'municipio' ? prev.provinciaNombre : (nuevoNivel === 'provincia' ? nuevoNombre : undefined),
      provinciaDistritoId: nuevoNivel === 'provincia' ? nuevoAmbitoId : prev.provinciaDistritoId
    }));
  };

  const handleResetToPais = () => {
    setAmbitoActual({ id: null, nivel: 'pais', nombre: 'Argentina', provinciaDistritoId: null });
  };

  const handleVolverAProvincia = () => {
    if (ambitoActual.provinciaDistritoId && ambitoActual.provinciaNombre) {
      setAmbitoActual({
        id: ambitoActual.provinciaDistritoId,
        nivel: 'provincia',
        nombre: ambitoActual.provinciaNombre,
        provinciaDistritoId: ambitoActual.provinciaDistritoId,
        provinciaNombre: ambitoActual.provinciaNombre,
      });
    } else {
      handleResetToPais();
    }
  };

  const selectedCategoria = useMemo(() =>
    CATEGORIAS_NACIONALES.find(c => c.value === categoriaId),
    [categoriaId]
  );

  return (
    <div className="panel-nacional-container">
      <header className="panel-header">
        <div className="header-top-row">
          <h1>Legislativas Argentina 2025</h1>
          <Select
            options={CATEGORIAS_NACIONALES}
            value={selectedCategoria}
            onChange={(option) => option && setCategoriaId(option.value)}
            className="categoria-selector"
            classNamePrefix="categoria-selector"
            isSearchable={false}
          />
        </div>
        <Breadcrumbs
          nivel={ambitoActual.nivel}
          nombreAmbito={ambitoActual.nombre}
          nombreProvincia={ambitoActual.provinciaNombre}
          onReset={handleResetToPais}
          onVolverProvincia={handleVolverAProvincia}
        />
      </header>
      <main className={`panel-main-content ${!isPanelOpen ? 'panel-collapsed' : ''} ${isMobile ? `mobile-view-${mobileView}` : ''}`}>
        <div className="mapa-column">
          <button className="panel-toggle-btn" onClick={() => setIsPanelOpen(!isPanelOpen)} title={isPanelOpen ? "Ocultar panel" : "Mostrar panel"}>
            {isPanelOpen ? '›' : '‹'}
          </button>
          <Suspense fallback={<div className="spinner" />}>
            <MapaNacional
              eleccionId={eleccionId}
              categoriaId={categoriaId}
              nivel={ambitoActual.nivel}
              nombreAmbito={ambitoActual.nombre}
              nombreProvinciaActiva={ambitoActual.provinciaNombre}
              provinciaDistritoId={ambitoActual.provinciaDistritoId ?? null}
              onAmbitoSelect={handleAmbitoSelect}
              onVolver={ambitoActual.nivel === 'municipio' ? handleVolverAProvincia : handleResetToPais}
              isMobileView={isMobile}
            />
          </Suspense>
        </div>
        <div className="resultados-column">
          <Suspense fallback={<div className="spinner" />}>
            <PanelContenido
              eleccionId={eleccionId}
              ambitoActual={ambitoActual}
              categoriaId={categoriaId}
            />
          </Suspense>
        </div>
      </main>

      {/* --- NUEVO CONTROLADOR DE VISTA PARA MÓVIL --- */}
      <div className="mobile-view-toggle">
        <button
          className={`toggle-btn ${mobileView === 'mapa' ? 'active' : ''}`}
          onClick={() => setMobileView('mapa')}
        >
          <FiMap />
          <span>Mapa</span>
        </button>
        <button
          className={`toggle-btn ${mobileView === 'resultados' ? 'active' : ''}`}
          onClick={() => setMobileView('resultados')}
        >
          <FiList />
          <span>Resultados</span>
        </button>
      </div>
    </div>
  );
};