"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import LexiconStrip from "@/components/site/LexiconStrip";
import { EXCHANGE_ATMOSPHERE_TAGS } from "@/lib/cyberluxZoneLexicon";

const SECTIONS: { href: string; label: string; blurb: string }[] = [
  { href: "/exchange", label: "The board", blurb: "WTS / WTB stream + submit" },
  { href: "/exchange/guidelines", label: "Guidelines", blurb: "Posting law & risk rails" },
  { href: "/exchange/ledger", label: "Ledger view", blurb: "Volume, mix, freshness" },
];

export default function ExchangeSiteChrome({ children }: { children: React.ReactNode }) {
  const pathname = usePathname() ?? "";

  return (
    <div className="min-h-screen bg-[#0c0a08] text-[#d6cbb8] font-serif">
      <div className="border-b-4 border-double border-[#5c4d3d] bg-[#14100c]">
        <div className="mx-auto max-w-6xl px-4 py-8">
          <p className="text-center text-[10px] font-bold uppercase tracking-[0.5em] text-[#8a7b6b]">
            Weekly stranger gazette · multi-section
          </p>
          <Link href="/exchange" className="block">
            <h1 className="mt-2 text-center text-5xl font-black capitalize leading-none tracking-tight text-[#f0e6d8] md:text-6xl">
              The Exchange
            </h1>
          </Link>
          <p className="mt-3 text-center text-xs italic text-[#8a7b6b]">
            Classifieds spine — same wallet session as the hub. Board, policy, and ledger are first-class routes, not bolt-on tabs.
          </p>
          <div className="mt-6 flex flex-wrap justify-center gap-4 border-y border-[#3d3228] py-3 text-xs font-bold uppercase tracking-wide text-[#a89888]">
            <Link href="/" className="text-[#d4a574] underline decoration-2 underline-offset-4 hover:text-[#e8c49a]">
              Hub
            </Link>
            <span className="text-[#4a3f36]">|</span>
            <Link href="/market" className="text-[#d4a574] underline decoration-2 underline-offset-4 hover:text-[#e8c49a]">
              Market
            </Link>
            <span className="text-[#4a3f36]">|</span>
            <Link href="/forum" className="text-[#d4a574] underline decoration-2 underline-offset-4 hover:text-[#e8c49a]">
              Forum
            </Link>
            <span className="text-[#4a3f36]">|</span>
            <Link href="/barter" className="text-[#7cfc9a] underline decoration-2 underline-offset-4 hover:text-[#b7ffca]">
              Barter
            </Link>
            <span className="text-[#4a3f36]">|</span>
            <Link href="/search" className="text-[#9ad7aa] underline decoration-2 underline-offset-4 hover:text-[#d5f5dc]">
              Crawler
            </Link>
            <span className="text-[#4a3f36]">|</span>
            <Link href="/hidden-wiki" className="text-[#94a8c4] underline decoration-2 underline-offset-4 hover:text-[#d8e4f2]">
              Wiki
            </Link>
            <span className="text-[#4a3f36]">|</span>
            <Link href="/darknet-atlas" className="text-[#9fc7ff] underline decoration-2 underline-offset-4 hover:text-[#dcebff]">
              Atlas
            </Link>
            <span className="text-[#4a3f36]">|</span>
            <Link href="/syndicate" className="text-fuchsia-200 underline decoration-2 underline-offset-4 hover:text-fuchsia-100">
              Syndicate
            </Link>
            <span className="text-[#4a3f36]">|</span>
            <Link href="/dashboard" className="text-[#d4a574] underline decoration-2 underline-offset-4 hover:text-[#e8c49a]">
              Dashboard
            </Link>
            <span className="text-[#4a3f36]">|</span>
            <Link href="/account/hidden-services" className="text-[#d4a574] underline decoration-2 underline-offset-4 hover:text-[#e8c49a]">
              Mirrors
            </Link>
          </div>
        </div>
        <div className="mx-auto max-w-6xl px-4 pb-3 text-[#6b5c4d]">
          <LexiconStrip label="Gazette environment · trade lexicon" tags={EXCHANGE_ATMOSPHERE_TAGS} className="border-[#3d3228]" />
        </div>
      </div>

      <div className="border-b border-[#3d3228] bg-[#100d0a] lg:hidden">
        <div className="mx-auto flex max-w-6xl gap-2 overflow-x-auto px-4 py-2">
          {SECTIONS.map((s) => (
            <Link
              key={s.href}
              href={s.href}
              className={`shrink-0 rounded border px-3 py-1.5 font-mono text-[10px] font-bold uppercase tracking-wide ${
                pathname === s.href
                  ? "border-[#c4a574] bg-[#c4a574]/15 text-[#f0e6d8]"
                  : "border-[#4a3f36] text-[#8a7b6b] hover:border-[#8d6e4a]"
              }`}
            >
              {s.label}
            </Link>
          ))}
        </div>
      </div>

      <div className="mx-auto flex max-w-6xl gap-8 px-4 pb-24 pt-6">
        <aside className="hidden w-56 shrink-0 font-mono lg:block">
          <div className="sticky top-6 space-y-2 border-r border-[#3d3228] pr-4">
            <p className="text-[9px] font-bold uppercase tracking-[0.3em] text-[#6b5c4d]">Sections</p>
            {SECTIONS.map((s) => {
              const active = pathname === s.href;
              return (
                <Link
                  key={s.href}
                  href={s.href}
                  className={`block rounded border px-3 py-2 text-left transition ${
                    active ? "border-[#c4a574]/60 bg-[#1a1612]" : "border-transparent hover:border-[#4a3f36]"
                  }`}
                >
                  <span className={`text-[11px] font-bold uppercase ${active ? "text-[#e8c49a]" : "text-[#a89888]"}`}>
                    {s.label}
                  </span>
                  <p className="mt-0.5 text-[9px] leading-snug text-[#6b5c4d]">{s.blurb}</p>
                </Link>
              );
            })}
          </div>
        </aside>
        <div className="min-w-0 flex-1">{children}</div>
      </div>
    </div>
  );
}