import React from 'react';
import { Navigate, useLocation } from 'react-router-dom';
import { useAuth, AuthContextType } from '../../hooks/useAuth';

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

export function ProtectedRoute({ children, allowedRoles = [] }: ProtectedRouteProps) {
  const { user, loading, userRole } = useAuth();
  const location = useLocation();

  console.log('ProtectedRoute - User:', user?.user_metadata);
  console.log('ProtectedRoute - UserRole do contexto:', userRole);
  console.log('ProtectedRoute - Roles permitidas:', allowedRoles);

  if (loading) {
    return <div>Carregando...</div>;
  }

  // Se não houver usuário, redireciona para login
  if (!user) {
    return <Navigate to="/login/school" state={{ from: location }} replace />;
  }

  // Pegar o role diretamente dos metadados do usuário
  const currentRole = user.user_metadata?.role;
  console.log('ProtectedRoute - Role dos metadados:', currentRole);

  // Se não houver roles requeridas, permite acesso
  if (allowedRoles.length === 0) {
    return <>{children}</>;
  }

  // Se o usuário não tiver o role necessário
  if (!allowedRoles.includes(currentRole)) {
    console.log('ProtectedRoute - Acesso negado');
    
    // Redireciona para a página apropriada
    switch (currentRole) {
      case 'school':
        return <Navigate to="/dashboard" replace />;
      case 'teacher':
        return <Navigate to="/professor" replace />;
      case 'student':
        return <Navigate to="/aluno" replace />;
      default:
        return <Navigate to="/" replace />;
    }
  }

  return <>{children}</>;
}