"use client";

import Image from "@/components/ui/resilient-image";
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 { PublicAccountMenu } from "@/components/public/public-account-menu";
import { NotificationBell } from "@/components/notifications/notification-bell";

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

  return (<>
    <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 lg:inline">ไกด์เกนชินไม่ใช่เกมมือถือ</span>
        </Link>
        <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>
        <NotificationBell />
        <PublicAccountMenu />
      </div>
    </header>
    </>
  );
}