// 🤖 The composer facade (#531, the WYSIWYG groundwork): chat.js talks to its
// message input ONLY through the handle this module returns, never to a DOM
// element's .value directly. Today there is one backend — "plain", the same
// <textarea> as always, byte-identical behaviour — and the rich (ProseMirror)
// backend slots in behind the same contract without chat.js changing again.
// The plain backend is permanent, not transitional: embed mode (the native
// shells' hidden composer) and the "classic composer" escape hatch keep it
// exercised forever.
//
// Contract notes that both backends must honour:
// - getText()/getCaret()/replaceRange() speak plain string + caret offset —
//   the typeahead contract (ui.js composerToken and its Swift twin) is frozen.
// - Programmatic writes never fire callbacks unless asked ({ notify: true }):
//   the native bridge sets text right before submitting, and a surprise
//   onInput would emit a spurious typing beat.
// - getMarkdown()/setMarkdown() are the wire-format pair; for plain they're
//   just the value (what you type is what sends, exactly as today).

// Live composers, weakly held: panes park in shell.js's appPaneCache (the
// composer survives, detached) and are sometimes dropped without a teardown
// hook, so strong references would pin dead composers forever. Callers filter
// by connectedness — matching the old ".composer textarea" DOM query, which
// only ever saw the mounted pane.
const live = new Set();

// Does any MOUNTED composer hold unsent text? (shell.js gates the auto-update
// reload on this — same semantics as the old document-wide selector: parked
// panes didn't block then and don't now.)
export function anyComposerHasText() {
  for (const ref of live) {
    const c = ref.deref();
    if (!c) {
      live.delete(ref);
      continue;
    }
    if (c.el.isConnected && !c.isEmpty()) return true;
  }
  return false;
}

export function createComposer(opts = {}) {
  return adoptComposer(createPlainComposer(opts));
}

// The rich backend (composer-pm.js) is dynamically imported by chat.js — it
// registers its handles here so the draft guard and live settings see every
// composer regardless of backend.
export function adoptComposer(handle) {
  live.add(new WeakRef(handle));
  return handle;
}

// --- composer preferences (localStorage, like the theme prefs in shell.js) ---

const FMT_KEY = "lchat_fmt_as_you_type";
const CLASSIC_KEY = "lchat_classic_composer";

// Default ON: absent means enabled.
export function formatAsYouTypePref() {
  return localStorage.getItem(FMT_KEY) !== "0";
}
export function setFormatAsYouType(on) {
  localStorage.setItem(FMT_KEY, on ? "1" : "0");
  // Live-reconfigure every mounted composer — no remount, history survives.
  for (const ref of live) {
    const c = ref.deref();
    if (!c) {
      live.delete(ref);
      continue;
    }
    c.setFormatAsYouType(on);
  }
}

// The escape hatch: force the plain textarea backend (picked up on the next
// composer mount — shell.js reopens the pane when toggled).
export function classicComposerPref() {
  return localStorage.getItem(CLASSIC_KEY) === "1";
}
export function setClassicComposer(on) {
  localStorage.setItem(CLASSIC_KEY, on ? "1" : "0");
}

// The plain backend — today's <textarea>, behaviour preserved to the letter
// (auto-grow to 140px, input/keydown wiring, splice-based typeahead inserts).
function createPlainComposer(opts) {
  const el = document.createElement("textarea");
  el.className = "composer-input";
  el.rows = 1;
  el.autocomplete = "off";
  if (opts.placeholder) el.placeholder = opts.placeholder;

  const notify = () => el.dispatchEvent(new Event("input", { bubbles: true }));

  el.addEventListener("input", () => {
    // Auto-grow first, so the caller's onInput observes the post-grow layout
    // (its feed re-pin reads scrollHeight synchronously).
    el.style.height = "auto";
    el.style.height = Math.min(el.scrollHeight, 140) + "px";
    if (opts.onInput) opts.onInput();
  });
  if (opts.onKeydown) el.onkeydown = opts.onKeydown;
  if (opts.onKeyup) el.addEventListener("keyup", opts.onKeyup);
  if (opts.onClick) el.addEventListener("click", opts.onClick);
  el.addEventListener("focus", () => opts.onFocus && opts.onFocus());
  el.addEventListener("blur", () => opts.onBlur && opts.onBlur());
  if (opts.onPaste) el.addEventListener("paste", opts.onPaste);

  return {
    kind: "plain",
    el,
    focus() {
      el.focus();
    },
    hasFocus() {
      return document.activeElement === el;
    },
    isEmpty() {
      return el.value.trim() === "";
    },
    getText() {
      return el.value;
    },
    getCaret() {
      return el.selectionStart == null ? el.value.length : el.selectionStart;
    },
    getSelectionEnd() {
      return el.selectionEnd == null ? this.getCaret() : el.selectionEnd;
    },
    setText(v, o = {}) {
      el.value = v || "";
      if (o.notify) notify();
    },
    // Typeahead splice: replace [start, end) in getText() coordinates, land
    // the caret after the insert, notify (resize + send-visibility + token
    // re-check) and keep focus — the original acceptTypeahead, verbatim.
    replaceRange(start, end, insert) {
      const before = el.value.slice(0, start);
      el.value = before + insert + el.value.slice(end);
      const pos = before.length + insert.length;
      el.setSelectionRange(pos, pos);
      notify();
      el.focus();
    },
    // Panel insertText: at the caret (or replacing a selection), caret after.
    insertAtCaret(text) {
      const start = el.selectionStart == null ? el.value.length : el.selectionStart;
      const end = el.selectionEnd == null ? start : el.selectionEnd;
      el.value = el.value.slice(0, start) + text + el.value.slice(end);
      el.selectionStart = el.selectionEnd = start + text.length;
      notify();
      el.focus();
    },
    getMarkdown() {
      return el.value;
    },
    setMarkdown(v, o = {}) {
      this.setText(v, o);
    },
    clear() {
      el.value = "";
      el.style.height = "auto";
    },
    setPlaceholder(s) {
      el.placeholder = s || "";
    },
    setAriaLabel(s) {
      el.setAttribute("aria-label", s || "");
    },
    // The inset field label's indent (applyFieldLabel measures the pill).
    setIndent(px) {
      el.style.paddingLeft = px ? `${px}px` : "";
    },
    inCodeBlock() {
      return false;
    },
    setFormatAsYouType() {},
  };
}