import React, { StrictMode, useState } from "react";
import { createRoot } from "react-dom/client";
import { Orders } from "./orders.jsx";

// Local synthetic responses only. The slow fixture deliberately ignores abort
// to exercise the component's independent stale-result guard.
window.demoAborts = 0;
window.demoSlowCompleted = 0;
function demoFetch(url, { signal }) {
  const mode = url.split("/").pop();
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => {
      signal.removeEventListener("abort", onAbort);
      if (mode === "slow") window.demoSlowCompleted += 1;
      const data = mode === "empty" ? [] : mode === "malformed" ? {} :
        [{ id: "1", label: mode === "slow" ? "Slow order" : "Sample order" }];
      resolve(new Response(JSON.stringify(data), { status: mode === "http-error" ? 503 : 200 }));
    }, mode === "slow" ? 1000 : 150);
    function onAbort() {
      window.demoAborts += 1;
      if (mode !== "slow") {
        clearTimeout(timer);
        reject(new DOMException("Cancelled", "AbortError"));
      }
    }
    signal.addEventListener("abort", onAbort, { once: true });
    if (signal.aborted) onAbort();
  });
}
function App() {
  const [mode, setMode] = useState("success");
  return <main>
    <h1>React API State Practice</h1>
    <p>Synthetic local responses; no external API or personal records.</p>
    <label>Scenario <select value={mode} onChange={event => setMode(event.target.value)}>
      {["success", "empty", "http-error", "malformed", "slow"].map(value =>
        <option key={value} value={value}>{value}</option>)}
    </select></label>
    <Orders url={"/demo/" + mode} request={demoFetch} />
  </main>;
}
createRoot(document.getElementById("root")).render(<StrictMode><App /></StrictMode>);