spsays-admin/app/(dashboard)/layout.tsx

"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { Menu } from "lucide-react";
import { api, staff, type Me, type StaffMe } from "@/lib/api";
import { RequirePermission, StaffProvider } from "@/components/staff-context";
import { Button } from "@/components/ui/button";
import { ConfirmProvider } from "@/components/confirm";
import { NAV, Sidebar } from "./sidebar";

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const router = useRouter();
  const pathname = usePathname();
  const [me, setMe] = useState<Me | null>(null);
  const [staffMe, setStaffMe] = useState<StaffMe | null>(null);
  const [checked, setChecked] = useState(false);
  // Navigation drawer, below lg only.
  const [navOpen, setNavOpen] = useState(false);

  // Staff gate: only an account holding an admin role, and not blocked from
  // the panel, may see the dashboard. /admin/me answers both at once — it 403s
  // otherwise. The BFF enforces this on every /admin/* call regardless, so
  // this is UX, not the security boundary.
  useEffect(() => {
    let cancelled = false;
    Promise.all([api.me(), staff.me()])
      .then(([u, s]) => {
        if (cancelled) return;
        if (!u || !s) {
          router.replace("/login");
          return;
        }
        setMe(u);
        setStaffMe(s);
        setChecked(true);
      })
      .catch(() => {
        if (!cancelled) router.replace("/login");
      });
    return () => {
      cancelled = true;
    };
  }, [router]);

  // A role without stats:read has no Overview — send them to the first
  // section they can use instead of a page of permission errors.
  useEffect(() => {
    if (
      !staffMe ||
      pathname !== "/" ||
      staffMe.permissions.includes("stats:read")
    )
      return;
    const first = NAV.find((n) => staffMe.permissions.includes(n.perm));
    if (first) router.replace(first.href);
  }, [staffMe, pathname, router]);

  async function signOut() {
    await api.logout().catch(() => {});
    router.replace("/login");
  }

  if (!checked || !me || !staffMe) {
    return (
      <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
        Loading…
      </div>
    );
  }

  const section =
    NAV.find(
      (n) =>
        n.href !== "/" &&
        (pathname === n.href || pathname.startsWith(n.href + "/")),
    ) ?? (pathname === "/" ? NAV[0] : undefined);

  return (
    <div className="flex min-h-screen">
      <Sidebar
        me={me}
        staffMe={staffMe}
        pathname={pathname}
        open={navOpen}
        onClose={() => setNavOpen(false)}
        onSignOut={signOut}
      />

      <div className="flex min-w-0 flex-1 flex-col">
        {/* Below lg: a top bar with the menu button and where you are. */}
        <header className="sticky top-0 z-30 flex items-center gap-2 border-b border-border bg-card/95 px-2 py-2 backdrop-blur lg:hidden">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setNavOpen(true)}
            aria-label="Open menu"
            className="size-10 px-0"
          >
            <Menu className="size-5" />
          </Button>
          <p className="min-w-0 truncate text-sm font-semibold text-foreground">
            {section?.label ?? "Admin"}
          </p>
        </header>

        {/* break-words: a safety net so no unbroken string (a URL, a long
            handle) can push a page sideways. Labels use <Clamp> on top. */}
        <main className="min-w-0 flex-1 break-words px-4 py-5 sm:px-6 sm:py-6 lg:px-10">
          <div className="mx-auto max-w-6xl">
            <StaffProvider value={staffMe}>
              <ConfirmProvider>
                {/* The section's own permission, so a URL typed straight in
                  explains itself instead of failing call by call. */}
                {section ? (
                  <RequirePermission perm={section.perm}>
                    {children}
                  </RequirePermission>
                ) : (
                  children
                )}
              </ConfirmProvider>
            </StaffProvider>
          </div>
        </main>
      </div>
    </div>
  );
}