/* stations-core.jsx — bodies for stations 01–04.
 * Content is DATA: every component reads through window.NBA.getContent(type)
 * and renders the canonical record shapes. Nothing is hardcoded here.
 */
const { useState: useScState } = React;
const getContent = (t) => window.NBA.getContent(t);

/* ---- 01 · What This Is — lead + tap-through explainer ---- */
function StWhatThisIs() {
  const data = getContent("whatThisIs") || { lead: "", cards: [] };
  const cards = data.cards || [];
  const [i, setI] = useScState(0);
  const card = cards[i] || { title: "", body: "" };
  return (
    <div className="st st--wti">
      {data.lead && <p className="wti__lead">{data.lead}</p>}
      <div className="wti__card" key={i}>
        <span className="wti__kicker">{String(i + 1).padStart(2, "0")} / {cards.length}</span>
        <h3 className="wti__title">{card.title}</h3>
        <p className="wti__body">{card.body}</p>
      </div>
      <div className="wti__nav">
        <button className="iconbtn" onClick={() => setI((i - 1 + cards.length) % cards.length)} aria-label="Previous">‹</button>
        <div className="wti__dots">
          {cards.map((_, k) => <button key={k} className={"wti__dot" + (k === i ? " is-on" : "")} onClick={() => setI(k)} aria-label={`Card ${k + 1}`}/>)}
        </div>
        <button className="iconbtn" onClick={() => setI((i + 1) % cards.length)} aria-label="Next">›</button>
      </div>
    </div>
  );
}

/* ---- Shared sortable cost board (used by Pricing Sheet + Plugin Index) ----
   PRICE RECORD v1: four rate columns, unit shown, real $0 vs unknown. */
function CostBoard() {
  const cb = getContent("costBoard") || { models: [] };
  const models = cb.models || [];
  const [sort, setSort] = useScState({ key: "label", dir: 1 });
  const sorted = [...models].sort((a, b) => {
    let av = a[sort.key], bv = b[sort.key];
    const an = typeof av === "number", bn = typeof bv === "number";
    if (an && bn) return (av - bv) * sort.dir;
    if (an !== bn) return (an ? -1 : 1) * sort.dir;        // known rates before unknown
    return String(av).localeCompare(String(bv)) * sort.dir;
  });
  const arrow = (k) => sort.key === k ? (sort.dir > 0 ? " ↑" : " ↓") : "";
  const Th = ({ k, children, num }) => (
    <button className={"cb__th" + (num ? " cb__th--num" : "") + (sort.key === k ? " is-on" : "")}
            onClick={() => setSort((s) => ({ key: k, dir: s.key === k ? -s.dir : 1 }))}>{children}{arrow(k)}</button>
  );
  // Real number → $x.xx (including a genuine $0.00). Absent → "unknown".
  const rate = (v) => typeof v === "number" ? "$" + v.toFixed(2) : "unknown";
  return (
    <div className="cb cb--wide">
      <div className="cb__scroll">
        <div className="cb__row cb__row--head">
          <Th k="label">Model</Th>
          <Th k="provider">Provider</Th>
          <Th k="input" num>Input <i>/1M</i></Th>
          <Th k="cache_read" num>Cache R <i>/1M</i></Th>
          <Th k="cache_write" num>Cache W <i>/1M</i></Th>
          <Th k="output" num>Output <i>/1M</i></Th>
        </div>
        {sorted.map((m) => (
          <div key={m.model} className="cb__row">
            <span className="cb__model">{m.label}</span>
            <span className="cb__prov">{m.provider}</span>
            <span className={"cb__num" + (typeof m.input !== "number" ? " cb__num--unknown" : "")}>{rate(m.input)}</span>
            <span className={"cb__num" + (typeof m.cache_read !== "number" ? " cb__num--unknown" : "")}>{rate(m.cache_read)}</span>
            <span className={"cb__num" + (typeof m.cache_write !== "number" ? " cb__num--unknown" : "")}>{rate(m.cache_write)}</span>
            <span className={"cb__num" + (typeof m.output !== "number" ? " cb__num--unknown" : "")}>{rate(m.output)}</span>
          </div>
        ))}
      </div>
      <p className="cb__unit">USD per 1M tokens · sort by any column{cb.source ? " · " + cb.source : ""}</p>
    </div>
  );
}

/* ---- 02 · Pricing Sheet — cost board + "as of" + honesty + quick link ---- */
function StPricing() {
  const cb = getContent("costBoard") || { asOf: "", honesty: "" };
  const toCostPlugins = () => window.NBA.openStation && window.NBA.openStation("plugins", { filter: "cost" });
  return (
    <div className="st st--pricing">
      <div className="pricing__head">
        <span className="pricing__asof">as of {cb.asOf}</span>
        <button className="pricing__quick" onClick={toCostPlugins}>Cost-sheet plugins →</button>
      </div>
      <CostBoard/>
      {cb.honesty && (
        <div className="pricing__honesty">
          <span className="pricing__honesty-h">HOW COST WORKS HERE</span>
          <p className="pricing__honesty-b">{cb.honesty}</p>
        </div>
      )}
    </div>
  );
}

/* ---- 03 · Get OpenAgent — lead + four-tab tour + download ---- */
function StOpenAgent() {
  const oa = getContent("openAgent") || { lead: "", tabs: [], download: {} };
  const tabs = oa.tabs || [];
  const [tab, setTab] = useScState(tabs[0] && tabs[0].id);
  const active = tabs.find((t) => t.id === tab) || tabs[0] || { name: "", body: "" };
  const dl = oa.download || {};
  const ready = dl.status === "ready" || dl.status === "live";
  return (
    <div className="st st--oa">
      <p className="oa__blurb">{oa.lead}</p>
      {tabs.length > 0 && (
        <React.Fragment>
          <div className="oa__tabs">
            {tabs.map((t) => (
              <button key={t.id} className={"oa__tab" + (t.id === tab ? " is-on" : "")} onClick={() => setTab(t.id)}>{t.name}</button>
            ))}
          </div>
          <div className="oa__panel" key={tab}>
            <span className="oa__panel-title">{active.name}</span>
            <p className="oa__panel-d">{active.body}</p>
          </div>
        </React.Fragment>
      )}
      <div className="oa__download">
        <div className="col" style={{ gap: 2 }}>
          <span className="oa__note">{dl.note}</span>
        </div>
        {ready
          ? <a className="btn btn--primary" href={dl.url || "#"}>Download</a>
          : <button className="btn btn--ghost" disabled title="Not ready yet — honest about it">Download — coming</button>}
      </div>
    </div>
  );
}

/* ---- 04 · Dev Log — reverse-chron feed ---- */
function StDevLog() {
  const entries = getContent("devLog") || [];
  return (
    <div className="st st--devlog">
      {entries.map((e) => (
        <div key={e.id} className="devlog__row">
          <span className="devlog__date">{e.placeholder ? "—" : e.date}</span>
          <div className="col" style={{ gap: 4 }}>
            <span className="devlog__title">{e.title}</span>
            {e.body && <p className="devlog__bodytext">{e.body}</p>}
            {(e.tags && e.tags.length > 0) && (
              <div className="devlog__tags">{e.tags.map((t) => <span key={t} className="devlog__tag">{t}</span>)}</div>
            )}
            {e.placeholder && <window.Tag kind="paper">placeholder · replace me</window.Tag>}
          </div>
        </div>
      ))}
      <p className="st__hint">Short, dated build updates. Newest first.</p>
    </div>
  );
}

Object.assign(window, { StWhatThisIs, StPricing, StOpenAgent, StDevLog, CostBoard });