'use client';

import { useEffect, ReactNode } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/hooks/useAuth';
import { UserRole } from '@/types/auth';

interface RoleGuardProps {
  children: ReactNode;
  allowedRoles: UserRole[];
  fallbackRoute?: string;
  showUnauthorized?: boolean;
}

/**
 * Componente que protege rotas baseado nos roles do usuário
 */
export const RoleGuard = ({ 
  children, 
  allowedRoles, 
  fallbackRoute,
  showUnauthorized = false 
}: RoleGuardProps) => {
  const { userRole, loading, isAuthenticated, canAccess } = useAuth();
  const router = useRouter();

  useEffect(() => {
    if (loading) return;

    // Se não está autenticado, redirecionar para login
    if (!isAuthenticated) {
      router.push('/login');
      return;
    }

    // Se não tem permissão para acessar
    if (!canAccess(allowedRoles)) {
      if (fallbackRoute) {
        router.push(fallbackRoute);
      } else {
        // Redirecionar para rota padrão baseada no role
        switch (userRole) {
          case UserRole.SUPERADMIN:
          case UserRole.ADMIN:
            router.push('/dashboard');
            break;
          case UserRole.COLABORADOR:
            router.push('/entregas');
            break;
          default:
            router.push('/login');
        }
      }
      return;
    }
  }, [loading, isAuthenticated, userRole, canAccess, allowedRoles, router, fallbackRoute]);

  // Mostrar loading enquanto verifica autenticação
  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600"></div>
      </div>
    );
  }

  // Se não está autenticado, não mostrar conteúdo
  if (!isAuthenticated) {
    return null;
  }

  // Se não tem permissão e deve mostrar mensagem de não autorizado
  if (!canAccess(allowedRoles)) {
    if (showUnauthorized) {
      return (
        <div className="flex items-center justify-center min-h-screen">
          <div className="text-center">
            <h1 className="text-2xl font-bold text-red-600 mb-4">Acesso Negado</h1>
            <p className="text-gray-600 mb-4">
              Você não tem permissão para acessar esta página.
            </p>
            <button
              onClick={() => router.back()}
              className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
            >
              Voltar
            </button>
          </div>
        </div>
      );
    }
    return null;
  }

  // Se tem permissão, mostrar o conteúdo
  return <>{children}</>;
};

/**
 * HOC para proteger páginas com roles específicos
 */
export const withRoleGuard = (
  Component: React.ComponentType<any>,
  allowedRoles: UserRole[],
  options?: {
    fallbackRoute?: string;
    showUnauthorized?: boolean;
  }
) => {
  return function ProtectedComponent(props: any) {
    return (
      <RoleGuard 
        allowedRoles={allowedRoles}
        fallbackRoute={options?.fallbackRoute}
        showUnauthorized={options?.showUnauthorized}
      >
        <Component {...props} />
      </RoleGuard>
    );
  };
};