'use client'

import { ReactNode, useEffect } from 'react'
import { Sidebar, Header, MobileNav } from '@/components/layout'
import { useSidebar } from '@/app/providers'
import { useAlerts } from '@/components/alerts'

interface DashboardLayoutProps {
  children: ReactNode
  title: string
}

export function DashboardLayout({ children, title }: DashboardLayoutProps) {
  const { isOpen, toggle, close, open } = useSidebar()
  const { unreadCount } = useAlerts()

  // Ensure sidebar is open on desktop mount
  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 1024) {
        open()
      } else {
        close()
      }
    }

    // Initial check
    handleResize()

    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [open, close])

  return (
    <div className="flex min-h-screen bg-slate-950">
      {/* Sidebar */}
      <Sidebar
        isOpen={isOpen}
        onClose={close}
        unreadAlertsCount={unreadCount}
      />

      {/* Main content wrapper */}
      <div className="flex flex-1 flex-col lg:ml-0 min-w-0">
        {/* Header */}
        <Header onMenuClick={toggle} title={title} />

        {/* Page content */}
        <main className="flex-1 p-4 md:p-6 lg:p-8 pb-24 lg:pb-8">
          <div className="mx-auto max-w-7xl h-full">
            {children}
          </div>
        </main>
      </div>

      {/* Mobile Navigation */}
      <MobileNav unreadAlertsCount={unreadCount} />
    </div>
  )
}