/* telemetry-deck.jsx
 * Persistent gauge cluster that stays on-screen across all modes.
 * Left aux: input odometer + latency curve.
 * Center: speedometer.
 * Right aux: output odometer + case checklist.
 *
 * Reads `mode` + `runState` from props. When mode=idle the gauges sit at 0,
 * cases all pending. When running, live updates. When complete, final values
 * stick; speedometer settles to the run's average rate.
 */

function TelemetryDeck({ mode, runState, tweaks }) {
  const { tokenRate, inputTokens, outputTokens, elapsedMs, cases, currentCaseIdx } = runState;
  const completed = cases.filter((c) => c.status === "completed").length;
  const failed = cases.filter((c) => c.status === "failed").length;
  const total = cases.length;
  const knownLat = cases.filter((c) => Number.isFinite(c.latencyMs)).map((c) => c.latencyMs);

  return (
    <section className="telemetry-deck" aria-label="Live telemetry">
      <div className="aux-col left">
        <div className="aux-card input">
          <div className="head">
            <h3>{tr("td.input.title")}</h3>
            <span className="tag">{tr("td.tag.tokens")}</span>
          </div>
          <Odometer value={inputTokens} digits={6} />
          <div className="aux-foot">
            <span>{tr("td.input.foot")}</span>
            <span>{Math.round(inputTokens / Math.max(1, elapsedMs / 1000))} tok/s</span>
          </div>
        </div>

        <div className="aux-card">
          <div className="head">
            <h3>{tr("td.latency.title")}</h3>
            <span className="tag">{knownLat.length}/{total}</span>
          </div>
          <LatencyMiniChart cases={cases} />
        </div>
      </div>

      <div className="speedo-frame">
        {tweaks?.showRoadGrid !== false ? <div className="scope-sweep" /> : null}
        <div className="frame-label">
          <b>{tr("speedo.frameLabel.pre")}</b>{tr("speedo.frameLabel.post")}
        </div>
        <div className="frame-label-r">
          {tr(mode === "idle" ? "speedo.state.idle" : mode === "running" ? "speedo.state.running" : "speedo.state.complete")}
          <br />
          {tr("speedo.passFail", { pass: completed, total: total, failtxt: failed ? tr("speedo.fail", { fail: failed }) : tr("speedo.noFail") })}
        </div>
        <div className="speedo-wrap">
          <Speedometer
            tokenRate={tokenRate}
            totalCases={total}
            completedCases={completed + failed}
            paused={mode === "idle"}
          />
          {tweaks?.showStations !== false ? (
            <CaseStations cases={cases} currentCaseIdx={currentCaseIdx} />
          ) : null}
          <div className="speedo-readout">
            <div className="center">
              <div className="big">{Math.min(SPEEDO_MAX, Math.round(tokenRate))}</div>
              <div className="unit">{tr("speedo.unit")}</div>
              <div className="source">
                {mode === "idle" && tr("speedo.source.idle")}
                {mode === "running" && tr("speedo.source.running")}
                {mode === "complete" && tr("speedo.source.complete")}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="aux-col right">
        <div className="aux-card output">
          <div className="head">
            <h3>{tr("td.output.title")}</h3>
            <span className="tag">{tr("td.tag.tokens")}</span>
          </div>
          <Odometer value={outputTokens} digits={6} />
          <div className="aux-foot">
            <span>{tr("td.output.foot")}</span>
            <span>{Math.round(outputTokens / Math.max(1, elapsedMs / 1000))} tok/s</span>
          </div>
        </div>

        <div className="aux-card">
          <div className="head">
            <h3>{tr("td.cases.title", { n: total })}</h3>
            <span className="tag">{tr("td.cases.tagPass", { pass: completed })}{failed ? tr("td.cases.tagFail", { fail: failed }) : ""}</span>
          </div>
          <CaseChecklist cases={cases} currentCaseIdx={currentCaseIdx} />
        </div>
      </div>
    </section>
  );
}

/* Case station pips arranged in an arc across the upper rim of the dial. */
function CaseStations({ cases, currentCaseIdx }) {
  const SIZE = 540;
  const cx = SIZE / 2;
  const cy = SIZE / 2;
  const r = 258;
  const n = cases.length;
  const startA = -78;
  const endA = 78;
  return (
    <div className="case-stations">
      {cases.map((c, i) => {
        const t = n > 1 ? i / (n - 1) : 0.5;
        const angDeg = startA + t * (endA - startA);
        const a = (angDeg - 90) * Math.PI / 180;
        const x = cx + r * Math.cos(a);
        const y = cy + r * Math.sin(a);
        const isCurrent = i === currentCaseIdx && c.status === "pending";
        const cls = isCurrent ? "running" : c.status;
        return (
          <div
            key={c.id}
            className={`case-station ${cls}`}
            style={{
              left: `${(x / SIZE) * 100}%`,
              top:  `${(y / SIZE) * 100}%`
            }}
          >
            <div className="pip" />
            <div className="lbl">{tr("case." + c.id + ".short")}</div>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { TelemetryDeck });