/* anim-eval.jsx — Eval & observability: golden dataset run */

const EvalSim = () => {
  const CASES = [
    { q: "What's 2 + 2?",                expected: "4",          got: "4",         pass: true,  latency: 312, cost: 0.0008 },
    { q: "Capital of Mongolia?",         expected: "Ulaanbaatar", got: "Ulaanbaatar", pass: true,  latency: 421, cost: 0.0009 },
    { q: "Refund policy on item #4421?", expected: "30 days",    got: "I cannot help with that.", pass: false, latency: 198, cost: 0.0006 },
    { q: "Sum the column 'revenue'",     expected: "$1.2M",      got: "$1,204,830", pass: true,  latency: 894, cost: 0.0021, judge: "semantic" },
    { q: "Is Pluto a planet?",           expected: "No (dwarf)", got: "Yes",        pass: false, latency: 287, cost: 0.0007 },
    { q: "Translate 'thank you' to JP",  expected: "ありがとう",  got: "ありがとう", pass: true,  latency: 356, cost: 0.0008 },
  ];

  const { step, playing, toggle, next, prev, reset, containerRef } = useStepper({ steps: CASES.length + 1, intervalMs: 900 });
  const completed = CASES.slice(0, step);
  const passes = completed.filter(c => c.pass).length;
  const fails = completed.filter(c => !c.pass).length;
  const avgLat = completed.length ? Math.round(completed.reduce((a, c) => a + c.latency, 0) / completed.length) : 0;
  const totCost = completed.reduce((a, c) => a + c.cost, 0);

  return (
    <div ref={containerRef}>
      {/* Top stats */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 16 }}>
        <Stat label="passed" value={passes} color="#2e7d4f" total={CASES.length} />
        <Stat label="failed" value={fails} color="#b3315a" total={CASES.length} />
        <Stat label="avg latency" value={`${avgLat}ms`} color="#1a1a1a" />
        <Stat label="total cost" value={`$${totCost.toFixed(4)}`} color="#1a1a1a" />
      </div>

      {/* Test rows */}
      <div style={{ background: "#fff", border: "1px solid #e7e7e2", borderRadius: 6, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "20px 2fr 1.4fr 1.4fr 70px 70px", gap: 12, padding: "10px 14px", background: "#f4f4f1", borderBottom: "1px solid #e7e7e2", fontSize: 10, color: "#6b6b66", fontFamily: "JetBrains Mono, monospace", textTransform: "uppercase", letterSpacing: "0.06em" }}>
          <div></div>
          <div>input</div>
          <div>expected</div>
          <div>actual</div>
          <div style={{ textAlign: "right" }}>ms</div>
          <div style={{ textAlign: "right" }}>$</div>
        </div>
        {CASES.map((c, i) => {
          const done = i < step;
          const running = i === step - 1 && step <= CASES.length;
          return (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "20px 2fr 1.4fr 1.4fr 70px 70px", gap: 12,
              padding: "10px 14px", borderBottom: i < CASES.length - 1 ? "1px solid #e7e7e2" : "none",
              fontSize: 12, alignItems: "center",
              fontFamily: "Inter Tight, sans-serif",
              opacity: done ? 1 : 0.35,
              background: done ? (c.pass ? "transparent" : "#fde4eb") : "transparent",
              transition: "all 0.3s",
            }}>
              <div>
                {!done && <span style={{ color: "#a3a39d" }}>○</span>}
                {done && c.pass && <span style={{ color: "#2e7d4f", fontWeight: 700 }}>✓</span>}
                {done && !c.pass && <span style={{ color: "#b3315a", fontWeight: 700 }}>✗</span>}
              </div>
              <div style={{ color: "#1a1a1a" }}>{c.q}</div>
              <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "#6b6b66" }}>{c.expected}</div>
              <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: done && !c.pass ? "#b3315a" : "#6b6b66" }}>
                {done ? c.got : "—"}
                {c.judge && done && (
                  <span style={{ marginLeft: 6, fontSize: 9, padding: "1px 5px", background: "#ede4f7", color: "#6b3fa0", borderRadius: 3 }}>llm-judge</span>
                )}
              </div>
              <div style={{ textAlign: "right", fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "#6b6b66" }}>
                {done ? c.latency : "—"}
              </div>
              <div style={{ textAlign: "right", fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "#6b6b66" }}>
                {done ? c.cost.toFixed(4) : "—"}
              </div>
            </div>
          );
        })}
      </div>

      <div style={{ marginTop: 12, fontSize: 12, color: "#6b6b66", fontFamily: "JetBrains Mono, monospace", textAlign: "center" }}>
        {step >= CASES.length ? `run complete · ${passes}/${CASES.length} passed · regression check ${fails === 0 ? "✓ green" : "✗ red"}` : `running case ${step}/${CASES.length}…`}
      </div>
    </div>
  );
};

const Stat = ({ label, value, color, total }) => (
  <div style={{ background: "#fbfbfa", border: "1px solid #e7e7e2", borderRadius: 6, padding: "12px 14px" }}>
    <div style={{ fontSize: 10, color: "#6b6b66", textTransform: "uppercase", letterSpacing: "0.06em", fontFamily: "JetBrains Mono, monospace" }}>{label}</div>
    <div style={{ fontSize: 22, fontWeight: 500, color, marginTop: 4, fontVariantNumeric: "tabular-nums" }}>
      {value}{total !== undefined && <span style={{ color: "#a3a39d", fontSize: 14, fontWeight: 400 }}>/{total}</span>}
    </div>
  </div>
);

window.EvalSim = EvalSim;