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: 'Movimiento de Bobinas', path: 'movimiento-bobinas' },
  { label: 'Mov. Bobinas por Estado', path: 'movimiento-bobinas-estado' },
  { label: 'Distribución General', path: 'listado-distribucion-general' },
  { label: 'Distribución Canillas', path: 'listado-distribucion-canillas' },
  { label: 'Distrib. Canillas (Importe)', path: 'listado-distribucion-canillas-importe' },
  { label: 'Venta Mensual Secretaría', path: 'venta-mensual-secretaria' },
  { label: 'Det. Distribución Canillas', path: 'detalle-distribucion-canillas' },
  { label: 'Tiradas Pub./Sección', path: 'tiradas-publicaciones-secciones' },
  { label: 'Consumo Bobinas/Sección', path: 'consumo-bobinas-seccion' },
  { label: 'Consumo Bobinas/Pub.', path: 'consumo-bobinas-publicacion' },
  { label: 'Comparativa Cons. Bobinas', path: 'comparativa-consumo-bobinas' },
  { label: 'Cuentas Distribuidores', path: 'cuentas-distribuidores' },
];

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;