// src/components/widgets/ResumenNacionalWidget.tsx
import { useState, useMemo } 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' },
];

// 1. Mapa para definir el orden y número de cada provincia según el PDF
const PROVINCE_ORDER_MAP: Record<string, number> = {
  '02': 1,  // Buenos Aires
  '03': 2,  // Catamarca
  '06': 3,  // Chaco
  '07': 4,  // Chubut
  '04': 5,  // Córdoba
  '05': 6,  // Corrientes
  '08': 7,  // Entre Ríos
  '09': 8,  // Formosa
  '10': 9,  // Jujuy
  '11': 10, // La Pampa
  '12': 11, // La Rioja
  '13': 12, // Mendoza
  '14': 13, // Misiones
  '15': 14, // Neuquén
  '16': 15, // Río Negro
  '17': 16, // Salta
  '18': 17, // San Juan
  '19': 18, // San Luis
  '20': 19, // Santa Cruz
  '21': 20, // Santa Fe
  '22': 21, // Santiago del Estero
  '23': 22, // Tierra del Fuego
  '24': 23, // Tucumán
  '01': 24, // CABA
};


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,
  });

  // 2. Ordenar los datos de la API usando el mapa de ordenamiento
  const sortedData = useMemo(() => {
    if (!data) return [];
    return [...data].sort((a, b) => {
      const orderA = PROVINCE_ORDER_MAP[a.provinciaId] ?? 99;
      const orderB = PROVINCE_ORDER_MAP[b.provinciaId] ?? 99;
      return orderA - orderB;
    });
  }, [data]);

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

  return (
    <div className={styles.widgetContainer}>
      <div className={styles.subHeader}>
        <h4>{categoria.label}</h4>
        <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>}
      {sortedData && (
        <table className={styles.resultsTable}>
          <thead>
            <tr>
              <th>Concepto</th>
              <th>Valor</th>
            </tr>
          </thead>
          {sortedData.map((provincia) => (
            <tbody key={provincia.provinciaId} className={styles.provinciaBlock}>
              <tr>
                {/* 3. Añadir el número antes del nombre */}
                <td className={styles.provinciaNombre}>{`${PROVINCE_ORDER_MAP[provincia.provinciaId]}- ${provincia.provinciaNombre}`}</td>
                <td className={styles.provinciaEscrutado}>ESCR. {formatPercent(provincia.porcentajeEscrutado)}</td>
              </tr>
              {provincia.resultados.map((partido, index) => (
                <tr key={index}>
                  <td className={styles.partidoNombre}>{partido.nombre}</td>
                  <td className={styles.partidoPorcentaje}>{formatPercent(partido.porcentaje)}</td>
                </tr>
              ))}
            </tbody>
          ))}
        </table>
      )}
    </div>
  );
};