// Top nav + Cart drawer + Search overlay + Age gate

function AgeGate({ onAccept }) {
  return (
    <div className="agegate">
      <div className="agegate-card">
        <Monogram size={36} />
        <div className="agegate-title">21+ ONLY</div>
        <p className="agegate-body">
          BrokeBoisOC sells products intended for adults of legal age. By entering you confirm you are 21 or older
          and accept our terms.
        </p>
        <div className="agegate-actions">
          <button className="btn btn-primary" onClick={onAccept}>I'M 21+</button>
          <a className="btn btn-ghost" href="https://google.com">EXIT</a>
        </div>
        <div className="agegate-foot">Orange County, CA · est. YEAR</div>
      </div>
    </div>
  );
}

function Nav({ route, navigate, cartCount, openCart, openSearch }) {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { key: "glass", label: "Glass" },
    { key: "apparel", label: "Apparel" },
    { key: "accessories", label: "Accessories" },
    { key: "drops", label: "Mystery Box" },
    { key: "sale", label: "Sale", accent: true },
  ];

  return (
    <header className={`nav ${scrolled ? "nav--scrolled" : ""}`}>
      <Marquee items={window.BBOC_DATA.marquee} />
      <div className="nav-row">
        <button className="nav-mobile-btn" onClick={() => setMobileOpen(true)} aria-label="Menu">
          <Icon.menu />
        </button>

        <a
          href="#"
          className="nav-logo"
          onClick={(e) => {
            e.preventDefault();
            navigate({ name: "home" });
          }}
        >
          <Monogram size={26} />
        </a>

        <nav className="nav-links">
          {links.map((l) => (
            <a
              key={l.key}
              href="#"
              className={`nav-link ${l.accent ? "nav-link--accent" : ""} ${
                route.name === "category" && route.id === l.key ? "is-active" : ""
              }`}
              onClick={(e) => {
                e.preventDefault();
                navigate({ name: "category", id: l.key });
              }}
            >
              {l.label}
            </a>
          ))}
        </nav>

        <div className="nav-actions">
          <button className="nav-icon-btn" onClick={openSearch} aria-label="Search">
            <Icon.search />
          </button>
          <button className="nav-icon-btn nav-icon-btn--hide-sm" aria-label="Account">
            <Icon.user />
          </button>
          <button className="nav-icon-btn nav-bag" onClick={openCart} aria-label="Cart">
            <Icon.bag />
            {cartCount > 0 ? <span className="nav-bag-count">{cartCount}</span> : null}
          </button>
        </div>
      </div>

      {mobileOpen ? (
        <div className="mobile-menu">
          <div className="mobile-menu-head">
            <Monogram size={24} />
            <button className="nav-icon-btn" onClick={() => setMobileOpen(false)}>
              <Icon.close />
            </button>
          </div>
          <nav className="mobile-links">
            {links.map((l) => (
              <a
                key={l.key}
                href="#"
                className="mobile-link"
                onClick={(e) => {
                  e.preventDefault();
                  navigate({ name: "category", id: l.key });
                  setMobileOpen(false);
                }}
              >
                {l.label}
                <Icon.arrow />
              </a>
            ))}
          </nav>
        </div>
      ) : null}
    </header>
  );
}

