GestionIntegralWeb/Frontend/src/layouts/MainLayout.tsx

import React, { type ReactNode, useState, useEffect } from 'react';
import {
    Box, AppBar, Toolbar, Typography, Tabs, Tab, Paper,
    IconButton, Menu, MenuItem, ListItemIcon, ListItemText, Divider // Nuevas importaciones
} from '@mui/material';
import AccountCircle from '@mui/icons-material/AccountCircle'; // Icono de usuario
import LockResetIcon from '@mui/icons-material/LockReset'; // Icono para cambiar contraseña
import LogoutIcon from '@mui/icons-material/Logout'; // Icono para cerrar sesión
import { useAuth } from '../contexts/AuthContext';
import ChangePasswordModal from '../components/Modals/Usuarios/ChangePasswordModal';
import { useNavigate, useLocation } from 'react-router-dom';

interface MainLayoutProps {
    children: ReactNode;
}

const modules = [
    { label: 'Inicio', path: '/' },
    { label: 'Distribución', path: '/distribucion' },
    { label: 'Contables', path: '/contables' },
    { label: 'Impresión', path: '/impresion' },
    { label: 'Reportes', path: '/reportes' },
    { label: 'Radios', path: '/radios' },
    { label: 'Usuarios', path: '/usuarios' },
];

