import { useAuth } from '../contexts/AuthContext';
import { Navigate, useLocation } from 'react-router-dom';

interface ProtectedRouteProps {
  children: React.ReactNode;
  roles?: string[];
}

export function ProtectedRoute({ children, roles }: ProtectedRouteProps) {
  const { user } = useAuth();
  const location = useLocation();

  console.log('ProtectedRoute - Current Path:', location.pathname);
  console.log('ProtectedRoute - Required Roles:', roles);
  console.log('ProtectedRoute - User:', user);

  if (!user) {
    console.log('ProtectedRoute - No user, redirecting to login');
    return <Navigate to="/login" />;
  }

  if (!roles || roles.length === 0) {
    console.log('ProtectedRoute - No roles required, allowing access');
    return <>{children}</>;
  }

  if (!roles.includes(user.perfil)) {
    console.log('ProtectedRoute - Access denied');
    console.log('Required roles:', roles);
    console.log('User role:', user.perfil);
    return <Navigate to="/dashboard" replace state={{ from: location }} />;
  }

  console.log('ProtectedRoute - Access granted');
  return <>{children}</>;
}