// src/components/ConfiguracionGeneral.tsx
import { useState, useEffect } from 'react';
import { getAgrupaciones, getConfiguracion, updateConfiguracion } from '../services/apiService';
import type { AgrupacionPolitica } from '../types';
import './AgrupacionesManager.css'; // Reutilizamos los estilos para mantener la consistencia

export const ConfiguracionGeneral = () => {
    const [agrupaciones, setAgrupaciones] = useState<AgrupacionPolitica[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    // Estado específico para la configuración de la presidencia del Senado
    const [presidenciaSenadoId, setPresidenciaSenadoId] = useState<string>('');
    const [usarDatosOficiales, setUsarDatosOficiales] = useState(false);

    useEffect(() => {
        const loadInitialData = async () => {
            try {
                setLoading(true);
                setError(null);

                // Hacemos ambas llamadas a la API en paralelo para más eficiencia
                const [agrupacionesData, configData] = await Promise.all([
                    getAgrupaciones(),
                    getConfiguracion()
                ]);

                setAgrupaciones(agrupacionesData);

                // Asignamos el valor guardado, si existe
                if (configData && configData.PresidenciaSenadores) {
                    setPresidenciaSenadoId(configData.PresidenciaSenadores);
                }
                setUsarDatosOficiales(configData.UsarDatosDeBancadasOficiales === 'true');
            } catch (err) {
                console.error("Error al cargar datos de configuración:", err);
                setError("No se pudieron cargar los datos necesarios para la configuración.");
            } finally {
                setLoading(false);
            }
        };
        loadInitialData();
    }, []);

    const handleSave = async () => {
        try {
            await updateConfiguracion({ "PresidenciaSenadores": presidenciaSenadoId, "UsarDatosDeBancadasOficiales": usarDatosOficiales.toString() });
            alert('Configuración guardada con éxito.');
        } catch (err) {
            console.error("Error al guardar la configuración:", err);
            alert('Error al guardar la configuración.');
        }
    };

    if (loading) return <div className="admin-module"><p>Cargando configuración...</p></div>;
    if (error) return <div className="admin-module"><p style={{ color: 'red' }}>{error}</p></div>;

    return (
        <div className="admin-module">
            <h3>Configuración General de Cámaras</h3>
            <div className="form-group">
                <label>
                    <input
                        type="checkbox"
                        checked={usarDatosOficiales}
                        onChange={e => setUsarDatosOficiales(e.target.checked)}
                    />
                    Activar Modo "Resultados Oficiales"
                </label>
                <p style={{ fontSize: '0.8rem', color: '#666', margin: '0.5rem 0 0 0' }}>
                    Si está activo, el widget del Congreso mostrará la composición gestionada manualmente en esta página. Si está inactivo, mostrará la proyección en tiempo real de las elecciones.
                </p>
            </div>
            <div style={{ marginTop: '1rem', paddingBottom: '1rem', borderBottom: '1px solid #eee' }}>
                <label
                    htmlFor="presidencia-senado"
                    style={{ display: 'block', fontWeight: 'bold', marginBottom: '0.5rem' }}
                >
                    Presidencia Cámara de Senadores (Vicegobernador)
                </label>
                <select
                    id="presidencia-senado"
                    value={presidenciaSenadoId}
                    onChange={e => setPresidenciaSenadoId(e.target.value)}
                    style={{ width: '100%', padding: '8px' }}
                >
                    <option value="">-- No Asignado --</option>
                    {agrupaciones.map(a => (
                        <option key={a.id} value={a.id}>
                            {a.nombre}
                        </option>
                    ))}
                </select>
                <p style={{ fontSize: '0.8rem', color: '#666', margin: '0.5rem 0 0 0' }}>
                    Seleccione el partido político al que pertenece el Vicegobernador. El asiento presidencial del Senado se pintará con el color de este partido.
                </p>
            </div>
            <div style={{ marginTop: '1rem' }}>
                <p style={{ fontWeight: 'bold', margin: 0 }}>
                    Presidencia Cámara de Diputados
                </p>
                <p style={{ fontSize: '0.8rem', color: '#666', margin: '0.5rem 0 0 0' }}>
                    Esta banca se asigna y colorea automáticamente según la agrupación política con la mayoría de bancas totales en la cámara.
                </p>
            </div>
            <button onClick={handleSave} style={{ marginTop: '1.5rem' }}>
                Guardar Configuración
            </button>
        </div>
    );
};