import React, { useState, useEffect } from 'react';
import { Box, Tabs, Tab, Paper, Typography } from '@mui/material';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { usePermissions } from '../../hooks/usePermissions';

const suscripcionesSubModules = [
  { label: 'Suscriptores', path: 'suscriptores', requiredPermission: 'SU001' },
  { label: 'Consulta Pagos y Facturas', path: 'consulta-facturas', requiredPermission: 'SU006' },
  { label: 'Cierre y Procesos', path: 'procesos', requiredPermission: 'SU006' },
  { label: 'Promociones', path: 'promociones', requiredPermission: 'SU010' },
];

const SuscripcionesIndexPage: React.FC = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const { tienePermiso, isSuperAdmin } = usePermissions();
    const [selectedSubTab, setSelectedSubTab] = useState<number | false>(false);
  
    const accessibleSubModules = suscripcionesSubModules.filter(
      (subModule) => isSuperAdmin || tienePermiso(subModule.requiredPermission)
    );
  
    useEffect(() => {
        if (accessibleSubModules.length === 0) return;
    
        const currentPath = location.pathname;
        const basePath = '/suscripciones';
        
        // Encuentra la pestaña que mejor coincide con la ruta actual
        const activeTabIndex = accessibleSubModules.findIndex(subModule => 
            currentPath.startsWith(`${basePath}/${subModule.path}`)
        );

        if (activeTabIndex !== -1) {
            setSelectedSubTab(activeTabIndex);
        } else if (currentPath === basePath && accessibleSubModules.length > 0) {
            // Si estamos en la raíz del módulo, redirigir a la primera pestaña accesible
            navigate(accessibleSubModules[0].path, { replace: true });
        } else {
            setSelectedSubTab(false); // Ninguna pestaña activa
        }
    }, [location.pathname, navigate, accessibleSubModules]);
    
    const handleSubTabChange = (_event: React.SyntheticEvent, newValue: number) => {
      navigate(accessibleSubModules[newValue].path);
    };
  
    if (accessibleSubModules.length === 0) {
      return <Typography sx={{ p: 2 }}>No tiene permisos para acceder a este módulo.</Typography>;
    }
  
    return (
      <Box>
        <Typography variant="h5" gutterBottom>Módulo de Suscripciones</Typography>
        <Paper square elevation={1}>
          <Tabs
            value={selectedSubTab}
            onChange={handleSubTabChange}
            indicatorColor="primary"
            textColor="primary"
            variant="scrollable"
            scrollButtons="auto"
            aria-label="sub-módulos de suscripciones"
          >
            {accessibleSubModules.map((subModule) => (
              <Tab key={subModule.path} label={subModule.label} />
            ))}
          </Tabs>
        </Paper>
        <Box sx={{ pt: 2 }}>
          {/* Aquí se renderizará el componente de la sub-ruta activa */}
          <Outlet />
        </Box>
      </Box>
    );
};

export default SuscripcionesIndexPage;