import React, { type ReactNode, useState, useEffect } from 'react';
import { Box, AppBar, Toolbar, Typography, Button, Tabs, Tab, Paper } from '@mui/material';
import { useAuth } from '../contexts/AuthContext';
import ChangePasswordModal from '../components/ChangePasswordModal';
import { useNavigate, useLocation } from 'react-router-dom'; // Para manejar la navegación y la ruta actual

interface MainLayoutProps {
    children: ReactNode; // Esto será el <Outlet /> que renderiza las páginas del módulo
}

// Definir los módulos y sus rutas base
const modules = [
  { label: 'Inicio', path: '/' },
  { label: 'Distribución', path: '/distribucion' }, // Asumiremos rutas base como /distribucion, /contables, etc.
  { 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,
        showForcedPasswordChangeModal,
        isPasswordChangeForced,
        passwordChangeCompleted,
        setShowForcedPasswordChangeModal,
        isAuthenticated
    } = useAuth();

    const navigate = useNavigate();
    const location = useLocation(); // Para obtener la ruta actual

    // Estado para el tab seleccionado
    const [selectedTab, setSelectedTab] = useState<number | false>(false);

    // Efecto para sincronizar el tab seleccionado con la ruta actual
    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); // Seleccionar "Inicio" si es la raíz
        } else {
            setSelectedTab(false); // Ningún tab coincide (podría ser una sub-ruta no principal)
        }
    }, [location.pathname]);

    const handleModalClose = (passwordChangedSuccessfully: boolean) => {
        // ... (lógica de handleModalClose existente) ...
        if (passwordChangedSuccessfully) {
            passwordChangeCompleted();
        } else {
            if (isPasswordChangeForced) {
                logout();
            } else {
                setShowForcedPasswordChangeModal(false);
            }
        }
    };

    const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
        setSelectedTab(newValue);
        navigate(modules[newValue].path); // Navegar a la ruta base del módulo
    };

    // Si el modal de cambio de clave forzado está activo, no mostramos la navegación principal aún.
    // El modal se superpone.
    if (showForcedPasswordChangeModal && isPasswordChangeForced) {
        return (
            <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
                 <ChangePasswordModal
                    open={showForcedPasswordChangeModal}
                    onClose={handleModalClose}
                    isFirstLogin={isPasswordChangeForced}
                 />
                 {/* Podrías querer un fondo o layout mínimo aquí si el modal no es pantalla completa */}
            </Box>
        );
    }


    return (
        <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
            <AppBar position="static">
                <Toolbar>
                    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
                        Sistema de Gestión - El Día
                    </Typography>
                    {user && <Typography sx={{ mr: 2 }}>Hola, {user.nombreCompleto}</Typography>}
                    {isAuthenticated && !isPasswordChangeForced && (
                         <Button
                            color="inherit"
                            onClick={() => setShowForcedPasswordChangeModal(true)} // Ahora abre el modal
                         >
                            Cambiar Contraseña
                         </Button>
                    )}
                    <Button color="inherit" onClick={logout}>Cerrar Sesión</Button>
                </Toolbar>
                {/* Navegación Principal por Módulos */}
                <Paper square elevation={0} > {/* Usamos Paper para un fondo consistente para los Tabs */}
                    <Tabs
                        value={selectedTab}
                        onChange={handleTabChange}
                        indicatorColor="secondary" // O "primary"
                        textColor="inherit" // O "primary" / "secondary"
                        variant="scrollable" // Permite scroll si hay muchos tabs
                        scrollButtons="auto" // Muestra botones de scroll si es necesario
                        aria-label="módulos principales"
                        sx={{ backgroundColor: 'primary.main', color: 'white' }} // Color de fondo para los tabs
                    >
                        {modules.map((module) => (
                            <Tab key={module.path} label={module.label} />
                        ))}
                    </Tabs>
                </Paper>
            </AppBar>

            {/* Contenido del Módulo (renderizado por <Outlet /> en AppRoutes) */}
            <Box
                component="main"
                sx={{
                    flexGrow: 1,
                    p: 3, // Padding
                    // overflowY: 'auto' // Si el contenido del módulo es muy largo
                }}
            >
                {children}
            </Box>

            <Box component="footer" sx={{ p: 1, mt: 'auto', backgroundColor: 'primary.dark', color: 'white', textAlign: 'center' }}>
                <Typography variant="body2">
                    Usuario: {user?.username} | Acceso: {user?.esSuperAdmin ? 'Super Admin' : `Perfil ID ${user?.userId}`} | Versión: {/* TODO: Obtener versión */}
                </Typography>
            </Box>

             {/* Modal para cambio de clave opcional (no forzado) */}
             {/* Si showForcedPasswordChangeModal es true pero isPasswordChangeForced es false,
                 se mostrará aquí también. */}
             <ChangePasswordModal
                open={showForcedPasswordChangeModal}
                onClose={handleModalClose}
                isFirstLogin={isPasswordChangeForced} // Esto controla el comportamiento del modal
             />
        </Box>
    );
};

export default MainLayout;