import LogoutButton from "@/components/auth/LogoutButton";
import Footer from "@/components/global/Footer";
import MobileSidebar from "@/components/global/MobileSidebar";
import ModeToggle from "@/components/global/ModeToggle";
import Sidebar from "@/components/global/Sidebar";
import type { ReactNode } from "react";

// Main admin layout with sidebar, header actions, and footer.
export default function AdminLayout({
  children,
}: Readonly<{
  children: ReactNode;
}>) {
  return (
    <div className="min-h-screen w-full">
      <div className="flex min-h-screen w-full">
        <aside className="hidden md:flex md:w-64 md:flex-col md:border-r md:bg-background">
          <Sidebar />
        </aside>
        <div className="flex min-h-screen flex-1 flex-col">
          <header className="sticky top-0 z-50 h-14 w-full border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
            <div className="flex h-14 items-center gap-3 px-4">
              <div className="md:hidden">
                <MobileSidebar />
              </div>

              <div className="flex-1">
                {/* Optional: put breadcrumbs or page title here later */}
              </div>

              <div className="flex items-center gap-3">
                <LogoutButton />
                <ModeToggle />
              </div>
            </div>
          </header>
          <main className="flex-1">
            <div className="container mx-auto px-4 py-8">{children}</div>
          </main>
          <footer className="mt-auto h-14 border-t bg-background/95 px-4 py-2 backdrop-blur supports-backdrop-filter:bg-background/60">
            <Footer />
          </footer>
        </div>
      </div>
    </div>
  );
}