import React, { useState, useEffect, useMemo } from 'react';
import { Box, Paper, Typography, List, ListItemButton, ListItemText, Collapse, CircularProgress } from '@mui/material';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import { usePermissions } from '../../hooks/usePermissions';

const allReportModules: { category: string; label: string; path: string; requiredPermission: string; }[] = [
  { category: 'Existencia Papel', label: 'Existencia de Papel', path: 'existencia-papel', requiredPermission: 'RR005' },
  { category: 'Movimientos Bobinas', label: 'Movimiento de Bobinas', path: 'movimiento-bobinas', requiredPermission: 'RR006' },
  { category: 'Movimientos Bobinas', label: 'Mov. Bobinas por Estado', path: 'movimiento-bobinas-estado', requiredPermission: 'RR006' },
  { category: 'Listados Distribución', label: 'Distribución Distribuidores', path: 'listado-distribucion-distribuidores', requiredPermission: 'RR002' },
  { category: 'Listados Distribución', label: 'Distribución Canillas', path: 'listado-distribucion-canillas', requiredPermission: 'RR002' },
  { category: 'Listados Distribución', label: 'Distribución General', path: 'listado-distribucion-general', requiredPermission: 'RR002' },
  { category: 'Listados Distribución', label: 'Distrib. Canillas (Importe)', path: 'listado-distribucion-canillas-importe', requiredPermission: 'RR002' },
  { category: 'Listados Distribución', label: 'Detalle Distribución Canillas', path: 'detalle-distribucion-canillas', requiredPermission: 'MC005' },
  { category: 'Secretaría', label: 'Reportes de Ventas', path: 'venta-mensual-secretaria', requiredPermission: 'RR012' },
  { category: 'Tiradas por Publicación', label: 'Tiradas Publicación/Sección', path: 'tiradas-publicaciones-secciones', requiredPermission: 'RR008' },
  { category: 'Consumos Bobinas', label: 'Consumo Bobinas/Sección', path: 'consumo-bobinas-seccion', requiredPermission: 'RR007' },
  { category: 'Consumos Bobinas', label: 'Consumo Bobinas/Publicación', path: 'consumo-bobinas-publicacion', requiredPermission: 'RR007' },
  { category: 'Consumos Bobinas', label: 'Comparativa Consumo Bobinas', path: 'comparativa-consumo-bobinas', requiredPermission: 'RR007' },
  { category: 'Balance de Cuentas', label: 'Cuentas Distribuidores', path: 'cuentas-distribuidores', requiredPermission: 'RR001' },
  { category: 'Ctrl. Devoluciones', label: 'Control de Devoluciones', path: 'control-devoluciones', requiredPermission: 'RR003' },
  { category: 'Novedades de Canillitas', label: 'Novedades de Canillitas', path: 'novedades-canillas', requiredPermission: 'RR004' },
  { category: 'Listados Distribución', label: 'Dist. Mensual Can/Acc', path: 'listado-distribucion-mensual', requiredPermission: 'RR009' },
  { category: 'Suscripciones', label: 'Facturas para Publicidad', path: 'suscripciones-facturas-publicidad', requiredPermission: 'RR010' },
  { category: 'Suscripciones', label: 'Distribución de Suscripciones', path: 'suscripciones-distribucion', requiredPermission: 'RR011' },
];

const predefinedCategoryOrder = [
  'Balance de Cuentas', 'Listados Distribución', 'Ctrl. Devoluciones',
  'Novedades de Canillitas', 'Suscripciones', 'Existencia Papel',
  'Movimientos Bobinas', 'Consumos Bobinas', 'Tiradas por Publicación', 'Secretaría',
];

