dark-lord/components/HubChatterPublicStrip.tsx

"use client";

import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { usePathname } from "next/navigation";
import {
  CYBERLUX_ENTRY_COOKIE,
  parseCyberluxEntry,
  type CyberluxEntry,
} from "@/lib/cyberluxEntry";
import { formatRingLabel } from "@/lib/forumRings";
import { useAccount } from "@/contexts/AccountContext";
import { getChatterSlice } from "@/lib/shopChatterThreads";

function readEntry(): CyberluxEntry {
  if (typeof document === "undefined") return "hub";
  const raw = `; ${document.cookie}`;
  const part = raw.split(`; ${CYBERLUX_ENTRY_COOKIE}=`);
  if (part.length !== 2) return "hub";
  const v = part.pop()?.split(";").shift();
  return parseCyberluxEntry(v);
}

type HubSkin = { bar: string; accent: string };

const DEFAULT_HUB_SKIN: HubSkin = {
  bar: "border-zinc-700/40 bg-[#050608]/98 text-zinc-500",
  accent: "text-zinc-400",
};

const SKINS: Partial<Record<CyberluxEntry, HubSkin>> = {
  hub: {
    bar: "border-cyan-500/25 bg-[#050608]/95 text-zinc-400",
    accent: "text-cyan-400/90",
  },
  forum: {
    bar: "border-[#5c4030] bg-[#090705]/98 text-[#b8a995]",
    accent: "text-[#ff9a3c]",
  },
  exchange: {
    bar: "border-[#4a3f36]/90 bg-[#0b0907]/98 text-[#a89888]",
    accent: "text-[#d4a574]",
  },
  wiki: {
    bar: "border-[#334155] bg-[#080c15]/98 text-[#94a3b8]",
    accent: "text-[#7dd3fc]",
  },
  market: {
    bar: "border-emerald-900/45 bg-[#030806]/98 text-[#9db0a4]",
    accent: "text-[#6ee7b7]",
  },
  barter: {
    bar: "border-rose-900/40 bg-[#0a0606]/98 text-[#c8a8a8]",
    accent: "text-[#fb7185]",
  },
  chatter: {
    bar: "border-violet-900/45 bg-[#070510]/98 text-[#a898c4]",
    accent: "text-[#c4b5fd]",
  },
  search: {
    bar: "border-slate-600/45 bg-[#050608]/98 text-[#94a3b8]",
    accent: "text-[#93c5fd]",
  },
  syndicate: {
    bar: "border-yellow-900/35 bg-[#0b0905]/98 text-[#b8a878]",
    accent: "text-[#facc15]",
  },
  w: {
    bar: "border-fuchsia-900/35 bg-[#08060a]/98 text-[#c4a8d4]",
    accent: "text-[#e879f9]",
  },
};

function hubSkinFor(entry: CyberluxEntry): HubSkin {
  return SKINS[entry] ?? DEFAULT_HUB_SKIN;
}

const PREVIEW_N = 3;

/**
 * Fixed strip above the disclosure bar: in-world “hub chatter” threads (forum links).
 * Hidden on `/chatter` where the full archive already fills the view.
 */
export default function HubChatterPublicStrip() {
  const pathname = usePathname();
  const { user, hydrated } = useAccount();
  const [entry, setEntry] = useState<CyberluxEntry>("hub");
  const threads = useMemo(() => getChatterSlice(1, PREVIEW_N).items, []);

  useEffect(() => {
    setEntry(readEntry());
  }, []);

  if (pathname?.startsWith("/chatter")) return null;

  const skin = hubSkinFor(entry);

  return (
    <aside
      className={`pointer-events-auto fixed bottom-9 left-0 right-0 z-[9997] border-t px-3 py-2 shadow-[0_-6px_20px_rgba(0,0,0,0.4)] backdrop-blur-md sm:px-4 ${skin.bar}`}
      aria-label="Public hub chatter — recent threads about the main storefront"
    >
      <div className="mx-auto flex max-w-6xl flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
        <div className="flex shrink-0 flex-wrap items-center gap-x-2 gap-y-1 font-mono text-[9px] uppercase tracking-[0.22em]">
          <span className="rounded border border-white/10 px-1.5 py-0.5 text-[8px] text-[#94a3b8]/90">Public</span>
          <span className="opacity-50">·</span>
          <Link href="/chatter" className={`font-semibold ${skin.accent} hover:underline`}>
            Hub chatter
          </Link>
        </div>

        <ul className="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-start sm:gap-x-6 sm:gap-y-1">
          {threads.map((t, i) => (
            <li
              key={t.id}
              className={`min-w-0 sm:max-w-[min(100%,280px)] ${i > 0 ? "hidden sm:block" : ""}`}
            >
              <Link
                href={`/forum/post/${t.id}`}
                className="group block font-mono text-[11px] leading-snug text-[#c8b8a4] hover:text-[#ffcb8a]"
              >
                <span className={`mr-1.5 text-[9px] uppercase tracking-wider ${skin.accent} opacity-85`}>
                  {formatRingLabel(t.topicSlug)}
                </span>
                <span className="line-clamp-2 sm:line-clamp-1">{t.title}</span>
              </Link>
            </li>
          ))}
        </ul>

        <div className="flex shrink-0 flex-wrap items-center gap-3 font-mono text-[10px] uppercase tracking-wider">
          <Link href="/chatter" className={`${skin.accent} hover:underline`}>
            Full archive →
          </Link>
          <Link href="/forum" className="text-[#6b6358] hover:text-[#b8a995]">
            Forum
          </Link>
          {hydrated ? (
            <Link
              href={user ? "/dashboard" : "/sign-in"}
              className="text-[#6b6358] hover:text-[#b8a995]"
            >
              {user ? "Dashboard" : "Sign in"}
            </Link>
          ) : null}
        </div>
      </div>
    </aside>
  );
}