import { useEffect } from 'react'
import type { ReactNode } from 'react'
import { useQuery } from '@tanstack/react-query'
import { useNavigate } from '@tanstack/react-router'
import { Loader2 } from 'lucide-react'
import { useAuth } from '../../context/AuthProvider'
import { getOnboardingStatus } from '../../lib/api'
import { RootLayout } from './RootLayout'

export function AppLayoutGuard({ children }: { children: ReactNode }) {
  const { user, isPending } = useAuth()
  const navigate = useNavigate()

  const statusQuery = useQuery({
    queryKey: ['onboarding', 'status'],
    queryFn: getOnboardingStatus,
    enabled: !!user,
    staleTime: 5 * 60 * 1000,
  })

  useEffect(() => {
    if (!user || !statusQuery.data || statusQuery.data.completed) return
    void navigate({ to: '/onboarding', replace: true })
  }, [user, statusQuery.data, navigate])

  if (isPending || (user && statusQuery.isPending)) {
    return (
      <div className="flex min-h-dvh items-center justify-center">
        <Loader2 className="size-6 animate-spin text-foreground/40" />
      </div>
    )
  }

  return <RootLayout>{children}</RootLayout>
}