// src/features/legislativas/provinciales/CongresoWidget.tsx
import { useState, useMemo } from 'react';
import { useQuery } from '@tanstack/react-query';
import { ParliamentLayout } from '../../../components/common/ParliamentLayout';
import { SenateLayout } from '../../../components/common/SenateLayout';
import { getComposicionCongreso, getBancadasDetalle } from '../../../apiService';
import type { ComposicionData, BancadaDetalle } from '../../../apiService';
import { Tooltip } from 'react-tooltip';
import './CongresoWidget.css';

type CamaraType = 'diputados' | 'senadores';
const DEFAULT_COLOR = '#808080';

interface CongresoWidgetProps {
  eleccionId: number;
}

export const CongresoWidget = ({ eleccionId }: CongresoWidgetProps) => {
  const [camaraActiva, setCamaraActiva] = useState<CamaraType>('diputados');

  const { data: composicionData, isLoading: isLoadingComposicion, error: errorComposicion } = useQuery<ComposicionData>({
    queryKey: ['composicionCongreso', eleccionId],
    queryFn: () => getComposicionCongreso(eleccionId),
    refetchInterval: 180000,
  });

  const { data: bancadasDetalle = [] } = useQuery<BancadaDetalle[]>({
    queryKey: ['bancadasDetalle', eleccionId],
    queryFn: () => getBancadasDetalle(eleccionId),
    enabled: !!composicionData,
  });

  const datosCamaraActual = composicionData ? composicionData[camaraActiva] : null;

  const esModoOficial = bancadasDetalle.length > 0;

  // --- LÓGICA DE SEATFILLDATA ---
  const seatFillData = useMemo(() => {
    if (!datosCamaraActual) return [];

    if (esModoOficial) {
      // --- MODO OFICIAL ---
      const camaraId = camaraActiva === 'diputados' ? 0 : 1;
      const bancadasDeCamara = bancadasDetalle.filter(b => b.camara === camaraId);
      const colorMap = new Map<string, string>();
      datosCamaraActual.partidos.forEach(p => { if (p.id && p.color) colorMap.set(p.id, p.color); });

      // 1. Creamos un array del tamaño correcto, lleno de 'null's
      const size = camaraActiva === 'diputados' ? 92 : 46;
      const finalSeatData = new Array(size).fill(null);

      // 2. Poblamos el array usando NumeroBanca como índice
      bancadasDeCamara.forEach(bancada => {
        // El índice del SVG es NumeroBanca - 1
        const index = bancada.numeroBanca - 1;
        if (index >= 0 && index < size) {
          finalSeatData[index] = {
            color: bancada.agrupacionPoliticaId ? colorMap.get(bancada.agrupacionPoliticaId) || DEFAULT_COLOR : DEFAULT_COLOR,
            ocupante: bancada.ocupante
          };
        }
      });

      return finalSeatData;

    } else {
      // --- MODO PROYECCIÓN ---
      return datosCamaraActual.partidos.flatMap(party => {
        const seatColor = party.color || DEFAULT_COLOR;
        return Array(party.bancasTotales).fill({ color: seatColor, ocupante: null });
      });
    }
  }, [datosCamaraActual, bancadasDetalle, camaraActiva]);

  if (isLoadingComposicion) return <div className="congreso-container loading">Cargando...</div>;
  if (errorComposicion || !datosCamaraActual) return <div className="congreso-container error">No se pudo cargar la composición.</div>;

  const partidosOrdenados = datosCamaraActual.partidos;

  return (
    <div className="congreso-container">
      <div className="congreso-grafico">
        {camaraActiva === 'diputados' ? (
          <ParliamentLayout
            seatData={seatFillData}
            // Solo pasamos la prop 'presidenteBancada' si NO estamos en modo oficial
            presidenteBancada={!esModoOficial ? datosCamaraActual.presidenteBancada : undefined}
          />
        ) : (
          <SenateLayout
            seatData={seatFillData}
            presidenteBancada={!esModoOficial ? datosCamaraActual.presidenteBancada : undefined}
          />
        )}
      </div>

      <div className="congreso-summary">
        <div className="chamber-tabs">
          <button
            className={camaraActiva === 'diputados' ? 'active' : ''}
            onClick={() => setCamaraActiva('diputados')}
          >
            Diputados
          </button>
          <button
            className={camaraActiva === 'senadores' ? 'active' : ''}
            onClick={() => setCamaraActiva('senadores')}
          >
            Senadores
          </button>
        </div>

        <h3>{datosCamaraActual.camaraNombre}</h3>
        <div className="summary-metric">
          <span>Total de Bancas</span>
          <strong>{datosCamaraActual.totalBancas}</strong>
        </div>
        <hr />
        <ul className="partido-lista">
          {partidosOrdenados.map(partido => (
            <li key={partido.id}>
              <span className="partido-color-box" style={{ backgroundColor: partido.color || DEFAULT_COLOR }}></span>
              <span className="partido-nombre">
                {partido.nombreCorto || partido.nombre}
              </span>
              <strong className="partido-bancas">{partido.bancasTotales}</strong>
            </li>
          ))}
        </ul>
      </div>
      {/* Es importante que el Tooltip esté fuera del div que se re-renderiza con el cambio de pestaña */}
      <Tooltip id="seat-tooltip" />
    </div>
  );
};