// src/components/ConfiguracionNacional.tsx
import { useState, useEffect } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { getAgrupaciones, getConfiguracion, updateConfiguracion } from '../services/apiService';
import type { AgrupacionPolitica } from '../types';
import './AgrupacionesManager.css';

export const ConfiguracionNacional = () => {
    const queryClient = useQueryClient();
    const [agrupaciones, setAgrupaciones] = useState<AgrupacionPolitica[]>([]);
    const [loading, setLoading] = useState(true);
    
    const [presidenciaDiputadosId, setPresidenciaDiputadosId] = useState<string>('');
    const [presidenciaSenadoId, setPresidenciaSenadoId] = useState<string>('');
    const [modoOficialActivo, setModoOficialActivo] = useState(false);
    const [diputadosTipoBanca, setDiputadosTipoBanca] = useState<'ganada' | 'previa'>('ganada');
    // El estado para el tipo de banca del senado ya no es necesario para la UI, 
    // pero lo mantenemos para no romper el handleSave.
    const [senadoTipoBanca, setSenadoTipoBanca] = useState<'ganada' | 'previa'>('ganada');


    useEffect(() => {
        const loadInitialData = async () => {
            try {
                setLoading(true);
                const [agrupacionesData, configData] = await Promise.all([getAgrupaciones(), getConfiguracion()]);
                setAgrupaciones(agrupacionesData);
                setPresidenciaDiputadosId(configData.PresidenciaDiputadosNacional || '');
                setPresidenciaSenadoId(configData.PresidenciaSenadoNacional || '');
                setModoOficialActivo(configData.UsarDatosOficialesNacionales === 'true');
                setDiputadosTipoBanca(configData.PresidenciaDiputadosNacional_TipoBanca === 'previa' ? 'previa' : 'ganada');
                setSenadoTipoBanca(configData.PresidenciaSenadoNacional_TipoBanca === 'previa' ? 'previa' : 'ganada');
            } catch (err) { console.error("Error al cargar datos de configuración nacional:", err); } 
            finally { setLoading(false); }
        };
        loadInitialData();
    }, []);

    const handleSave = async () => {
        try {
            await updateConfiguracion({
                "PresidenciaDiputadosNacional": presidenciaDiputadosId,
                "PresidenciaSenadoNacional": presidenciaSenadoId,
                "UsarDatosOficialesNacionales": modoOficialActivo.toString(),
                "PresidenciaDiputadosNacional_TipoBanca": diputadosTipoBanca,
                // Aunque no se muestre, guardamos el valor para consistencia
                "PresidenciaSenadoNacional_TipoBanca": senadoTipoBanca,
            });
            queryClient.invalidateQueries({ queryKey: ['composicionNacional'] });
            alert('Configuración nacional guardada.');
        } catch { alert('Error al guardar.'); }
    };

    if (loading) return <div className="admin-module"><p>Cargando...</p></div>;

    return (
        <div className="admin-module">
            <h3>Configuración de Widgets Nacionales</h3>
            {/*<div className="form-group">
                <label>
                    <input type="checkbox" checked={modoOficialActivo} onChange={e => setModoOficialActivo(e.target.checked)} />
                    **Activar Modo "Resultados Oficiales" para Widgets Nacionales**
                </label>
                <p style={{ fontSize: '0.8rem', color: '#666' }}>
                    Si está activo, los widgets nacionales usarán la composición manual de bancas. Si no, usarán la proyección en tiempo real.
                </p>
            </div>*/}
            
            <div style={{ display: 'flex', gap: '2rem', marginTop: '1rem' }}>
                {/* Columna Diputados */}
                <div style={{ flex: 1, borderRight: '1px solid #ccc', paddingRight: '1rem' }}>
                    <label htmlFor="presidencia-diputados-nacional" style={{ display: 'block', fontWeight: 'bold', marginBottom: '0.5rem' }}>
                        Presidencia Cámara de Diputados
                    </label>
                    <p style={{ fontSize: '0.8rem', color: '#666', margin: '0.5rem 0 0 0' }}>
                        Este escaño es parte de los 257 diputados y se descuenta del total del partido.
                    </p>
                    <select id="presidencia-diputados-nacional" value={presidenciaDiputadosId} onChange={e => setPresidenciaDiputadosId(e.target.value)} style={{ width: '100%', padding: '8px', marginBottom: '0.5rem' }}>
                        <option value="">-- No Asignado --</option>
                        {agrupaciones.map(a => (<option key={a.id} value={a.id}>{a.nombre}</option>))}
                    </select>
                    {presidenciaDiputadosId && (
                        <div>
                            <label><input type="radio" value="ganada" checked={diputadosTipoBanca === 'ganada'} onChange={() => setDiputadosTipoBanca('ganada')} /> Descontar de Banca Ganada</label>
                            <label style={{marginLeft: '1rem'}}><input type="radio" value="previa" checked={diputadosTipoBanca === 'previa'} onChange={() => setDiputadosTipoBanca('previa')} /> Descontar de Banca Previa</label>
                        </div>
                    )}                    
                </div>

                {/* Columna Senadores */}
                <div style={{ flex: 1 }}>
                    <label htmlFor="presidencia-senado-nacional" style={{ display: 'block', fontWeight: 'bold', marginBottom: '0.5rem' }}>
                        Presidencia Senado (Vicepresidente)
                    </label>
                    <p style={{ fontSize: '0.8rem', color: '#666', margin: '0.5rem 0 0 0' }}>
                        Este escaño es adicional a los 72 senadores y no se descuenta del total del partido.
                    </p>
                    <select id="presidencia-senado-nacional" 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>                    
                </div>
            </div>
            
            <button onClick={handleSave} style={{ marginTop: '1.5rem' }}>
                Guardar Configuración
            </button>
        </div>
    );
};