(function () {
  "use strict";

  const ARABIC_DISPLAY_NAMES = {
    alif: "Alif", ba: "Ba", jeem: "Jeem", dal: "Dal", ha: "Ha",
    waw: "Waw", zayn: "Zayn", ha_khaa: "Haa", ta_tay: "Tta", ya: "Ya",
    kaf: "Kaf", lam: "Lam", meem: "Meem", nun: "Nun", seen: "Seen",
    ayn: "Ayn", fa: "Fa", sad: "Sad", qaf: "Qaf", ra: "Ra",
    sheen: "Sheen", ta: "Ta", tha: "Tha", kha: "Kha",
    dhal: "Dhal", dad: "Dad", dha: "Dha", ghayn: "Ghayn"
  };

  function createAlphabetBrowser(dependencies) {
    const {
      state,
      normalizeId,
      getDomRefs,
      renderDetail
    } = dependencies || {};

    function capitalize(value) {
      return value ? value.charAt(0).toUpperCase() + value.slice(1) : "";
    }

    function arabicDisplayName(letter) {
      return ARABIC_DISPLAY_NAMES[letter && letter.name]
        || (String(letter && letter.name || "").charAt(0).toUpperCase() + String(letter && letter.name || "").slice(1));
    }

    function getLetters() {
      if (!state.alphabets) return [];
      if (state.activeAlphabet === "all") {
        const alphabetOrder = ["hebrew", "greek", "english", "arabic", "enochian"];
        return alphabetOrder.flatMap((alphabet) => {
          const rows = Array.isArray(state.alphabets?.[alphabet]) ? state.alphabets[alphabet] : [];
          return rows.map((row) => ({ ...row, __alphabet: alphabet }));
        });
      }
      return state.alphabets[state.activeAlphabet] || [];
    }

    function alphabetForLetter(letter) {
      if (state.activeAlphabet === "all") {
        return String(letter?.__alphabet || "").trim().toLowerCase();
      }
      return state.activeAlphabet;
    }

    function letterKeyByAlphabet(alphabet, letter) {
      if (alphabet === "hebrew") return letter.hebrewLetterId;
      if (alphabet === "greek") return letter.name;
      if (alphabet === "english") return letter.letter;
      if (alphabet === "arabic") return letter.name;
      if (alphabet === "enochian") return letter.id;
      return String(letter.index);
    }

    function letterKey(letter) {
      const alphabet = alphabetForLetter(letter);
      const key = letterKeyByAlphabet(alphabet, letter);
      if (state.activeAlphabet === "all") {
        return `${alphabet}:${key}`;
      }
      return key;
    }

    function displayGlyph(letter) {
      const alphabet = alphabetForLetter(letter);
      if (alphabet === "hebrew") return letter.char;
      if (alphabet === "greek") return letter.char;
      if (alphabet === "english") return letter.letter;
      if (alphabet === "arabic") return letter.char;
      if (alphabet === "enochian") return letter.char;
      return "?";
    }

    function displayLabel(letter) {
      const alphabet = alphabetForLetter(letter);
      if (alphabet === "hebrew") return letter.name;
      if (alphabet === "greek") return letter.displayName;
      if (alphabet === "english") return letter.letter;
      if (alphabet === "arabic") return arabicDisplayName(letter);
      if (alphabet === "enochian") return letter.title;
      return "?";
    }

    function displaySub(letter) {
      const alphabet = alphabetForLetter(letter);
      if (alphabet === "hebrew") return `${letter.transliteration} · ${letter.letterType} · ${letter.numerology}`;
      if (alphabet === "greek") return `${letter.transliteration} · isopsephy ${letter.numerology}${letter.archaic ? " · archaic" : ""}`;
      if (alphabet === "english") return `Pythagorean ${letter.pythagorean}`;
      if (alphabet === "arabic") return `${letter.transliteration} · abjad ${letter.abjad} · ${letter.nameArabic}`;
      if (alphabet === "enochian") return `${letter.transliteration} · ${Array.isArray(letter.englishLetters) ? letter.englishLetters.join("/") : ""} · value ${letter.numerology}`;
      return "";
    }

    function normalizeLetterType(value) {
      const key = String(value || "").trim().toLowerCase();
      if (["mother", "double", "simple"].includes(key)) {
        return key;
      }
      return "";
    }

    function getHebrewLetterTypeMap() {
      const map = new Map();
      const hebrewLetters = Array.isArray(state.alphabets?.hebrew) ? state.alphabets.hebrew : [];
      hebrewLetters.forEach((entry) => {
        const hebrewId = normalizeId(entry?.hebrewLetterId);
        const letterType = normalizeLetterType(entry?.letterType);
        if (hebrewId && letterType) {
          map.set(hebrewId, letterType);
        }
      });
      return map;
    }

    function resolveLetterType(letter) {
      const direct = normalizeLetterType(letter?.letterType);
      if (direct) {
        return direct;
      }

      const hebrewId = normalizeId(letter?.hebrewLetterId);
      if (!hebrewId) {
        return "";
      }

      return getHebrewLetterTypeMap().get(hebrewId) || "";
    }

    function buildLetterSearchText(letter) {
      const chunks = [];

      chunks.push(String(displayLabel(letter) || ""));
      chunks.push(String(displayGlyph(letter) || ""));
      chunks.push(String(displaySub(letter) || ""));
      chunks.push(String(letter?.transliteration || ""));
      chunks.push(String(letter?.meaning || ""));
      chunks.push(String(letter?.nameArabic || ""));
      chunks.push(String(letter?.title || ""));
      chunks.push(String(letter?.letter || ""));
      chunks.push(String(letter?.displayName || ""));
      chunks.push(String(letter?.name || ""));
      chunks.push(String(letter?.index || ""));
      chunks.push(String(resolveLetterType(letter) || ""));

      return chunks.join(" ").toLowerCase();
    }

    function getFilteredLetters() {
      const letters = getLetters();
      const query = String(state.filters.query || "").trim().toLowerCase();
      const letterTypeFilter = normalizeLetterType(state.filters.letterType);
      const numericPosition = /^\d+$/.test(query) ? Number(query) : null;

      return letters.filter((letter) => {
        if (letterTypeFilter) {
          const entryType = resolveLetterType(letter);
          if (entryType !== letterTypeFilter) {
            return false;
          }
        }

        if (!query) {
          return true;
        }

        const index = Number(letter?.index);
        if (Number.isFinite(numericPosition) && Number.isFinite(index) && index === numericPosition) {
          return true;
        }

        return buildLetterSearchText(letter).includes(query);
      });
    }

    function syncFilterControls() {
      const { searchInputEl, typeFilterEl, searchClearEl } = getDomRefs();

      if (searchInputEl && searchInputEl.value !== state.filters.query) {
        searchInputEl.value = state.filters.query;
      }

      if (typeFilterEl && typeFilterEl.value !== state.filters.letterType) {
        typeFilterEl.value = state.filters.letterType;
      }

      if (searchClearEl) {
        const hasFilter = Boolean(String(state.filters.query || "").trim()) || Boolean(state.filters.letterType);
        searchClearEl.disabled = !hasFilter;
      }
    }

    function applyFiltersAndRender() {
      const filteredLetters = getFilteredLetters();
      const selectedInFiltered = filteredLetters.some((letter) => letterKey(letter) === state.selectedKey);

      if (!selectedInFiltered) {
        state.selectedKey = filteredLetters[0] ? letterKey(filteredLetters[0]) : null;
      }

      renderList();

      const selected = filteredLetters.find((letter) => letterKey(letter) === state.selectedKey)
        || filteredLetters[0]
        || null;

      if (selected) {
        renderDetail(selected);
        return;
      }

      resetDetail();
      const { detailSubEl } = getDomRefs();
      if (detailSubEl) {
        detailSubEl.textContent = "No letters match the current filter.";
      }
    }

    function bindFilterControls() {
      const { searchInputEl, typeFilterEl, searchClearEl } = getDomRefs();

      if (searchInputEl) {
        searchInputEl.addEventListener("input", () => {
          state.filters.query = String(searchInputEl.value || "");
          syncFilterControls();
          applyFiltersAndRender();
        });
      }

      if (typeFilterEl) {
        typeFilterEl.addEventListener("change", () => {
          state.filters.letterType = normalizeLetterType(typeFilterEl.value);
          syncFilterControls();
          applyFiltersAndRender();
        });
      }

      if (searchClearEl) {
        searchClearEl.addEventListener("click", () => {
          state.filters.query = "";
          state.filters.letterType = "";
          syncFilterControls();
          applyFiltersAndRender();
        });
      }
    }

    function enochianGlyphKey(letter) {
      return String(letter?.id || letter?.char || "").trim().toUpperCase();
    }

    function enochianGlyphCode(letter) {
      const key = enochianGlyphKey(letter);
      return key ? key.codePointAt(0) || 0 : 0;
    }

    function enochianGlyphUrl(letter) {
      const code = enochianGlyphCode(letter);
      return code ? `asset/img/enochian/char(${code}).png` : "";
    }

    function enochianGlyphImageHtml(letter, className) {
      const src = enochianGlyphUrl(letter);
      const key = enochianGlyphKey(letter) || "?";
      if (!src) {
        return `<span class="${className}">${key}</span>`;
      }
      return `<img class="${className}" src="${src}" alt="Enochian ${key}" loading="lazy" decoding="async">`;
    }

    function renderList() {
      const { listEl, countEl } = getDomRefs();
      if (!listEl) return;
      const allLetters = getLetters();
      const letters = getFilteredLetters();
      if (countEl) {
        countEl.textContent = letters.length === allLetters.length
          ? `${letters.length}`
          : `${letters.length}/${allLetters.length}`;
      }

      listEl.innerHTML = "";
      letters.forEach((letter) => {
        const key = letterKey(letter);
        const item = document.createElement("div");
        item.className = "planet-list-item alpha-list-item" + (key === state.selectedKey ? " is-selected" : "");
        item.setAttribute("role", "option");
        item.setAttribute("aria-selected", key === state.selectedKey ? "true" : "false");
        item.dataset.key = key;

        const glyph = document.createElement("span");
        const alphabet = alphabetForLetter(letter);
        const glyphVariantClass = alphabet === "arabic"
          ? " alpha-list-glyph--arabic"
          : alphabet === "enochian"
            ? " alpha-list-glyph--enochian"
            : "";
        glyph.className = "alpha-list-glyph" + glyphVariantClass;
        if (alphabet === "enochian") {
          const image = document.createElement("img");
          image.className = "alpha-enochian-glyph-img alpha-enochian-glyph-img--list";
          image.src = enochianGlyphUrl(letter);
          image.alt = `Enochian ${enochianGlyphKey(letter) || "?"}`;
          image.loading = "lazy";
          image.decoding = "async";
          image.addEventListener("error", () => {
            glyph.textContent = enochianGlyphKey(letter) || "?";
          });
          glyph.appendChild(image);
        } else {
          glyph.textContent = displayGlyph(letter);
        }

        const meta = document.createElement("span");
        meta.className = "alpha-list-meta";
        const alphaLabel = alphabet ? `${capitalize(alphabet)} · ` : "";
        meta.innerHTML = `<strong>${alphaLabel}${displayLabel(letter)}</strong><br><span class="alpha-list-sub">${displaySub(letter)}</span>`;

        item.appendChild(glyph);
        item.appendChild(meta);
        item.addEventListener("click", () => selectLetter(key));
        listEl.appendChild(item);
      });
    }

    function resetDetail() {
      const { detailNameEl, detailSubEl, detailBodyEl } = getDomRefs();
      if (detailNameEl) {
        detailNameEl.textContent = "--";
        detailNameEl.classList.remove("alpha-detail-glyph");
      }
      if (detailSubEl) detailSubEl.textContent = "Select a letter to explore";
      if (detailBodyEl) detailBodyEl.innerHTML = "";
    }

    function selectLetter(key) {
      state.selectedKey = key;
      renderList();
      const letters = getFilteredLetters();
      const letter = letters.find((entry) => letterKey(entry) === key) || getLetters().find((entry) => letterKey(entry) === key);
      if (letter) {
        renderDetail(letter);
      }
    }

    function updateTabs() {
      const { tabAll, tabHebrew, tabGreek, tabEnglish, tabArabic, tabEnochian } = getDomRefs();
      [tabAll, tabHebrew, tabGreek, tabEnglish, tabArabic, tabEnochian].forEach((btn) => {
        if (!btn) return;
        btn.classList.toggle("alpha-tab-active", btn.dataset.alpha === state.activeAlphabet);
      });
    }

    function switchAlphabet(alpha, selectKey) {
      state.activeAlphabet = alpha;
      state.selectedKey = selectKey || null;
      updateTabs();
      syncFilterControls();
      renderList();
      if (selectKey) {
        const letters = getFilteredLetters();
        const letter = letters.find((entry) => letterKey(entry) === selectKey) || getLetters().find((entry) => letterKey(entry) === selectKey);
        if (letter) {
          renderDetail(letter);
        }
      } else {
        resetDetail();
      }
    }

    return {
      arabicDisplayName,
      getLetters,
      alphabetForLetter,
      letterKeyByAlphabet,
      letterKey,
      displayGlyph,
      displayLabel,
      displaySub,
      normalizeLetterType,
      getHebrewLetterTypeMap,
      resolveLetterType,
      buildLetterSearchText,
      getFilteredLetters,
      syncFilterControls,
      applyFiltersAndRender,
      bindFilterControls,
      enochianGlyphKey,
      enochianGlyphCode,
      enochianGlyphUrl,
      enochianGlyphImageHtml,
      renderList,
      resetDetail,
      selectLetter,
      switchAlphabet,
      updateTabs
    };
  }

  window.AlphabetBrowserUi = {
    createAlphabetBrowser
  };
})();