import {
  h,
  mount,
  activateIslands,
  createSignal,
  createList,
} from "@getforma/core";

type ItemView = {
  id: string;
  name: string;
  quantity: number;
  version: number;
  note: string;
  draftQuantity: string;
  action: string;
  reloadHref: string;
  csrf: string;
  message: string;
};
type EditorProps = { item: ItemView };
type InventoryProps = { items: ItemView[]; notice: string };

function StockEditor(props: EditorProps) {
  const [quantity, setQuantity] = createSignal(props.item.quantity);
  const [version, setVersion] = createSignal(props.item.version);
  const [message, setMessage] = createSignal(props.item.message);
  const [saving, setSaving] = createSignal(false);

  async function save(event: SubmitEvent) {
    event.preventDefault();
    if (saving()) return;
    const form = event.currentTarget as HTMLFormElement;
    const fields = new FormData(form);
    const controller = new AbortController();
    const timeout = setTimeout(() => controller.abort(), 8000);
    setSaving(true);
    setMessage("Saving to Rust…");
    try {
      const response = await fetch(props.item.action, {
        method: "POST",
        headers: { Accept: "application/json" },
        signal: controller.signal,
        body: new URLSearchParams({
          quantity: String(fields.get("quantity") ?? ""),
          note: String(fields.get("note") ?? ""),
          version: String(version()),
          csrf: props.item.csrf,
        }),
      });
      const result = await response.json();
      if (!response.ok || !result.ok) {
        setMessage(result.message || "Save refused. Your draft is still here.");
        return;
      }
      // Only a committed server response updates the confirmed quantity/version.
      setQuantity(result.item.quantity);
      setVersion(result.item.version);
      (form.elements.namedItem("quantity") as HTMLInputElement).value = String(
        result.item.quantity,
      );
      setMessage("Saved on the server.");
    } catch {
      setMessage(
        "Could not confirm the save. Reload to check server state before retrying.",
      );
    } finally {
      clearTimeout(timeout);
      setSaving(false);
    }
  }

  return (
    <section id={props.item.id} class="stock-editor" data-item-id={props.item.id}>
      <div class="item-heading">
        <h2>{props.item.name}</h2>
        <p>
          <strong class="confirmed-stock">{() => quantity()}</strong> confirmed
          in stock
        </p>
      </div>
      <form method="post" action={props.item.action} onSubmit={save}>
        <input type="hidden" name="csrf" value={props.item.csrf} />
        <input type="hidden" name="version" value={() => version()} />
        <label>
          Quantity
          <input
            name="quantity"
            type="number"
            min="0"
            max="9999"
            step="1"
            required
            disabled={() => saving()}
            value={props.item.draftQuantity}
          />
        </label>
        <label>
          Shelf note
          <input
            name="note"
            type="text"
            maxLength="80"
            disabled={() => saving()}
            value={props.item.note}
            placeholder="Where does this item live?"
          />
        </label>
        <button type="submit" disabled={() => saving()}>
          Save changes
        </button>
        <p class="save-message" role="status" aria-live="polite">
          {() => message()}
        </p>
        <a class="reload-link" href={props.item.reloadHref}>
          Reload inventory
        </a>
      </form>
    </section>
  );
}

function Inventory(props: InventoryProps) {
  return (
    <main class="app">
      <header>
        <p class="eyebrow">FORMA / A COMPLETE FIRST APPLICATION</p>
        <h1>
          Field Notes<span>.</span>
        </h1>
        <p class="lede">
          A small stockroom. Real server data. One useful edit at a time.
        </p>
      </header>
      <p class="notice" role="status">
        {props.notice}
      </p>
      <ul class="inventory">
        {createList(
          () => props.items,
          (item) => item.id,
          (item) => (
            <li>
              <StockEditor item={item} />
            </li>
          ),
        )}
      </ul>
      <aside>
        <h2>Where your changes go</h2>
        <p>
          Rust validates each edit, checks its version, and saves the inventory
          to a local JSON file before confirming success. The browser keeps the
          existing editor in place.
        </p>
        <p>
          Turn JavaScript off: these same forms still submit to Rust. Open a
          second tab to try the stale-edit check. A page reload reads the stored
          data.
        </p>
        <p class="boundary">
          Learning application · local access only · one server process · no
          accounts, database, backups or production deployment configuration.
        </p>
      </aside>
    </main>
  );
}

await activateIslands({ StockEditor });
// Native compilation selects the page and removes this whole-page mount.
mount(() => Inventory({ items: [], notice: "" }), "#app");