// src/components/ConfiguracionGeneral.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 ConfiguracionGeneral = () => {
    const queryClient = useQueryClient();
    const [agrupaciones, setAgrupaciones] = useState<AgrupacionPolitica[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);

    const [presidenciaSenadoId, setPresidenciaSenadoId] = useState<string>('');
    // Renombramos el estado para mayor claridad
    const [modoOficialActivo, setModoOficialActivo] = useState(false);

    useEffect(() => {
        const loadInitialData = async () => {
            try {
                setLoading(true);
                setError(null);
                const [agrupacionesData, configData] = await Promise.all([getAgrupaciones(), getConfiguracion()]);
                setAgrupaciones(agrupacionesData);
                setPresidenciaSenadoId(configData.PresidenciaSenadores || '');
                setModoOficialActivo(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": modoOficialActivo.toString()
            });
            await queryClient.invalidateQueries({ queryKey: ['composicionCongreso'] });
            await queryClient.invalidateQueries({ queryKey: ['bancadasDetalle'] });
            alert('Configuración guardada.');
        } catch {
            alert('Error al guardar.');
        }
    };

    if (loading) return <div className="admin-module"><p>Cargando...</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 Visualización</h3>
            <div className="form-group">
                <label>
                    <input
                        type="checkbox"
                        checked={modoOficialActivo}
                        onChange={e => setModoOficialActivo(e.target.checked)}
                    />
                    **Activar Modo "Resultados Oficiales"**
                </label>
                <p style={{ fontSize: '0.8rem', color: '#666' }}>
                    Si está activo, el sitio público mostrará la composición de bancas y los ocupantes definidos manualmente en este panel. Si está inactivo, mostrará la proyección en tiempo real de la elección.
                </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>
    );
};