// Press Start — section-level shared components + helpers.
// Loaded by every page under /press-start/ via:
//   <script type="text/babel" src="/media/press-start-shared.jsx" data-presets="react"></script>
// placed AFTER /media/shared.jsx and BEFORE the page's own inline script.
//
// Exposes PressStartTabs (sub-nav) and tournamentEventTime (comparator
// helper) on window so each page can use them.

// Tournaments sort by the day they were *played*, not the day the recorder
// wrote the doc to Cosmos. Returns a comparable ms timestamp, preferring
// the structured `tournamentDate` field (ISO YYYY-MM-DD) and falling back
// to `createdAt` when a doc hasn't been backfilled yet.
function tournamentEventTime(t) {
  if (!t) return 0;
  if (t.tournamentDate) {
    const ms = Date.parse(t.tournamentDate);
    if (!isNaN(ms)) return ms;
  }
  if (t.createdAt) {
    const ms = Date.parse(t.createdAt);
    if (!isNaN(ms)) return ms;
  }
  return 0;
}

window.tournamentEventTime = tournamentEventTime;

// Strip Pokémon TCG metadata that operators sometimes type inline into
// displayNames or tournament labels — Player IDs (7-ish digit Play! Pokémon
// IDs) on participants, sanctioned event codes (6-ish digits with possible
// leading zero) on tournament names. Hides anything that's a sequence of 5
// or more digits, either at the end with leading whitespace, or at the
// start with trailing whitespace.
//
// This is a render-time band-aid until the recorder agent ships dedicated
// `trainerID` and `eventCode` fields — then we read those directly and
// stop scrubbing the display strings.
function stripMetadataIds(s) {
  if (!s || typeof s !== "string") return s;
  return s
    .replace(/\s+\d{5,}\s*$/g, "")  // trailing  "Name 5753215" → "Name"
    .replace(/^\d{5,}\s+/g, "")     // leading   "5753215 Name" → "Name"
    .trim();
}

window.stripMetadataIds = stripMetadataIds;



function PressStartTabs({ active }) {
  const tabs = [
    { id: "hub",         label: "Inicio",     href: "/press-start/" },
    { id: "tournaments", label: "Torneos",    href: "/press-start/tournaments/" },
    { id: "calendar",    label: "Calendario", href: "/press-start/calendar/" },
    { id: "events",      label: "Eventos",    href: "/press-start/events/" },
    { id: "meta",        label: "Meta",       href: "/press-start/meta/" },
    { id: "rankings",    label: "Rankings",   href: "/press-start/rankings/" },
    { id: "deck-odds",   label: "Deck Odds",  href: "/press-start/deck-odds/" },
  ];
  return (
    <nav className="mt-5 sm:mt-6 flex flex-wrap gap-2 text-xs uppercase tracking-widest font-bold">
      {tabs.map(tab => (
        tab.id === active ? (
          <span key={tab.id} className="rounded-full bg-emerald-500 px-4 py-2 text-black">{tab.label}</span>
        ) : (
          <a key={tab.id} href={tab.href} className="rounded-full bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 px-4 py-2 text-neutral-300 hover:text-white transition">{tab.label}</a>
        )
      ))}
    </nav>
  );
}

window.PressStartTabs = PressStartTabs;