dark-lord/components/Navbar.tsx

"use client";

import { useState, useRef, useEffect } from "react";
import Link from "next/link";
import { useWallet } from "@/contexts/WalletContext";
import { useAccount } from "@/contexts/AccountContext";
import { useCart } from "@/contexts/CartContext";
import { SITE_NAV_GROUPS } from "@/lib/siteNav";

const Navbar = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [pagesOpen, setPagesOpen] = useState(false);
  const pagesDropdownRef = useRef<HTMLDivElement>(null);
  const { luxCredits, usdStoreCredit } = useWallet();
  const { user, hydrated } = useAccount();
  const { itemCount, hydrated: cartReady } = useCart();

  useEffect(() => {
    const onDoc = (e: MouseEvent) => {
      if (!pagesDropdownRef.current?.contains(e.target as Node)) setPagesOpen(false);
    };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setPagesOpen(false);
    };
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDoc);
      document.removeEventListener("keydown", onKey);
    };
  }, []);

  return (
    <nav className="glass fixed top-0 left-0 right-0 z-50 mx-auto mt-2 max-w-7xl rounded-xl border border-white/10 px-4 py-2 backdrop-blur-xl md:px-5">
      <div className="flex items-center justify-between gap-3">
        <div className="flex min-w-0 flex-1 items-center gap-2 md:gap-3">
          <Link href="/" className="flex shrink-0 items-center gap-2">
            <div className="relative h-8 w-8 shrink-0 rounded-full bg-gradient-to-br from-neon-cyan to-neon-purple p-0.5">
              <div className="flex h-full w-full items-center justify-center rounded-full bg-background">
                <span className="text-sm font-bold">⏣</span>
              </div>
            </div>
            <span className="font-orbitron truncate text-base font-bold tracking-tight md:text-lg">
              Eldritch<span className="text-neon-cyan">Weave</span>
            </span>
          </Link>
          <span className="hidden rounded-full bg-muted/80 px-2 py-0.5 text-[10px] font-medium text-neon-green/90 sm:inline">
            v1 · spellcraft
          </span>

          <div ref={pagesDropdownRef} className="relative ml-1 hidden md:block">
            <button
              type="button"
              aria-expanded={pagesOpen}
              aria-haspopup="true"
              onClick={() => setPagesOpen((o) => !o)}
              className="flex items-center gap-1 rounded-lg border border-white/15 bg-white/5 px-3 py-1.5 text-xs font-semibold text-foreground/85 transition hover:border-neon-cyan/35 hover:text-neon-cyan"
            >
              All pages
              <span className="text-[10px] opacity-70">{pagesOpen ? "▴" : "▾"}</span>
            </button>
            {pagesOpen ? (
              <div className="absolute left-0 top-full z-[60] mt-1 max-h-[min(70vh,520px)] w-[min(100vw-2rem,380px)] overflow-y-auto rounded-xl border border-white/15 bg-[#0a0a0f]/95 p-3 shadow-2xl shadow-black/50 backdrop-blur-xl">
                {SITE_NAV_GROUPS.map((group) => (
                  <div key={group.title} className="mb-3 last:mb-0">
                    <p className="mb-1.5 px-1 font-mono text-[9px] font-bold uppercase tracking-[0.2em] text-foreground/40">
                      {group.title}
                    </p>
                    <ul className="space-y-0.5">
                      {group.items.map((item) => (
                        <li key={item.href}>
                          <Link
                            href={item.href}
                            className="flex items-center gap-2 rounded-lg px-2 py-1.5 text-xs text-foreground/80 transition hover:bg-white/10 hover:text-neon-cyan"
                            onClick={() => setPagesOpen(false)}
                          >
                            <span className="w-5 text-center opacity-70">{item.icon}</span>
                            <span className="truncate">{item.label}</span>
                          </Link>
                        </li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>
            ) : null}
          </div>

          <Link
            href="/market"
            className="hidden text-xs font-medium text-foreground/70 transition hover:text-neon-cyan lg:inline"
          >
            Market
          </Link>
          <Link
            href="/checkout"
            className="hidden text-xs font-medium text-foreground/70 transition hover:text-neon-purple lg:inline"
          >
            Checkout
          </Link>
        </div>

        <div className="flex shrink-0 items-center gap-2 md:gap-3">
          {cartReady ? (
            <Link
              href="/checkout"
              className="relative inline-flex rounded-full border border-white/10 px-2.5 py-1.5 text-xs text-foreground/80 hover:border-neon-cyan/40 hover:text-neon-cyan"
              title="Cart"
            >
              🛒
              {itemCount > 0 ? (
                <span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-neon-pink px-0.5 text-[9px] font-bold text-background">
                  {itemCount > 99 ? "99+" : itemCount}
                </span>
              ) : null}
            </Link>
          ) : null}
          <div className="hidden items-center gap-1.5 sm:flex">
            <div
              className="flex items-center gap-1 rounded-full border border-white/10 bg-white/5 px-2 py-1 text-[10px]"
              title="LUX credits"
            >
              <span className="text-foreground/50">LUX</span>
              <span className="font-orbitron text-[11px] text-neon-green">{luxCredits.toLocaleString()}</span>
            </div>
            <div
              className="flex items-center gap-1 rounded-full border border-neon-cyan/20 bg-white/5 px-2 py-1 text-[10px]"
              title="Bitcoin-funded USD balance"
            >
              <span className="text-foreground/50">$</span>
              <span className="font-orbitron text-[11px] text-neon-cyan">{usdStoreCredit.toFixed(2)}</span>
            </div>
          </div>
          {hydrated ? (
            user ? (
              <>
                <Link
                  href="/account/add-funds"
                  className="hidden rounded-full border border-neon-green/30 bg-neon-green/10 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide text-neon-green hover:bg-neon-green/15 sm:inline-flex"
                >
                  +Funds
                </Link>
                <Link
                  href="/dashboard"
                  className="hidden max-w-[6rem] truncate rounded-full border border-neon-cyan/25 bg-neon-cyan/10 px-2.5 py-1 text-[11px] font-medium text-neon-cyan hover:bg-neon-cyan/18 sm:inline"
                >
                  {user.displayName}
                </Link>
              </>
            ) : (
              <>
                <Link
                  href="/sign-in"
                  className="hidden rounded-full border border-white/12 px-2.5 py-1 text-[11px] font-medium text-foreground/80 hover:border-neon-cyan/45 hover:text-neon-cyan sm:inline-flex"
                >
                  Sign in
                </Link>
                <Link
                  href="/sign-up"
                  className="hidden rounded-full border border-neon-purple/30 bg-neon-purple/10 px-2.5 py-1 text-[11px] font-medium text-neon-purple hover:bg-neon-purple/18 md:inline-flex"
                >
                  Register
                </Link>
              </>
            )
          ) : null}
          <button
            className="rounded-full bg-white/5 p-1.5 hover:bg-white/10 md:hidden"
            aria-label="Toggle menu"
            onClick={() => setIsMenuOpen(!isMenuOpen)}
          >
            <div className="h-4 w-4 space-y-1">
              <div className={`h-0.5 bg-neon-cyan transition-transform ${isMenuOpen ? "translate-y-1.5 rotate-45" : ""}`} />
              <div className={`h-0.5 bg-neon-purple transition-opacity ${isMenuOpen ? "opacity-0" : ""}`} />
              <div className={`h-0.5 bg-neon-pink transition-transform ${isMenuOpen ? "-translate-y-1.5 -rotate-45" : ""}`} />
            </div>
          </button>
        </div>
      </div>

      {/* Mobile: full menu + page list */}
      {isMenuOpen && (
        <div className="glass mt-2 max-h-[75vh] overflow-y-auto rounded-lg border border-white/10 p-3 backdrop-blur-xl md:hidden">
          <div className="mb-2 flex flex-wrap gap-2 border-b border-white/10 pb-2">
            {cartReady ? (
              <Link
                href="/checkout"
                className="relative flex-1 rounded-lg border border-white/15 py-2 text-center text-xs font-medium"
                onClick={() => setIsMenuOpen(false)}
              >
                🛒 Cart
                {itemCount > 0 ? (
                  <span className="ml-1 rounded bg-neon-pink px-1 text-[9px] font-bold text-background">{itemCount}</span>
                ) : null}
              </Link>
            ) : null}
            {hydrated && user ? (
              <Link
                href="/dashboard"
                className="flex-1 rounded-lg bg-neon-cyan/15 py-2 text-center text-xs font-bold text-neon-cyan"
                onClick={() => setIsMenuOpen(false)}
              >
                Dashboard
              </Link>
            ) : hydrated ? (
              <Link
                href="/sign-in"
                className="flex-1 rounded-lg border border-white/15 py-2 text-center text-xs font-medium"
                onClick={() => setIsMenuOpen(false)}
              >
                Sign in
              </Link>
            ) : null}
          </div>
          {SITE_NAV_GROUPS.map((group) => (
            <div key={group.title} className="mb-3">
              <p className="mb-1 font-mono text-[9px] font-bold uppercase tracking-widest text-foreground/35">{group.title}</p>
              <div className="grid grid-cols-2 gap-1">
                {group.items.map((item) => (
                  <Link
                    key={item.href}
                    href={item.href}
                    className="flex items-center gap-1.5 rounded-md bg-white/5 p-2 text-[11px] font-medium"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    <span>{item.icon}</span>
                    <span className="truncate">{item.label}</span>
                  </Link>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </nav>
  );
};

export default Navbar;