"use client";

import Link from "next/link";
import { ProfileChip } from "@/components/ProfileChip";
import { useProfile } from "@/lib/profile/context";
import { AVATARS } from "@/lib/uiSkins";
import { isAdminUsername } from "@/lib/site";

export function Header() {
  const { account, ready } = useProfile();
  const avatar = AVATARS.find(
    (a) => a.id === (account?.avatarId ?? "default"),
  );
  const showAdmin =
    ready &&
    account?.role === "admin" &&
    isAdminUsername(account.username);

  return (
    <header className="relative z-20 border-b border-line/70 bg-background/80 backdrop-blur-md">
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3.5 sm:px-6">
        <Link href="/" className="flex items-center gap-3">
          <span
            className="inline-block h-2.5 w-2.5 rounded-full bg-amber shadow-[0_0_12px_var(--amber)]"
            style={{ animation: "power-pulse 1.8s ease-in-out infinite" }}
            aria-hidden
          />
          <span className="font-display text-[0.72rem] tracking-[0.18em] text-foreground sm:text-xs">
            HOLLOW<span className="text-amber">CADE</span>
          </span>
        </Link>
        <nav className="flex items-center gap-1 sm:gap-2">
          <Link href="/#library" className="btn-ghost hidden sm:inline-flex">
            Library
          </Link>
          <Link href="/leaderboards" className="btn-ghost hidden md:inline-flex">
            Boards
          </Link>
          <Link href="/load" className="btn-ghost">
            ROM
          </Link>
          <Link href="/contribute" className="btn-ghost hidden sm:inline-flex">
            Add
          </Link>
          {showAdmin && (
            <Link
              href="/admin"
              className="btn-ghost hidden text-crt sm:inline-flex"
            >
              Admin
            </Link>
          )}
          {ready && account ? (
            <Link
              href="/settings"
              className="btn-ghost inline-flex items-center gap-2"
            >
              <span
                className="hidden h-2 w-2 rounded-full sm:inline-block"
                style={{ background: avatar?.color ?? "#f0a030" }}
                aria-hidden
              />
              Settings
            </Link>
          ) : (
            <Link href="/account?welcome=1" className="btn-ghost">
              Sign in
            </Link>
          )}
          <ProfileChip />
        </nav>
      </div>
    </header>
  );
}