function CartDrawer({ open, onClose, items, setQty, removeItem, navigate }) {
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  return (
    <>
      <div className={`drawer-scrim ${open ? "is-open" : ""}`} onClick={onClose} />
      <aside className={`drawer ${open ? "is-open" : ""}`} aria-hidden={!open}>
        <div className="drawer-head">
          <div className="drawer-title">
            BAG <span className="drawer-count">/ {items.length}</span>
          </div>
          <button className="nav-icon-btn" onClick={onClose}>
            <Icon.close />
          </button>
        </div>

        {items.length === 0 ? (
          <div className="drawer-empty">
            <Icon.bag />
            <div className="drawer-empty-title">YOUR BAG IS EMPTY</div>
            <p>Start with the latest drop or a piece from the archive.</p>
            <button
              className="btn btn-primary"
              onClick={() => {
                onClose();
                navigate({ name: "category", id: "drops" });
              }}
            >
              SHOP DROP 04
            </button>
          </div>
        ) : (
          <>
            <div className="drawer-list">
              {items.map((it) => (
                <div key={it.key} className="drawer-item">
                  <div className="drawer-item-img">
                    <Placeholder label={it.name} hue={it.hue} ratio="1/1" />
                  </div>
                  <div className="drawer-item-body">
                    <div className="drawer-item-row">
                      <div>
                        <div className="drawer-item-name">{it.name}</div>
                        <div className="drawer-item-meta">
                          {it.color} · {it.size || "ONE SIZE"}
                        </div>
                      </div>
                      <button className="link-quiet" onClick={() => removeItem(it.key)}>
                        Remove
                      </button>
                    </div>
                    <div className="drawer-item-row drawer-item-bottom">
                      <div className="qty">
                        <button onClick={() => setQty(it.key, Math.max(0, it.qty - 1))}>
                          <Icon.minus />
                        </button>
                        <span>{it.qty}</span>
                        <button onClick={() => setQty(it.key, it.qty + 1)}>
                          <Icon.plus />
                        </button>
                      </div>
                      <div className="drawer-item-price">{fmtPrice(it.price * it.qty)}</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
            <div className="drawer-foot">
              <div className="drawer-line">
                <span>Subtotal</span>
                <span>{fmtPrice(subtotal)}</span>
              </div>
              <div className="drawer-line drawer-line--muted">
                <span>Shipping</span>
                <span>Calculated at checkout</span>
              </div>
              <button className="btn btn-primary btn-block">CHECKOUT — {fmtPrice(subtotal)}</button>
              <button className="btn btn-ghost btn-block" onClick={onClose}>
                CONTINUE SHOPPING
              </button>
            </div>
          </>
        )}
      </aside>
    </>
  );
}

function SearchOverlay({ open, onClose, navigate }) {
  const [q, setQ] = useState("");
  const inputRef = useRef(null);
  useEffect(() => {
    if (open) setTimeout(() => inputRef.current?.focus(), 50);
    if (!open) setQ("");
  }, [open]);

  const all = window.BBOC_DATA.products;
  const results = q.trim()
    ? all.filter((p) => (p.name + " " + p.categoryName).toLowerCase().includes(q.toLowerCase()))
    : all.slice(0, 4);

  const trending = ["Monolith Beaker", "Box Logo Hoodie", "Desert Runner", "Titanium Grinder"];

  return (
    <div className={`search ${open ? "is-open" : ""}`}>
      <div className="search-head">
        <div className="container search-head-inner">
          <Icon.search />
          <input
            ref={inputRef}
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder="Search the store…"
            className="search-input"
          />
          <button className="nav-icon-btn" onClick={onClose}>
            <Icon.close />
          </button>
        </div>
      </div>
      <div className="container search-body">
        <div className="search-col">
          <div className="search-label">Trending</div>
          <ul className="search-trending">
            {trending.map((t, i) => (
              <li key={i}>
                <button
                  onClick={() => setQ(t)}
                  className="search-trending-btn"
                >
                  <span className="search-trending-num">{String(i + 1).padStart(2, "0")}</span>
                  {t}
                </button>
              </li>
            ))}
          </ul>
        </div>
        <div className="search-col search-col--results">
          <div className="search-label">{q.trim() ? `Results for "${q}"` : "Featured"}</div>
          <div className="search-results">
            {results.map((p) => (
              <a
                key={p.id}
                href="#"
                className="search-result"
                onClick={(e) => {
                  e.preventDefault();
                  onClose();
                  navigate({ name: "product", id: p.id });
                }}
              >
                <div className="search-result-img">
                  <Placeholder label={p.name} hue={p.hue} ratio="1/1" />
                </div>
                <div className="search-result-meta">
                  <div className="search-result-cat">{p.categoryName}</div>
                  <div className="search-result-name">{p.name}</div>
                  <div className="search-result-price">{fmtPrice(p.price)}</div>
                </div>
              </a>
            ))}
            {results.length === 0 ? (
              <div className="search-empty">Nothing here. Try another search.</div>
            ) : null}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Nav, CartDrawer, SearchOverlay, AgeGate });