const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
    const {
        user,
        logout,
        isAuthenticated,
        isPasswordChangeForced,
        showForcedPasswordChangeModal,
        setShowForcedPasswordChangeModal,
        passwordChangeCompleted
    } = useAuth();

    const navigate = useNavigate();
    const location = useLocation();

    const [selectedTab, setSelectedTab] = useState<number | false>(false);
    const [anchorElUserMenu, setAnchorElUserMenu] = useState<null | HTMLElement>(null); // Estado para el menú de usuario

    useEffect(() => {
        const currentModulePath = modules.findIndex(module =>
            location.pathname === module.path || (module.path !== '/' && location.pathname.startsWith(module.path + '/'))
        );
        if (currentModulePath !== -1) {
            setSelectedTab(currentModulePath);
        } else if (location.pathname === '/') {
            setSelectedTab(0); // Asegurar que la pestaña de Inicio se seleccione para la ruta raíz
        } else {
            setSelectedTab(false); // Ninguna pestaña seleccionada si no coincide
        }
    }, [location.pathname]);

    const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
        setAnchorElUserMenu(event.currentTarget);
    };

    const handleCloseUserMenu = () => {
        setAnchorElUserMenu(null);
    };

    const handleChangePasswordClick = () => {
        setShowForcedPasswordChangeModal(true);
        handleCloseUserMenu();
    };

    const handleLogoutClick = () => {
        logout();
        handleCloseUserMenu(); // Cierra el menú antes de desloguear completamente
    };

    const handleModalClose = (passwordChangedSuccessfully: boolean) => {
        if (passwordChangedSuccessfully) {
            passwordChangeCompleted();
        } else {
            if (isPasswordChangeForced) {
                logout();
            } else {
                setShowForcedPasswordChangeModal(false);
            }
        }
    };

    const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
        setSelectedTab(newValue);
        navigate(modules[newValue].path);
    };

    // Determinar si el módulo actual es el de Reportes
    const isReportesModule = location.pathname.startsWith('/reportes');

    if (showForcedPasswordChangeModal && isPasswordChangeForced) {
        return (
            <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
                <ChangePasswordModal
                    open={showForcedPasswordChangeModal}
                    onClose={handleModalClose}
                    isFirstLogin={isPasswordChangeForced}
                />
            </Box>
        );
    }

    return (
        <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
            <AppBar position="sticky" elevation={1} /* Elevation sutil para AppBar */>
                <Toolbar sx={{ display: 'flex', justifyContent: 'space-between' }}>
                    <Typography variant="h6" component="div" noWrap sx={{ cursor: 'pointer' }} onClick={() => navigate('/')}>
                        Sistema de Gestión - El Día
                    </Typography>

                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
                        {user && (
                            <Typography sx={{ mr: 2, display: { xs: 'none', sm: 'block' } }} /* Ocultar en pantallas muy pequeñas */>
                                Hola, {user.nombreCompleto}
                            </Typography>
                        )}
                        {isAuthenticated && (
                            <>
                                <IconButton
                                    size="large"
                                    aria-label="Cuenta del usuario"
                                    aria-controls="menu-appbar"
                                    aria-haspopup="true"
                                    sx={{
                                        padding: '15px',
                                    }}
                                    onClick={handleOpenUserMenu}
                                    color="inherit"
                                >
                                     <AccountCircle sx={{ fontSize: 36 }} />
                                </IconButton>
                                <Menu
                                    id="menu-appbar"
                                    anchorEl={anchorElUserMenu}
                                    anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
                                    keepMounted
                                    transformOrigin={{ vertical: 'top', horizontal: 'right' }}
                                    open={Boolean(anchorElUserMenu)}
                                    onClose={handleCloseUserMenu}
                                    sx={{ '& .MuiPaper-root': { minWidth: 220, marginTop: '8px' } }}
                                >
                                    {user && ( // Mostrar info del usuario en el menú
                                        <Box sx={{ px: 2, py: 1.5, pointerEvents: 'none' /* Para que no sea clickeable */ }}>
                                            <Typography variant="subtitle1" sx={{ fontWeight: 'medium' }}>{user.nombreCompleto}</Typography>
                                            <Typography variant="body2" color="text.secondary">{user.username}</Typography>
                                        </Box>
                                    )}
                                    {user && <Divider sx={{ mb: 1 }} />}

                                    {!isPasswordChangeForced && ( // No mostrar si ya está forzado a cambiarla
                                        <MenuItem onClick={handleChangePasswordClick}>
                                            <ListItemIcon><LockResetIcon fontSize="small" /></ListItemIcon>
                                            <ListItemText>Cambiar Contraseña</ListItemText>
                                        </MenuItem>
                                    )}
                                    <MenuItem onClick={handleLogoutClick}>
                                        <ListItemIcon><LogoutIcon fontSize="small" /></ListItemIcon>
                                        <ListItemText>Cerrar Sesión</ListItemText>
                                    </MenuItem>
                                </Menu>
                            </>
                        )}
                    </Box>
                </Toolbar>
                <Paper square elevation={0} >
                    <Tabs
                        value={selectedTab}
                        onChange={handleTabChange}
                        indicatorColor="secondary" // O 'primary' si prefieres el mismo color que el fondo
                        textColor="inherit" // El texto de la pestaña hereda el color (blanco sobre fondo oscuro)
                        variant="scrollable"
                        scrollButtons="auto"
                        allowScrollButtonsMobile
                        aria-label="módulos principales"
                        sx={{
                            backgroundColor: 'primary.main', // Color de fondo de las pestañas
                            color: 'white', // Color del texto de las pestañas
                            '& .MuiTabs-indicator': {
                                height: 3, // Un indicador un poco más grueso
                            },
                            '& .MuiTab-root': { // Estilo para cada pestaña
                                minWidth: 100, // Ancho mínimo para cada pestaña
                                textTransform: 'none', // Evitar MAYÚSCULAS por defecto
                                fontWeight: 'normal',
                                opacity: 0.85, // Ligeramente transparentes si no están seleccionadas
                                '&.Mui-selected': {
                                    fontWeight: 'bold',
                                    opacity: 1,
                                    // color: 'secondary.main' // Opcional: color diferente para la pestaña seleccionada
                                },
                            }
                        }}
                    >
                        {modules.map((module) => (
                            <Tab key={module.path} label={module.label} />
                        ))}
                    </Tabs>
                </Paper>
            </AppBar>

            <Box
                component="main"
                sx={{
                    flexGrow: 1,
                    py: isReportesModule ? 0 : { xs: 1.5, sm: 2, md: 2.5 }, // Padding vertical responsivo
                    px: isReportesModule ? 0 : { xs: 1.5, sm: 2, md: 2.5 }, // Padding horizontal responsivo
                    display: 'flex',
                    flexDirection: 'column'
                }}
            >
                {children}
            </Box>

            <Box component="footer" sx={{ p: 1, backgroundColor: 'grey.200' /* Un gris más claro */, color: 'text.secondary', textAlign: 'left', borderTop: (theme) => `1px solid ${theme.palette.divider}` }}>
                <Typography variant="caption">
                    {/* Puedes usar caption para un texto más pequeño en el footer */}
                    Usuario: {user?.username} | Acceso: {user?.esSuperAdmin ? 'Super Administrador' : (user?.perfil || `ID ${user?.idPerfil}`)}
                </Typography>
            </Box>

            <ChangePasswordModal
                open={showForcedPasswordChangeModal && !isPasswordChangeForced} // Solo mostrar si no es el forzado inicial
                onClose={() => handleModalClose(false)} // Asumir que si se cierra sin cambiar, no fue exitoso
                isFirstLogin={false} // Este modal no es para el primer login forzado
            />
        </Box>
    );
};

export default MainLayout;