/* anim-structured.jsx — Structured output validation
 * Shows raw text streaming in, schema validating each field, types becoming green
 */

const StructuredSim = () => {
  const SCHEMA = [
    { key: "title",      type: "str",  required: true,  example: "Quarterly Review" },
    { key: "owner",      type: "str",  required: true,  example: "alex@co" },
    { key: "due_date",   type: "date", required: true,  example: "2026-06-15" },
    { key: "priority",   type: "enum", required: true,  example: "high", enum: ["low","med","high"] },
    { key: "tags",       type: "list", required: false, example: '["finance","q2"]' },
    { key: "budget_usd", type: "int",  required: true,  example: "12500" },
  ];

  // Stages: 0 = raw stream, 1 = parse JSON, 2 = validate types, 3 = validated, 4 = retry on failure
  const STAGES = SCHEMA.length + 2; // streaming each field + done
  const { step, playing, toggle, next, prev, reset, containerRef } = useStepper({ steps: STAGES, intervalMs: 1100 });

  // Field validation states: pending → streaming → validated
  const fieldState = (i) => {
    if (step <= i) return "pending";
    if (step === i + 1) return "streaming";
    return "valid";
  };

  return (
    <div ref={containerRef}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
        {/* Left: Pydantic schema */}
        <div>
          <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "#6b6b66", marginBottom: 8, textTransform: "uppercase", letterSpacing: "0.06em" }}>
            Pydantic schema
          </div>
          <div style={{
            background: "#1a1d23", borderRadius: 6, padding: 16,
            fontFamily: "JetBrains Mono, monospace", fontSize: 12, lineHeight: 1.7,
          }}>
            <div><span style={{ color: "#c586c0" }}>class</span> <span style={{ color: "#4ec9b0" }}>Task</span>(BaseModel):</div>
            {SCHEMA.map((f, i) => {
              const state = fieldState(i);
              const color = state === "valid" ? "#4ec9b0" : state === "streaming" ? "#dcdcaa" : "#6b6b66";
              return (
                <div key={f.key} style={{
                  paddingLeft: 16,
                  color,
                  transition: "color 0.3s",
                  display: "flex", gap: 8, alignItems: "center",
                }}>
                  <span style={{ color: "#9cdcfe" }}>{f.key}</span>
                  <span style={{ color: "#d4d4d4" }}>:</span>
                  <span style={{ color }}>{f.type}{!f.required && " | None"}</span>
                  {state === "valid" && <span style={{ color: "#2e7d4f", marginLeft: "auto" }}>✓</span>}
                  {state === "streaming" && <span style={{ color: "#dcdcaa", marginLeft: "auto", animation: "blink 0.8s infinite" }}>●</span>}
                </div>
              );
            })}
          </div>
        </div>

        {/* Right: incoming JSON */}
        <div>
          <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "#6b6b66", marginBottom: 8, textTransform: "uppercase", letterSpacing: "0.06em" }}>
            LLM output (with_structured_output)
          </div>
          <div style={{
            background: "#fff", border: "1px solid #e7e7e2", borderRadius: 6, padding: 16,
            fontFamily: "JetBrains Mono, monospace", fontSize: 12, lineHeight: 1.7,
            minHeight: 220,
          }}>
            <div>{"{"}</div>
            {SCHEMA.map((f, i) => {
              const state = fieldState(i);
              if (state === "pending") return null;
              const isLast = i === SCHEMA.length - 1;
              return (
                <div key={f.key} style={{
                  paddingLeft: 16,
                  animation: state === "streaming" ? "fadeIn 0.4s" : undefined,
                }}>
                  <span style={{ color: "#2d5fb8" }}>"{f.key}"</span>
                  <span>: </span>
                  <span style={{ color: "#c7521c" }}>
                    {f.type === "int" ? f.example
                      : f.type === "list" ? f.example
                      : `"${f.example}"`}
                  </span>
                  {!isLast && ","}
                  {state === "streaming" && (
                    <span style={{
                      display: "inline-block", width: 6, height: 13,
                      background: "#1a1a1a", marginLeft: 2, verticalAlign: "middle",
                      animation: "blink 0.6s infinite",
                    }}></span>
                  )}
                </div>
              );
            })}
            <div>{"}"}</div>
          </div>

          <div style={{
            marginTop: 12, padding: "8px 12px",
            borderRadius: 4, fontSize: 12,
            fontFamily: "JetBrains Mono, monospace",
            background: step >= STAGES - 1 ? "#e3f1e8" : "#f4f4f1",
            color: step >= STAGES - 1 ? "#2e7d4f" : "#6b6b66",
            border: "1px solid",
            borderColor: step >= STAGES - 1 ? "#b8dcc4" : "#e7e7e2",
            transition: "all 0.3s",
          }}>
            {step >= STAGES - 1
              ? "✓ Task.parse_obj(...) — all fields validated, typed object returned"
              : step === 0 ? "waiting for first token…"
              : `streaming · ${step}/${SCHEMA.length} fields validated`}
          </div>
        </div>
      </div>
    </div>
  );
};

window.StructuredSim = StructuredSim;