// src/components/DashboardPage.tsx
import { useAuth } from '../context/AuthContext';
import { AgrupacionesManager } from './AgrupacionesManager';
//import { OrdenDiputadosManager } from './OrdenDiputadosManager';
//import { OrdenSenadoresManager } from './OrdenSenadoresManager';
//import { ConfiguracionGeneral } from './ConfiguracionGeneral';
import { LogoOverridesManager } from './LogoOverridesManager';
import { CandidatoOverridesManager } from './CandidatoOverridesManager';
import { WorkerManager } from './WorkerManager';
import { ConfiguracionNacional } from './ConfiguracionNacional';
import { BancasPreviasManager } from './BancasPreviasManager';
import { OrdenDiputadosNacionalesManager } from './OrdenDiputadosNacionalesManager';
import { OrdenSenadoresNacionalesManager } from './OrdenSenadoresNacionalesManager';
//import { BancasProvincialesManager } from './BancasProvincialesManager';
//import { BancasNacionalesManager } from './BancasNacionalesManager';


export const DashboardPage = () => {
    const { logout } = useAuth();

    const sectionStyle = {
        border: '1px solid #dee2e6',
        borderRadius: '8px',
        padding: '1.5rem',
        marginBottom: '2rem',
        backgroundColor: '#f8f9fa'
    };

    const sectionTitleStyle = {
        marginTop: 0,
        borderBottom: '2px solid #007bff',
        paddingBottom: '0.5rem',
        marginBottom: '1.5rem',
        color: '#007bff'
    };

    return (
        <div style={{ padding: '1rem 2rem' }}>
            <header style={{ /* ... */ }}>
                <h1>Panel de Administración Electoral</h1>
                <button onClick={logout}>Cerrar Sesión</button>
            </header>
            
            <main style={{ marginTop: '2rem' }}>

                <div style={sectionStyle}>
                    <h2 style={sectionTitleStyle}>Configuración Global</h2>
                    <AgrupacionesManager />
                    <LogoOverridesManager />
                    <CandidatoOverridesManager />
                </div>
                
                <div style={sectionStyle}>
                    <h2 style={sectionTitleStyle}>Gestión de Elecciones Nacionales</h2>
                    <ConfiguracionNacional />
                    <BancasPreviasManager />
                    <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', marginTop: '2rem' }}>
                        <div style={{ flex: '1 1 400px' }}>
                            <OrdenDiputadosNacionalesManager />
                        </div>
                        <div style={{ flex: '1 1 400px' }}>
                            <OrdenSenadoresNacionalesManager />
                        </div>
                    </div>                    
                   {/* <BancasNacionalesManager /> */}
                </div>
                
                {/*
                <div style={sectionStyle}>
                    <h2 style={sectionTitleStyle}>Gestión de Elecciones Provinciales</h2>
                    <ConfiguracionGeneral />
                    <BancasProvincialesManager />
                    <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', marginTop: '2rem' }}>
                        <div style={{ flex: '1 1 400px' }}>
                            <OrdenDiputadosManager />
                        </div>
                        <div style={{ flex: '1 1 400px' }}>
                            <OrdenSenadoresManager />
                        </div>
                    </div>
                </div>*/}

                <div style={sectionStyle}>
                    <h2 style={sectionTitleStyle}>Gestión de Workers y Sistema</h2>
                    <WorkerManager />
                </div>
            </main>
        </div>
    );
}