"use client";

import React, { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/context/auth-context";
import { UserRole, PermissionCode } from "@/types/auth";

interface RouteGuardProps {
  children: React.ReactNode;
  allowedRoles?: UserRole[];
  requiredPermission?: PermissionCode;
}

export function RouteGuard({
  children,
  allowedRoles,
  requiredPermission,
}: RouteGuardProps) {
  const { user, isAuthenticated, isLoading, hasRole, hasPermission } = useAuth();
  const router = useRouter();

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

    if (!isAuthenticated) {
      router.push("/login");
      return;
    }

    if (allowedRoles && allowedRoles.length > 0 && !hasRole(...allowedRoles)) {
      router.push("/unauthorized");
      return;
    }

    if (requiredPermission && !hasPermission(requiredPermission)) {
      router.push("/unauthorized");
      return;
    }
  }, [isAuthenticated, isLoading, allowedRoles, requiredPermission, hasRole, hasPermission, router]);

  if (isLoading) {
    return (
      <div className="flex-1 flex items-center justify-center min-h-[300px]">
        <div className="flex flex-col items-center gap-2">
          <div className="w-6 h-6 border-2 border-slate-300 border-t-slate-800 rounded-full animate-spin" />
          <span className="text-xs text-slate-500 font-medium">Verifying access...</span>
        </div>
      </div>
    );
  }

  if (!isAuthenticated || (allowedRoles && !hasRole(...allowedRoles))) {
    return null;
  }

  return <>{children}</>;
}