buzz-sheet/components/admin/admin-header.tsx

"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import {
  ExternalLinkIcon,
  ImageIcon,
  LayoutDashboardIcon,
  BookOpenIcon,
  ClipboardListIcon,
  MessagesSquareIcon,
  LogOutIcon,
  MenuIcon,
  PlusIcon,
  SwordsIcon,
} from "lucide-react";

import { Button, buttonVariants } from "@/components/ui/button";
import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
import { authClient } from "@/lib/auth/client";
import { unsubscribeCommissionPush } from "@/components/commission/push-client";
import { CommissionPushEntryPrompt } from "@/components/commission/push-entry-prompt";

export function AdminHeader() {
  const pathname = usePathname();
  const router = useRouter();
  const mobileLinks = [
    { href: "/admin/commission", label: "Commission", icon: MessagesSquareIcon, active: pathname.startsWith("/admin/commission") },
    { href: "/admin/stygian", label: "Stygian", icon: SwordsIcon, active: pathname === "/admin/stygian" },
    { href: "/admin/activity", label: "Activity", icon: ClipboardListIcon, active: pathname === "/admin/activity" },
    { href: "/admin/glossary", label: "Glossary", icon: BookOpenIcon, active: pathname === "/admin/glossary" },
    { href: "/admin", label: "Dashboard", icon: LayoutDashboardIcon, active: pathname === "/admin" },
    { href: "/admin/create", label: "New Guide", icon: PlusIcon, active: pathname === "/admin/create" },
    { href: "/admin/image/overview", label: "Image Generator", icon: ImageIcon, active: pathname.startsWith("/admin/image") },
  ];
  const signOut = async () => {
    await unsubscribeCommissionPush().catch(() => undefined);
    await authClient.signOut({
      fetchOptions: {
        onSuccess: () => {
          router.push("/admin/login");
          router.refresh();
        },
      },
    });
  };

  return (<>
    <CommissionPushEntryPrompt scope="admin" />
    <header className="border-b bg-background/95 supports-backdrop-filter:backdrop-blur">
      <div className="mx-auto flex min-h-16 w-full max-w-7xl flex-nowrap items-center gap-2 px-4 py-2 sm:px-6">
        <Link
          href="/admin"
          aria-label="หน้าแอดมิน ไกด์เกนชินไม่ใช่เกมมือถือ"
          className="mr-auto flex min-h-11 shrink-0 items-center gap-3 rounded-lg font-heading font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        >
          <Image src="/icon.png" alt="" width={36} height={36} className="size-9 object-contain" />
          <span className="hidden sm:inline">ไกด์เกนชินไม่ใช่เกมมือถือ</span>
        </Link>
        <nav aria-label="Admin navigation" className="hidden items-center gap-1 xl:flex">
          <Button variant={pathname.startsWith("/admin/commission") ? "secondary" : "ghost"}
            size="sm" nativeButton={false} render={<Link href="/admin/commission" />}>
            <MessagesSquareIcon data-icon="inline-start" /><span className="hidden sm:inline">Commission</span>
          </Button>
          <Button
            variant={pathname === "/admin/stygian" ? "secondary" : "ghost"}
            size="sm"
            nativeButton={false}
            render={<Link href="/admin/stygian" />}
          >
            <SwordsIcon data-icon="inline-start" />
            <span className="hidden sm:inline">Stygian</span>
          </Button>
          <Button
            variant={pathname === "/admin/activity" ? "secondary" : "ghost"}
            size="sm"
            nativeButton={false}
            render={<Link href="/admin/activity" />}
          >
            <ClipboardListIcon data-icon="inline-start" />
            <span className="hidden sm:inline">Activity</span>
          </Button>
          <Button
            variant={pathname === "/admin/glossary" ? "secondary" : "ghost"}
            size="sm"
            nativeButton={false}
            render={<Link href="/admin/glossary" />}
          >
            <BookOpenIcon data-icon="inline-start" />
            <span className="hidden sm:inline">Glossary</span>
          </Button>
          <Button
            variant={pathname === "/admin" ? "secondary" : "ghost"}
            size="sm"
            nativeButton={false}
            render={<Link href="/admin" />}
          >
            <LayoutDashboardIcon data-icon="inline-start" />
            <span className="hidden sm:inline">Dashboard</span>
          </Button>
          <Button
            variant={pathname === "/admin/create" ? "secondary" : "ghost"}
            size="sm"
            nativeButton={false}
            render={<Link href="/admin/create" />}
          >
            <PlusIcon data-icon="inline-start" />
            <span className="hidden sm:inline">New Guide</span>
          </Button>
          <Button
            variant={
              pathname.startsWith("/admin/image") ? "secondary" : "ghost"
            }
            size="sm"
            nativeButton={false}
            render={<Link href="/admin/image/overview" />}
          >
            <ImageIcon data-icon="inline-start" />
            <span className="hidden sm:inline">Image Generator</span>
          </Button>
          <Button
            variant="ghost"
            size="icon-sm"
            nativeButton={false}
            render={<Link href="/" target="_blank" />}
            aria-label="เปิดหน้าเว็บไซต์"
          >
            <ExternalLinkIcon />
          </Button>
          <Button
            variant="ghost"
            size="icon-sm"
            aria-label="ออกจากระบบ"
            onClick={signOut}
          >
            <LogOutIcon />
          </Button>
        </nav>
        <Sheet>
          <SheetTrigger render={<Button variant="ghost" size="icon" className="xl:hidden" aria-label="เปิดเมนู" />}>
            <MenuIcon />
          </SheetTrigger>
          <SheetContent side="right">
            <SheetHeader><SheetTitle>เมนูแอดมิน</SheetTitle></SheetHeader>
            <nav aria-label="Admin mobile navigation" className="flex flex-col gap-1 overflow-y-auto px-3 pb-4">
              {mobileLinks.map(({ href, label, icon: Icon, active }) => (
                <SheetClose
                  key={href}
                  render={<Link href={href} className={buttonVariants({ variant: active ? "secondary" : "ghost", className: "h-11 w-full justify-start" })} />}
                >
                  <Icon data-icon="inline-start" />{label}
                </SheetClose>
              ))}
              <SheetClose render={<Link href="/" target="_blank" className={buttonVariants({ variant: "ghost", className: "h-11 w-full justify-start" })} />}>
                <ExternalLinkIcon data-icon="inline-start" />เปิดหน้าเว็บไซต์
              </SheetClose>
              <Button variant="ghost" className="h-11 w-full justify-start" onClick={signOut}>
                <LogOutIcon data-icon="inline-start" />ออกจากระบบ
              </Button>
            </nav>
          </SheetContent>
        </Sheet>
      </div>
    </header>
    </>
  );
}