/** قالب پنل مدیریت: منوی کناری (دسکتاپ) و تب‌های افقی (موبایل)؛ فقط بخش‌های مجاز هر عضو نمایش داده می‌شوند */
import Link from "next/link";
import { LogoWordmark } from "@/components/brand/Logo";
import { AdminNav } from "@/components/admin/AdminNav";
import { AdminSignOut } from "@/components/admin/AdminSignOut";
import { ROLE_LABELS } from "@/lib/admin-sections";
import { allowedSections, requireStaffPage } from "@/server/admin/guard";

export default async function AdminLayout({ children }: { children: React.ReactNode }) {
  const user = await requireStaffPage("/admin");
  return (
    <div className="min-h-dvh bg-mist md:grid md:grid-cols-[220px_1fr]">
      <aside className="sticky top-0 z-30 border-b border-line bg-paper md:h-dvh md:overflow-y-auto md:border-e md:border-b-0">
        <div className="flex h-14 items-center justify-between px-4 md:h-20 md:px-6">
          <Link href="/admin" className="flex items-center gap-2">
            <LogoWordmark className="h-3 w-auto" />
            <span className="text-[10px] text-muted">مدیریت</span>
          </Link>
          <Link href="/" className="text-xs text-muted hover:text-ink md:hidden">مشاهده سایت</Link>
        </div>
        <AdminNav sections={allowedSections(user)} />
        <div className="hidden space-y-1 px-6 pt-6 pb-6 text-[11px] leading-6 text-muted md:block">
          <p>
            {user.name ? `${user.name} · ` : ""}
            <bdi>{user.phone}</bdi>
            <br />
            {ROLE_LABELS[user.role]}
          </p>
          <Link href="/admin/account" className="block underline">تغییر رمز</Link>
          <Link href="/" className="block underline">مشاهده سایت</Link>
          <AdminSignOut />
        </div>
      </aside>
      <main className="min-w-0 p-4 md:p-8">{children}</main>
    </div>
  );
}