import Link from 'next/link';
import { NAV, NAV_GROUPS, PRIMARY_NAV } from '@/config/nav';
import { ThemeToggle } from './theme-toggle';
import { MobileNav } from './mobile-nav';
import { HeaderSearch } from './header-search';
import { UserMenu } from '@/components/account/user-menu';

export function Logo({ className }: { className?: string }) {
  return (
    <Link href="/" className={`flex items-center gap-2 ${className ?? ''}`} aria-label="RareIndex home">
      <span className="inline-flex h-6 w-6 items-center justify-center rounded-sm bg-accent text-[11px] font-bold text-accent-fg">R</span>
      <span className="text-[15px] font-semibold tracking-tight text-fg">
        Rare<span className="text-muted">Index</span>
      </span>
    </Link>
  );
}

export function SiteHeader() {
  return (
    <header className="sticky top-0 z-40 border-b border-border bg-bg/85 backdrop-blur supports-[backdrop-filter]:bg-bg/70">
      <div className="mx-auto flex h-14 max-w-[1440px] items-center gap-3 px-4 sm:px-6">
        <MobileNav items={NAV} groups={NAV_GROUPS} />
        <Logo />
        <nav className="ml-4 hidden items-center gap-1 lg:flex" aria-label="Primary">
          {PRIMARY_NAV.map((n) => (
            <Link key={n.href} href={n.href} className="rounded-md px-2.5 py-1.5 text-[13px] font-medium text-muted hover:bg-inset hover:text-fg">
              {n.label}
            </Link>
          ))}
          <details className="group relative">
            <summary className="cursor-pointer list-none rounded-md px-2.5 py-1.5 text-[13px] font-medium text-muted hover:bg-inset hover:text-fg [&::-webkit-details-marker]:hidden">More</summary>
            <div className="absolute left-0 top-full z-50 mt-1 grid w-[640px] grid-cols-3 gap-4 rounded-lg border border-border bg-elevated p-4 shadow-pop">
              {NAV_GROUPS.map((g) => (
                <div key={g.id}>
                  <p className="mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-subtle">{g.label}</p>
                  <ul className="space-y-0.5">
                    {NAV.filter((n) => n.group === g.id).map((n) => (
                      <li key={n.href}>
                        <Link href={n.href} className="block rounded-sm px-1.5 py-1 text-[13px] text-muted hover:bg-inset hover:text-fg">
                          {n.label}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </details>
        </nav>
        <div className="ml-auto flex items-center gap-1.5">
          <HeaderSearch />
          <ThemeToggle />
          <UserMenu />
        </div>
      </div>
    </header>
  );
}