/* anim-cost.jsx — Cost engineering: model routing + caching */

const CostSim = () => {
  // Queries with intrinsic difficulty 0..1, route to cheap or expensive
  const QUERIES = [
    { q: "What's 7 × 8?",                           difficulty: 0.05, cached: false },
    { q: "Summarize this paragraph in 1 line.",     difficulty: 0.30, cached: false },
    { q: "What's 7 × 8?",                           difficulty: 0.05, cached: true  },
    { q: "Explain the trade-offs of QLoRA vs full FT for a 7B model on 24GB.", difficulty: 0.92, cached: false },
    { q: "Translate 'good morning' to French.",     difficulty: 0.10, cached: false },
    { q: "Write a Python decorator that retries with exponential backoff and jitter.", difficulty: 0.78, cached: false },
    { q: "Translate 'good morning' to French.",     difficulty: 0.10, cached: true  },
    { q: "Capital of Bhutan?",                      difficulty: 0.08, cached: false },
  ];

  const PRICE = { cheap: 0.0002, expensive: 0.012, cache: 0.00001 };

  const { step, playing, toggle, next, prev, reset, containerRef } = useStepper({ steps: QUERIES.length + 1, intervalMs: 950 });
  const completed = QUERIES.slice(0, step);

  const route = (q) => q.cached ? "cache" : q.difficulty > 0.6 ? "expensive" : "cheap";
  const cost = (q) => PRICE[route(q)];

  const totalSmart = completed.reduce((a, q) => a + cost(q), 0);
  const totalNaive = completed.reduce((a) => a + PRICE.expensive, 0);
  const savings = totalNaive > 0 ? ((1 - totalSmart / totalNaive) * 100) : 0;

  return (
    <div ref={containerRef}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 280px", gap: 24 }}>
        {/* Router */}
        <div>
          <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "#6b6b66", marginBottom: 12, textTransform: "uppercase", letterSpacing: "0.06em" }}>
            queries · routed by complexity classifier
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {QUERIES.map((q, i) => {
              const done = i < step;
              const r = route(q);
              const ribbon = r === "cache" ? "#6b3fa0" : r === "expensive" ? "#c7521c" : "#2e7d4f";
              return (
                <div key={i} style={{
                  display: "grid", gridTemplateColumns: "1fr 100px 70px",
                  gap: 12, alignItems: "center",
                  padding: "8px 12px",
                  background: "#fff",
                  border: "1px solid #e7e7e2",
                  borderLeft: `3px solid ${done ? ribbon : "#e7e7e2"}`,
                  borderRadius: 4,
                  opacity: done ? 1 : 0.35,
                  transition: "all 0.3s",
                  fontSize: 12,
                }}>
                  <div style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "#1a1a1a" }}>{q.q}</div>
                  <div style={{ fontSize: 10, fontFamily: "JetBrains Mono, monospace", color: ribbon, textTransform: "uppercase", letterSpacing: "0.04em" }}>
                    {done ? r === "cache" ? "↻ cache" : r === "expensive" ? "GPT-4-class" : "haiku-class" : "—"}
                  </div>
                  <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, textAlign: "right", color: "#6b6b66" }}>
                    {done ? `$${cost(q).toFixed(4)}` : "—"}
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Meter */}
        <div>
          <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "#6b6b66", marginBottom: 12, textTransform: "uppercase", letterSpacing: "0.06em" }}>
            spend
          </div>
          <div style={{ background: "#fff", border: "1px solid #e7e7e2", borderRadius: 6, padding: 16 }}>
            <Bar label="naive (always GPT-4)" value={totalNaive} max={QUERIES.length * PRICE.expensive} color="#c7521c" />
            <Bar label="smart routing" value={totalSmart} max={QUERIES.length * PRICE.expensive} color="#2e7d4f" />
            <div style={{ marginTop: 16, paddingTop: 14, borderTop: "1px solid #e7e7e2" }}>
              <div style={{ fontSize: 10, color: "#6b6b66", textTransform: "uppercase", letterSpacing: "0.06em", fontFamily: "JetBrains Mono, monospace" }}>savings</div>
              <div style={{ fontSize: 32, fontWeight: 500, color: "#2e7d4f", fontVariantNumeric: "tabular-nums" }}>
                {savings.toFixed(0)}%
              </div>
              <div style={{ fontSize: 11, color: "#6b6b66", fontFamily: "JetBrains Mono, monospace" }}>
                ${(totalNaive - totalSmart).toFixed(4)} saved on {completed.length} queries
              </div>
            </div>
          </div>

          <div style={{ marginTop: 12, fontSize: 11, color: "#6b6b66", fontFamily: "JetBrains Mono, monospace", lineHeight: 1.6 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <span style={{ width: 10, height: 10, background: "#6b3fa0", borderRadius: 2 }}></span> semantic cache hit
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <span style={{ width: 10, height: 10, background: "#2e7d4f", borderRadius: 2 }}></span> cheap model (easy)
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <span style={{ width: 10, height: 10, background: "#c7521c", borderRadius: 2 }}></span> expensive (hard)
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const Bar = ({ label, value, max, color }) => (
  <div style={{ marginBottom: 12 }}>
    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "#6b6b66", fontFamily: "JetBrains Mono, monospace", marginBottom: 4 }}>
      <span>{label}</span>
      <span style={{ color: "#1a1a1a" }}>${value.toFixed(4)}</span>
    </div>
    <div style={{ height: 8, background: "#f4f4f1", borderRadius: 2, overflow: "hidden" }}>
      <div style={{
        height: "100%", width: `${max > 0 ? (value / max * 100) : 0}%`,
        background: color, transition: "width 0.5s ease",
      }}></div>
    </div>
  </div>
);

window.CostSim = CostSim;