components/LayoutWrapper.tsx

'use client'

import { usePathname, useRouter } from 'next/navigation'
import { useAuth } from '@/lib/auth'
import Sidebar from './Sidebar'
import { useEffect } from 'react'

export default function LayoutWrapper({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()
  const router = useRouter()
  const { user, isLoading } = useAuth()
  
  const isLoginPage = pathname === '/login'

  useEffect(() => {
    if (!isLoading && !user && !isLoginPage) {
      router.push('/login')
    }
  }, [user, isLoading, isLoginPage, router])

  // Show login page without sidebar
  if (isLoginPage) {
    return children
  }

  // Show loading or redirect
  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-slate-900">
        <div className="text-white text-lg">Loading...</div>
      </div>
    )
  }

  // Show main app layout
  if (user) {
    return (
      <div className="flex min-h-screen">
        <Sidebar />
        <main className="flex-1 ml-64">
          {children}
        </main>
      </div>
    )
  }

  return null
}