/* anim-streaming.jsx — Token streaming UX */

const StreamingSim = () => {
  const RESPONSE = "Tokyo in May is mild and dry — average 22°C, light rain, and the cherry blossoms have finished but azaleas are peaking in places like Nezu Shrine.";
  const TOKENS = RESPONSE.split(/(\s+)/); // keep whitespace as separate tokens
  const TOOL_AT = 8; // After 8 tokens, show a tool call

  const { step, playing, toggle, next, prev, reset, containerRef } = useStepper({
    steps: TOKENS.length + 4, // extra steps for tool call status
    intervalMs: 110,
  });

  // Tool call inserted between token rendering
  const showToolCall = step >= 4 && step < 8;
  const toolDone = step >= 8;
  const tokensShown = step >= 8 ? step - 4 : Math.min(step, 4);
  const visibleText = TOKENS.slice(0, tokensShown).join("");

  // First-token latency tracker (synthetic)
  const ftt = 184; // ms

  return (
    <div ref={containerRef}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
        {/* Naive (no streaming) */}
        <div>
          <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "#6b6b66", marginBottom: 8, textTransform: "uppercase", letterSpacing: "0.06em" }}>
            naive · wait for full response
          </div>
          <div style={{
            background: "#fff", border: "1px solid #e7e7e2", borderRadius: 6, padding: 16,
            minHeight: 220, fontSize: 14, lineHeight: 1.6, color: "#1a1a1a", position: "relative",
          }}>
            {step < TOKENS.length + 3 ? (
              <div style={{ display: "flex", alignItems: "center", gap: 8, color: "#a3a39d", fontStyle: "italic" }}>
                <Spinner /> thinking… ({(step * 0.12).toFixed(1)}s elapsed)
              </div>
            ) : (
              <div style={{ animation: "fadeIn 0.4s" }}>{RESPONSE}</div>
            )}
          </div>
          <div style={{ marginTop: 8, fontSize: 11, fontFamily: "JetBrains Mono, monospace", color: "#6b6b66" }}>
            user sees: <span style={{ color: "#b3315a" }}>nothing for ~3.4s</span>
          </div>
        </div>

        {/* Streaming */}
        <div>
          <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "#6b6b66", marginBottom: 8, textTransform: "uppercase", letterSpacing: "0.06em" }}>
            streaming · SSE + tool status
          </div>
          <div style={{
            background: "#fff", border: "1px solid #e7e7e2", borderRadius: 6, padding: 16,
            minHeight: 220, fontSize: 14, lineHeight: 1.6, color: "#1a1a1a", position: "relative",
          }}>
            {/* Tool call status banner */}
            {showToolCall && (
              <div style={{
                background: "#fbf0d2", border: "1px solid #ecd690",
                borderRadius: 4, padding: "6px 10px",
                fontSize: 12, color: "#b8861a", marginBottom: 12,
                fontFamily: "JetBrains Mono, monospace",
                display: "flex", alignItems: "center", gap: 6,
              }}>
                <Spinner color="#b8861a" /> calling get_weather(city="Tokyo", month="May")…
              </div>
            )}
            {toolDone && step < TOKENS.length + 4 && (
              <div style={{
                background: "#e3f1e8", border: "1px solid #b8dcc4",
                borderRadius: 4, padding: "6px 10px",
                fontSize: 12, color: "#2e7d4f", marginBottom: 12,
                fontFamily: "JetBrains Mono, monospace",
              }}>
                ✓ get_weather returned (412ms)
              </div>
            )}

            <span>{visibleText}</span>
            {step > 0 && step < TOKENS.length + 3 && (
              <span style={{
                display: "inline-block", width: 7, height: 17,
                background: "#1a1a1a", marginLeft: 1, verticalAlign: "text-bottom",
                animation: "blink 0.6s infinite",
              }}></span>
            )}
          </div>
          <div style={{ marginTop: 8, fontSize: 11, fontFamily: "JetBrains Mono, monospace", color: "#6b6b66" }}>
            first token at <span style={{ color: "#2e7d4f" }}>{ftt}ms</span> · user sees progress immediately
          </div>
        </div>
      </div>

      {/* Timeline */}
      <div style={{ marginTop: 24 }}>
        <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 10, color: "#6b6b66", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 6 }}>
          perceived performance
        </div>
        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
          <div style={{ width: 80, fontSize: 11, color: "#6b6b66", fontFamily: "JetBrains Mono, monospace" }}>naive</div>
          <div style={{ flex: 1, height: 18, background: "#f4f4f1", borderRadius: 2, position: "relative", overflow: "hidden" }}>
            <div style={{ position: "absolute", left: "85%", top: 0, bottom: 0, width: 2, background: "#b3315a" }}></div>
            <div style={{ position: "absolute", left: "85%", top: -2, fontSize: 10, color: "#b3315a", fontFamily: "JetBrains Mono, monospace", marginLeft: 4 }}>response</div>
          </div>
        </div>
        <div style={{ display: "flex", gap: 12, alignItems: "center", marginTop: 6 }}>
          <div style={{ width: 80, fontSize: 11, color: "#6b6b66", fontFamily: "JetBrains Mono, monospace" }}>streaming</div>
          <div style={{ flex: 1, height: 18, background: "#f4f4f1", borderRadius: 2, position: "relative", overflow: "hidden" }}>
            <div style={{ position: "absolute", left: "5%", top: 0, bottom: 0, width: "80%", background: "linear-gradient(90deg, #2e7d4f 0%, #b8dcc4 100%)" }}></div>
            <div style={{ position: "absolute", left: "5%", top: -2, fontSize: 10, color: "#2e7d4f", fontFamily: "JetBrains Mono, monospace", marginLeft: 4 }}>first token</div>
          </div>
        </div>
      </div>
    </div>
  );
};

const Spinner = ({ color = "#a3a39d" }) => (
  <span style={{
    display: "inline-block", width: 10, height: 10,
    border: `1.5px solid ${color}`, borderTopColor: "transparent",
    borderRadius: "50%",
    animation: "spin 0.8s linear infinite",
  }}></span>
);

window.StreamingSim = StreamingSim;