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

const reportesSubModules = [
  { label: 'Existencia de Papel', path: 'existencia-papel' },
  // { label: 'Consumo Bobinas Mensual', path: 'consumo-bobinas-mensual' }, // Ejemplo
  // ... agregar otros reportes aquí a medida que se implementen
];

const ReportesIndexPage: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [selectedSubTab, setSelectedSubTab] = useState<number | false>(false);

  useEffect(() => {
    const currentBasePath = '/reportes';
    // Extrae la parte de la ruta que sigue a '/reportes/'
    const subPathSegment = location.pathname.startsWith(currentBasePath + '/')
                         ? location.pathname.substring(currentBasePath.length + 1).split('/')[0] // Toma solo el primer segmento
                         : undefined;

    let activeTabIndex = -1;

    if (subPathSegment) {
      activeTabIndex = reportesSubModules.findIndex(
        (subModule) => subModule.path === subPathSegment
      );
    }

    if (activeTabIndex !== -1) {
      setSelectedSubTab(activeTabIndex);
    } else {
      // Si estamos exactamente en '/reportes' y hay sub-módulos, navegar al primero.
      if (location.pathname === currentBasePath && reportesSubModules.length > 0) {
        navigate(reportesSubModules[0].path, { replace: true }); // Navega a la sub-ruta
        // setSelectedSubTab(0); // Esto se manejará en la siguiente ejecución del useEffect debido al cambio de ruta
      } else {
        setSelectedSubTab(false); // Ninguna sub-ruta activa o conocida, o no hay sub-módulos
      }
    }
  }, [location.pathname, navigate]); // Solo depende de location.pathname y navigate

  const handleSubTabChange = (_event: React.SyntheticEvent, newValue: number) => {
    // No es necesario setSelectedSubTab aquí directamente, el useEffect lo manejará.
    navigate(reportesSubModules[newValue].path);
  };

  // Si no hay sub-módulos definidos, podría ser un estado inicial
  if (reportesSubModules.length === 0) {
    return (
        <Box sx={{ p: 2 }}>
            <Typography variant="h5" gutterBottom>Módulo de Reportes</Typography>
            <Typography>No hay reportes configurados.</Typography>
        </Box>
    );
  }

  return (
    <Box>
      <Typography variant="h5" gutterBottom>
        Módulo de Reportes
      </Typography>
      <Paper square elevation={1}>
        <Tabs
          value={selectedSubTab} // 'false' es un valor válido para Tabs si ninguna pestaña está seleccionada
          onChange={handleSubTabChange}
          indicatorColor="primary"
          textColor="primary"
          variant="scrollable"
          scrollButtons="auto"
          aria-label="sub-módulos de reportes"
        >
          {reportesSubModules.map((subModule) => (
            <Tab key={subModule.path} label={subModule.label} />
          ))}
        </Tabs>
      </Paper>
      <Box sx={{ pt: 2 }}>
        {/* Outlet renderizará ReporteExistenciaPapelPage u otros
            Solo renderiza el Outlet si hay una pestaña seleccionada VÁLIDA.
            Si selectedSubTab es 'false' (porque ninguna ruta coincide con los sub-módulos),
            se muestra el mensaje.
        */}
        {selectedSubTab !== false ? <Outlet /> : <Typography sx={{p:2}}>Seleccione un reporte del menú lateral o de las pestañas.</Typography>}
      </Box>
    </Box>
  );
};

export default ReportesIndexPage;