"use client";

import { useState, useEffect } from "react";
import { usePathname } from "next/navigation";
import { Sidebar } from "@/components/layout/Sidebar";
import { Topbar } from "@/components/layout/Topbar";
import { NewOrderToast } from "@/components/layout/NewOrderToast";
import { AdminOrdersProvider } from "@/lib/data/admin-orders-provider";
import { AdminNotificationsProvider } from "@/lib/data/admin-notifications-provider";

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  const [collapsed, setCollapsed] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const pathname = usePathname();

  // Close the mobile drawer whenever the route changes
  useEffect(() => {
    setMobileOpen(false);
  }, [pathname]);

  return (
    <AdminOrdersProvider>
      <AdminNotificationsProvider>
        <div className="flex min-h-dvh">
          <Sidebar
            collapsed={collapsed}
            onToggleCollapsed={() => setCollapsed((v) => !v)}
            mobileOpen={mobileOpen}
            onCloseMobile={() => setMobileOpen(false)}
          />
          <div className="flex min-h-dvh flex-1 flex-col">
            <Topbar onOpenMobileSidebar={() => setMobileOpen(true)} />
            <main className="flex-1 px-4 py-5 sm:px-6 lg:px-8 lg:py-7">{children}</main>
          </div>
        </div>
        <NewOrderToast />
      </AdminNotificationsProvider>
    </AdminOrdersProvider>
  );
}