'use client';

import type { ReactNode } from 'react';
import { useState } from 'react';
import { Menu, X } from 'lucide-react';
import { SuperAdminSidebar } from '@/components/nav/SuperAdminSidebar';
import { SuperAdminTopbar } from '@/components/nav/SuperAdminTopbar';
import { PriorityBoundary } from '@/components/priority/PriorityBoundary';

export default function SuperAdminLayout({ 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-[1600px]">
        <div className="shrink-0">
          <SuperAdminSidebar mobileOpen={mobileOpen} onMobileClose={() => setMobileOpen(false)} onMobileOpen={() => setMobileOpen(true)} />
        </div>
        <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">Super Admin Console</div>
              <div className="w-9" />
            </div>
          </header>
          <PriorityBoundary priority={0} name="superadmin-topbar">
            <SuperAdminTopbar />
          </PriorityBoundary>
          <main className="flex-1 p-4 md:p-6">
            <PriorityBoundary priority={1} name="superadmin-content">
              {children}
            </PriorityBoundary>
          </main>
        </div>
      </div>
    </div>
  );
}