import {
  benchmarkDecisionPolicy,
  decisionState,
  modelTargets,
  multimodalBenchmarkSamples,
  productionNorthStars,
} from "../../../lib/model-performance";

export default function ModelEconomicsPage() {
  const imageModels = modelTargets.filter((model) => model.modality === "image");
  const videoModels = modelTargets.filter((model) => model.modality === "video");
  const voiceModels = modelTargets.filter((model) => model.modality === "voice");

  return (
    <>
      <header className="page-head">
        <div>
          <span className="eyebrow">Production intelligence</span>
          <h1>Image · Video · Voice Model Performance</h1>
          <p>
            CartoonOS compares matched production tasks by quality, identity consistency, first-pass acceptance,
            latency, rework and accepted-output cost. There is no single global best model.
          </p>
        </div>
        <span className="pill">{multimodalBenchmarkSamples.length} matched samples</span>
      </header>

      <section className="grid grid-3">
        <div className="card">
          <span className="eyebrow">Image economics</span>
          <h2>{productionNorthStars.imageEconomics}</h2>
          <p>Character sheets, turnarounds, expressions, clean backgrounds, diagrams, storyboards and keyframes.</p>
        </div>
        <div className="card">
          <span className="eyebrow">Video economics</span>
          <h2>{productionNorthStars.videoEconomics}</h2>
          <p>Dialogue, cinematic shots, multi-character scenes, B-roll, Clarity Islands and motion transfer.</p>
        </div>
        <div className="card">
          <span className="eyebrow">Voice economics</span>
          <h2>{productionNorthStars.voiceEconomics}</h2>
          <p>Canonical mascot voice identity is measured separately from the underlying TTS engine.</p>
        </div>
      </section>

      <section className="section">
        <div className="section-title">
          <h2>Current benchmark portfolio</h2>
          <span className="pill">
            {imageModels.length} image · {videoModels.length} video · {voiceModels.length} voice
          </span>
        </div>
        <div className="table-wrap">
          <table>
            <thead>
              <tr>
                <th>Modality</th>
                <th>Provider</th>
                <th>Model</th>
                <th>Route</th>
                <th>Unit</th>
                <th>Samples</th>
                <th>Decision state</th>
              </tr>
            </thead>
            <tbody>
              {modelTargets.map((model) => {
                const samples = multimodalBenchmarkSamples.filter(
                  (sample) => sample.providerId === model.providerId && sample.modelId === model.modelId,
                );
                return (
                  <tr key={`${model.providerId}-${model.modelId}`}>
                    <td><span className="pill">{model.modality}</span></td>
                    <td><strong>{model.providerName}</strong></td>
                    <td>{model.modelName}<br /><span className="eyebrow">{model.modelId}</span></td>
                    <td>{model.route}</td>
                    <td>{model.benchmarkUnit.replaceAll("_", " ")}</td>
                    <td>{samples.length}</td>
                    <td>{decisionState(samples.length).replaceAll("_", " ")}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </section>

      <section className="section grid grid-3">
        <div className="card">
          <span className="eyebrow">Image focus</span>
          <h3>Nano Banana is in the benchmark set</h3>
          <p>Nano Banana, Pro, 2 and 2 Lite are evaluated against the same character/reference briefs. Price alone never overrides identity or anatomy gates.</p>
        </div>
        <div className="card">
          <span className="eyebrow">Voice law</span>
          <h3>Same mascot voice across formats</h3>
          <p>Lumi, Tiko, Nova, Marina, Rin, Arqueo and Pepe each keep one active versioned voice identity across Shorts/Reels and flagships.</p>
        </div>
        <div className="card">
          <span className="eyebrow">Confidence</span>
          <h3>No winner from tiny samples</h3>
          <p>&lt;5 matched samples = insufficient; 5–19 = provisional; ≥{benchmarkDecisionPolicy.decisionReadyMin} = decision-ready.</p>
        </div>
      </section>

      <section className="section grid grid-3">
        <div className="card"><span className="eyebrow">Quality KPI</span><h3>First-pass acceptance</h3><p>Measures how often a model clears the exact quality gate without regeneration or repair.</p></div>
        <div className="card"><span className="eyebrow">Identity KPI</span><h3>Character / voice consistency</h3><p>Character assets and dialogue must preserve the approved identity before economics may influence routing.</p></div>
        <div className="card"><span className="eyebrow">Speed KPI</span><h3>P50 / P95 latency</h3><p>Queue, generation, QA and total wall-clock time are tracked separately to expose scale bottlenecks.</p></div>
      </section>

      <section className="section grid grid-3">
        <div className="card"><span className="eyebrow">Selector rule</span><h3>Best model for this task</h3><p>Rank by matched archetype, exact character/version, quality floor, expected accepted cost, reliability and latency.</p></div>
        <div className="card"><span className="eyebrow">Portfolio rule</span><h3>No global best model</h3><p>A cheap background model can be a poor Lumi close-up model; a strong image model may not be the best storyboard or diagram model.</p></div>
        <div className="card"><span className="eyebrow">North Star</span><h3>{productionNorthStars.primary}</h3><p>Production-model optimization ultimately serves durable audience value, not API-price minimization.</p></div>
      </section>
    </>
  );
}