import { useState, useEffect } from 'react';
import { getResumenProvincial, type ResumenProvincial } from '../services/api';

interface Props {
  distritoId: string;
}

export const ResumenProvincialWidget = ({ distritoId }: Props) => {
  const [data, setData] = useState<ResumenProvincial | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const resumen = await getResumenProvincial(distritoId);
        setData(resumen);
      } catch (err) {
        console.error("Error cargando resumen provincial", err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
    const intervalId = setInterval(fetchData, 15000); // Actualizamos cada 15s
    return () => clearInterval(intervalId);
  }, [distritoId]);

  if (loading) return <div>Cargando resumen provincial...</div>;
  if (!data) return <div>No hay datos provinciales disponibles.</div>;

  return (
    <div style={{ fontFamily: 'sans-serif', border: '1px solid #ccc', padding: '16px', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
      <h2>Resumen Provincial - {data.provinciaNombre}</h2>
      <p><strong>Mesas Escrutadas:</strong> {data.porcentajeEscrutado.toFixed(2)}% | <strong>Participación:</strong> {data.porcentajeParticipacion.toFixed(2)}%</p>
      
      {data.resultados.map((partido) => (
        <div key={partido.nombre} style={{ margin: '10px 0' }}>
          <span>{partido.nombre}</span>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <div style={{ backgroundColor: '#ddd', width: '100%', borderRadius: '4px', marginRight: '10px' }}>
              <div style={{ width: `${partido.porcentaje}%`, backgroundColor: 'royalblue', color: 'white', padding: '4px', borderRadius: '4px', textAlign: 'right' }}>
                <strong>{partido.porcentaje.toFixed(2)}%</strong>
              </div>
            </div>
            <span>{partido.votos.toLocaleString('es-AR')}</span>
          </div>
        </div>
      ))}
    </div>
  );
};