"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')
  // Check if we're on an admin page
  const isAdminPage = pathname?.includes('/dashboard/admin')

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

  // Show skeleton while mounting to prevent layout shift
  if (!mounted) {
    return (
      <div className="flex h-screen">
        <Sidebar />
        <div className="w-full flex flex-1 flex-col">
          {!isChatDetailPage && !isAdminPage && (
            <header className="h-16 border-b border-border flex items-center justify-end px-6 bg-background">
              <div className="flex items-center space-x-2">
                <div className="h-10 w-10 bg-muted animate-pulse rounded" />
              </div>
            </header>
          )}
          <main className={`flex-1 ${isChatDetailPage ? 'p-0 overflow-hidden' : 'p-6 overflow-auto'} bg-background relative`}>
            {children}
          </main>
        </div>
      </div>
    )
  }

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