"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import LexiconStrip from "@/components/site/LexiconStrip";
import { MARKET_ATMOSPHERE_TAGS } from "@/lib/cyberluxZoneLexicon";
import { SHOP_PRODUCT_COUNT } from "@/lib/shopCatalog";
import { SHOP_SELLER_COUNT } from "@/lib/shopSellers";

const LAYERS: {
  title: string;
  items: { href: string; label: string; blurb: string }[];
}[] = [
  {
    title: "Layer 1 · Catalog",
    items: [
      { href: "/market", label: "Full floor", blurb: "Search, facets, every SKU" },
      { href: "/vendors", label: "Vendor hall", blurb: "Stalls & bios" },
      { href: "/vendor/apply", label: "Onboard", blurb: "Bond & review queue" },
    ],
  },
  {
    title: "Layer 2 · Commerce spine",
    items: [
      { href: "/checkout", label: "Checkout", blurb: "Cart → settle" },
      { href: "/market/analytics", label: "Floor analytics", blurb: "Velocity, mix, heat" },
      { href: "/market/operations", label: "Operations", blurb: "Pipeline & SLAs" },
    ],
  },
  {
    title: "Layer 3 · Trust & intel",
    items: [
      { href: "/market/trust", label: "Escrow & keys", blurb: "Settlement tiers" },
      { href: "/market/intel", label: "Buyer intel", blurb: "Vetting & OPSEC" },
      { href: "/support", label: "Support ladder", blurb: "Tickets & mirrors" },
    ],
  },
];