const ReportesIndexPage: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [expandedCategory, setExpandedCategory] = useState<string | false>(false);
  const [isLoadingInitialNavigation, setIsLoadingInitialNavigation] = useState(true);
  const { tienePermiso, isSuperAdmin } = usePermissions();

  const accessibleReportModules = useMemo(() => {
    return allReportModules.filter(module =>
      isSuperAdmin || tienePermiso(module.requiredPermission)
    );
  }, [isSuperAdmin, tienePermiso]);
  
  const accessibleCategories = useMemo(() => {
    const categoriesWithAccess = new Set(accessibleReportModules.map(r => r.category));
    return predefinedCategoryOrder.filter(category => categoriesWithAccess.has(category));
  }, [accessibleReportModules]);

  useEffect(() => {
    const currentBasePath = '/reportes';
    const pathParts = location.pathname.substring(currentBasePath.length + 1).split('/');
    const subPathSegment = pathParts[0];

    if (subPathSegment) {
      const activeReport = accessibleReportModules.find(module => module.path === subPathSegment);
      if (activeReport) {
        setExpandedCategory(activeReport.category);
      } else {
        // Si la URL apunta a un reporte que no es accesible, no expandimos nada
        setExpandedCategory(false);
      }
    } else {
      // Si estamos en la página base (/reportes), expandimos la primera categoría disponible.
      if (accessibleCategories.length > 0) {
        setExpandedCategory(accessibleCategories[0]);
      } else {
        setExpandedCategory(false);
      }
    }
    
    // No hay navegación automática, solo manejamos el estado de carga.
    setIsLoadingInitialNavigation(false);

  }, [location.pathname, accessibleReportModules, accessibleCategories]);

  const handleCategoryClick = (categoryName: string) => {
    setExpandedCategory(prev => (prev === categoryName ? false : categoryName));
  };

  const handleReportClick = (reportPath: string) => {
    navigate(reportPath);
  };

  const isReportActive = (reportPath: string) => {
    return location.pathname.startsWith(`/reportes/${reportPath}`);
  };

  if (isLoadingInitialNavigation) {
    return (
        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: '100%' }}>
            <CircularProgress />
        </Box>
    );
  }

  return (
    <Box sx={{ display: 'flex', width: '100%', height: '100%' }}>
      <Paper elevation={0} square sx={{
          width: { xs: 220, sm: 250, md: 280 },
          minWidth: { xs: 200, sm: 220 },
          height: '100%',
          borderRight: (theme) => `1px solid ${theme.palette.divider}`,
          overflowY: 'auto',
          bgcolor: 'background.paper',
        }}>
        <Box sx={{ p: 1.5 }}>
            <Typography variant="h6" component="div" sx={{ fontWeight: 'medium', ml:1 }}>
            Reportes
            </Typography>
        </Box>
        
        {accessibleCategories.length > 0 ? (
        <List component="nav" dense sx={{ pt: 0 }}>
          {accessibleCategories.map((category) => {
            const reportsInCategory = accessibleReportModules.filter(r => r.category === category);
            const isExpanded = expandedCategory === category;

            return (
              <React.Fragment key={category}>
                <ListItemButton
                  onClick={() => handleCategoryClick(category)}
                  sx={{
                    borderLeft: isExpanded ? (theme) => `4px solid ${theme.palette.primary.main}` : '4px solid transparent',
                    pr: 1,
                    '&:hover': { backgroundColor: 'action.hover' }
                  }}>
                  <ListItemText primary={category} primaryTypographyProps={{ fontWeight: isExpanded ? 'bold' : 'normal' }}/>
                  {isExpanded ? <ExpandLess /> : <ExpandMore />}
                </ListItemButton>
                <Collapse in={isExpanded} timeout="auto" unmountOnExit>
                    <List component="div" disablePadding dense>
                      {reportsInCategory.map((report) => (
                        <ListItemButton
                          key={report.path}
                          selected={isReportActive(report.path)}
                          onClick={() => handleReportClick(report.path)}
                          sx={{ 
                            pl: 3.5, py: 0.8,
                            ...(isReportActive(report.path) && {
                                backgroundColor: (theme) => theme.palette.action.selected,
                                borderLeft: (theme) => `4px solid ${theme.palette.primary.light}`,
                                '& .MuiListItemText-primary': { fontWeight: 'medium' },
                            }),
                            '&:hover': { backgroundColor: (theme) => theme.palette.action.hover }
                          }}>
                          <ListItemText primary={report.label} primaryTypographyProps={{ variant: 'body2' }}/>
                        </ListItemButton>
                      ))}
                    </List>
                </Collapse>
              </React.Fragment>
            );
          })}
        </List>
        ) : (
            <Typography sx={{p:2, fontStyle: 'italic'}}>No tiene acceso a ningún reporte.</Typography>
        )}
      </Paper>

      <Box component="main" sx={{
          flexGrow: 1, p: { xs: 1, sm: 2, md: 3 },
          overflowY: 'auto', height: '100%', bgcolor: 'grey.100'
        }}>
        {/* Lógica para mostrar el mensaje de bienvenida */}
        {location.pathname === '/reportes' && !isLoadingInitialNavigation && (
             <Typography sx={{p:2, textAlign:'center', mt: 4, color: 'text.secondary'}}>
                {accessibleReportModules.length > 0 
                    ? "Seleccione una categoría y un reporte del menú lateral." 
                    : "No tiene acceso a ningún reporte."
                }
            </Typography>
        )}
        <Outlet />
      </Box>
    </Box>
  );
};

export default ReportesIndexPage;