// src/features/legislativas/nacionales/CongresoNacionalWidget.tsx
import { useState, Suspense, useMemo } from 'react';
import { useSuspenseQuery } from '@tanstack/react-query';
import { Tooltip } from 'react-tooltip';
import { DiputadosNacionalesLayout } from '../../../components/common/DiputadosNacionalesLayout';
import { SenadoresNacionalesLayout } from '../../../components/common/SenadoresNacionalesLayout';
import { getComposicionNacional, type ComposicionNacionalData, type PartidoComposicionNacional } from '../../../apiService';
import styles from './CongresoNacionalWidget.module.css';

interface CongresoNacionalWidgetProps {
  eleccionId: number;
}

const formatTimestamp = (dateString: string) => {
  if (!dateString) return '...';
  const date = new Date(dateString);
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const year = date.getFullYear();
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${day}/${month}/${year} ${hours}:${minutes}`;
};

const WidgetContent = ({ eleccionId }: CongresoNacionalWidgetProps) => {
  const [camaraActiva, setCamaraActiva] = useState<'diputados' | 'senadores'>('diputados');
  const [isHovering, setIsHovering] = useState(false);

  const { data } = useSuspenseQuery<ComposicionNacionalData>({
    queryKey: ['composicionNacional', eleccionId],
    queryFn: () => getComposicionNacional(eleccionId),
    refetchInterval: 30000,
  });

  const datosCamaraActual = data[camaraActiva];

  const partidosOrdenados = useMemo(() => {
    if (!datosCamaraActual?.partidos) return [];
    const partidosACopiar = [...datosCamaraActual.partidos];
    partidosACopiar.sort((a, b) => {
      const ordenA = camaraActiva === 'diputados' ? a.ordenDiputadosNacionales : a.ordenSenadoresNacionales;
      const ordenB = camaraActiva === 'diputados' ? b.ordenDiputadosNacionales : b.ordenSenadoresNacionales;
      return (ordenA ?? 999) - (ordenB ?? 999);
    });
    return partidosACopiar;
  }, [datosCamaraActual, camaraActiva]);

  const partyDataParaLayout = useMemo(() => {
    if (camaraActiva === 'senadores') return partidosOrdenados;
    if (!partidosOrdenados || !datosCamaraActual.presidenteBancada?.color) return partidosOrdenados;
    const partidoPresidente = partidosOrdenados.find(p => p.color === datosCamaraActual.presidenteBancada!.color);
    if (!partidoPresidente) return partidosOrdenados;

    const adjustedPartyData = JSON.parse(JSON.stringify(partidosOrdenados));
    const partidoAjustar = adjustedPartyData.find((p: PartidoComposicionNacional) => p.id === partidoPresidente.id);

    if (partidoAjustar) {
      const tipoBanca = datosCamaraActual.presidenteBancada.tipoBanca;
      if (tipoBanca === 'ganada' && partidoAjustar.bancasGanadas > 0) {
        partidoAjustar.bancasGanadas -= 1;
      } else if (tipoBanca === 'previa' && partidoAjustar.bancasFijos > 0) {
        partidoAjustar.bancasFijos -= 1;
      } else {
        if (partidoAjustar.bancasGanadas > 0) {
          partidoAjustar.bancasGanadas -= 1;
        } else if (partidoAjustar.bancasFijos > 0) {
          partidoAjustar.bancasFijos -= 1;
        }
      }
    }
    return adjustedPartyData;
  }, [partidosOrdenados, datosCamaraActual.presidenteBancada, camaraActiva]);

  // 2. Todas las props 'className' ahora usan el objeto 'styles'
  return (
    <div className={styles.congresoContainer}>
      <div className={styles.congresoGrafico}>
        <div
          className={`${styles.congresoHemicicloWrapper} ${isHovering ? styles.isHovering : ''}`}
          onMouseEnter={() => setIsHovering(true)}
          onMouseLeave={() => setIsHovering(false)}
        >
          {camaraActiva === 'diputados' ?
            <DiputadosNacionalesLayout
              partyData={partyDataParaLayout}
              presidenteBancada={datosCamaraActual.presidenteBancada || null}
              size={700}
            /> :
            <SenadoresNacionalesLayout
              partyData={partyDataParaLayout}
              presidenteBancada={datosCamaraActual.presidenteBancada || null}
              size={700}
            />
          }
        </div>
        <div className={styles.congresoFooter}>
          <div className={styles.footerLegend}>
            <div className={styles.footerLegendItem}>
              <span className={`${styles.legendIcon} ${styles.legendIconSolid}`}></span>
              <span>Bancas en juego</span>
            </div>
            <div className={styles.footerLegendItem}>
              <span className={`${styles.legendIcon} ${styles.legendIconRing}`}></span>
              <span>Bancas previas</span>
            </div>
          </div>
          <div className={styles.footerTimestamp}>
            Última Actualización: {formatTimestamp(datosCamaraActual.ultimaActualizacion)}
          </div>
        </div>
      </div>
      <div className={styles.congresoSummary}>
        <div className={styles.summaryHeader}>
          <h3>{datosCamaraActual.camaraNombre}</h3>
          <div className={styles.chamberTabs}>
            <button className={camaraActiva === 'diputados' ? styles.active : ''} onClick={() => setCamaraActiva('diputados')}>
              Diputados
            </button>
            <button className={camaraActiva === 'senadores' ? styles.active : ''} onClick={() => setCamaraActiva('senadores')}>
              Senadores
            </button>
          </div>
        </div>
        <div className={styles.summaryMetric}>
          <span>Total de Bancas</span>
          <strong>{datosCamaraActual.totalBancas}</strong>
        </div>
        <div className={styles.summaryMetric}>
          <span>Bancas en Juego</span>
          <strong>{datosCamaraActual.bancasEnJuego}</strong>
        </div>
        <hr />
        <div className={styles.partidoListaContainer}>
          <ul className={styles.partidoLista}>
            {partidosOrdenados
              .filter(p => p.bancasTotales > 0)
              .map((partido: PartidoComposicionNacional) => (
                <li key={partido.id}>
                  <span className={styles.partidoColorBox} style={{ 'marginRight': '0.25rem', backgroundColor: partido.color || '#808080' }}></span>
                  <span className={styles.partidoNombre}>{partido.nombreCorto || partido.nombre}</span>
                  <strong
                    className={styles.partidoBancas}
                    title={`${partido.bancasFijos} bancas previas + ${partido.bancasGanadas} ganadas`}
                  >
                    {partido.bancasTotales}
                  </strong>
                </li>
              ))}
          </ul>
        </div>
      </div>
      <Tooltip id="party-tooltip" className={styles.partyTooltipContainer} />
    </div>
  );
};

export const CongresoNacionalWidget = ({ eleccionId }: CongresoNacionalWidgetProps) => {
  return (
    <Suspense fallback={<div className={`${styles.congresoContainer} ${styles.loading}`} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '400px' }}>Cargando composición del congreso...</div>}>
      <WidgetContent eleccionId={eleccionId} />
    </Suspense>
  );
};