"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  ExternalLinkIcon,
  ImageIcon,
  LayoutDashboardIcon,
  BookOpenIcon,
  ClipboardListIcon,
  MessagesSquareIcon,
  MessageSquareIcon,
  SwordsIcon,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import { HeaderShell } from "@/components/header-shell";

export function AdminHeader() {
  const pathname = usePathname();

  return (
    <HeaderShell homeHref="/admin" homeLabel="หน้าแอดมิน ไกด์เกนชินไม่ใช่เกมมือถือ">
      <nav aria-label="เมนูแอดมิน" className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto sm:justify-end">
        <Button variant={pathname.startsWith("/admin/comments") ? "secondary" : "ghost"} size="sm" nativeButton={false}
          render={<Link href="/admin/comments" prefetch={false} />} aria-label="ความคิดเห็น">
          <MessageSquareIcon data-icon="inline-start" /><span className="hidden xl:inline">ความคิดเห็น</span>
        </Button>
        <Button variant={pathname.startsWith("/admin/commission") ? "secondary" : "ghost"}
          size="sm" nativeButton={false} render={<Link href="/admin/commission" />} aria-label="Commission">
          <MessagesSquareIcon data-icon="inline-start" /><span className="hidden xl:inline">Commission</span>
        </Button>
        <Button
          variant={pathname === "/admin/stygian" ? "secondary" : "ghost"}
          size="sm"
          nativeButton={false}
          render={<Link href="/admin/stygian" />}
          aria-label="Stygian"
        >
          <SwordsIcon data-icon="inline-start" />
          <span className="hidden xl:inline">Stygian</span>
        </Button>
        <Button
          variant={pathname === "/admin/activity" ? "secondary" : "ghost"}
          size="sm"
          nativeButton={false}
          render={<Link href="/admin/activity" />}
          aria-label="ประวัติการแก้ไข"
        >
          <ClipboardListIcon data-icon="inline-start" />
          <span className="hidden xl:inline">Logs</span>
        </Button>
        <Button
          variant={pathname === "/admin/glossary" ? "secondary" : "ghost"}
          size="sm"
          nativeButton={false}
          render={<Link href="/admin/glossary" />}
          aria-label="glossary"
        >
          <BookOpenIcon data-icon="inline-start" />
          <span className="hidden xl:inline">Glossary</span>
        </Button>
        <Button
          variant={
            pathname.startsWith("/admin/image") ? "secondary" : "ghost"
          }
          size="sm"
          nativeButton={false}
          render={<Link href="/admin/image/overview" />}
          aria-label="ส่งออกภาพ"
        >
          <ImageIcon data-icon="inline-start" />
          <span className="hidden xl:inline">Image Gen</span>
        </Button>
        <Button
          variant={pathname === "/admin" ? "secondary" : "ghost"}
          size="sm"
          nativeButton={false}
          render={<Link href="/admin" />}
          aria-label="ภาพรวม"
        >
          <LayoutDashboardIcon data-icon="inline-start" />
          <span className="hidden xl:inline">Dashboard</span>
        </Button>

        <Button
          variant="ghost"
          size="icon-sm"
          nativeButton={false}
          render={<Link href="/" />}
          aria-label="เปิดหน้าเว็บไซต์"
        >
          <ExternalLinkIcon />
        </Button>
      </nav>
    </HeaderShell>
  );
}