'use client'

import dynamic from 'next/dynamic'
import { usePathname } from 'next/navigation'
import { useEffect, useState } from 'react'

import { useAuth } from '@/hooks/useAuth'

// Рендерим сайдбар только на клиенте, отключаем SSR, чтобы избежать гидратационных расхождений
const Sidebar = dynamic(() => import('@/components/dashboard/sidebar').then((m) => m.Sidebar), {
  ssr: false,
})

export function AppShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()
  const { isAuthenticated, isLoading } = useAuth()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  const hideByRoute =
    pathname === '/' || pathname?.startsWith('/login') || pathname?.startsWith('/register')

  // До маунта всегда скрываем сайдбар, чтобы избежать гидратационного рассинхрона
  const hideSidebar = !mounted || hideByRoute || isLoading || !isAuthenticated

  return (
    <>
      {!hideSidebar && <Sidebar isRootInstance />}
      <div className="flex-1 min-w-0 overflow-hidden">{children}</div>
    </>
  )
}

