// src/features/legislativas/nacionales/TablaSeccionesWidget.tsx
import React from 'react';
import { useQuery } from '@tanstack/react-query';
import { getTablaSecciones } from '../../../apiService';
import styles from './TablaResultadosWidget.module.css';

export const TablaSeccionesWidget = () => {
  const ELECCION_ID = 2;

  const { data, isLoading, error } = useQuery({
    queryKey: ['tablaSecciones', ELECCION_ID],
    queryFn: () => getTablaSecciones(ELECCION_ID),
    refetchInterval: 180000,
  });

  const formatPercent = (num: number) => `${num.toFixed(2)}%`;

  return (
    <div className={styles.widgetContainer}>
      <div className={styles.header}>
        <h3>Diputados Nacionales</h3>
      </div>
      {isLoading && <p>Cargando resultados...</p>}
      {error && <p>Error al cargar los datos.</p>}
      {data && (
        <table className={styles.resultsTable}>
          <thead>
            <tr>
              <th>Municipio</th>
              <th>1ra Fuerza</th>
              <th>%</th>
              <th>2da Fuerza</th>
              <th>%</th>
            </tr>
          </thead>
          <tbody>
            {data.map((seccion) => (
              <React.Fragment key={seccion.seccionId}>
                <tr className={styles.seccionHeader}>
                  <td colSpan={5}>{seccion.nombre}</td>
                </tr>
                {seccion.municipios.map((fila, index) => (
                  <tr key={fila.ambitoId}>
                    <td className={styles.distritoCell}>
                      <span className={styles.distritoIndex}>{index + 1}.</span>{fila.nombre}
                    </td>
                    <td className={styles.fuerzaCell}>{fila.fuerza1Display}</td>
                    <td className={styles.porcentajeCell}>{formatPercent(fila.fuerza1Porcentaje)}</td>
                    <td className={styles.fuerzaCell}>{fila.fuerza2Display}</td>
                    <td className={styles.porcentajeCell}>{formatPercent(fila.fuerza2Porcentaje)}</td>
                  </tr>
                ))}
              </React.Fragment>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
};