/** هدر چسبان: لوگو، جستجو، سبد و منوی دسته‌ها (دسکتاپ) */
import Link from "next/link";
import { LogoWordmark } from "@/components/brand/Logo";
import { Icon } from "@/components/ui/Icon";
import { CartButton } from "./CartButton";
import { SearchOverlay } from "./SearchOverlay";
import type { NavCategory } from "./types";

/** ستاره چهارپر طلایی تزئینی نوار دسته‌بندی (با چشمک آرام) */
function GoldSpark({ className = "" }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" className={`pointer-events-none animate-twinkle motion-reduce:animate-none ${className}`}>
      <defs>
        <linearGradient id="gold-spark" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#f3d7a1" />
          <stop offset="0.55" stopColor="var(--color-gold)" />
          <stop offset="1" stopColor="#a87b3f" />
        </linearGradient>
      </defs>
      <path fill="url(#gold-spark)" d="M12 0c.9 6.6 4.4 10.4 12 12-7.6 1.6-11.1 5.4-12 12-.9-6.6-4.4-10.4-12-12C7.6 10.4 11.1 6.6 12 0Z" />
    </svg>
  );
}

export function Header({ nav }: { nav: NavCategory[] }) {
  return (
    <header className="sticky top-0 z-40 border-b border-line bg-paper/95 backdrop-blur">
      <div className="container-z flex h-16 items-center gap-3 md:h-20 md:gap-6">
        <Link href="/" aria-label="زهورا — صفحه اصلی" className="shrink-0">
          <LogoWordmark className="h-3.5 w-auto sm:h-[18px]" />
        </Link>
        <div className="min-w-0 flex-1 md:mx-auto md:max-w-xl">
          <SearchOverlay />
        </div>
        <nav aria-label="حساب و سبد" className="flex shrink-0 items-center gap-0.5 md:gap-2">
          <Link href="/account" className="hidden items-center gap-1.5 rounded-full px-3 py-2 text-xs hover:bg-mist md:flex">
            <Icon name="user" size={20} />
            حساب من
          </Link>
          <CartButton />
        </nav>
      </div>

      {/* منوی دسته‌ها در دسکتاپ با زیرمنوی شناور */}
      <nav aria-label="دسته‌بندی‌ها" className="hidden bg-ink text-paper md:block">
        <ul className="container-z flex h-12 items-center gap-8 text-[13px]">
          <li className="relative">
            <GoldSpark className="absolute -start-4 top-6 size-3.5" />
            <Link href="/search?sort=newest" className="hover:underline hover:underline-offset-8">
              جدیدترین‌ها
            </Link>
            <GoldSpark className="absolute -end-4 -top-0.5 size-2.5 [animation-delay:1.2s]" />
          </li>
          {nav.map((c) => (
            <li key={c.id} className="group relative h-full">
              <Link href={c.href} className="flex h-full items-center gap-1 group-hover:underline group-hover:underline-offset-8">
                {c.name}
                {c.children.length > 0 && <Icon name="chevron-down" size={14} />}
              </Link>
              {c.children.length > 0 && (
                <div className="invisible absolute start-0 top-full z-10 min-w-56 translate-y-1 rounded-b-2xl border border-t-0 border-line bg-paper p-3 text-ink opacity-0 shadow-sm transition-all group-hover:visible group-hover:translate-y-0 group-hover:opacity-100">
                  <Link href={c.href} className="block rounded-lg px-3 py-2 font-bold hover:bg-mist">
                    همه {c.name}
                  </Link>
                  {c.children.map((ch) => (
                    <Link key={ch.id} href={ch.href} className="block rounded-lg px-3 py-2 hover:bg-mist">
                      {ch.name}
                    </Link>
                  ))}
                </div>
              )}
            </li>
          ))}
          <li>
            <Link href="/brands" className="hover:underline hover:underline-offset-8">
              برندها
            </Link>
          </li>
          <li className="relative">
            <Link href="/mag" className="hover:underline hover:underline-offset-8">
              مجله
            </Link>
            <GoldSpark className="absolute -end-4 -top-0.5 size-3 [animation-delay:0.6s]" />
            <GoldSpark className="absolute -start-3 top-6 size-2.5 [animation-delay:2s]" />
          </li>
          <li className="ms-auto">
            <Link href="/track" className="flex items-center gap-1.5 text-paper/70 hover:text-paper">
              <Icon name="box" size={16} />
              پیگیری سفارش
            </Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}
