/* global React, COLLECTIONS, THREADS, useViewport */
/* ------------------------------------------------------------------ */
/* PdpNav — slim prev/next navigator under the header on every PDP.   */
/*                                                                    */
/* Sequence is built from the COLLECTIONS array filtered to those     */
/* sharing the current PDP's first thread, in canonical data order,   */
/* and intersected with COLLECTION_ROUTES (only PDPs that exist).     */
/* No wrap-around: first PDP has no Previous, last has no Next.        */
/* ------------------------------------------------------------------ */

// Mirror of CollectionGrid.jsx COLLECTION_ROUTES — keep in sync when
// new PDPs ship. (Kept local so PdpNav is self-contained.)
const PDP_ROUTES = new Set([
  "gateway", "trio", "pipeline", "prisma", "caterpillar",
  "mochi", "twig", "autobahn", "cocoon", "volar",
  "s1", "tonne", "stump", "cup", "biggie", "platform",
  "strap", "picket", "pinto", "hext", "yeti",
  "rio", "pillar", "guell", "fit", "tetromino-s",
  "mass", "seed", "ivi", "homework",
  "coral", "wombat", "flatliner", "kono", "bolet", "kink", "pill",
]);

function PdpNav({ slug, setScreen }) {
  const vw = useViewport();
  const isMobile = vw < 720;

  const current = COLLECTIONS.find(c => c.slug === slug);
  if (!current) return null;

  // Single canonical sequence shared with the Collections index — every PDP
  // uses the same ring, so prev/next mirrors the order users just browsed.
  // Falls back to the COLLECTIONS data order if PDP_ORDER hasn't loaded yet.
  const order = window.PDP_ORDER || COLLECTIONS.filter(c => PDP_ROUTES.has(c.slug)).map(c => c.slug);
  const list = order.map(slug => COLLECTIONS.find(c => c.slug === slug)).filter(c => c && !c.discontinued);

  const idx = list.findIndex(c => c.slug === slug);
  if (idx === -1) return null;
  // No wrap — first PDP has no prev, last has no next.
  const prev = idx > 0 ? list[idx - 1] : null;
  const next = idx < list.length - 1 ? list[idx + 1] : null;

  const linkBase = {
    display: "flex",
    alignItems: "center",
    gap: 8,
    cursor: "pointer",
    color: "#1a1917",
    fontSize: isMobile ? 11 : 12,
    fontWeight: 500,
    letterSpacing: "0.01em",
    textDecoration: "none",
    minWidth: 0,
    flex: "1 1 0",
  };

  const labelStyle = {
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
  };

  const eyebrow = {
    fontSize: 9,
    letterSpacing: "0.18em",
    textTransform: "uppercase",
    color: "#6c6862",
    fontWeight: 500,
    display: "block",
    marginBottom: 1,
  };

  return (
    <nav
      aria-label="Collection navigation"
      style={{
        position: "sticky",
        top: isMobile ? 54 : 62,
        zIndex: 40,
        borderBottom: "1px solid #e5e2db",
        background: "rgba(250, 248, 243, 0.96)",
        backdropFilter: "blur(8px)",
        WebkitBackdropFilter: "blur(8px)",
        padding: isMobile ? "8px 20px" : "9px max(24px, 3vw)",
        marginTop: isMobile ? 54 : 62,
      }}
    >
      <div style={{
        maxWidth: 1440,
        margin: "0 auto",
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        alignItems: "center",
        gap: isMobile ? 12 : 24,
      }}>
        {/* Prev */}
        {prev ? (
          <a
            onClick={() => setScreen(prev.slug)}
            style={{ ...linkBase, justifyContent: "flex-start" }}
            onMouseEnter={(e) => { e.currentTarget.style.opacity = "0.6"; }}
            onMouseLeave={(e) => { e.currentTarget.style.opacity = "1"; }}
          >
            <span aria-hidden style={{ fontSize: 14, lineHeight: 1, transform: "translateY(-1px)" }}>←</span>
            <span style={{ minWidth: 0 }}>
              <span style={eyebrow}>{isMobile ? "Prev" : "Previous"}</span>
              <span style={labelStyle}>{prev.name}</span>
            </span>
          </a>
        ) : (
          <span aria-hidden />
        )}

        {/* Next */}
        {next ? (
          <a
            onClick={() => setScreen(next.slug)}
            style={{ ...linkBase, justifyContent: "flex-end", textAlign: "right" }}
            onMouseEnter={(e) => { e.currentTarget.style.opacity = "0.6"; }}
            onMouseLeave={(e) => { e.currentTarget.style.opacity = "1"; }}
          >
            <span style={{ minWidth: 0 }}>
              <span style={eyebrow}>Next</span>
              <span style={labelStyle}>{next.name}</span>
            </span>
            <span aria-hidden style={{ fontSize: 14, lineHeight: 1, transform: "translateY(-1px)" }}>→</span>
          </a>
        ) : (
          <span aria-hidden />
        )}
      </div>
    </nav>
  );
}

window.PdpNav = PdpNav;
window.PDP_ROUTES = PDP_ROUTES;