// src/components/widgets/ResumenNacionalWidget.tsx
import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import Select from 'react-select';
import { getResumenNacionalPorProvincia } from '../../../apiService';
import styles from './ResumenNacionalWidget.module.css';

const ELECCION_ID = 2; // Exclusivo para elecciones nacionales
const CATEGORIAS_NACIONALES = [
  { value: 3, label: 'Diputados Nacionales' },
  { value: 2, label: 'Senadores Nacionales' },
];

export const ResumenNacionalWidget = () => {
  const [categoria, setCategoria] = useState(CATEGORIAS_NACIONALES[0]);

  const { data, isLoading, error } = useQuery({
    queryKey: ['resumenNacional', ELECCION_ID, categoria.value],
    queryFn: () => getResumenNacionalPorProvincia(ELECCION_ID, categoria.value),
    refetchInterval: 60000,
  });

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

  return (
    <div className={styles.widgetContainer}>
      <div className={styles.header}>
        <h3>{categoria.label}</h3>
        <Select
          className={styles.categoriaSelector}
          options={CATEGORIAS_NACIONALES}
          value={categoria}
          onChange={(opt) => setCategoria(opt!)}
          isSearchable={false}
        />
      </div>
      {isLoading && <p>Cargando resumen nacional...</p>}
      {error && <p style={{ color: 'red' }}>Error al cargar los datos.</p>}
      {data && (
        <ul className={styles.listaProvincias}>
          {data.map((provincia) => (
            <li key={provincia.provinciaId} className={styles.provinciaItem}>
              <div className={styles.provinciaHeader}>
                <span className={styles.provinciaNombre}>{provincia.provinciaNombre}</span>
                <span className={styles.provinciaEscrutado}>ESCR. {formatPercent(provincia.porcentajeEscrutado)}</span>
              </div>
              <ul className={styles.resultadosLista}>
                {provincia.resultados.map((partido, index) => (
                  <li key={index} className={styles.resultadoItem}>
                    <span className={styles.partidoNombre}>{partido.nombre}</span>
                    <span className={styles.partidoPorcentaje}>{formatPercent(partido.porcentaje)}</span>
                  </li>
                ))}
              </ul>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};