'use client'

import { useState, useEffect } from 'react'
import { useAuth } from '@/app/contexts/AuthContext'
import { LoadingScreen } from '@/components/LoadingScreen'

interface AuthenticatedLayoutProps {
  children: React.ReactNode
}

export function AuthenticatedLayout({ children }: AuthenticatedLayoutProps) {
  const [isReady, setIsReady] = useState(false)
  const { isAuthManagerInitialized, isUserAuthWatcherInitialized } = useAuth()

  useEffect(() => {
    // Attendre que AuthManager ET UserAuthWatcher soient initialisés
    if (!isAuthManagerInitialized || !isUserAuthWatcherInitialized) {
      return
    }

    // Une fois que les deux sont initialisés, on peut afficher le contenu
    setIsReady(true)
  }, [isAuthManagerInitialized, isUserAuthWatcherInitialized])

  if (!isReady) {
    return <LoadingScreen />
  }

  return <>{children}</>
}