'use client'

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

import { useAuthContext } from '@/contexts/AuthContext'

// Рендерим сайдбар только на клиенте, отключаем 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, user } = useAuthContext()
  const [mounted, setMounted] = useState(false)

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

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

  // До маунта всегда скрываем сайдбар, чтобы избежать гидратационного рассинхрона
  // ВРЕМЕННО: показываем сайдбар если авторизован, даже без данных пользователя
  const hideSidebar = !mounted || hideByRoute || isLoading || !isAuthenticated

  // Отладочные логи (включены в development)
  if (process.env.NODE_ENV === 'development') {
    console.warn('AppShell state:', {
      mounted,
      hideByRoute,
      isLoading,
      isAuthenticated,
      hasUser: !!user,
      hasUserFromContext: !!user,
      hideSidebar,
      pathname,
      userPhone: user?.phone,
      organizationType: user?.organization?.type,
    })
    
    // Дополнительная диагностика
    if (!hideSidebar) {
      console.warn('🟢 AppShell: RENDERING SIDEBAR with user:', user)
    } else {
      console.warn('🔴 AppShell: NOT RENDERING SIDEBAR because:', {
        notMounted: !mounted,
        hideByRoute,
        isLoading,
        notAuthenticated: !isAuthenticated,
      })
    }
  }

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

