Keeping the user logged in forever.

'use client'
import { ReactNode, Suspense } from 'react'
import { AuthLoading, Authenticated, Unauthenticated } from 'convex/react'
import { usePathname, useRouter } from 'next/navigation'
import { useQuery } from 'convex-helpers/react/cache'
import { api } from '@packages/backend/convex/_generated/api'
import LoadingSpinner from './_components/loading-spinner'

export function AuthGuard({ children }: { children: ReactNode }) {

  return (
    <Suspense fallback={<LoadingComponent centered />}>
      <AuthLoading>
        <LoadingComponent centered />
        {/* <>{children}</> */}
      </AuthLoading>
      <Authenticated>
        <AuthenticatedRouteGuard>{children}</AuthenticatedRouteGuard>
      </Authenticated>
      <Unauthenticated>
        <UnauthenticatedRouteGuard>{children}</UnauthenticatedRouteGuard>
      </Unauthenticated>
    </Suspense>
  )
}

function AuthenticatedRouteGuard({ children }: { children: ReactNode }) {
  const pathname = usePathname()
  const router = useRouter()
  const user = useQuery(api.users.currentUser)
  const userState = useQuery(api.users.currentUserState)

  // Show loading while fetching user data
  if (!user || !userState) return <LoadingComponent centered />

  // Add auth route check
  if (pathname === '/auth') {
    router.replace('/home')
    return <LoadingComponent centered />
  }

'use client'
import { ReactNode, Suspense } from 'react'
import { AuthLoading, Authenticated, Unauthenticated } from 'convex/react'
import { usePathname, useRouter } from 'next/navigation'
import { useQuery } from 'convex-helpers/react/cache'
import { api } from '@packages/backend/convex/_generated/api'
import LoadingSpinner from './_components/loading-spinner'

export function AuthGuard({ children }: { children: ReactNode }) {

  return (
    <Suspense fallback={<LoadingComponent centered />}>
      <AuthLoading>
        <LoadingComponent centered />
        {/* <>{children}</> */}
      </AuthLoading>
      <Authenticated>
        <AuthenticatedRouteGuard>{children}</AuthenticatedRouteGuard>
      </Authenticated>
      <Unauthenticated>
        <UnauthenticatedRouteGuard>{children}</UnauthenticatedRouteGuard>
      </Unauthenticated>
    </Suspense>
  )
}

function AuthenticatedRouteGuard({ children }: { children: ReactNode }) {
  const pathname = usePathname()
  const router = useRouter()
  const user = useQuery(api.users.currentUser)
  const userState = useQuery(api.users.currentUserState)

  // Show loading while fetching user data
  if (!user || !userState) return <LoadingComponent centered />

  // Add auth route check
  if (pathname === '/auth') {
    router.replace('/home')
    return <LoadingComponent centered />
  }

  // First check onboarding status
  if (!userState.isOnboarded && pathname !== '/onboarding') {
    router.replace('/onboarding')
    return <LoadingComponent centered />
  }

  // After onboarding is complete, handle redirects based on project status
  if (userState.isOnboarded) {
    if (pathname === '/onboarding') {
      if (userState.currentProjectId) {
        router.replace('/home')
      } else {
        router.replace('/invites')
      }
      return <LoadingComponent centered />
    }

    if (!userState.currentProjectId && pathname !== '/invites') {
      router.replace('/invites')
      return <LoadingComponent centered />
    }
  }

  return <>{children}</>
}

function UnauthenticatedRouteGuard({ children }: { children: ReactNode }) {
  const pathname = usePathname()
  const router = useRouter()

  // Redirect to auth page if not on an auth-related path
  if (!['/auth', '/'].includes(pathname)) {
    router.replace('/auth')
    return <LoadingComponent centered />
  }

  // Render children only if on an auth-related path
  return <>{children}</>
}

// Reusable loading component
function LoadingComponent({ centered }: { centered?: boolean }) {
  return (
    <div className={centered ? 'flex h-screen items-center justify-center' : ''}>
      <LoadingSpinner />
    </div>
  )
}

  // First check onboarding status
  if (!userState.isOnboarded && pathname !== '/onboarding') {
    router.replace('/onboarding')
    return <LoadingComponent centered />
  }

  // After onboarding is complete, handle redirects based on project status
  if (userState.isOnboarded) {
    if (pathname === '/onboarding') {
      if (userState.currentProjectId) {
        router.replace('/home')
      } else {
        router.replace('/invites')
      }
      return <LoadingComponent centered />
    }

    if (!userState.currentProjectId && pathname !== '/invites') {
      router.replace('/invites')
      return <LoadingComponent centered />
    }
  }

  return <>{children}</>
}

function UnauthenticatedRouteGuard({ children }: { children: ReactNode }) {
  const pathname = usePathname()
  const router = useRouter()

  // Redirect to auth page if not on an auth-related path
  if (!['/auth', '/'].includes(pathname)) {
    router.replace('/auth')
    return <LoadingComponent centered />
  }

  // Render children only if on an auth-related path
  return <>{children}</>
}

// Reusable loading component
function LoadingComponent({ centered }: { centered?: boolean }) {
  return (
    <div className={centered ? 'flex h-screen items-center justify-center' : ''}>
      <LoadingSpinner />
    </div>
  )
}