import { Navigate, useLocation } from "react-router-dom";

import { useAuth } from "../contexts/AuthContext";

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}</>;
}