"use client";

import Link from "next/link";
import { CircleUserRound, Info, Menu, Search, ShoppingCart, X } from "lucide-react";
import { useEffect, useState } from "react";
import { brand } from "@/lib/brand";
import { MegaMenu, MobileMenuGroups } from "@/components/MegaMenu";
import { CART_UPDATE_EVENT, readCartItems } from "@/lib/cart-storage";

const nav = [
  ["Gold", "/gold"],
  ["Silver", "/silver"],
  ["Bars", "/products?type=BAR"],
  ["Coins", "/products?type=COIN"],
  ["Rounds", "/products?type=ROUND"],
  ["Collectibles", "/products?type=COLLECTIBLE"],
  ["IRA Eligible", "/products?ira=true"],
  ["Sell-Back", "/sell-back"],
  ["Service Fees", "/service-fees"],
  ["FAQ", "/faq"]
];

export function Header() {
  const [open, setOpen] = useState(false);
  const [count, setCount] = useState<number | null>(null);
  const [search, setSearch] = useState("");

  useEffect(() => {
    const update = () => {
      try {
        const items = readCartItems();
        setCount(items.reduce((sum, item) => sum + item.quantity, 0));
      } catch {
        setCount(0);
      }
    };
    update();
    window.addEventListener(CART_UPDATE_EVENT, update);
    return () => window.removeEventListener(CART_UPDATE_EVENT, update);
  }, []);

  function submitSearch(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const query = search.trim();
    window.location.href = query ? `/products?search=${encodeURIComponent(query)}` : "/products";
  }

  return (
    <header className="retail-header sticky top-0 z-40 border-b border-[#b8860b] bg-[#f6f3ec] shadow-[0_10px_26px_rgba(16,24,32,0.14)]">
      <div className="bg-[#101820] text-white">
        <div className="container-grid header-utility-row grid min-h-8 items-center gap-x-5 gap-y-1 py-1 text-[0.72rem] font-bold sm:grid-cols-[1fr_auto] lg:grid-cols-[1fr_auto_1fr]">
          <span className="truncate uppercase text-white/80">Secure online bullion purchasing</span>
          <span className="hidden text-center text-white/70 md:inline">Free insured fulfillment coordination</span>
          <span className="flex items-center gap-3 overflow-hidden whitespace-nowrap sm:justify-end">
            <span className="hidden text-white/80 sm:inline">Support: (800) 000-0000</span>
            <Link className="text-white/70 hover:text-[#d4af37]" href="/support">Track Order</Link>
            <span className="text-white/25">|</span>
            <Link className="text-white/70 hover:text-[#d4af37]" href="/support">Support</Link>
          </span>
        </div>
      </div>

      <div className="border-b border-[#293546] bg-[#18222f] text-white">
        <div className="container-grid header-market-strip flex min-h-10 items-center gap-2 overflow-x-auto py-1.5 text-[0.72rem]">
          <strong className="shrink-0 rounded border border-[#b8860b]/45 bg-white/[0.06] px-2.5 py-1 uppercase text-[#f3e7c4]">Market Reference - manually updated</strong>
          {[
            ["Gold", "$4,100.00"],
            ["Silver", "$60.00"],
            ["Platinum", "$1,640.00"]
          ].map(([label, value]) => (
            <span key={label} className="inline-flex shrink-0 items-center gap-2 rounded border border-white/10 bg-white/[0.06] px-2.5 py-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]">
              <span className={label === "Silver" ? "text-[#c8cdd2]" : "text-[#d4af37]"}>{label}</span>
              <strong className="text-white">{value}</strong>
            </span>
          ))}
          <span className="inline-flex shrink-0 items-center gap-1 text-[#c0c0c0]"><Info size={13} /> Informational reference only</span>
        </div>
      </div>

      <div className="border-b border-[#d8d2c4] bg-[#f6f3ec]">
        <div className="container-grid header-main-row grid min-h-[82px] grid-cols-[auto_1fr_auto] items-center gap-4 py-3">
          <Link href="/" className="flex min-w-0 items-center gap-3">
            <span className="grid h-14 w-16 place-items-center rounded border border-[#b8860b] bg-[#101820] px-2 py-3 text-sm font-black text-[#d4af37] shadow-[0_8px_18px_rgba(16,24,32,0.18)]">{brand.logoText}</span>
            <span className="hidden max-w-[230px] text-[1.02rem] font-black leading-tight text-[#111827] sm:block">{brand.name}</span>
          </Link>
          <form action="/products" method="get" onSubmit={submitSearch} className="header-main-search hidden overflow-hidden rounded border border-[#d8d2c4] bg-white shadow-[0_8px_22px_rgba(16,24,32,0.12)] md:grid md:grid-cols-[1fr_78px]">
            <input className="min-h-[52px] border-0 bg-white text-base" name="search" value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Search gold, silver, bars, coins, mints..." />
            <button className="grid place-items-center bg-[#101820] text-white transition hover:bg-[#b8860b]" aria-label="Search"><Search size={22} /></button>
          </form>
          <div className="header-actions header-mobile-actions flex items-center gap-2">
            {process.env.NEXT_PUBLIC_SHOW_ADMIN_DEMO_LINK === "true" ? <Link href="/admin" className="btn btn-secondary hidden lg:inline-flex">Admin</Link> : null}
            <Link href="/admin/login" className="inline-flex min-h-11 items-center gap-2 rounded border border-[#d8d2c4] bg-white px-3 text-sm font-black text-[#111827] shadow-sm transition hover:border-[#b8860b]"><CircleUserRound size={18} /> <span className="hidden sm:inline">Account</span></Link>
            <Link href="/cart" className="inline-flex min-h-11 items-center gap-2 rounded border border-[#101820] bg-[#101820] px-3 font-black text-white shadow-sm transition hover:bg-[#18222f]">
              <ShoppingCart size={18} />
              <span className="hidden sm:inline">Cart</span>
              {count === null ? null : <span className="rounded bg-[#d4af37] px-2 py-0.5 text-xs text-[#101820]">{count}</span>}
            </Link>
            <button className="inline-flex min-h-11 items-center rounded border border-[#d8d2c4] bg-white px-3 text-[#111827] shadow-sm lg:hidden" onClick={() => setOpen(true)} aria-label="Open menu"><Menu size={20} /></button>
          </div>
          <form action="/products" method="get" onSubmit={submitSearch} className="header-mobile-search col-span-3 grid grid-cols-[1fr_54px] overflow-hidden rounded border border-[#d8d2c4] bg-white shadow-sm md:hidden">
            <input className="border-0" name="search" value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Search gold, silver, bars, coins, mints..." />
            <button className="grid place-items-center bg-[#101820] text-white" aria-label="Search"><Search size={19} /></button>
          </form>
        </div>
      </div>

      <div className="retail-nav hidden border-y border-[#293546] bg-[#18222f] lg:block">
        <div className="container-grid relative flex min-h-11 items-center">
          <MegaMenu />
          {nav.map(([label, href]) => (
            <Link key={label} href={href} className="relative border-r border-white/10 px-2.5 py-3 text-[0.75rem] font-black uppercase text-white/85 transition after:absolute after:bottom-0 after:left-2 after:right-2 after:h-0.5 after:bg-[#d4af37] after:opacity-0 hover:bg-white/[0.05] hover:text-white hover:after:opacity-100">
              {label}
            </Link>
          ))}
        </div>
      </div>

      {open ? (
        <div className="fixed inset-0 z-50 bg-[#f6f3ec] text-[#111827] lg:hidden">
          <div className="flex items-center justify-between border-b border-[#d8d2c4] bg-white p-4">
            <strong>{brand.name}</strong>
            <button className="inline-flex min-h-10 items-center rounded border border-[#d8d2c4] bg-white px-3" onClick={() => setOpen(false)} aria-label="Close menu"><X size={20} /></button>
          </div>
          <div className="max-h-[calc(100vh-72px)] overflow-y-auto p-4">
            <form action="/products" method="get" onSubmit={submitSearch} className="header-mobile-search mb-4 grid grid-cols-[1fr_54px] overflow-hidden rounded border border-[#d8d2c4] bg-white shadow-sm">
              <input className="border-0" name="search" value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Search gold, silver, bars, coins, mints..." />
              <button className="grid place-items-center bg-[#101820] text-white" aria-label="Search"><Search size={20} /></button>
            </form>
            <Link href="/admin/login" onClick={() => setOpen(false)} className="mb-3 flex items-center justify-between rounded border border-[#d8d2c4] bg-white p-3 font-black shadow-sm">
              <span className="inline-flex items-center gap-2"><CircleUserRound size={18} /> Account</span>
            </Link>
            <Link href="/cart" onClick={() => setOpen(false)} className="mb-3 flex items-center justify-between rounded border border-[#d8d2c4] bg-white p-3 font-black shadow-sm">
              <span className="inline-flex items-center gap-2"><ShoppingCart size={18} /> Cart</span>
              {count === null ? null : <span className="rounded bg-[#d4af37] px-2 py-0.5 text-xs text-[#101820]">{count}</span>}
            </Link>
            <MobileMenuGroups onNavigate={() => setOpen(false)} />
            <div className="mt-4 grid gap-2">
              {nav.map(([label, href]) => <Link key={label} href={href} onClick={() => setOpen(false)} className="panel p-3 font-bold">{label}</Link>)}
            </div>
          </div>
        </div>
      ) : null}
    </header>
  );
}