"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import ThemeToggle from "./ThemeToggle";

// CUSTOMIZATION HOOK: edit nav labels / routes here.
const navItems = [
  { href: "/", ko: "홈", en: "Home", no: "01" },
  { href: "/members", ko: "구성원", en: "Members", no: "02" },
  { href: "/publications", ko: "논문", en: "Publications", no: "03" },
  { href: "/lectures", ko: "강의", en: "Lectures", no: "04" },
  { href: "/standardization", ko: "표준화", en: "Standardization", no: "05" },
];

export default function Header() {
  const [open, setOpen] = useState(false);
  const pathname = usePathname();

  const isActive = (href: string) =>
    pathname
      ? href === "/"
        ? pathname === "/"
        : pathname === href || pathname.startsWith(`${href}/`)
      : false;

  return (
    <header className="sticky top-0 z-50 border-b border-ink bg-ivory/85 backdrop-blur">
      {/* Journal issue strip — magazine masthead feel. */}
      <div className="hidden border-b border-line lg:block">
        <div className="container-content flex items-center justify-between py-1.5">
          <span className="kicker">Issue 01 — 2026</span>
          {/* CUSTOMIZATION HOOK: masthead tagline */}
          <span className="kicker text-ink-mute">
            Kyungpook National University · School of Computer Science &amp; Engineering
          </span>
          <span className="kicker">대구 · Daegu</span>
        </div>
      </div>

      <div className="container-content flex h-[4.25rem] items-center justify-between">
        {/* Brand */}
        <Link
          href="/"
          className="group flex flex-col leading-none"
          onClick={() => setOpen(false)}
        >
          <span className="headline-ko text-lg text-ink sm:text-xl">
            AI 에이전트 네트워크 연구실
          </span>
          <span className="kicker mt-1 group-hover:text-vermillion">
            AI Agent Networking Lab (ANL)
          </span>
        </Link>

        {/* Desktop nav — small caps, wide tracking */}
        <div className="hidden items-center gap-7 lg:flex">
          <nav className="flex items-center gap-7" aria-label="주 메뉴">
            {navItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-colors ${
                  isActive(item.href)
                    ? "text-vermillion"
                    : "text-ink hover:text-vermillion"
                }`}
              >
                <span className="font-display text-[0.62rem] text-ink-mute">
                  {item.no}
                </span>
                <span>{item.en}</span>
                <span
                  aria-hidden
                  className={`absolute -bottom-1.5 left-0 h-px bg-vermillion transition-all duration-300 ${
                    isActive(item.href) ? "w-full" : "w-0 group-hover:w-full"
                  }`}
                />
              </Link>
            ))}
          </nav>
          <div className="h-4 w-px bg-line" aria-hidden="true" />
          <ThemeToggle />
        </div>

        {/* Mobile controls */}
        <div className="flex items-center gap-2 lg:hidden">
          <ThemeToggle />
          <button
            type="button"
            className="inline-flex items-center justify-center border border-ink p-2 text-ink transition hover:bg-ink hover:text-ivory"
            aria-label={open ? "메뉴 닫기" : "메뉴 열기"}
            aria-expanded={open}
            aria-controls="mobile-menu"
            onClick={() => setOpen((v) => !v)}
          >
            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.8} stroke="currentColor">
              {open ? (
                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
              ) : (
                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M3.75 17.25h16.5" />
              )}
            </svg>
          </button>
        </div>
      </div>

      {/* Mobile menu panel */}
      {open && (
        <nav
          id="mobile-menu"
          className="border-t border-ink bg-ivory lg:hidden"
          aria-label="모바일 메뉴"
        >
          <ul className="container-content flex flex-col divide-y divide-line py-2">
            {navItems.map((item) => (
              <li key={item.href}>
                <Link
                  href={item.href}
                  onClick={() => setOpen(false)}
                  className={`flex items-baseline justify-between py-4 transition ${
                    isActive(item.href) ? "text-vermillion" : "text-ink"
                  }`}
                >
                  <span className="flex items-baseline gap-3">
                    <span className="font-display text-xs text-ink-mute">{item.no}</span>
                    <span className="headline-ko text-lg">{item.ko}</span>
                  </span>
                  <span className="text-[0.7rem] font-semibold uppercase tracking-[0.18em] text-ink-mute">
                    {item.en}
                  </span>
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      )}
    </header>
  );
}
