// Save as app/page.jsx in the separate example project.
"use client";
import { useState } from "react";

export default function Page() {
  const [busy, setBusy] = useState(false);
  const [events, setEvents] = useState([]);
  const [error, setError] = useState("");
  async function run() {
    setBusy(true); setEvents([]); setError("");
    let reader;
    try {
      const response = await fetch("/api/order", { method: "POST" });
      if (!response.ok) throw new Error(await response.text());
      if (!response.body) throw new Error("Missing response stream");
      reader = response.body.getReader();
      const decoder = new TextDecoder();
      let pending = "";
      let terminal = false;
      const accept = (line) => {
        if (!line.trim()) return;
        const event = JSON.parse(line);
        if (event.kind === "result" || event.kind === "error") terminal = true;
        if (event.kind === "error") setError(event.message);
        setEvents((items) => [...items, event]);
      };
      while (true) {
        const { value, done } = await reader.read();
        pending += decoder.decode(value, { stream: !done });
        const lines = pending.split("\n"); pending = lines.pop() || "";
        lines.forEach(accept);
        if (done) break;
      }
      accept(pending);
      if (!terminal) throw new Error("Connection closed. Inspect the saved session before retrying.");
    } catch (err) { setError(err.message); }
    finally { reader?.releaseLock(); setBusy(false); }
  }
  return <main style={{ maxWidth: 800, margin: "40px auto", padding: 24 }}>
    <h1>Read an order with Agents API</h1>
    <p>Local example using fictional order ORDER-100. Running it uses your API credits.</p>
    <button onClick={run} disabled={busy}>{busy ? "Running…" : "Look up order"}</button>
    <p role="status">{busy ? "Receiving session events" : "Ready"}</p>
    {error && <p role="alert">{error}</p>}
    <pre style={{ overflowX: "auto" }}>{JSON.stringify(events, null, 2)}</pre>
  </main>;
}