import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import { usePermissions } from '../hooks/usePermissions';
import { Alert, Box, CircularProgress } from '@mui/material';

interface SectionProtectedRouteProps {
  requiredPermission?: string | null; // Hacerlo opcional
  onlySuperAdmin?: boolean;           // Nueva prop
  sectionName: string;
  children?: React.ReactNode;
}

const SectionProtectedRoute: React.FC<SectionProtectedRouteProps> = ({
  requiredPermission,
  onlySuperAdmin = false, // Default a false
  sectionName,
  children
}) => {
  const { isAuthenticated, isLoading: authIsLoading } = useAuth();
  const { tienePermiso, isSuperAdmin, currentUser } = usePermissions();

  if (authIsLoading) {
    return (
      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '80vh' }}>
        <CircularProgress />
      </Box>
    );
  }

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  if (!currentUser) {
    console.error("SectionProtectedRoute: Usuario autenticado pero currentUser es null.");
    return <Navigate to="/login" replace />;
  }

  let canAccessSection = false;
  if (onlySuperAdmin) {
    canAccessSection = isSuperAdmin;
  } else if (requiredPermission) {
    canAccessSection = isSuperAdmin || tienePermiso(requiredPermission);
  } else {
    // Si no es onlySuperAdmin y no hay requiredPermission, por defecto se permite si está autenticado
    // Esto podría ser para secciones públicas post-login pero sin permiso específico.
    // O podrías querer que siempre haya un requiredPermission o onlySuperAdmin.
    // Por ahora, lo dejaremos pasar si no se especifica ninguno y no es onlySuperAdmin.
    // Sin embargo, para los SSxxx, siempre habrá un requiredPermission.
    // Este else es más un fallback teórico.
    canAccessSection = true; 
  }


  if (!canAccessSection) {
    return (
      <Box sx={{p: 3, display:'flex', justifyContent:'center', mt: 2}}>
        <Alert severity="error" sx={{width: '100%', maxWidth: 'md'}}>
          No tiene permiso para acceder a la sección de {sectionName}.
        </Alert>
      </Box>
    );
  }

  return children ? <>{children}</> : <Outlet />;
};

export default SectionProtectedRoute;