import React from "react";
import { useAuth } from "~/contexts/auth-context";
import { LoginForm } from "./login-form";
import toast from "react-hot-toast";

interface AuthGuardProps {
  children: React.ReactNode;
}

export function AuthGuard({ children }: AuthGuardProps) {
  const { isAuthenticated, isLoading, user, token } = useAuth();

  // Show loading while checking authentication
  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-500 mx-auto mb-4"></div>
          <p className="text-gray-600 dark:text-gray-400 font-persian">
            در حال بررسی احراز هویت...
          </p>
        </div>
      </div>
    );
  }

  // If user is not authenticated or token is invalid, show login form
  if (!isAuthenticated || !token || !token.accessToken) {
    return <LoginForm />;
  }

  // If user is authenticated, show the protected content
  return <>{children}</>;
}