// 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 { BancasManager } from './BancasManager';
import { LogoOverridesManager } from './LogoOverridesManager';
import { CandidatoOverridesManager } from './CandidatoOverridesManager';
import { WorkerManager } from './WorkerManager';

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

    return (
        <div style={{ padding: '1rem 2rem' }}>
            <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '2px solid #eee', paddingBottom: '1rem' }}>
                <h1>Panel de Administración Electoral</h1>
                <button onClick={logout}>Cerrar Sesión</button>
            </header>
            <main style={{ marginTop: '2rem' }}>
                <AgrupacionesManager />
                    <div style={{ flex: '1 1 800px' }}>
                        <LogoOverridesManager />
                    </div>
                    <div style={{ flex: '1 1 800px' }}>
                        <CandidatoOverridesManager />
                    </div>
                <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>
                <ConfiguracionGeneral />
                <BancasManager />
                <hr style={{ margin: '2rem 0' }}/>
                <WorkerManager />
            </main>
        </div>
    );
}