TaroTime/app/ui-alphabet-text.js

(function () {
  "use strict";

  const dataService = window.TarotDataService || {};

  const state = {
    initialized: false,
    catalog: null,
    selectedSourceId: "",
    selectedWorkId: "",
    selectedSectionId: "",
    currentPassage: null,
    lexiconEntry: null,
    lexiconRequestId: 0,
    lexiconOccurrenceResults: null,
    lexiconOccurrenceLoading: false,
    lexiconOccurrenceError: "",
    lexiconOccurrenceVisible: false,
    lexiconOccurrenceRequestId: 0,
    globalSearchQuery: "",
    localSearchQuery: "",
    activeSearchScope: "global",
    searchQuery: "",
    searchResults: null,
    searchLoading: false,
    searchError: "",
    searchRequestId: 0,
    highlightedVerseId: "",
    displayPreferencesBySource: {}
  };

  let sourceListEl;
  let sourceCountEl;
  let globalSearchFormEl;
  let globalSearchInputEl;
  let localSearchFormEl;
  let localSearchInputEl;
  let workSelectEl;
  let sectionSelectEl;
  let detailNameEl;
  let detailSubEl;
  let detailBodyEl;
  let textLayoutEl;
  let lexiconPopupEl;
  let lexiconPopupTitleEl;
  let lexiconPopupSubtitleEl;
  let lexiconPopupBodyEl;
  let lexiconPopupCloseEl;
  let lexiconReturnFocusEl = null;

  function normalizeId(value) {
    return String(value || "")
      .trim()
      .toLowerCase();
  }

  function getElements() {
    sourceListEl = document.getElementById("alpha-text-source-list");
    sourceCountEl = document.getElementById("alpha-text-source-count");
    globalSearchFormEl = document.getElementById("alpha-text-global-search-form");
    globalSearchInputEl = document.getElementById("alpha-text-global-search-input");
    localSearchFormEl = document.getElementById("alpha-text-local-search-form");
    localSearchInputEl = document.getElementById("alpha-text-local-search-input");
    workSelectEl = document.getElementById("alpha-text-work-select");
    sectionSelectEl = document.getElementById("alpha-text-section-select");
    detailNameEl = document.getElementById("alpha-text-detail-name");
    detailSubEl = document.getElementById("alpha-text-detail-sub");
    detailBodyEl = document.getElementById("alpha-text-detail-body");
    textLayoutEl = sourceListEl?.closest?.(".planet-layout") || detailBodyEl?.closest?.(".planet-layout") || null;
    ensureLexiconPopup();
  }

  function showDetailOnlyMode() {
    if (!(textLayoutEl instanceof HTMLElement)) {
      return;
    }

    window.TarotChromeUi?.initializeSidebarPopouts?.();
    window.TarotChromeUi?.initializeDetailPopouts?.();
    window.TarotChromeUi?.initializeSidebarAutoCollapse?.();
    window.TarotChromeUi?.showDetailOnly?.(textLayoutEl);
  }

  function ensureLexiconPopup() {
    if (lexiconPopupEl instanceof HTMLElement) {
      return;
    }

    const popup = document.createElement("div");
    popup.className = "alpha-text-lexicon-popup";
    popup.hidden = true;
    popup.setAttribute("aria-hidden", "true");

    const backdrop = document.createElement("div");
    backdrop.className = "alpha-text-lexicon-popup-backdrop";
    backdrop.addEventListener("click", closeLexiconEntry);

    const card = document.createElement("section");
    card.className = "alpha-text-lexicon-popup-card";
    card.setAttribute("role", "dialog");
    card.setAttribute("aria-modal", "true");
    card.setAttribute("aria-labelledby", "alpha-text-lexicon-popup-title");
    card.setAttribute("tabindex", "-1");

    const header = document.createElement("div");
    header.className = "alpha-text-lexicon-popup-header";

    const headingWrap = document.createElement("div");
    headingWrap.className = "alpha-text-lexicon-popup-heading";

    const title = document.createElement("h3");
    title.id = "alpha-text-lexicon-popup-title";
    title.textContent = "Lexicon Entry";

    const subtitle = document.createElement("p");
    subtitle.className = "alpha-text-lexicon-popup-subtitle";
    subtitle.textContent = "Strong's definition";

    headingWrap.append(title, subtitle);

    const closeButton = document.createElement("button");
    closeButton.type = "button";
    closeButton.className = "alpha-text-lexicon-popup-close";
    closeButton.textContent = "Close";
    closeButton.addEventListener("click", closeLexiconEntry);

    header.append(headingWrap, closeButton);

    const body = document.createElement("div");
    body.className = "alpha-text-lexicon-popup-body";

    card.append(header, body);
    popup.append(backdrop, card);
    document.body.appendChild(popup);

    lexiconPopupEl = popup;
    lexiconPopupTitleEl = title;
    lexiconPopupSubtitleEl = subtitle;
    lexiconPopupBodyEl = body;
    lexiconPopupCloseEl = closeButton;
  }

  function getSources() {
    return Array.isArray(state.catalog?.sources) ? state.catalog.sources : [];
  }

  function findById(entries, value) {
    const needle = normalizeId(value);
    return (Array.isArray(entries) ? entries : []).find((entry) => normalizeId(entry?.id) === needle) || null;
  }

  function getSelectedSource() {
    return findById(getSources(), state.selectedSourceId);
  }

  function getSelectedWork(source = getSelectedSource()) {
    return findById(source?.works, state.selectedWorkId);
  }

  function getSelectedSection(source = getSelectedSource(), work = getSelectedWork(source)) {
    return findById(work?.sections, state.selectedSectionId);
  }

  function normalizeTextValue(value) {
    return String(value || "").trim();
  }

  const GREEK_TRANSLITERATION_MAP = {
    α: "a", β: "b", γ: "g", δ: "d", ε: "e", ζ: "z", η: "e", θ: "th",
    ι: "i", κ: "k", λ: "l", μ: "m", ν: "n", ξ: "x", ο: "o", π: "p",
    ρ: "r", σ: "s", ς: "s", τ: "t", υ: "u", φ: "ph", χ: "ch", ψ: "ps",
    ω: "o"
  };

  const HEBREW_TRANSLITERATION_MAP = {
    א: "a", ב: "b", ג: "g", ד: "d", ה: "h", ו: "v", ז: "z", ח: "ch",
    ט: "t", י: "y", כ: "k", ך: "k", ל: "l", מ: "m", ם: "m", נ: "n",
    ן: "n", ס: "s", ע: "a", פ: "p", ף: "p", צ: "ts", ץ: "ts", ק: "q",
    ר: "r", ש: "sh", ת: "t"
  };

  function stripSourceScriptMarks(value) {
    return String(value || "")
      .normalize("NFD")
      .replace(/[\u0300-\u036f\u0591-\u05c7]/g, "");
  }

  function transliterateSourceScriptText(value) {
    const stripped = stripSourceScriptMarks(value);
    let result = "";

    for (const character of stripped) {
      const lowerCharacter = character.toLowerCase();
      const mapped = GREEK_TRANSLITERATION_MAP[lowerCharacter]
        || HEBREW_TRANSLITERATION_MAP[character]
        || HEBREW_TRANSLITERATION_MAP[lowerCharacter];
      result += mapped != null ? mapped : character;
    }

    return result
      .replace(/\s+([,.;:!?])/g, "$1")
      .replace(/\s+/g, " ")
      .trim();
  }

  function buildTokenDerivedTransliteration(verse) {
    const tokenText = (Array.isArray(verse?.tokens) ? verse.tokens : [])
      .map((token) => normalizeTextValue(token?.original))
      .filter(Boolean)
      .join(" ")
      .replace(/\s+([,.;:!?])/g, "$1")
      .trim();

    return tokenText ? transliterateSourceScriptText(tokenText) : "";
  }

  function getVerseTransliteration(verse, source = null) {
    const metadata = verse?.metadata && typeof verse.metadata === "object" ? verse.metadata : {};
    const explicit = [
      verse?.transliteration,
      verse?.xlit,
      metadata?.transliteration,
      metadata?.transliterationText,
      metadata?.xlit,
      metadata?.romanizedText,
      metadata?.romanized
    ].map(normalizeTextValue).find(Boolean) || "";

    if (explicit) {
      return explicit;
    }

    if (source?.features?.hasTokenAnnotations) {
      return buildTokenDerivedTransliteration(verse);
    }

    return "";
  }

  function getSearchInput(scope) {
    return scope === "source" ? localSearchInputEl : globalSearchInputEl;
  }

  function getStoredSearchQuery(scope) {
    return scope === "source" ? state.localSearchQuery : state.globalSearchQuery;
  }

  function setStoredSearchQuery(scope, value) {
    if (scope === "source") {
      state.localSearchQuery = value;
      return;
    }

    state.globalSearchQuery = value;
  }

  function updateSearchControls() {
    return;
  }

  function clearActiveSearchUi(options = {}) {
    const preserveHighlight = options.preserveHighlight === true;
    const scope = state.activeSearchScope === "source" ? "source" : "global";

    setStoredSearchQuery(scope, "");
    const input = getSearchInput(scope);
    if (input instanceof HTMLInputElement) {
      input.value = "";
    }

    state.searchQuery = "";
    state.searchResults = null;
    state.searchLoading = false;
    state.searchError = "";
    state.searchRequestId += 1;

    if (!preserveHighlight) {
      state.highlightedVerseId = "";
    }

    updateSearchControls();
  }

  function getSourceDisplayCapabilities(source, passage) {
    const verses = Array.isArray(passage?.verses) ? passage.verses : [];
    const hasOriginal = verses.some((verse) => normalizeTextValue(verse?.originalText));
    const hasTransliteration = verses.some((verse) => getVerseTransliteration(verse, source));
    const hasInterlinear = Boolean(source?.features?.hasTokenAnnotations);
    const textModeCount = 1 + (hasOriginal ? 1 : 0) + (hasTransliteration ? 1 : 0);

    return {
      hasTranslation: true,
      hasOriginal,
      hasTransliteration,
      hasInterlinear,
      hasAnyExtras: hasOriginal || hasTransliteration || hasInterlinear,
      supportsAllTextMode: textModeCount > 1
    };
  }

  function getDefaultTextDisplayMode(capabilities) {
    if (capabilities?.hasTranslation) {
      return "translation";
    }
    if (capabilities?.hasOriginal) {
      return "original";
    }
    if (capabilities?.hasTransliteration) {
      return "transliteration";
    }
    return "translation";
  }

  function getAvailableTextDisplayModes(capabilities) {
    const modes = [];
    if (capabilities?.hasTranslation) {
      modes.push("translation");
    }
    if (capabilities?.hasOriginal) {
      modes.push("original");
    }
    if (capabilities?.hasTransliteration) {
      modes.push("transliteration");
    }
    if (capabilities?.supportsAllTextMode) {
      modes.push("all");
    }
    return modes;
  }

  function getSourceDisplayPreferences(source, passage) {
    const sourceId = normalizeId(source?.id);
    const capabilities = getSourceDisplayCapabilities(source, passage);
    const availableTextModes = getAvailableTextDisplayModes(capabilities);
    const stored = sourceId ? state.displayPreferencesBySource[sourceId] : null;

    let textMode = stored?.textMode;
    if (!availableTextModes.includes(textMode)) {
      textMode = getDefaultTextDisplayMode(capabilities);
    }

    const preferences = {
      textMode,
      showInterlinear: capabilities.hasInterlinear ? Boolean(stored?.showInterlinear) : false
    };

    if (sourceId) {
      state.displayPreferencesBySource[sourceId] = preferences;
    }

    return {
      ...preferences,
      capabilities,
      availableTextModes
    };
  }

  function updateSourceDisplayPreferences(source, patch) {
    const sourceId = normalizeId(source?.id);
    if (!sourceId) {
      return;
    }

    const current = state.displayPreferencesBySource[sourceId] || {};
    state.displayPreferencesBySource[sourceId] = {
      ...current,
      ...patch
    };
  }

  function formatTextDisplayModeLabel(mode) {
    switch (mode) {
      case "translation":
        return "Translation";
      case "original":
        return "Original";
      case "transliteration":
        return "Transliteration";
      case "all":
        return "All";
      default:
        return "Display";
    }
  }

  function clearSearchState() {
    state.searchQuery = "";
    state.searchResults = null;
    state.searchLoading = false;
    state.searchError = "";
    state.highlightedVerseId = "";
    state.searchRequestId += 1;

    updateSearchControls();
  }

  function clearScopedSearch(scope) {
    setStoredSearchQuery(scope, "");

    const input = getSearchInput(scope);
    if (input instanceof HTMLInputElement) {
      input.value = "";
    }

    if (state.activeSearchScope === scope) {
      clearSearchState();
    } else {
      updateSearchControls();
    }
  }

  function escapeRegExp(value) {
    return String(value || "").replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  }

  function appendHighlightedText(target, text, query) {
    if (!(target instanceof HTMLElement)) {
      return;
    }

    const sourceText = String(text || "");
    const normalizedQuery = String(query || "").trim();
    target.replaceChildren();
    if (!normalizedQuery) {
      target.textContent = sourceText;
      return;
    }

    const matcher = new RegExp(escapeRegExp(normalizedQuery), "ig");
    let lastIndex = 0;
    let match = matcher.exec(sourceText);
    while (match) {
      if (match.index > lastIndex) {
        target.appendChild(document.createTextNode(sourceText.slice(lastIndex, match.index)));
      }

      const mark = document.createElement("mark");
      mark.className = "alpha-text-mark";
      mark.textContent = sourceText.slice(match.index, match.index + match[0].length);
      target.appendChild(mark);

      lastIndex = match.index + match[0].length;
      match = matcher.exec(sourceText);
    }

    if (lastIndex < sourceText.length) {
      target.appendChild(document.createTextNode(sourceText.slice(lastIndex)));
    }
  }

  function isHighlightedVerse(verse) {
    return normalizeId(verse?.id) && normalizeId(verse?.id) === normalizeId(state.highlightedVerseId);
  }

  function scrollHighlightedVerseIntoView() {
    const highlightedVerse = detailBodyEl?.querySelector?.(".alpha-text-verse.is-highlighted");
    const detailPanel = highlightedVerse?.closest?.(".planet-detail-panel");
    if (!(highlightedVerse instanceof HTMLElement) || !(detailPanel instanceof HTMLElement)) {
      return;
    }

    const verseRect = highlightedVerse.getBoundingClientRect();
    const panelRect = detailPanel.getBoundingClientRect();
    const targetTop = detailPanel.scrollTop
      + (verseRect.top - panelRect.top)
      - (detailPanel.clientHeight / 2)
      + (verseRect.height / 2);

    detailPanel.scrollTo({
      top: Math.max(0, targetTop),
      behavior: "smooth"
    });
  }

  function createCard(title) {
    const card = document.createElement("div");
    card.className = "detail-meta-card planet-meta-card";
    if (title) {
      const heading = document.createElement("strong");
      heading.textContent = title;
      card.appendChild(heading);
    }
    return card;
  }

  function createEmptyMessage(text) {
    const message = document.createElement("div");
    message.className = "alpha-text-empty";
    message.textContent = text;
    return message;
  }

  function renderPlaceholder(title, subtitle, message) {
    if (detailNameEl) {
      detailNameEl.textContent = title;
    }
    if (detailSubEl) {
      detailSubEl.textContent = subtitle;
    }
    if (!detailBodyEl) {
      return;
    }

    detailBodyEl.replaceChildren();
    const card = createCard("Text Reader");
    card.appendChild(createEmptyMessage(message));
    detailBodyEl.appendChild(card);
  }

  function navigateToPassageTarget(target) {
    if (!target) {
      return;
    }

    state.selectedWorkId = target.workId;
    state.selectedSectionId = target.sectionId;
    state.lexiconEntry = null;
    renderSelectors();
    void loadSelectedPassage();
  }

  function getPassageLocationLabel(passage) {
    const source = passage?.source || getSelectedSource();
    const work = passage?.work || getSelectedWork(source);
    const section = passage?.section || getSelectedSection(source, work);
    return `${work?.title || "--"} · ${section?.title || section?.label || "--"}`;
  }

  function syncSelectionForSource(source) {
    const works = Array.isArray(source?.works) ? source.works : [];
    if (!works.length) {
      state.selectedWorkId = "";
      state.selectedSectionId = "";
      return;
    }

    if (!findById(works, state.selectedWorkId)) {
      state.selectedWorkId = works[0].id;
    }

    const work = getSelectedWork(source);
    const sections = Array.isArray(work?.sections) ? work.sections : [];
    if (!findById(sections, state.selectedSectionId)) {
      state.selectedSectionId = sections[0]?.id || "";
    }
  }

  async function ensureCatalogLoaded(forceRefresh = false) {
    if (!forceRefresh && state.catalog) {
      return state.catalog;
    }

    const payload = await dataService.loadTextLibrary?.(forceRefresh);
    state.catalog = payload && typeof payload === "object"
      ? payload
      : { meta: {}, sources: [], lexicons: [] };

    if (!state.selectedSourceId) {
      state.selectedSourceId = getSources()[0]?.id || "";
    }

    syncSelectionForSource(getSelectedSource());
    return state.catalog;
  }

  function fillSelect(selectEl, entries, selectedValue, labelBuilder) {
    if (!(selectEl instanceof HTMLSelectElement)) {
      return;
    }

    selectEl.replaceChildren();
    (Array.isArray(entries) ? entries : []).forEach((entry) => {
      const option = document.createElement("option");
      option.value = entry.id;
      option.textContent = typeof labelBuilder === "function" ? labelBuilder(entry) : String(entry?.label || entry?.title || entry?.id || "");
      option.selected = normalizeId(entry.id) === normalizeId(selectedValue);
      selectEl.appendChild(option);
    });

    selectEl.disabled = !selectEl.options.length;
  }

  function renderSourceList() {
    if (!sourceListEl) {
      return;
    }

    sourceListEl.replaceChildren();
    const sources = getSources();
    sources.forEach((source) => {
      const button = document.createElement("button");
      button.type = "button";
      button.className = "planet-list-item alpha-text-source-btn";
      button.dataset.sourceId = source.id;
      button.setAttribute("role", "option");

      const isSelected = normalizeId(source.id) === normalizeId(state.selectedSourceId);
      button.classList.toggle("is-selected", isSelected);
      button.setAttribute("aria-selected", isSelected ? "true" : "false");

      const name = document.createElement("span");
      name.className = "planet-list-name";
      name.textContent = source.title;

      const meta = document.createElement("span");
      meta.className = "alpha-text-source-meta";
      const sectionLabel = source.sectionLabel || "Section";
      meta.textContent = `${source.shortTitle || source.title} · ${source.stats?.workCount || 0} ${source.workLabel || "Works"} · ${source.stats?.sectionCount || 0} ${sectionLabel.toLowerCase()}s`;

      button.append(name, meta);
      button.addEventListener("click", () => {
        if (normalizeId(source.id) === normalizeId(state.selectedSourceId)) {
          showDetailOnlyMode();
          return;
        }

        state.selectedSourceId = source.id;
        state.currentPassage = null;
        state.lexiconEntry = null;
        state.highlightedVerseId = "";
        syncSelectionForSource(getSelectedSource());
        renderSourceList();
        renderSelectors();
        showDetailOnlyMode();

        if (state.searchQuery && state.activeSearchScope === "source") {
          void Promise.all([loadSelectedPassage(), runSearch("source")]);
          return;
        }

        void loadSelectedPassage();
      });

      sourceListEl.appendChild(button);
    });

    if (!sources.length) {
      sourceListEl.appendChild(createEmptyMessage("No text sources are available."));
    }

    if (sourceCountEl) {
      sourceCountEl.textContent = `${sources.length} sources`;
    }
  }

  function renderSelectors() {
    const source = getSelectedSource();
    const work = getSelectedWork(source);
    const works = Array.isArray(source?.works) ? source.works : [];
    const sections = Array.isArray(work?.sections) ? work.sections : [];

    fillSelect(workSelectEl, works, state.selectedWorkId, (entry) => `${entry.title} (${entry.sectionCount} ${String(source?.sectionLabel || "section").toLowerCase()}s)`);
    fillSelect(sectionSelectEl, sections, state.selectedSectionId, (entry) => `${entry.label} · ${entry.verseCount} verses`);
  }

  function closeLexiconEntry() {
    dismissLexiconEntry();
  }

  function clearLexiconOccurrenceState() {
    state.lexiconOccurrenceResults = null;
    state.lexiconOccurrenceLoading = false;
    state.lexiconOccurrenceError = "";
    state.lexiconOccurrenceVisible = false;
    state.lexiconOccurrenceRequestId += 1;
  }

  function dismissLexiconEntry(options = {}) {
    const shouldRestoreFocus = options.restoreFocus !== false;
    state.lexiconRequestId += 1;
    state.lexiconEntry = null;
    clearLexiconOccurrenceState();
    renderLexiconPopup();

    const returnFocusEl = lexiconReturnFocusEl;
    lexiconReturnFocusEl = null;

    if (shouldRestoreFocus && returnFocusEl instanceof HTMLElement && returnFocusEl.isConnected) {
      requestAnimationFrame(() => {
        if (returnFocusEl.isConnected) {
          returnFocusEl.focus();
        }
      });
    }
  }

  async function toggleLexiconOccurrences() {
    const lexiconId = state.lexiconEntry?.lexicon?.id || state.lexiconEntry?.lexiconId || "";
    const entryId = state.lexiconEntry?.entryId || "";
    if (!lexiconId || !entryId) {
      return;
    }

    if (state.lexiconOccurrenceVisible && !state.lexiconOccurrenceLoading) {
      state.lexiconOccurrenceVisible = false;
      renderLexiconPopup();
      return;
    }

    state.lexiconOccurrenceVisible = true;
    if (state.lexiconOccurrenceResults || state.lexiconOccurrenceError) {
      renderLexiconPopup();
      return;
    }

    const requestId = state.lexiconOccurrenceRequestId + 1;
    state.lexiconOccurrenceRequestId = requestId;
    state.lexiconOccurrenceLoading = true;
    state.lexiconOccurrenceError = "";
    renderLexiconPopup();

    try {
      const payload = await dataService.loadTextLexiconOccurrences?.(lexiconId, entryId, { limit: 100 });
      if (requestId !== state.lexiconOccurrenceRequestId) {
        return;
      }

      state.lexiconOccurrenceResults = payload;
      state.lexiconOccurrenceLoading = false;
      renderLexiconPopup();
    } catch (error) {
      if (requestId !== state.lexiconOccurrenceRequestId) {
        return;
      }

      state.lexiconOccurrenceLoading = false;
      state.lexiconOccurrenceError = error?.message || "Unable to load verse occurrences for this Strong's entry.";
      renderLexiconPopup();
    }
  }

  async function openLexiconOccurrence(result) {
    dismissLexiconEntry({ restoreFocus: false });
    await openSearchResult(result);
  }

  function appendLexiconOccurrencePreview(target, result) {
    if (!(target instanceof HTMLElement)) {
      return;
    }

    target.replaceChildren();

    const previewTokens = Array.isArray(result?.previewTokens) ? result.previewTokens : [];
    if (!previewTokens.length) {
      target.textContent = result?.preview || result?.reference || "";
      return;
    }

    previewTokens.forEach((token, index) => {
      const text = String(token?.text || "").trim();
      if (!text) {
        return;
      }

      const previousText = String(previewTokens[index - 1]?.text || "").trim();
      if (index > 0 && text !== "..." && previousText !== "...") {
        target.appendChild(document.createTextNode(" "));
      }

      if (token?.isMatch) {
        const mark = document.createElement("mark");
        mark.className = "alpha-text-mark alpha-text-mark--lexicon";
        mark.textContent = text;
        target.appendChild(mark);
        return;
      }

      target.appendChild(document.createTextNode(text));
    });
  }

  function renderLexiconPopup() {
    ensureLexiconPopup();

    if (!(lexiconPopupEl instanceof HTMLElement) || !(lexiconPopupBodyEl instanceof HTMLElement)) {
      return;
    }

    const payload = state.lexiconEntry;
    const wasHidden = lexiconPopupEl.hidden;

    if (!payload) {
      lexiconPopupEl.hidden = true;
      lexiconPopupEl.setAttribute("aria-hidden", "true");
      lexiconPopupTitleEl.textContent = "Lexicon Entry";
      lexiconPopupSubtitleEl.textContent = "Strong's definition";
      lexiconPopupBodyEl.replaceChildren();
      return;
    }

    lexiconPopupTitleEl.textContent = payload.entryId ? `Strong's ${payload.entryId}` : "Lexicon Entry";
    lexiconPopupSubtitleEl.textContent = payload.loading
      ? "Loading definition..."
      : "Strong's definition";
    lexiconPopupBodyEl.replaceChildren();

    if (payload.loading) {
      lexiconPopupBodyEl.appendChild(createEmptyMessage(`Loading ${payload.entryId}...`));
    } else if (payload.error) {
      lexiconPopupBodyEl.appendChild(createEmptyMessage(payload.error));
    } else {
      const entry = payload.entry || {};
      const head = document.createElement("div");
      head.className = "alpha-text-lexicon-head";

      const idPill = document.createElement("button");
      idPill.type = "button";
      idPill.className = "alpha-text-lexicon-id alpha-text-lexicon-id--button";
      idPill.textContent = payload.entryId || "--";
      idPill.setAttribute("aria-expanded", state.lexiconOccurrenceVisible ? "true" : "false");
      idPill.addEventListener("click", () => {
        void toggleLexiconOccurrences();
      });
      head.appendChild(idPill);

      if (entry.lemma) {
        const lemma = document.createElement("span");
        lemma.className = "alpha-text-token-original";
        lemma.textContent = entry.lemma;
        head.appendChild(lemma);
      }

      lexiconPopupBodyEl.appendChild(head);

      const rows = [
        ["Transliteration", entry.xlit],
        ["Pronunciation", entry.pron],
        ["Derivation", entry.derivation],
        ["Strong's Definition", entry.strongs_def],
        ["KJV Definition", entry.kjv_def]
      ].filter(([, value]) => String(value || "").trim());

      if (rows.length) {
        const dl = document.createElement("dl");
        dl.className = "alpha-dl";
        rows.forEach(([label, value]) => {
          const dt = document.createElement("dt");
          dt.textContent = label;
          const dd = document.createElement("dd");
          dd.textContent = String(value || "").trim();
          dl.append(dt, dd);
        });
        lexiconPopupBodyEl.appendChild(dl);
      }

      const occurrenceHint = document.createElement("p");
      occurrenceHint.className = "alpha-text-lexicon-hint";
      occurrenceHint.textContent = "Click the Strong's number to show verses that use this entry.";
      lexiconPopupBodyEl.appendChild(occurrenceHint);

      if (state.lexiconOccurrenceVisible) {
        const occurrenceSection = document.createElement("section");
        occurrenceSection.className = "alpha-text-lexicon-occurrences";

        const occurrenceTitle = document.createElement("strong");
        occurrenceTitle.textContent = "Verse Occurrences";
        occurrenceSection.appendChild(occurrenceTitle);

        if (state.lexiconOccurrenceLoading) {
          occurrenceSection.appendChild(createEmptyMessage(`Loading verses for ${payload.entryId}...`));
        } else if (state.lexiconOccurrenceError) {
          occurrenceSection.appendChild(createEmptyMessage(state.lexiconOccurrenceError));
        } else {
          const occurrencePayload = state.lexiconOccurrenceResults;
          const totalMatches = Number(occurrencePayload?.totalMatches) || 0;
          const summary = document.createElement("p");
          summary.className = "alpha-text-search-summary";
          summary.textContent = totalMatches
            ? `${totalMatches} verses use ${payload.entryId}.${occurrencePayload?.truncated ? ` Showing the first ${occurrencePayload.resultCount} results.` : ""}`
            : `No verses found for ${payload.entryId}.`;
          occurrenceSection.appendChild(summary);

          if (Array.isArray(occurrencePayload?.results) && occurrencePayload.results.length) {
            const occurrenceList = document.createElement("div");
            occurrenceList.className = "alpha-text-lexicon-occurrence-list";

            occurrencePayload.results.forEach((result) => {
              const button = document.createElement("button");
              button.type = "button";
              button.className = "alpha-text-lexicon-occurrence";

              const headRow = document.createElement("div");
              headRow.className = "alpha-text-search-result-head";

              const reference = document.createElement("span");
              reference.className = "alpha-text-search-reference";
              reference.textContent = result.reference || `${result.workTitle} ${result.sectionLabel}:${result.verseNumber}`;

              const location = document.createElement("span");
              location.className = "alpha-text-search-location";
              location.textContent = `${result.sourceShortTitle || result.sourceTitle} · ${result.workTitle} · ${result.sectionLabel}`;

              const preview = document.createElement("p");
              preview.className = "alpha-text-search-preview alpha-text-search-preview--compact";
              appendLexiconOccurrencePreview(preview, result);

              button.addEventListener("click", () => {
                void openLexiconOccurrence(result);
              });

              headRow.append(reference, location);
              button.append(headRow, preview);
              occurrenceList.appendChild(button);
            });

            occurrenceSection.appendChild(occurrenceList);
          }
        }

        lexiconPopupBodyEl.appendChild(occurrenceSection);
      }
    }

    lexiconPopupEl.hidden = false;
    lexiconPopupEl.setAttribute("aria-hidden", "false");

    if (wasHidden && lexiconPopupCloseEl instanceof HTMLButtonElement) {
      requestAnimationFrame(() => {
        lexiconPopupCloseEl.focus();
      });
    }
  }

  async function loadLexiconEntry(lexiconId, entryId, triggerElement) {
    if (!lexiconId || !entryId) {
      return;
    }

    if (triggerElement instanceof HTMLElement) {
      lexiconReturnFocusEl = triggerElement;
    }

    const requestId = state.lexiconRequestId + 1;
    state.lexiconRequestId = requestId;
    clearLexiconOccurrenceState();
    state.lexiconEntry = {
      loading: true,
      lexiconId,
      entryId: String(entryId).toUpperCase()
    };
    renderDetail();

    try {
      const payload = await dataService.loadTextLexiconEntry?.(lexiconId, entryId);
      if (requestId !== state.lexiconRequestId) {
        return;
      }
      state.lexiconEntry = payload;
      renderDetail();
    } catch (error) {
      if (requestId !== state.lexiconRequestId) {
        return;
      }
      state.lexiconEntry = {
        error: error?.message || "Unable to load lexicon entry.",
        lexiconId,
        entryId: String(entryId).toUpperCase()
      };
      renderDetail();
    }
  }

  function createMetaGrid(passage) {
    const source = passage?.source || getSelectedSource();
    const work = passage?.work || getSelectedWork(source);
    const section = passage?.section || getSelectedSection(source, work);
    const displayPreferences = getSourceDisplayPreferences(source, passage);
    const metaGrid = document.createElement("div");
    metaGrid.className = "alpha-text-meta-grid";

    const overviewCard = createCard("Source Overview");
    overviewCard.innerHTML += `
      <dl class="alpha-dl">
        <dt>Source</dt><dd>${source?.title || "--"}</dd>
        <dt>Tradition</dt><dd>${source?.tradition || "--"}</dd>
        <dt>Language</dt><dd>${source?.language || "--"}</dd>
        <dt>Script</dt><dd>${source?.script || "--"}</dd>
        <dt>${source?.workLabel || "Work"}</dt><dd>${work?.title || "--"}</dd>
        <dt>${source?.sectionLabel || "Section"}</dt><dd>${section?.label || "--"}</dd>
      </dl>
    `;
    metaGrid.appendChild(overviewCard);

    if (displayPreferences.capabilities.hasAnyExtras) {
      const extraCard = createCard("Extra");
      extraCard.classList.add("alpha-text-extra-card");

      if (displayPreferences.availableTextModes.length > 1) {
        const displayGroup = document.createElement("div");
        displayGroup.className = "alpha-text-extra-group";

        const displayLabel = document.createElement("span");
        displayLabel.className = "alpha-text-extra-label";
        displayLabel.textContent = "Display";

        const displayButtons = document.createElement("div");
        displayButtons.className = "alpha-nav-btns alpha-text-extra-actions";

        displayPreferences.availableTextModes.forEach((mode) => {
          const button = document.createElement("button");
          button.type = "button";
          button.className = "alpha-nav-btn";
          button.textContent = formatTextDisplayModeLabel(mode);
          button.setAttribute("aria-pressed", displayPreferences.textMode === mode ? "true" : "false");
          button.classList.toggle("is-selected", displayPreferences.textMode === mode);
          button.addEventListener("click", () => {
            updateSourceDisplayPreferences(source, { textMode: mode });
            renderDetail();
          });
          displayButtons.appendChild(button);
        });

        displayGroup.append(displayLabel, displayButtons);
        extraCard.appendChild(displayGroup);
      }

      if (displayPreferences.capabilities.hasInterlinear) {
        const interlinearGroup = document.createElement("div");
        interlinearGroup.className = "alpha-text-extra-group";

        const interlinearLabel = document.createElement("span");
        interlinearLabel.className = "alpha-text-extra-label";
        interlinearLabel.textContent = "Reader";

        const interlinearButtons = document.createElement("div");
        interlinearButtons.className = "alpha-nav-btns alpha-text-extra-actions";

        const interlinearButton = document.createElement("button");
        interlinearButton.type = "button";
        interlinearButton.className = "alpha-nav-btn";
        interlinearButton.textContent = "Interlinear";
        interlinearButton.setAttribute("aria-pressed", displayPreferences.showInterlinear ? "true" : "false");
        interlinearButton.classList.toggle("is-selected", displayPreferences.showInterlinear);
        interlinearButton.addEventListener("click", () => {
          updateSourceDisplayPreferences(source, { showInterlinear: !displayPreferences.showInterlinear });
          renderDetail();
        });

        interlinearButtons.appendChild(interlinearButton);
        interlinearGroup.append(interlinearLabel, interlinearButtons);
        extraCard.appendChild(interlinearGroup);
      }

      metaGrid.appendChild(extraCard);
    }

    if (source?.features?.hasTokenAnnotations) {
      const noteCard = createCard("Reader Mode");
      noteCard.appendChild(createEmptyMessage("This source is tokenized. Click a Strong's code chip to open its lexicon entry."));
      metaGrid.appendChild(noteCard);
    }

    return metaGrid;
  }

  function createPlainVerse(verse) {
    const source = getSelectedSource();
    const displayPreferences = getSourceDisplayPreferences(source, state.currentPassage);
    const article = document.createElement("article");
    article.className = "alpha-text-verse";
    article.classList.toggle("is-highlighted", isHighlightedVerse(verse));

    const head = document.createElement("div");
    head.className = "alpha-text-verse-head";

    const reference = document.createElement("span");
    reference.className = "alpha-text-verse-reference";
    reference.textContent = verse.reference || (verse.number ? `Verse ${verse.number}` : "");

    head.append(reference);
    article.append(head);
    appendVerseTextLines(article, verse, source, displayPreferences, verse.text || "");
    return article;
  }

  function buildTokenTranslationText(tokens, fallbackText) {
    const glossText = (Array.isArray(tokens) ? tokens : [])
      .map((token) => String(token?.gloss || "").trim())
      .filter(Boolean)
      .join(" ")
      .replace(/\s+([,.;:!?])/g, "$1")
      .trim();

    return glossText || String(fallbackText || "").trim();
  }

  function appendVerseTextLines(target, verse, source, displayPreferences, translationText) {
    if (!(target instanceof HTMLElement)) {
      return;
    }

    const mode = displayPreferences?.textMode || "translation";
    const originalText = normalizeTextValue(verse?.originalText);
    const transliterationText = getVerseTransliteration(verse, source);
    const lines = [];

    const appendLine = (text, variant) => {
      const normalizedText = normalizeTextValue(text);
      if (!normalizedText || lines.some((entry) => entry.text === normalizedText)) {
        return;
      }
      lines.push({ text: normalizedText, variant });
    };

    if (mode === "all") {
      appendLine(translationText, "translation");
      appendLine(originalText, "original");
      appendLine(transliterationText, "transliteration");
    } else if (mode === "original") {
      appendLine(originalText || translationText, originalText ? "original" : "translation");
    } else if (mode === "transliteration") {
      appendLine(transliterationText || translationText, transliterationText ? "transliteration" : "translation");
    } else {
      appendLine(translationText, "translation");
    }

    if (!lines.length) {
      appendLine(translationText, "translation");
    }

    lines.forEach((line) => {
      const text = document.createElement("p");
      text.className = `alpha-text-verse-text alpha-text-verse-text--${line.variant}`;
      appendHighlightedText(text, line.text, isHighlightedVerse(verse) ? state.searchQuery : "");
      target.appendChild(text);
    });
  }

  function createTokenVerse(verse, lexiconId, displayPreferences, source) {
    const article = document.createElement("article");
    article.className = "alpha-text-verse";
    article.classList.toggle("alpha-text-verse--interlinear", Boolean(displayPreferences?.showInterlinear));
    article.classList.toggle("is-highlighted", isHighlightedVerse(verse));

    const head = document.createElement("div");
    head.className = "alpha-text-verse-head";

    const reference = document.createElement("span");
    reference.className = "alpha-text-verse-reference";
    reference.textContent = verse.reference || (verse.number ? `Verse ${verse.number}` : "");

    const tokenGrid = document.createElement("div");
    tokenGrid.className = "alpha-text-token-grid";

    (Array.isArray(verse?.tokens) ? verse.tokens : []).forEach((token) => {
      const strongId = Array.isArray(token?.strongs) ? token.strongs[0] : "";
      const tokenEl = document.createElement(strongId ? "button" : "div");
      tokenEl.className = `alpha-text-token${strongId ? " alpha-text-token--interactive" : ""}`;
      if (tokenEl instanceof HTMLButtonElement) {
        tokenEl.type = "button";
        tokenEl.addEventListener("click", () => {
          void loadLexiconEntry(lexiconId, strongId, tokenEl);
        });
      }

      const glossEl = document.createElement("span");
      glossEl.className = "alpha-text-token-gloss";
      glossEl.textContent = token?.gloss || "—";

      const originalEl = document.createElement("span");
      originalEl.className = "alpha-text-token-original";
      originalEl.textContent = token?.original || "—";

      tokenEl.append(glossEl, originalEl);

      if (strongId) {
        const strongsEl = document.createElement("span");
        strongsEl.className = "alpha-text-token-strongs";
        strongsEl.textContent = Array.isArray(token.strongs) ? token.strongs.join(" · ") : strongId;
        tokenEl.appendChild(strongsEl);
      }

      tokenGrid.appendChild(tokenEl);
    });

    head.append(reference);
    article.append(head);
    appendVerseTextLines(article, verse, source, displayPreferences, buildTokenTranslationText(verse?.tokens, verse?.text));
    if (displayPreferences?.showInterlinear) {
      article.appendChild(tokenGrid);
    }
    return article;
  }

  function createReaderCard(passage) {
    const source = passage?.source || getSelectedSource();
    const displayPreferences = getSourceDisplayPreferences(source, passage);
    const card = createCard(getPassageLocationLabel(passage));
    card.classList.add("alpha-text-reader-card");
    const reader = document.createElement("div");
    reader.className = "alpha-text-reader";

    if (passage?.errorMessage) {
      reader.appendChild(createEmptyMessage(passage.errorMessage));
      card.appendChild(reader);
      return card;
    }

    const verses = Array.isArray(passage?.verses) ? passage.verses : [];
    if (!verses.length) {
      reader.appendChild(createEmptyMessage("No verses were found for this section."));
      card.appendChild(reader);
      return card;
    }

    verses.forEach((verse) => {
      const verseEl = source?.features?.hasTokenAnnotations
        ? createTokenVerse(verse, source.features.lexiconIds?.[0] || "", displayPreferences, source)
        : createPlainVerse(verse);
      reader.appendChild(verseEl);
    });

    card.appendChild(reader);

    const navigation = document.createElement("div");
    navigation.className = "alpha-text-reader-navigation";

    if (passage?.navigation?.previous) {
      const previousButton = document.createElement("button");
      previousButton.type = "button";
      previousButton.className = "alpha-nav-btn alpha-text-reader-nav-btn";
      previousButton.textContent = "← Previous";
      previousButton.addEventListener("click", () => {
        navigateToPassageTarget(passage.navigation.previous);
      });
      navigation.appendChild(previousButton);
    }

    if (passage?.navigation?.next) {
      const nextButton = document.createElement("button");
      nextButton.type = "button";
      nextButton.className = "alpha-nav-btn alpha-text-reader-nav-btn alpha-text-reader-nav-btn--next";
      nextButton.textContent = "Next →";
      nextButton.addEventListener("click", () => {
        navigateToPassageTarget(passage.navigation.next);
      });
      navigation.appendChild(nextButton);
    }

    if (navigation.childElementCount) {
      card.appendChild(navigation);
    }

    return card;
  }

  function createSearchCard() {
    const hasSearchState = state.searchLoading || state.searchError || state.searchResults || state.searchQuery;
    if (!hasSearchState) {
      return null;
    }

    const card = createCard("Search Results");
    const scopeLabel = state.activeSearchScope === "global"
      ? "all texts"
      : (state.searchResults?.scope?.source?.title || getSelectedSource()?.title || "current source");

    const summary = document.createElement("p");
    summary.className = "alpha-text-search-summary";

    if (state.searchLoading) {
      summary.textContent = `Searching ${scopeLabel} for \"${state.searchQuery}\"...`;
      card.appendChild(summary);
      return card;
    }

    if (state.searchError) {
      summary.textContent = `Search scope: ${scopeLabel}`;
      card.append(summary, createEmptyMessage(state.searchError));
      return card;
    }

    const payload = state.searchResults;
    const totalMatches = Number(payload?.totalMatches) || 0;
    const truncatedNote = payload?.truncated ? ` Showing the first ${payload.resultCount} results.` : "";
    summary.textContent = `${totalMatches} matches in ${scopeLabel}.${truncatedNote}`;
    card.appendChild(summary);

    if (!Array.isArray(payload?.results) || !payload.results.length) {
      card.appendChild(createEmptyMessage(`No matches found for \"${state.searchQuery}\".`));
      return card;
    }

    const resultsEl = document.createElement("div");
    resultsEl.className = "alpha-text-search-results";

    payload.results.forEach((result) => {
      const button = document.createElement("button");
      button.type = "button";
      button.className = "alpha-text-search-result";
      button.classList.toggle(
        "is-active",
        normalizeId(result?.sourceId) === normalizeId(state.selectedSourceId)
          && normalizeId(result?.workId) === normalizeId(state.selectedWorkId)
          && normalizeId(result?.sectionId) === normalizeId(state.selectedSectionId)
          && normalizeId(result?.verseId) === normalizeId(state.highlightedVerseId)
      );

      const head = document.createElement("div");
      head.className = "alpha-text-search-result-head";

      const reference = document.createElement("span");
      reference.className = "alpha-text-search-reference";
      reference.textContent = result.reference || `${result.workTitle} ${result.sectionLabel}:${result.verseNumber}`;

      const location = document.createElement("span");
      location.className = "alpha-text-search-location";
      location.textContent = state.activeSearchScope === "global"
        ? `${result.sourceShortTitle || result.sourceTitle} · ${result.workTitle} · ${result.sectionLabel}`
        : `${result.workTitle} · ${result.sectionLabel}`;

      const preview = document.createElement("p");
      preview.className = "alpha-text-search-preview";
      appendHighlightedText(preview, result.preview || result.reference || "", state.searchQuery);

      button.addEventListener("click", () => {
        void openSearchResult(result);
      });

      head.append(reference, location);
      button.append(head, preview);
      resultsEl.appendChild(button);
    });

    card.appendChild(resultsEl);
    return card;
  }

  function isGlobalSearchOnlyMode() {
    return state.activeSearchScope === "global"
      && Boolean(state.searchQuery)
      && !state.highlightedVerseId;
  }

  function renderDetail() {
    const source = getSelectedSource();
    const work = getSelectedWork(source);
    const section = getSelectedSection(source, work);
    const globalSearchOnlyMode = isGlobalSearchOnlyMode();

    if (!source || !work || !section) {
      renderPlaceholder("Text Reader", "Select a source to begin", "Choose a text source and section from the left panel.");
      renderLexiconPopup();
      return;
    }

    if (detailNameEl) {
      detailNameEl.textContent = globalSearchOnlyMode
        ? `Global Search${state.searchQuery ? `: ${state.searchQuery}` : ""}`
        : (state.currentPassage?.section?.title || section.title);
    }
    if (detailSubEl) {
      detailSubEl.textContent = globalSearchOnlyMode
        ? "All text sources"
        : `${source.title} · ${work.title}`;
    }
    if (!detailBodyEl) {
      return;
    }

    detailBodyEl.replaceChildren();

    const searchCard = createSearchCard();
    if (searchCard) {
      detailBodyEl.appendChild(searchCard);
    }

    if (globalSearchOnlyMode) {
      renderLexiconPopup();
      return;
    }

    if (!state.currentPassage) {
      const loadingCard = createCard("Text Reader");
      loadingCard.appendChild(createEmptyMessage("Loading section…"));
      detailBodyEl.appendChild(loadingCard);
      renderLexiconPopup();
      return;
    }

    detailBodyEl.appendChild(createMetaGrid(state.currentPassage));
    detailBodyEl.appendChild(createReaderCard(state.currentPassage));
    renderLexiconPopup();
  }

  async function loadSelectedPassage() {
    const source = getSelectedSource();
    const work = getSelectedWork(source);
    const section = getSelectedSection(source, work);
    if (!source || !work || !section) {
      state.currentPassage = null;
      renderDetail();
      return;
    }

    state.currentPassage = null;
    renderDetail();

    try {
      state.currentPassage = await dataService.loadTextSection?.(source.id, work.id, section.id);
      renderDetail();
      if (state.highlightedVerseId) {
        requestAnimationFrame(scrollHighlightedVerseIntoView);
      }
    } catch (error) {
      state.currentPassage = {
        source,
        work,
        section,
        verses: [],
        errorMessage: error?.message || "Unable to load this section."
      };
      renderDetail();
    }
  }

  async function runSearch(scope, forceRefresh = false) {
    const searchFn = dataService.searchTextLibrary;
    if (typeof searchFn !== "function") {
      state.searchError = "Text search is unavailable.";
      state.searchLoading = false;
      state.searchResults = null;
      renderDetail();
      return;
    }

    const normalizedScope = scope === "source" ? "source" : "global";
    const query = String(getSearchInput(normalizedScope)?.value || getStoredSearchQuery(normalizedScope) || "").trim();
    setStoredSearchQuery(normalizedScope, query);
    state.activeSearchScope = normalizedScope;
    state.searchQuery = query;
    state.searchError = "";
    state.searchResults = null;
    state.highlightedVerseId = "";
    updateSearchControls();

    if (!query) {
      clearSearchState();
      renderDetail();
      return;
    }

    const requestId = state.searchRequestId + 1;
    state.searchRequestId = requestId;
    state.searchLoading = true;
    renderDetail();

    try {
      const payload = await searchFn(query, {
        sourceId: normalizedScope === "source" ? state.selectedSourceId : "",
        limit: 50
      }, forceRefresh);

      if (requestId !== state.searchRequestId) {
        return;
      }

      state.searchResults = payload;
      state.searchLoading = false;
      renderDetail();
    } catch (error) {
      if (requestId !== state.searchRequestId) {
        return;
      }

      state.searchLoading = false;
      state.searchError = error?.message || "Unable to search this text library.";
      renderDetail();
    }
  }

  async function openSearchResult(result) {
    if (!result) {
      return;
    }

    state.selectedSourceId = result.sourceId;
    state.selectedWorkId = result.workId;
    state.selectedSectionId = result.sectionId;
    state.highlightedVerseId = result.verseId;
    dismissLexiconEntry({ restoreFocus: false });
    syncSelectionForSource(getSelectedSource());
    renderSourceList();
    renderSelectors();
    showDetailOnlyMode();
    await loadSelectedPassage();
    clearActiveSearchUi({ preserveHighlight: true });
    renderDetail();
  }

  function bindControls() {
    if (state.initialized) {
      return;
    }

    if (globalSearchFormEl instanceof HTMLFormElement) {
      globalSearchFormEl.addEventListener("submit", (event) => {
        event.preventDefault();
        void runSearch("global");
      });
    }

    if (globalSearchInputEl instanceof HTMLInputElement) {
      globalSearchInputEl.addEventListener("input", () => {
        state.globalSearchQuery = String(globalSearchInputEl.value || "").trim();
        updateSearchControls();
        if (!state.globalSearchQuery && state.activeSearchScope === "global" && state.searchQuery) {
          clearSearchState();
          renderDetail();
        }
      });
    }

    if (localSearchFormEl instanceof HTMLFormElement) {
      localSearchFormEl.addEventListener("submit", (event) => {
        event.preventDefault();
        void runSearch("source");
      });
    }

    if (localSearchInputEl instanceof HTMLInputElement) {
      localSearchInputEl.addEventListener("input", () => {
        state.localSearchQuery = String(localSearchInputEl.value || "").trim();
        updateSearchControls();
        if (!state.localSearchQuery && state.activeSearchScope === "source" && state.searchQuery) {
          clearSearchState();
          renderDetail();
        }
      });
    }

    if (workSelectEl) {
      workSelectEl.addEventListener("change", () => {
        state.selectedWorkId = String(workSelectEl.value || "");
        const source = getSelectedSource();
        syncSelectionForSource(source);
        state.currentPassage = null;
        state.lexiconEntry = null;
        state.highlightedVerseId = "";
        renderSelectors();
        void loadSelectedPassage();
      });
    }

    if (sectionSelectEl) {
      sectionSelectEl.addEventListener("change", () => {
        state.selectedSectionId = String(sectionSelectEl.value || "");
        state.currentPassage = null;
        state.lexiconEntry = null;
        state.highlightedVerseId = "";
        void loadSelectedPassage();
      });
    }

    document.addEventListener("keydown", (event) => {
      if (event.key === "Escape" && state.lexiconEntry) {
        closeLexiconEntry();
      }
    });

    state.initialized = true;
  }

  async function ensureAlphabetTextSection() {
    getElements();
    bindControls();
    window.TarotChromeUi?.initializeSidebarPopouts?.();
    window.TarotChromeUi?.initializeDetailPopouts?.();

    if (!sourceListEl || !detailBodyEl) {
      return;
    }

    await ensureCatalogLoaded();
    renderSourceList();
    renderSelectors();
    updateSearchControls();

    if (!state.currentPassage) {
      await loadSelectedPassage();
      return;
    }

    renderDetail();
  }

  function resetState() {
    state.catalog = null;
    state.currentPassage = null;
    state.lexiconEntry = null;
    state.selectedSourceId = "";
    state.selectedWorkId = "";
    state.selectedSectionId = "";
    state.lexiconRequestId = 0;
    state.lexiconOccurrenceResults = null;
    state.lexiconOccurrenceLoading = false;
    state.lexiconOccurrenceError = "";
    state.lexiconOccurrenceVisible = false;
    state.lexiconOccurrenceRequestId = 0;
    state.globalSearchQuery = "";
    state.localSearchQuery = "";
    state.activeSearchScope = "global";
    state.searchQuery = "";
    state.searchResults = null;
    state.searchLoading = false;
    state.searchError = "";
    state.searchRequestId = 0;
    state.highlightedVerseId = "";
    lexiconReturnFocusEl = null;

    if (globalSearchInputEl instanceof HTMLInputElement) {
      globalSearchInputEl.value = "";
    }

    if (localSearchInputEl instanceof HTMLInputElement) {
      localSearchInputEl.value = "";
    }

    updateSearchControls();
    renderLexiconPopup();
  }

  document.addEventListener("connection:updated", resetState);

  window.AlphabetTextUi = {
    ensureAlphabetTextSection
  };
})();