"use client";

import { Fragment } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";

import { getSiteNavGroups, type SiteNavGroups } from "@/lib/betaVisibility";
import { cmsMenuToNavGroups, type PublicMenuItem } from "@/lib/site-content";
import { SiteHeaderSession } from "@/components/auth/SiteHeaderSession";

function SiteNavDivider() {
  return (
    <span
      className="hidden h-3.5 w-px shrink-0 self-center bg-[color:var(--ctkp-border-gold)] sm:block"
      aria-hidden
    />
  );
}

function navPathMatch(pathname: string | null, href: string): boolean {
  if (!pathname) return false;
  if (href === "/") return pathname === "/";
  if (href === "/fortune") return pathname === "/fortune" || pathname.startsWith("/fortune/");
  if (href === "/gieo-que") return pathname === "/gieo-que" || pathname.startsWith("/gieo-que/");
  return pathname === href || pathname.startsWith(`${href}/`);
}

type SiteHeaderProps = {
  cmsMenu?: PublicMenuItem[] | null;
};

export function SiteHeader({ cmsMenu }: SiteHeaderProps) {
  const pathname = usePathname();
  const groups: SiteNavGroups =
    cmsMenu && cmsMenu.length > 0 ? cmsMenuToNavGroups(cmsMenu) : getSiteNavGroups();

  return (
    <header className="ctkp-site-header relative border-b border-transparent bg-[color:var(--ctkp-ink-mid)]">
      <div
        className="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-[color:var(--ctkp-border-gold-strong)] to-transparent opacity-90"
        aria-hidden
      />
      <div className="relative mx-auto flex max-w-[1100px] flex-col gap-3 px-4 py-3 sm:min-h-[3.25rem] sm:flex-row sm:items-center sm:justify-between sm:gap-4 sm:px-8 sm:py-0">
        <Link
          href="/"
          className="font-ctkp-display shrink-0 py-0.5 text-[1.05rem] font-semibold tracking-[0.02em] text-[color:var(--ctkp-gold-bright)] transition-colors duration-300 ease-ctkp hover:text-[color:var(--ctkp-text-main)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ctkp-gold-muted)]/35 focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--ctkp-ink-mid)] sm:py-1"
        >
          Cổ Thư Kỳ Phổ
        </Link>
        <div className="relative flex w-full flex-col gap-2 sm:min-h-[3.25rem] sm:flex-1 sm:flex-row sm:items-center sm:justify-end sm:gap-3">
          <nav
            aria-label="Điều hướng chính"
            className="flex w-full flex-wrap items-center gap-x-1 gap-y-2 sm:w-auto sm:justify-end sm:gap-x-0 sm:gap-y-1"
          >
            {groups.map((group, gi) => (
              <Fragment key={group[0]?.href ?? `nav-${gi}`}>
                {gi > 0 ? <SiteNavDivider /> : null}
                <span className="flex flex-wrap items-center gap-x-0.5 sm:gap-x-0.5">
                  {group.map((item) => {
                    const active = navPathMatch(pathname, item.href);
                    return (
                      <Link
                        key={item.href}
                        href={item.href}
                        className={
                          active
                            ? "ctkp-nav-item ctkp-nav-item--active"
                            : "ctkp-nav-item"
                        }
                      >
                        {item.label}
                      </Link>
                    );
                  })}
                </span>
              </Fragment>
            ))}
          </nav>
          <SiteHeaderSession />
        </div>
      </div>
    </header>
  );
}