dishplanner/frontend/app/components/layout/AuthGuard.tsx

import { useAuth } from '@/context/AuthContext';
import React, { useEffect, useState } from 'react';
import { useLocation, useNavigate } from "react-router"

// Optional Loading spinner component to display while loading
const LoadingSpinner = () => (
    <div className="flex justify-center items-center min-h-screen">
        <div className="animate-spin w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full"></div>
    </div>
);

export default function AuthGuard({ children }: { children: React.ReactNode }) {
    const { isAuthenticated } = useAuth(); // Access the authentication state from AuthContext
    const navigate = useNavigate();
    const [loading, setLoading] = useState(true);
    const location = useLocation();

    const publicRoutes = ['/login', '/register'];
    const isPublic = publicRoutes.includes(location.pathname);

    useEffect(() => {
        // Determine behavior based on auth state and route type
        if (isAuthenticated === null) {
            // Await authentication resolution (e.g., token check)
            setLoading(true);
        } else if (isAuthenticated && isPublic) {
            // Redirect authenticated users away from public pages
            navigate('/', { replace: true });
        } else if (!isAuthenticated && !isPublic) {
            // Redirect unauthenticated users trying to access protected pages
            navigate('/login', { replace: true });
        } else {
            // Otherwise, stop loading since the state is resolved
            setLoading(false);
        }
    }, [isAuthenticated, location.pathname, isPublic, navigate]);

    // Show a spinner while authentication state is loading
    if (loading) {
        return <LoadingSpinner />;
    }

    // Render children only when the authentication state and path are valid
    return <>{children}</>;
}