"use client";

import { useRouter } from "next/navigation";
import { useEffect } from "react";

import { useAuth } from "@/hooks/useAuth";

import LoadingScreen from "../LoadingScreen/LoadingScreen";

export default function AuthGuard({
  children,
  requiredPermission,
}: {
  children: React.ReactNode;
  requiredPermission?: string;
}): React.ReactElement {
  const router = useRouter();
  const { hasDynamicViews, hasPermission, isAuthenticated, isVerifying } = useAuth();
  const hasRoutePermission =
    !requiredPermission || !hasDynamicViews ? true : hasPermission(requiredPermission, true);

  useEffect(() => {
    if (!isVerifying && !isAuthenticated) {
      router.replace("/login");
    }
  }, [isAuthenticated, isVerifying, router]);

  useEffect(() => {
    if (!isVerifying && isAuthenticated && !hasRoutePermission) {
      router.replace("/main");
    }
  }, [hasRoutePermission, isAuthenticated, isVerifying, router]);

  if (isVerifying) {
    return <LoadingScreen />;
  }

  if (!isAuthenticated) {
    return <LoadingScreen />;
  }

  if (!hasRoutePermission) {
    return <LoadingScreen />;
  }

  return <>{children}</>;
}