import type { InboxItem } from "@earendil-works/pi-durable";
import { imageSummary } from "@berry/api/images.ts";
import { api } from "./client.ts";
import { json, keyed, type Scope } from "./ui.ts";
import { event } from "./event.tsx";

// the order the harness places them in: every write at the next boundary, a steer at each boundary from there, and
// the follow-ups once the run ends, each in the order they were queued
const PLACED: Record<InboxItem["mode"], number> = { write: 0, steer: 1, followUp: 2 };

/** Queued submissions retain their editors until the submission leaves the inbox. */
export function inbox(scope: Scope, tid: string) {
  const element = <div class="inbox" /> as HTMLElement;
  const rows = keyed(element, (item: InboxItem) => item.id, (initial) => {
    const mode = (
      <span class="mode">
        {initial.mode === "write"
          ? "pending"
          : initial.mode === "followUp"
          ? "follow-up"
          : initial.mode}
      </span>
    );
    if (initial.mode === "write") {
      const content = initial.entry.kind === "berry.event" ? event(initial.entry.data) : (
        <details>
          <summary>{typeof initial.entry.kind === "string" ? initial.entry.kind : "event"}</summary>
          <pre>{json(initial.entry)}</pre>
        </details>
      );
      return {
        node: <div class="queued" hidden={content === null}>{mode} {content ?? undefined}</div>,
      };
    }

    let item = initial;
    let editing = false;
    let pending = false;
    let disposed = false;
    const content = <span class="queued-content" /> as HTMLElement;
    const images = <span class="queued-images" /> as HTMLElement;
    const error = <div class="queued-error" role="alert" hidden /> as HTMLElement;
    const textarea = <textarea aria-label="Queued message text" rows={3} /> as HTMLTextAreaElement;
    const edit = <button type="button">Edit</button> as HTMLButtonElement;
    const retract = <button type="button" class="danger">Retract</button> as HTMLButtonElement;
    const save = <button type="submit" class="primary">Save</button> as HTMLButtonElement;
    const cancel = <button type="button">Cancel</button> as HTMLButtonElement;
    const actions = <div class="queued-actions">{edit}{retract}</div> as HTMLElement;
    const form = (
      <form class="queued-editor" hidden>
        {textarea}
        <div class="queued-actions">{save}{cancel}</div>
      </form>
    ) as HTMLFormElement;
    const node = (
      <div class="queued">
        <div>{mode} {content} {images}</div>
        {actions}
        {form}
        {error}
      </div>
    );
    const text = () =>
      typeof item.content === "string"
        ? item.content
        : item.content.flatMap((block) => block.type === "text" ? [block.text] : []).join("\n");
    const render = () => {
      content.textContent = text();
      content.hidden = editing;
      images.textContent = imageSummary(item.content);
      actions.hidden = editing;
      form.hidden = !editing;
      textarea.readOnly = pending;
      for (const button of [edit, retract, save, cancel]) button.disabled = pending;
      save.disabled ||= !textarea.value.trim() && !imageSummary(item.content);
    };
    const mutate = async (method: "PATCH" | "DELETE") => {
      if (disposed || pending) return;
      if (method === "PATCH" && !textarea.value.trim() && !imageSummary(item.content)) return;
      pending = true;
      error.hidden = true;
      render();
      try {
        await api(
          method,
          `/api/conversations/${tid}/inbox/${item.id}`,
          method === "PATCH" ? { text: textarea.value } : undefined,
        );
        if (disposed) return;
        // snapshots own content and removal; a late response must not restore a consumed submission
        editing = false;
      } catch (cause) {
        if (disposed) return;
        error.textContent = cause instanceof Error ? cause.message : String(cause);
        error.hidden = false;
      } finally {
        if (!disposed) {
          pending = false;
          render();
        }
      }
    };
    edit.addEventListener("click", () => {
      if (pending || disposed) return;
      editing = true;
      textarea.value = text();
      error.hidden = true;
      render();
      textarea.focus();
    });
    cancel.addEventListener("click", () => {
      if (pending || disposed) return;
      editing = false;
      textarea.value = text();
      error.hidden = true;
      render();
      edit.focus();
    });
    textarea.addEventListener("input", render);
    form.addEventListener("submit", (event) => {
      event.preventDefault();
      void mutate("PATCH");
    });
    retract.addEventListener("click", () => void mutate("DELETE"));
    render();
    return {
      node,
      update(next: InboxItem) {
        if (next.mode === "write") return;
        item = next;
        render();
      },
      dispose() {
        disposed = true;
      },
    };
  });
  scope.add(rows.dispose);
  return {
    element,
    update: (items: readonly InboxItem[]) =>
      rows.sync([...items].sort((a, b) => PLACED[a.mode] - PLACED[b.mode])),
  };
}