"use client"

import { useState } from "react"
import { Toaster } from "sonner"
import { Sidebar } from "@/components/dashboard/sidebar"
import { SidebarContext } from "@/components/dashboard/sidebar-context"

export function DashboardShell({ children }: { children: React.ReactNode }) {
  const [sidebarOpen, setSidebarOpen] = useState(false)

  return (
    <SidebarContext.Provider
      value={{
        onMenuToggle: () => setSidebarOpen((o) => !o),
        onMenuClose: () => setSidebarOpen(false),
      }}
    >
      <div className="flex min-h-screen bg-background">
        <div className="hidden lg:flex shrink-0 sticky top-0 h-screen w-[240px] min-w-[240px] max-w-[240px]">
          <Sidebar />
        </div>

        {sidebarOpen && (
          <div className="lg:hidden fixed inset-0 z-40 flex">
            <div
              className="absolute inset-0 bg-black/50"
              onClick={() => setSidebarOpen(false)}
              aria-hidden="true"
            />
            <div className="relative z-50 flex shrink-0 w-[240px] min-w-[240px] max-w-[240px]">
              <Sidebar />
            </div>
          </div>
        )}

        <div className="flex flex-1 flex-col min-w-0">
          <main className="flex flex-1 flex-col min-h-0 min-w-0 w-full">
            {children}
          </main>
        </div>

        <Toaster richColors closeButton position="top-right" />
      </div>
    </SidebarContext.Provider>
  )
}