veza/apps/web/src/components/auth/ProtectedRoute.tsx

import { Navigate } from 'react-router-dom';
import { useAuth } from '@/features/auth/hooks/useAuth';
import { TokenStorage } from '@/services/tokenStorage';
import { useEffect, useState } from 'react';

interface ProtectedRouteProps {
  children: React.ReactNode;
}

/**
 * Composant de protection des routes authentifiées.
 * Redirige vers /login si l'utilisateur n'est pas authentifié.
 * Vérifie à la fois le store et le token dans localStorage pour éviter les problèmes de timing.
 */
export function ProtectedRoute({ children }: ProtectedRouteProps) {
  const { isAuthenticated, user } = useAuth();
  const [isChecking, setIsChecking] = useState(true);
  const hasToken = !!TokenStorage.getAccessToken();

  useEffect(() => {
    // Donner un peu de temps pour que le store se hydrate
    const timer = setTimeout(() => {
      setIsChecking(false);
    }, 100);
    return () => clearTimeout(timer);
  }, []);

  // Si on vérifie encore, attendre un peu
  if (isChecking) {
    return null; // ou un spinner
  }

  // Vérifier à la fois le store et le token
  // Si le token existe mais le store n'est pas encore hydraté, on attend
  const isAuth = isAuthenticated || (hasToken && user);

  if (!isAuth) {
    return <Navigate to="/login" replace />;
  }

  return <>{children}</>;
}