import { createRootRoute, Outlet, useRouterState } from '@tanstack/react-router'
import { useEffect } from 'react'
import { Sidebar } from '@/components/layout/Sidebar'
import { AppHeader } from '@/components/layout/AppHeader'
import { MobileNav } from '@/components/layout/MobileNav'
import { AuthModal } from '@/features/auth/components/AuthModal'
import { useAuthStore } from '@/store/auth-store'

export const Route = createRootRoute({
  component: RootLayout,
})

// Routes that own the full viewport — hide sidebar, top header, and mobile nav.
const FULLSCREEN_ROUTES = new Set(['/toeic/session'])

function RootLayout() {
  const initialize = useAuthStore((s) => s.initialize)
  const pathname = useRouterState({ select: (s) => s.location.pathname })
  const isFullscreen = FULLSCREEN_ROUTES.has(pathname)

  useEffect(() => {
    initialize()
  }, [initialize])

  if (isFullscreen) {
    return (
      <div className="min-h-screen" style={{ background: 'var(--at-paper-2)' }}>
        <Outlet />
        <AuthModal />
      </div>
    )
  }

  return (
    <div className="min-h-screen" style={{ background: 'var(--at-paper)' }}>
      <Sidebar />
      <AppHeader />
      {/* Extra bottom padding on mobile to clear the floating tab bar
          (68px pill + 10px margin + safe-area). */}
      <main className="lg:ml-60 pt-16 pb-28 lg:pb-0 min-h-screen">
        <Outlet />
      </main>
      <MobileNav />
      <AuthModal />
    </div>
  )
}
