"use client";

import { useTranslation } from "@/components/i18n/locale-provider";
import { LanguageDropdown } from "@/components/i18n/language-dropdown";
import Image from "next/image";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import {
  ExternalLinkIcon,
  ImageIcon,
  LayoutDashboardIcon,
  BookOpenIcon,
  LogOutIcon,
  PlusIcon,
  UserPlusIcon,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import { authClient } from "@/lib/auth/client";

export function AdminHeader() {
  const { t } = useTranslation();
  const pathname = usePathname();
  const router = useRouter();

  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-wrap items-center gap-2 px-4 py-2 sm:px-6">
        <Link
          href="/admin"
          className="mr-auto flex min-h-11 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">{t("ไกด์เกนชินไม่ใช่เกมมือถือ")}</span>
        </Link>
        <LanguageDropdown />
        <nav aria-label={t("Admin navigation")} className="flex items-center gap-1">
          <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">{t("Glossary")}</span>
          </Button>
          <Button
            variant={pathname === "/admin/register" ? "secondary" : "ghost"}
            size="sm"
            nativeButton={false}
            render={<Link href="/admin/register" />}
          >
            <UserPlusIcon data-icon="inline-start" />
            <span className="hidden sm:inline">{t("Accounts")}</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">{t("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">{t("New Guide")}</span>
          </Button>
          <Button
            variant={
              pathname === "/admin/generate/image" ? "secondary" : "ghost"
            }
            size="sm"
            nativeButton={false}
            render={<Link href="/admin/generate/image" />}
          >
            <ImageIcon data-icon="inline-start" />
            <span className="hidden sm:inline">{t("Image Generator")}</span>
          </Button>
          <Button
            variant="ghost"
            size="icon-sm"
            nativeButton={false}
            render={<Link href="/" target="_blank" />}
            aria-label={t("เปิดหน้าเว็บไซต์")}
          >
            <ExternalLinkIcon />
          </Button>
          <Button
            variant="ghost"
            size="icon-sm"
            aria-label={t("ออกจากระบบ")}
            onClick={() =>
              authClient.signOut({
                fetchOptions: {
                  onSuccess: () => {
                    router.push("/admin/login");
                    router.refresh();
                  },
                },
              })
            }
          >
            <LogOutIcon />
          </Button>
        </nav>
      </div>
    </header>
  );
}