(function () {
  "use strict";

  function computeDigitalRoot(value) {
    let current = Math.abs(Math.trunc(Number(value)));
    if (!Number.isFinite(current)) {
      return null;
    }

    while (current >= 10) {
      current = String(current)
        .split("")
        .reduce((sum, digit) => sum + Number(digit), 0);
    }

    return current;
  }

  function describeDigitalRootReduction(value, digitalRoot) {
    const normalized = Math.abs(Math.trunc(Number(value)));
    if (!Number.isFinite(normalized) || !Number.isFinite(digitalRoot)) {
      return "";
    }

    if (normalized < 10) {
      return String(normalized);
    }

    return `${String(normalized).split("").join(" + ")} = ${digitalRoot}`;
  }

  function renderPositionDigitalRootCard(letter, alphabet, context, orderLabel) {
    const index = Number(letter?.index);
    if (!Number.isFinite(index)) {
      return "";
    }

    const position = Math.trunc(index);
    if (position <= 0) {
      return "";
    }

    const digitalRoot = computeDigitalRoot(position);
    if (!Number.isFinite(digitalRoot)) {
      return "";
    }

    const entries = Array.isArray(context.alphabets?.[alphabet]) ? context.alphabets[alphabet] : [];
    const countText = entries.length ? ` of ${entries.length}` : "";
    const orderText = orderLabel ? ` (${orderLabel})` : "";
    const reductionText = describeDigitalRootReduction(position, digitalRoot);
    const openNumberBtn = context.navBtn(`View Number ${digitalRoot}`, "nav:number", { value: digitalRoot });

    return context.card("Position Digital Root", `
      <dl class="alpha-dl">
        <dt>Position</dt><dd>#${position}${countText}${orderText}</dd>
        <dt>Digital Root</dt><dd>${digitalRoot}${reductionText ? ` (${reductionText})` : ""}</dd>
      </dl>
      <div class="alpha-nav-btns">${openNumberBtn}</div>
    `);
  }

  function monthRefsForLetter(letter, context) {
    const hebrewLetterId = context.normalizeId(letter?.hebrewLetterId);
    if (!hebrewLetterId) {
      return [];
    }
    return context.monthRefsByHebrewId.get(hebrewLetterId) || [];
  }

  function calendarMonthsCard(monthRefs, titleLabel, context) {
    if (!monthRefs.length) {
      return "";
    }

    const monthButtons = monthRefs
      .map((month) => context.navBtn(month.label || month.name, "nav:calendar-month", { "month-id": month.id }))
      .join("");

    return context.card("Calendar Months", `
      <div>${titleLabel}</div>
      <div class="alpha-nav-btns">${monthButtons}</div>
    `);
  }

  function renderAstrologyCard(astrology, context) {
    if (!astrology) return "";
    const { type, name } = astrology;
    const id = (name || "").toLowerCase();

    if (type === "planet") {
      const sym = context.PLANET_SYMBOLS[id] || "";
      const cubePlacement = context.getCubePlacementForPlanet(id);
      const cubeBtn = context.cubePlacementBtn(cubePlacement, { "planet-id": id });
      return context.card("Astrology", `
        <dl class="alpha-dl">
          <dt>Type</dt><dd>Planet</dd>
          <dt>Ruler</dt><dd>${sym} ${context.cap(id)}</dd>
        </dl>
        <div class="alpha-nav-btns">
          <button class="alpha-nav-btn" data-event="nav:planet" data-planet-id="${id}">View ${context.cap(id)} ↗</button>
          ${cubeBtn}
        </div>
      `);
    }
    if (type === "zodiac") {
      const sym = context.ZODIAC_SYMBOLS[id] || "";
      const cubePlacement = context.getCubePlacementForSign(id);
      const cubeBtn = context.cubePlacementBtn(cubePlacement, { "sign-id": id });
      return context.card("Astrology", `
        <dl class="alpha-dl">
          <dt>Type</dt><dd>Zodiac Sign</dd>
          <dt>Sign</dt><dd>${sym} ${context.cap(id)}</dd>
        </dl>
        <div class="alpha-nav-btns">
          <button class="alpha-nav-btn" data-event="nav:zodiac" data-sign-id="${id}">View ${context.cap(id)} ↗</button>
          ${cubeBtn}
        </div>
      `);
    }
    if (type === "element") {
      const elemEmoji = { air: "💨", water: "💧", fire: "🔥", earth: "🌍" };
      return context.card("Astrology", `
        <dl class="alpha-dl">
          <dt>Type</dt><dd>Element</dd>
          <dt>Element</dt><dd>${elemEmoji[id] || ""} ${context.cap(id)}</dd>
        </dl>
      `);
    }
    return context.card("Astrology", `
      <dl class="alpha-dl">
        <dt>Type</dt><dd>${context.cap(type)}</dd>
        <dt>Name</dt><dd>${context.cap(name)}</dd>
      </dl>
    `);
  }

  function renderHebrewDualityCard(letter, context) {
    const duality = context.HEBREW_DOUBLE_DUALITY[context.normalizeId(letter?.hebrewLetterId)];
    if (!duality) {
      return "";
    }

    return context.card("Duality", `
      <dl class="alpha-dl">
        <dt>Polarity</dt><dd>${duality.left} / ${duality.right}</dd>
      </dl>
    `);
  }

  function renderHebrewFourWorldsCard(letter, context) {
    const letterId = context.normalizeLetterId(letter?.hebrewLetterId || letter?.transliteration || letter?.char);
    if (!letterId) {
      return "";
    }

    const rows = (Array.isArray(context.fourWorldLayers) ? context.fourWorldLayers : [])
      .filter((entry) => entry?.hebrewLetterId === letterId);

    if (!rows.length) {
      return "";
    }

    const body = rows.map((entry) => {
      const pathBtn = Number.isFinite(Number(entry?.pathNumber))
        ? context.navBtn(`View Path ${entry.pathNumber}`, "nav:kabbalah-path", { "path-no": Number(entry.pathNumber) })
        : "";

      return `
        <div class="cal-item-row">
          <div class="cal-item-head">
            <span class="cal-item-name">${entry.slot}: ${entry.letterChar} — ${entry.world}</span>
            <span class="planet-list-meta">${entry.soulLayer}</span>
          </div>
          <div class="planet-text">${entry.worldLayer}${entry.worldDescription ? ` · ${entry.worldDescription}` : ""}</div>
          <div class="planet-text">${entry.soulLayer}${entry.soulTitle ? ` — ${entry.soulTitle}` : ""}${entry.soulDescription ? `: ${entry.soulDescription}` : ""}</div>
          <div class="alpha-nav-btns">${pathBtn}</div>
        </div>
      `;
    }).join("");

    return context.card("Qabalistic Worlds & Soul Layers", `<div class="cal-item-stack">${body}</div>`);
  }

  function normalizeLatinLetter(value) {
    return String(value || "")
      .trim()
      .toUpperCase()
      .replace(/[^A-Z]/g, "");
  }

  function extractEnglishLetterRefs(value) {
    if (Array.isArray(value)) {
      return [...new Set(value.map((entry) => normalizeLatinLetter(entry)).filter(Boolean))];
    }

    return [...new Set(
      String(value || "")
        .split(/[\s,;|\/]+/)
        .map((entry) => normalizeLatinLetter(entry))
        .filter(Boolean)
    )];
  }

  function renderAlphabetEquivalentCard(activeAlphabet, letter, context) {
    const hebrewLetters = Array.isArray(context.alphabets?.hebrew) ? context.alphabets.hebrew : [];
    const greekLetters = Array.isArray(context.alphabets?.greek) ? context.alphabets.greek : [];
    const englishLetters = Array.isArray(context.alphabets?.english) ? context.alphabets.english : [];
    const arabicLetters = Array.isArray(context.alphabets?.arabic) ? context.alphabets.arabic : [];
    const enochianLetters = Array.isArray(context.alphabets?.enochian) ? context.alphabets.enochian : [];
    const linkedHebrewIds = new Set();
    const linkedEnglishLetters = new Set();
    const buttons = [];

    function addHebrewId(value) {
      const id = context.normalizeId(value);
      if (id) {
        linkedHebrewIds.add(id);
      }
    }

    function addEnglishLetter(value) {
      const code = normalizeLatinLetter(value);
      if (!code) {
        return;
      }

      linkedEnglishLetters.add(code);
      englishLetters
        .filter((entry) => normalizeLatinLetter(entry?.letter) === code)
        .forEach((entry) => addHebrewId(entry?.hebrewLetterId));
    }

    if (activeAlphabet === "hebrew") {
      addHebrewId(letter?.hebrewLetterId);
    } else if (activeAlphabet === "greek") {
      addHebrewId(letter?.hebrewLetterId);
      englishLetters
        .filter((entry) => context.normalizeId(entry?.greekEquivalent) === context.normalizeId(letter?.name))
        .forEach((entry) => addEnglishLetter(entry?.letter));
    } else if (activeAlphabet === "english") {
      addEnglishLetter(letter?.letter);
      addHebrewId(letter?.hebrewLetterId);
    } else if (activeAlphabet === "arabic") {
      addHebrewId(letter?.hebrewLetterId);
    } else if (activeAlphabet === "enochian") {
      extractEnglishLetterRefs(letter?.englishLetters).forEach((code) => addEnglishLetter(code));
      addHebrewId(letter?.hebrewLetterId);
    }

    if (!linkedHebrewIds.size && !linkedEnglishLetters.size) {
      return "";
    }

    const activeHebrewKey = context.normalizeId(letter?.hebrewLetterId);
    const activeGreekKey = context.normalizeId(letter?.name);
    const activeEnglishKey = normalizeLatinLetter(letter?.letter);
    const activeArabicKey = context.normalizeId(letter?.name);
    const activeEnochianKey = context.normalizeId(letter?.id || letter?.char || letter?.title);

    hebrewLetters.forEach((heb) => {
      const key = context.normalizeId(heb?.hebrewLetterId);
      if (!key || !linkedHebrewIds.has(key)) {
        return;
      }
      if (activeAlphabet === "hebrew" && key === activeHebrewKey) {
        return;
      }

      buttons.push(`<button class="alpha-sister-btn" data-alpha="hebrew" data-key="${heb.hebrewLetterId}">
        <span class="alpha-sister-glyph">${heb.char}</span>
        <span class="alpha-sister-name">Hebrew: ${heb.name} (${heb.transliteration}) · gematria ${heb.numerology}</span>
      </button>`);
    });

    greekLetters.forEach((grk) => {
      const key = context.normalizeId(grk?.name);
      const viaHebrew = linkedHebrewIds.has(context.normalizeId(grk?.hebrewLetterId));
      const viaEnglish = englishLetters.some((eng) => (
        linkedEnglishLetters.has(normalizeLatinLetter(eng?.letter))
        && context.normalizeId(eng?.greekEquivalent) === key
      ));
      if (!(viaHebrew || viaEnglish)) {
        return;
      }
      if (activeAlphabet === "greek" && key === activeGreekKey) {
        return;
      }

      buttons.push(`<button class="alpha-sister-btn" data-alpha="greek" data-key="${grk.name}">
        <span class="alpha-sister-glyph">${grk.char}</span>
        <span class="alpha-sister-name">Greek: ${grk.displayName} (${grk.transliteration}) · isopsephy ${grk.numerology}</span>
      </button>`);
    });

    englishLetters.forEach((eng) => {
      const key = normalizeLatinLetter(eng?.letter);
      const viaLetter = linkedEnglishLetters.has(key);
      const viaHebrew = linkedHebrewIds.has(context.normalizeId(eng?.hebrewLetterId));
      if (!(viaLetter || viaHebrew)) {
        return;
      }
      if (activeAlphabet === "english" && key === activeEnglishKey) {
        return;
      }

      buttons.push(`<button class="alpha-sister-btn" data-alpha="english" data-key="${eng.letter}">
        <span class="alpha-sister-glyph">${eng.letter}</span>
        <span class="alpha-sister-name">English: ${eng.letter} · pythagorean ${eng.pythagorean}</span>
      </button>`);
    });

    arabicLetters.forEach((arb) => {
      const key = context.normalizeId(arb?.name);
      if (!linkedHebrewIds.has(context.normalizeId(arb?.hebrewLetterId))) {
        return;
      }
      if (activeAlphabet === "arabic" && key === activeArabicKey) {
        return;
      }

      buttons.push(`<button class="alpha-sister-btn" data-alpha="arabic" data-key="${arb.name}">
        <span class="alpha-sister-glyph alpha-list-glyph--arabic">${arb.char}</span>
        <span class="alpha-sister-name">Arabic: ${context.arabicDisplayName(arb)} — ${arb.nameArabic} (${arb.transliteration}) · abjad ${arb.abjad}</span>
      </button>`);
    });

    enochianLetters.forEach((eno) => {
      const key = context.normalizeId(eno?.id || eno?.char || eno?.title);
      const englishRefs = extractEnglishLetterRefs(eno?.englishLetters);
      const viaHebrew = linkedHebrewIds.has(context.normalizeId(eno?.hebrewLetterId));
      const viaEnglish = englishRefs.some((code) => linkedEnglishLetters.has(code));
      if (!(viaHebrew || viaEnglish)) {
        return;
      }
      if (activeAlphabet === "enochian" && key === activeEnochianKey) {
        return;
      }

      buttons.push(`<button class="alpha-sister-btn" data-alpha="enochian" data-key="${eno.id}">
        ${context.enochianGlyphImageHtml(eno, "alpha-enochian-glyph-img alpha-enochian-glyph-img--sister")}
        <span class="alpha-sister-name">Enochian: ${eno.title} (${eno.transliteration}) · English ${englishRefs.join("/") || "—"}</span>
      </button>`);
    });

    if (!buttons.length) {
      return "";
    }

    return context.card("ALPHABET EQUIVALENT", `<div class="alpha-sister-wrap">${buttons.join("")}</div>`);
  }

  function renderHebrewDetail(context) {
    const { letter, detailSubEl, detailBodyEl } = context;
    detailSubEl.textContent = `${letter.name} — ${letter.transliteration}`;
    detailBodyEl.innerHTML = "";

    const sections = [];
    sections.push(context.card("Letter Details", `
      <dl class="alpha-dl">
        <dt>Character</dt><dd>${letter.char}</dd>
        <dt>Name</dt><dd>${letter.name}</dd>
        <dt>Transliteration</dt><dd>${letter.transliteration}</dd>
        <dt>Meaning</dt><dd>${letter.meaning}</dd>
        <dt>Gematria Value</dt><dd>${letter.numerology}</dd>
        <dt>Letter Type</dt><dd class="alpha-badge alpha-badge--${letter.letterType}">${letter.letterType}</dd>
        <dt>Position</dt><dd>#${letter.index} of 22</dd>
      </dl>
    `));

    const positionRootCard = renderPositionDigitalRootCard(letter, "hebrew", context);
    if (positionRootCard) {
      sections.push(positionRootCard);
    }

    if (letter.letterType === "double") {
      const dualityCard = renderHebrewDualityCard(letter, context);
      if (dualityCard) {
        sections.push(dualityCard);
      }
    }

    const fourWorldsCard = renderHebrewFourWorldsCard(letter, context);
    if (fourWorldsCard) {
      sections.push(fourWorldsCard);
    }

    if (letter.astrology) {
      sections.push(renderAstrologyCard(letter.astrology, context));
    }

    if (letter.kabbalahPathNumber) {
      const tarotPart = letter.tarot
        ? `<dt>Tarot Card</dt><dd>${letter.tarot.card} (Trump ${letter.tarot.trumpNumber})</dd>`
        : "";
      const kabBtn = context.navBtn("View Kabbalah Path", "tarot:view-kab-path", { "path-number": letter.kabbalahPathNumber });
      const tarotBtn = letter.tarot
        ? context.navBtn("View Tarot Card", "kab:view-trump", { "trump-number": letter.tarot.trumpNumber })
        : "";
      const cubePlacement = context.getCubePlacementForHebrewLetter(letter.hebrewLetterId, letter.kabbalahPathNumber);
      const cubeBtn = context.cubePlacementBtn(cubePlacement, {
        "hebrew-letter-id": letter.hebrewLetterId,
        "path-no": letter.kabbalahPathNumber
      });
      sections.push(context.card("Kabbalah & Tarot", `
        <dl class="alpha-dl">
          <dt>Path Number</dt><dd>${letter.kabbalahPathNumber}</dd>
          ${tarotPart}
        </dl>
        <div class="alpha-nav-btns">${kabBtn}${tarotBtn}${cubeBtn}</div>
      `));
    }

    const monthRefs = monthRefsForLetter(letter, context);
    const monthCard = calendarMonthsCard(monthRefs, `Calendar correspondences linked to ${letter.name}.`, context);
    if (monthCard) {
      sections.push(monthCard);
    }

    const equivalentsCard = renderAlphabetEquivalentCard("hebrew", letter, context);
    if (equivalentsCard) {
      sections.push(equivalentsCard);
    }

    detailBodyEl.innerHTML = sections.join("");
    context.attachDetailListeners();
  }

  function renderGreekDetail(context) {
    const { letter, detailSubEl, detailBodyEl } = context;
    const archaicBadge = letter.archaic ? ' <span class="alpha-badge alpha-badge--archaic">archaic</span>' : "";
    detailSubEl.textContent = `${letter.displayName}${letter.archaic ? " (archaic)" : ""} — ${letter.transliteration}`;
    detailBodyEl.innerHTML = "";

    const sections = [];
    const charRow = letter.charFinal
      ? `<dt>Form (final)</dt><dd>${letter.charFinal}</dd>`
      : "";
    sections.push(context.card("Letter Details", `
      <dl class="alpha-dl">
        <dt>Uppercase</dt><dd>${letter.char}</dd>
        <dt>Lowercase</dt><dd>${letter.charLower || "—"}</dd>
        ${charRow}
        <dt>Name</dt><dd>${letter.displayName}${archaicBadge}</dd>
        <dt>Transliteration</dt><dd>${letter.transliteration}</dd>
        <dt>IPA</dt><dd>${letter.ipa || "—"}</dd>
        <dt>Isopsephy Value</dt><dd>${letter.numerology}</dd>
        <dt>Meaning / Origin</dt><dd>${letter.meaning || "—"}</dd>
      </dl>
    `));

    const positionRootCard = renderPositionDigitalRootCard(letter, "greek", context);
    if (positionRootCard) {
      sections.push(positionRootCard);
    }

    const equivalentsCard = renderAlphabetEquivalentCard("greek", letter, context);
    if (equivalentsCard) {
      sections.push(equivalentsCard);
    }

    const monthRefs = monthRefsForLetter(letter, context);
    const monthCard = calendarMonthsCard(monthRefs, `Calendar correspondences inherited via ${letter.displayName}'s Hebrew origin.`, context);
    if (monthCard) {
      sections.push(monthCard);
    }

    detailBodyEl.innerHTML = sections.join("");
    context.attachDetailListeners();
  }

  function renderEnglishDetail(context) {
    const { letter, detailSubEl, detailBodyEl } = context;
    detailSubEl.textContent = `Letter ${letter.letter} · position #${letter.index}`;
    detailBodyEl.innerHTML = "";

    const sections = [];
    sections.push(context.card("Letter Details", `
      <dl class="alpha-dl">
        <dt>Letter</dt><dd>${letter.letter}</dd>
        <dt>Position</dt><dd>#${letter.index} of 26</dd>
        <dt>IPA</dt><dd>${letter.ipa || "—"}</dd>
        <dt>Pythagorean Value</dt><dd>${letter.pythagorean}</dd>
      </dl>
    `));

    const positionRootCard = renderPositionDigitalRootCard(letter, "english", context);
    if (positionRootCard) {
      sections.push(positionRootCard);
    }

    const equivalentsCard = renderAlphabetEquivalentCard("english", letter, context);
    if (equivalentsCard) {
      sections.push(equivalentsCard);
    }

    const monthRefs = monthRefsForLetter(letter, context);
    const monthCard = calendarMonthsCard(monthRefs, "Calendar correspondences linked through this letter's Hebrew correspondence.", context);
    if (monthCard) {
      sections.push(monthCard);
    }

    detailBodyEl.innerHTML = sections.join("");
    context.attachDetailListeners();
  }

  function renderArabicDetail(context) {
    const { letter, detailSubEl, detailBodyEl } = context;
    detailSubEl.textContent = `${context.arabicDisplayName(letter)} — ${letter.transliteration}`;
    detailBodyEl.innerHTML = "";

    const sections = [];
    const forms = letter.forms || {};
    const formParts = [
      forms.isolated ? `<span class="alpha-arabic-form"><span class="alpha-arabic-glyph">${forms.isolated}</span><br>isolated</span>` : "",
      forms.final ? `<span class="alpha-arabic-form"><span class="alpha-arabic-glyph">${forms.final}</span><br>final</span>` : "",
      forms.medial ? `<span class="alpha-arabic-form"><span class="alpha-arabic-glyph">${forms.medial}</span><br>medial</span>` : "",
      forms.initial ? `<span class="alpha-arabic-form"><span class="alpha-arabic-glyph">${forms.initial}</span><br>initial</span>` : ""
    ].filter(Boolean);

    sections.push(context.card("Letter Details", `
      <dl class="alpha-dl">
        <dt>Arabic Name</dt><dd class="alpha-arabic-inline">${letter.nameArabic}</dd>
        <dt>Transliteration</dt><dd>${letter.transliteration}</dd>
        <dt>IPA</dt><dd>${letter.ipa || "—"}</dd>
        <dt>Abjad Value</dt><dd>${letter.abjad}</dd>
        <dt>Meaning</dt><dd>${letter.meaning || "—"}</dd>
        <dt>Category</dt><dd class="alpha-badge alpha-badge--${letter.category}">${letter.category}</dd>
        <dt>Position</dt><dd>#${letter.index} of 28 (Abjad order)</dd>
      </dl>
    `));

    const positionRootCard = renderPositionDigitalRootCard(letter, "arabic", context, "Abjad order");
    if (positionRootCard) {
      sections.push(positionRootCard);
    }

    if (formParts.length) {
      sections.push(context.card("Letter Forms", `<div class="alpha-arabic-forms">${formParts.join("")}</div>`));
    }

    const equivalentsCard = renderAlphabetEquivalentCard("arabic", letter, context);
    if (equivalentsCard) {
      sections.push(equivalentsCard);
    }

    detailBodyEl.innerHTML = sections.join("");
    context.attachDetailListeners();
  }

  function renderEnochianDetail(context) {
    const { letter, detailSubEl, detailBodyEl } = context;
    const englishRefs = extractEnglishLetterRefs(letter?.englishLetters);
    detailSubEl.textContent = `${letter.title} — ${letter.transliteration}`;
    detailBodyEl.innerHTML = "";

    const sections = [];
    sections.push(context.card("Letter Details", `
      <dl class="alpha-dl">
        <dt>Character</dt><dd>${context.enochianGlyphImageHtml(letter, "alpha-enochian-glyph-img alpha-enochian-glyph-img--detail-row")}</dd>
        <dt>Name</dt><dd>${letter.title}</dd>
        <dt>English Letters</dt><dd>${englishRefs.join(" / ") || "—"}</dd>
        <dt>Transliteration</dt><dd>${letter.transliteration || "—"}</dd>
        <dt>Element / Planet</dt><dd>${letter.elementOrPlanet || "—"}</dd>
        <dt>Tarot</dt><dd>${letter.tarot || "—"}</dd>
        <dt>Numerology</dt><dd>${letter.numerology || "—"}</dd>
          <dt>Glyph Source</dt><dd>API asset: img/enochian (sourced from dCode set)</dd>
        <dt>Position</dt><dd>#${letter.index} of 21</dd>
      </dl>
    `));

    const positionRootCard = renderPositionDigitalRootCard(letter, "enochian", context);
    if (positionRootCard) {
      sections.push(positionRootCard);
    }

    const equivalentsCard = renderAlphabetEquivalentCard("enochian", letter, context);
    if (equivalentsCard) {
      sections.push(equivalentsCard);
    }

    const monthRefs = monthRefsForLetter(letter, context);
    const monthCard = calendarMonthsCard(monthRefs, "Calendar correspondences linked through this letter's Hebrew correspondence.", context);
    if (monthCard) {
      sections.push(monthCard);
    }

    detailBodyEl.innerHTML = sections.join("");
    context.attachDetailListeners();
  }

  function renderDetail(context) {
    const alphabet = context.alphabet;
    if (alphabet === "hebrew") {
      renderHebrewDetail(context);
    } else if (alphabet === "greek") {
      renderGreekDetail(context);
    } else if (alphabet === "english") {
      renderEnglishDetail(context);
    } else if (alphabet === "arabic") {
      renderArabicDetail(context);
    } else if (alphabet === "enochian") {
      renderEnochianDetail(context);
    }
  }

  window.AlphabetDetailUi = { renderDetail };
})();