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 {
  ClipboardCheck,
  Flag,
  ShieldCheck,
  Gift,
  Megaphone,
  Quote,
  FolderClosed,
  LayoutDashboard,
  LayoutGrid,
  Link2,
  LogOut,
  MessageSquare,
  Users,
} from "lucide-react";
import { api, staff, MANAGE_STAFF, type Me, type StaffMe } from "@/lib/api";
import { RequirePermission, StaffProvider } from "@/components/staff-context";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { ConfirmProvider } from "@/components/confirm";

// Each entry names the permission that unlocks it, so the sidebar only shows
// what the signed-in role can actually use.
const NAV = [
  { href: "/", label: "Overview", icon: LayoutDashboard, perm: "stats:read" },
  { href: "/users", label: "Users", icon: Users, perm: "users:read" },
  { href: "/posts", label: "Posts", icon: LayoutGrid, perm: "posts:moderate" },
  {
    href: "/collections",
    label: "Collections",
    icon: FolderClosed,
    perm: "collections:read",
  },
  {
    href: "/short-urls",
    label: "Short URLs",
    icon: Link2,
    perm: "short_urls:read",
  },
  {
    href: "/feedback",
    label: "Feedback",
    icon: MessageSquare,
    perm: "feedback:read",
  },
  { href: "/reports", label: "Reports", icon: Flag, perm: "reports:read" },
  {
    href: "/broadcasts",
    label: "Announcements",
    icon: Megaphone,
    perm: "broadcasts:read",
  },
  { href: "/reward-gifts", label: "Gifts", icon: Gift, perm: "rewards:read" },
  { href: "/vani", label: "Vāṇī of the Day", icon: Quote, perm: "vani:read" },
  {
    href: "/quizzes",
    label: "Quizzes",
    icon: ClipboardCheck,
    perm: "quizzes:read",
  },
  {
    href: "/staff",
    label: "Staff & roles",
    icon: ShieldCheck,
    perm: MANAGE_STAFF,
  },
];

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);

  // 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>
    );
  }

  return (
    <div className="flex min-h-screen">
      <aside className="flex w-60 shrink-0 flex-col border-r border-border bg-card">
        <div className="px-5 py-5">
          <p className="text-xs uppercase tracking-[0.2em] text-primary">
            Prabhupāda Says
          </p>
          <p className="mt-0.5 text-sm font-semibold text-foreground">Admin</p>
        </div>
        <nav className="flex-1 space-y-1 px-3">
          {NAV.filter((n) => staffMe.permissions.includes(n.perm)).map(
            ({ href, label, icon: Icon }) => {
              const active =
                pathname === href || pathname.startsWith(href + "/");
              return (
                <Link
                  key={href}
                  href={href}
                  className={cn(
                    "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
                    active
                      ? "bg-accent text-accent-foreground font-medium"
                      : "text-muted-foreground hover:bg-muted hover:text-foreground",
                  )}
                >
                  <Icon className="size-4" />
                  {label}
                </Link>
              );
            },
          )}
        </nav>
        <div className="border-t border-border px-3 py-3">
          <div className="px-3 pb-2 text-xs text-muted-foreground">
            <p className="truncate font-medium text-foreground">{me.name}</p>
            <p className="truncate">@{me.handle}</p>
            <p className="mt-1 inline-block rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
              {staffMe.role_name}
            </p>
          </div>
          <Button
            variant="ghost"
            size="sm"
            onClick={signOut}
            className="w-full justify-start text-muted-foreground"
          >
            <LogOut className="size-4" />
            Sign out
          </Button>
        </div>
      </aside>

      <main className="flex-1 overflow-x-hidden px-6 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. */}
              {(() => {
                const section =
                  NAV.find(
                    (n) =>
                      n.href !== "/" &&
                      (pathname === n.href ||
                        pathname.startsWith(n.href + "/")),
                  ) ?? (pathname === "/" ? NAV[0] : undefined);
                return section ? (
                  <RequirePermission perm={section.perm}>
                    {children}
                  </RequirePermission>
                ) : (
                  children
                );
              })()}
            </ConfirmProvider>
          </StaffProvider>
        </div>
      </main>
    </div>
  );
}