GestionIntegralWeb/Frontend/src/pages/Suscripciones/SuscripcionesIndexPage.tsx

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';

// Define las pestañas del módulo. Ajusta los permisos según sea necesario.
const suscripcionesSubModules = [
  { label: 'Suscriptores', path: 'suscriptores', requiredPermission: 'SU001' },
  { label: 'Facturación', path: 'facturacion', 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);

  // Filtra los sub-módulos a los que el usuario tiene acceso
  const accessibleSubModules = suscripcionesSubModules.filter(
    (subModule) => isSuperAdmin || tienePermiso(subModule.requiredPermission)
  );

  useEffect(() => {
    if (accessibleSubModules.length === 0) {
        // Si no tiene acceso a ningún submódulo, no hacemos nada.
        // El enrutador principal debería manejar esto.
        return;
    }

    const currentBasePath = '/suscripciones';
    const subPath = location.pathname.startsWith(`${currentBasePath}/`)
      ? location.pathname.substring(currentBasePath.length + 1)
      : (location.pathname === currentBasePath ? accessibleSubModules[0]?.path : undefined);

    const activeTabIndex = accessibleSubModules.findIndex(
      (subModule) => subModule.path === subPath
    );

    if (activeTabIndex !== -1) {
      setSelectedSubTab(activeTabIndex);
    } else if (location.pathname === currentBasePath) {
      navigate(accessibleSubModules[0].path, { replace: true });
    } else {
      setSelectedSubTab(false);
    }
  }, [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 }}>
        <Outlet />
      </Box>
    </Box>
  );
};

export default SuscripcionesIndexPage;