export default function MarketSiteChrome({ children }: { children: React.ReactNode }) {
  const pathname = usePathname() ?? "";
  const crumbs = [
    { href: "/", label: "Hub" },
    { href: "/market", label: "Market" },
  ];
  const tail = pathname.replace(/^\/market\/?/, "");
  if (tail && tail !== "") {
    const seg = tail.split("/")[0];
    const label =
      seg === "analytics"
        ? "Analytics"
        : seg === "operations"
          ? "Operations"
          : seg === "trust"
            ? "Trust"
            : seg === "intel"
              ? "Intel"
              : seg;
    crumbs.push({ href: pathname, label });
  }

  return (
    <div className="min-h-screen bg-[#050806] text-[#c8ffd8]">
      <div
        className="pointer-events-none fixed inset-0 z-0 opacity-[0.07]"
        style={{
          backgroundImage:
            "repeating-linear-gradient(-12deg, transparent, transparent 40px, rgba(0,255,65,0.04) 41px)",
        }}
      />

      <header className="sticky top-0 z-30 border-b border-[#00ff41]/20 bg-[#030806]/95 backdrop-blur-md">
        <div className="mx-auto flex max-w-[1600px] flex-col gap-3 px-4 py-4 lg:flex-row lg:items-center lg:justify-between">
          <div>
            <p className="font-mono text-[9px] uppercase tracking-[0.5em] text-[#00ff41]/45">sovereign catalog · multi-layer</p>
            <Link href="/market" className="mt-1 block">
              <h1 className="font-mono text-2xl font-black tracking-tight text-[#7af598] md:text-3xl">
                The Candy Shop
              </h1>
            </Link>
            <p className="mt-1 max-w-xl font-mono text-[11px] text-[#00ff41]/55">
              <strong className="text-[#9dffc4]">{SHOP_PRODUCT_COUNT}</strong> SKUs ·{" "}
              <strong className="text-[#9dffc4]">{SHOP_SELLER_COUNT}</strong> stalls — not a plugin mall; one cart, one checkout, four trust layers.
            </p>
            <nav className="mt-3 flex flex-wrap items-center gap-1 font-mono text-[10px] uppercase tracking-wider text-[#5a8f6a]">
              {crumbs.map((c, i) => (
                <span key={c.href} className="flex items-center gap-1">
                  {i > 0 ? <span className="text-[#00ff41]/25">/</span> : null}
                  <Link href={c.href} className="hover:text-[#7af598]">
                    {c.label}
                  </Link>
                </span>
              ))}
            </nav>
          </div>
          <div className="flex flex-wrap gap-2 font-mono text-[10px] uppercase">
            <Link href="/" className="border border-[#00ff41]/30 px-3 py-2 text-[#8fccb0] hover:border-[#00ff41]/60">
              Hub
            </Link>
            <Link href="/forum" className="border border-[#c45c26]/35 px-3 py-2 text-[#e8b896] hover:border-[#ff9a3c]/50">
              Forum
            </Link>
            <Link href="/exchange" className="border border-[#8d6e4a]/40 px-3 py-2 text-[#d4c4b0] hover:border-[#c4a574]/60">
              Exchange
            </Link>
            <Link href="/barter" className="border border-[#1a3d24] bg-[#0a120d] px-3 py-2 text-[#7cfc9a] hover:border-[#39ff14]/40">
              Barter
            </Link>
            <Link href="/hidden-wiki" className="border border-[#3d5a80]/30 px-3 py-2 text-[#9fb5d2] hover:border-[#7dd3fc]/50">
              Wiki
            </Link>
            <Link href="/darknet-atlas" className="border border-[#1e3a5f] px-3 py-2 text-[#7eb8ff] hover:border-[#38bdf8]/50">
              Atlas
            </Link>
            <Link href="/syndicate" className="border border-fuchsia-900/40 px-3 py-2 text-fuchsia-200 hover:border-fuchsia-500/50">
              Syndicate
            </Link>
            <Link href="/search" className="border border-[#00ff41]/25 px-3 py-2 text-[#6bdc8e] hover:border-[#00ff41]/45">
              Crawler
            </Link>
            <Link href="/account/hidden-services" className="border border-[#00ff41]/20 px-3 py-2 text-[#82a98c] hover:border-[#00ff41]/45">
              Mirrors
            </Link>
          </div>
        </div>

        <div className="border-t border-[#00ff41]/10 lg:hidden">
          <div className="mx-auto flex max-w-[1600px] gap-2 overflow-x-auto px-4 py-2 scrollbar-none">
            {LAYERS.flatMap((L) =>
              L.items.map((it) => (
                <Link
                  key={it.href}
                  href={it.href}
                  className={`shrink-0 rounded border px-3 py-1.5 font-mono text-[10px] uppercase ${
                    pathname === it.href
                      ? "border-[#00ff41] bg-[#00ff41]/15 text-[#b4ffcc]"
                      : "border-[#00ff41]/20 text-[#6a9b7a] hover:border-[#00ff41]/40"
                  }`}
                >
                  {it.label}
                </Link>
              )),
            )}
          </div>
        </div>
        <div className="mx-auto max-w-[1600px] border-t border-[#00ff41]/10 px-4 text-[#5a8f6a]">
          <LexiconStrip label="Floor environment · keyword fog" tags={MARKET_ATMOSPHERE_TAGS} className="border-[#00ff41]/15" />
        </div>
      </header>

      <div className="relative z-10 mx-auto flex max-w-[1600px] gap-8 px-4 pb-24 pt-6">
        <aside className="hidden w-72 shrink-0 lg:block">
          <div className="sticky top-28 space-y-8">
            {LAYERS.map((layer) => (
              <div key={layer.title}>
                <h2 className="border-b border-[#00ff41]/15 pb-2 font-mono text-[9px] font-bold uppercase tracking-[0.28em] text-[#00ff41]/50">
                  {layer.title}
                </h2>
                <ul className="mt-3 space-y-1">
                  {layer.items.map((it) => {
                    const active = pathname === it.href;
                    return (
                      <li key={it.href}>
                        <Link
                          href={it.href}
                          className={`block rounded border px-3 py-2 transition ${
                            active
                              ? "border-[#00ff41]/55 bg-[#00ff41]/10"
                              : "border-transparent hover:border-[#00ff41]/25 hover:bg-[#00ff41]/05"
                          }`}
                        >
                          <span className="font-mono text-xs font-bold text-[#b4ffcc]">{it.label}</span>
                          <p className="mt-0.5 font-mono text-[10px] leading-snug text-[#5a8f6a]">{it.blurb}</p>
                        </Link>
                      </li>
                    );
                  })}
                </ul>
              </div>
            ))}
            <div className="rounded border border-dashed border-[#00ff41]/20 p-3 font-mono text-[9px] leading-relaxed text-[#4a6b55]">
              Tor entry onions map headers to the same app — your cart and session follow signed mirror bundles, not separate shops.
            </div>
          </div>
        </aside>
        <div className="min-w-0 flex-1">{children}</div>
      </div>
    </div>
  );
}