'use client';

import type { ReactNode } from 'react';
import { useState } from 'react';
import { AdminSidebar } from '@/components/nav/AdminSidebar';
import { AdminSystemAlerts } from '@/components/nav/AdminSystemAlerts';
import { AdminTopbar } from '@/components/nav/AdminTopbar';
import { Menu, X } from 'lucide-react';

export default function AdminLayout({ children }: { children: ReactNode }) {
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <div className="min-h-screen bg-surface-sunken text-foreground">
      <div className="mx-auto flex max-w-[1440px]">
        <AdminSidebar mobileOpen={mobileOpen} onMobileClose={() => setMobileOpen(false)} onMobileOpen={() => setMobileOpen(true)} />
        <div className="flex min-w-0 flex-1 flex-col">
          <header className="sticky top-0 z-40 border-b border-white/5 bg-slate-950/70 backdrop-blur md:hidden">
            <div className="flex items-center justify-between px-4 py-3">
              <button
                onClick={() => setMobileOpen(true)}
                className="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-800 text-white border border-white/10"
                aria-label="Open menu"
              >
                <Menu className="h-5 w-5" />
              </button>
              <div className="text-sm font-semibold">Admin Dashboard</div>
              <div className="w-9" />
            </div>
          </header>
          <AdminTopbar />
          <div className="px-4 py-4 md:p-6">
            <AdminSystemAlerts />
            <div className="mt-4">{children}</div>
          </div>
        </div>
      </div>
    </div>
  );
}