// benchmark/PairCards.jsx — Inversion callout + four model-tier pair cards.

function fmtUsd(n) {
  if (n < 1) return '$' + n.toFixed(3).replace(/0+$/,'').replace(/\.$/,'');
  return '$' + n.toFixed(2);
}
function fmtTok(n) {
  if (n >= 1000) return (n/1000).toFixed(0) + 'k';
  return String(n);
}
function pct(n) { return Math.round(n * 100) + '%'; }

function Inversion() {
  const { a, b } = window.BENCH.inversion;
  const n = window.BENCH.meta.costAggregate.nPerCell;
  return (
    <div className="inversion">
      <div className="inversion-grid">
        <div className="inversion-side left">
          <div className="label">{a.label}</div>
          <div className="stat-row"><span className="v">{pct(a.passRate)}</span><span className="k">pass rate</span></div>
          <div className="stat-row"><span className="v">{fmtUsd(a.costOfPass)}</span><span className="k">per successful task</span></div>
          <div className="stat-row"><span className="v">{fmtUsd(a.totalUsd)}</span><span className="k">total spend, {n} attempts</span></div>
        </div>
        <div className="inversion-vs">vs.</div>
        <div className="inversion-side right">
          <div className="label">{b.label}</div>
          <div className="stat-row"><span className="v">{pct(b.passRate)}</span><span className="k">pass rate</span></div>
          <div className="stat-row"><span className="v">{fmtUsd(b.costOfPass)}</span><span className="k">per successful task</span></div>
          <div className="stat-row"><span className="v">{fmtUsd(b.totalUsd)}</span><span className="k">total spend, {n} attempts</span></div>
        </div>
      </div>
      <div className="inversion-caption">
        Same model, same tasks. Only the codec changes. Turn it on for your
        strongest model and you solve <strong>more tasks</strong> at
        <strong> a lower price per success</strong>. The headline trade-off
        in one matched pair.
      </div>
    </div>
  );
}

function PairCard({ tier }) {
  if (tier.pending) {
    return (
      <div className="pair-card pending">
        <div className="pair-tier">{tier.modelLabel}</div>
        <div className="pair-model">{tier.modelTechnical}</div>
        <div className="pending-block">
          <span className="badge">In progress</span>
          <p style={{margin:0, lineHeight: 1.6}}>
            Same suite, same methodology.
            Cross-vendor results land here when they finish.
          </p>
        </div>
      </div>
    );
  }
  const { jdc, bypass, multiple, reductionPct } = tier;
  const n = window.BENCH.meta.costAggregate.nPerCell;
  return (
    <div className="pair-card">
      <div className="pair-tier">{tier.modelLabel}</div>
      <div className="pair-model">{tier.modelTechnical}</div>

      <div className="pair-multiple">
        <span className="num">{multiple.toFixed(2)}</span><span className="x">×</span>
        <span className="qualifier">cheaper<br/>per successful task</span>
      </div>

      <div className="pair-rows">
        <div className="row header">
          <span></span>
          <span className="bypass">codec off</span>
          <span className="jdc">codec on</span>
        </div>
        <div className="row">
          <span className="k">Tasks passed</span>
          <span className="bypass">{bypass.pass}/{n}</span>
          <span className="jdc">{jdc.pass}/{n}</span>
        </div>
        <div className="row">
          <span className="k">Tasks failed</span>
          <span className="bypass">{bypass.fail}/{n}</span>
          <span className="jdc">{jdc.fail}/{n}</span>
        </div>
        <div className="row">
          <span className="k">Tasks aborted</span>
          <span className="bypass">{bypass.abort}/{n}</span>
          <span className="jdc">{jdc.abort}/{n}</span>
        </div>
        <div className="row">
          <span className="k">Avg input tokens (per attempt)</span>
          <span className="bypass">{fmtTok(bypass.tokIn)}</span>
          <span className="jdc">{fmtTok(jdc.tokIn)}</span>
        </div>
        <div className="row">
          <span className="k">LLM cost per success</span>
          <span className="bypass">{fmtUsd(bypass.costOfPass)}</span>
          <span className="jdc">{fmtUsd(jdc.costOfPass)}</span>
        </div>
        <div className="row">
          <span className="k">LLM bill reduction</span>
          <span className="bypass">n/a</span>
          <span className="jdc">−{reductionPct}%</span>
        </div>
      </div>
    </div>
  );
}

function PairCards() {
  const tiers = window.BENCH.tiers;
  return <div className="pairs">{tiers.map(t => <PairCard key={t.id} tier={t} />)}</div>;
}

window.Inversion = Inversion;
window.PairCard = PairCard;
window.PairCards = PairCards;