"use client"

import { useState, useEffect } from "react"
import { useTheme } from "next-themes"
import { usePathname } from "next/navigation"
import Sidebar from "./sidebar"
import UnifiedNotifications from "@/components/notifications/UnifiedNotifications"
import type React from "react"

interface LayoutProps {
  children: React.ReactNode
}

export default function Layout({ children }: LayoutProps) {
  const { theme } = useTheme()
  const [mounted, setMounted] = useState(false)
  const pathname = usePathname()
  
  // Check if we're in a chat detail page
  const isChatDetailPage = pathname?.includes('/dashboard/chats/') && !pathname?.endsWith('/chats') && !pathname?.endsWith('/new')

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

  if (!mounted) return null

  return (
    <div className={`flex h-screen ${theme === "dark" ? "dark" : ""}`}>
      <Sidebar />
      <div className="w-full flex flex-1 flex-col">
        {!isChatDetailPage && (
          <header className="h-16 border-b border-border flex items-center justify-end px-6">
            <div className="flex items-center space-x-2">
              <UnifiedNotifications />
            </div>
          </header>
        )}
        <main className={`flex-1 ${isChatDetailPage ? 'p-0 overflow-hidden' : 'p-6 overflow-auto'} dark:bg-[#0F0F12] relative`}>
          {children}
        </main>
      </div>
    </div>
  )
}

