/* ui-zodiac.js — Zodiac sign browser section */
(function () {
  "use strict";

  const ELEMENT_STYLE = {
    fire:  { emoji: "🔥", badge: "zod-badge--fire",  label: "Fire"  },
    earth: { emoji: "🌍", badge: "zod-badge--earth", label: "Earth" },
    air:   { emoji: "💨", badge: "zod-badge--air",   label: "Air"   },
    water: { emoji: "💧", badge: "zod-badge--water", label: "Water" }
  };

  const PLANET_SYMBOLS = {
    saturn: "♄︎", jupiter: "♃︎", mars: "♂︎", sol: "☉︎",
    venus: "♀︎", mercury: "☿︎", luna: "☾︎"
  };

  const MONTH_NAMES = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

  const state = {
    initialized: false,
    entries: [],
    filteredEntries: [],
    selectedId: null,
    searchQuery: "",
    kabPaths: [],
    decansBySign: {},
    monthRefsBySignId: new Map(),
    cubePlacementBySignId: new Map()
  };

  // ── Elements ──────────────────────────────────────────────────────────
  function getElements() {
    return {
      listEl:        document.getElementById("zodiac-sign-list"),
      countEl:       document.getElementById("zodiac-sign-count"),
      searchEl:      document.getElementById("zodiac-search-input"),
      searchClearEl: document.getElementById("zodiac-search-clear"),
      detailNameEl:  document.getElementById("zodiac-detail-name"),
      detailSubEl:   document.getElementById("zodiac-detail-sub"),
      detailBodyEl:  document.getElementById("zodiac-detail-body")
    };
  }

  // ── Normalise ─────────────────────────────────────────────────────────
  function norm(s) {
    return String(s || "").toLowerCase().replace(/[^a-z0-9 ]/g, "").trim();
  }

  function cap(s) {
    return String(s || "").charAt(0).toUpperCase() + String(s || "").slice(1);
  }

  function buildSearchText(sign) {
    return norm([
      sign.name?.en, sign.meaning?.en, sign.elementId, sign.quadruplicity,
      sign.planetId, sign.id
    ].join(" "));
  }

  function formatDateRange(rulesFrom) {
    if (!Array.isArray(rulesFrom) || rulesFrom.length < 2) return "—";
    const [from, to] = rulesFrom;
    const fMonth = MONTH_NAMES[(from[0] || 1) - 1];
    const tMonth = MONTH_NAMES[(to[0] || 1) - 1];
    return `${fMonth} ${from[1]} – ${tMonth} ${to[1]}`;
  }

  function buildMonthReferencesBySign(referenceData) {
    const map = new Map();
    const months = Array.isArray(referenceData?.calendarMonths) ? referenceData.calendarMonths : [];
    const holidays = Array.isArray(referenceData?.celestialHolidays) ? referenceData.celestialHolidays : [];
    const signs = Array.isArray(referenceData?.signs) ? referenceData.signs : [];
    const monthById = new Map(months.map((month) => [month.id, month]));
    const monthByOrder = new Map(
      months
        .filter((month) => Number.isFinite(Number(month?.order)))
        .map((month) => [Number(month.order), month])
    );

    function parseMonthDay(value) {
      const [month, day] = String(value || "").split("-").map((part) => Number(part));
      if (!Number.isFinite(month) || !Number.isFinite(day)) {
        return null;
      }
      return { month, day };
    }

    function monthOrdersInRange(startMonth, endMonth) {
      const orders = [];
      let cursor = startMonth;
      let guard = 0;

      while (guard < 13) {
        orders.push(cursor);
        if (cursor === endMonth) {
          break;
        }
        cursor = cursor === 12 ? 1 : cursor + 1;
        guard += 1;
      }

      return orders;
    }

    function pushRef(signId, month) {
      const key = String(signId || "").trim().toLowerCase();
      if (!key || !month?.id) {
        return;
      }

      if (!map.has(key)) {
        map.set(key, []);
      }

      const rows = map.get(key);
      if (rows.some((entry) => entry.id === month.id)) {
        return;
      }

      rows.push({
        id: month.id,
        name: month.name || month.id,
        order: Number.isFinite(Number(month.order)) ? Number(month.order) : 999
      });
    }

    months.forEach((month) => {
      pushRef(month?.associations?.zodiacSignId, month);
      const events = Array.isArray(month?.events) ? month.events : [];
      events.forEach((event) => {
        pushRef(event?.associations?.zodiacSignId, month);
      });
    });

    holidays.forEach((holiday) => {
      const month = monthById.get(holiday?.monthId);
      if (!month) {
        return;
      }
      pushRef(holiday?.associations?.zodiacSignId, month);
    });

    // Structural month coverage from sign date ranges (e.g., Scorpio spans Oct+Nov).
    signs.forEach((sign) => {
      const start = parseMonthDay(sign?.start);
      const end = parseMonthDay(sign?.end);
      if (!start || !end || !sign?.id) {
        return;
      }

      monthOrdersInRange(start.month, end.month).forEach((monthOrder) => {
        const month = monthByOrder.get(monthOrder);
        if (month) {
          pushRef(sign.id, month);
        }
      });
    });

    map.forEach((rows, key) => {
      rows.sort((left, right) => left.order - right.order || left.name.localeCompare(right.name));
      map.set(key, rows);
    });

    return map;
  }

  function buildCubeSignPlacements(magickDataset) {
    const placements = new Map();
    const cube = magickDataset?.grouped?.kabbalah?.cube || {};
    const walls = Array.isArray(cube?.walls)
      ? cube.walls
      : [];
    const edges = Array.isArray(cube?.edges)
      ? cube.edges
      : [];
    const paths = Array.isArray(magickDataset?.grouped?.kabbalah?.["kabbalah-tree"]?.paths)
      ? magickDataset.grouped.kabbalah["kabbalah-tree"].paths
      : [];

    function normalizeLetterId(value) {
      const key = String(value || "").toLowerCase().replace(/[^a-z]/g, "").trim();
      const aliases = {
        aleph: "alef",
        beth: "bet",
        zain: "zayin",
        cheth: "het",
        chet: "het",
        daleth: "dalet",
        teth: "tet",
        peh: "pe",
        tzaddi: "tsadi",
        tzadi: "tsadi",
        tzade: "tsadi",
        tsaddi: "tsadi",
        qoph: "qof",
        taw: "tav",
        tau: "tav"
      };
      return aliases[key] || key;
    }

    function edgeWalls(edge) {
      const explicitWalls = Array.isArray(edge?.walls)
        ? edge.walls.map((wallId) => String(wallId || "").trim().toLowerCase()).filter(Boolean)
        : [];

      if (explicitWalls.length >= 2) {
        return explicitWalls.slice(0, 2);
      }

      return String(edge?.id || "")
        .trim()
        .toLowerCase()
        .split("-")
        .map((wallId) => wallId.trim())
        .filter(Boolean)
        .slice(0, 2);
    }

    function edgeLabel(edge) {
      const explicitName = String(edge?.name || "").trim();
      if (explicitName) {
        return explicitName;
      }
      return edgeWalls(edge)
        .map((part) => cap(part))
        .join(" ");
    }

    function resolveCubeDirectionLabel(wallId, edge) {
      const normalizedWallId = String(wallId || "").trim().toLowerCase();
      const edgeId = String(edge?.id || "").trim().toLowerCase();
      if (!normalizedWallId || !edgeId) {
        return "";
      }

      const cubeUi = window.CubeSectionUi;
      if (cubeUi && typeof cubeUi.getEdgeDirectionLabelForWall === "function") {
        const directionLabel = String(cubeUi.getEdgeDirectionLabelForWall(normalizedWallId, edgeId) || "").trim();
        if (directionLabel) {
          return directionLabel;
        }
      }

      return edgeLabel(edge);
    }

    const wallById = new Map(
      walls.map((wall) => [String(wall?.id || "").trim().toLowerCase(), wall])
    );

    const pathByLetterId = new Map(
      paths
        .map((path) => [normalizeLetterId(path?.hebrewLetter?.transliteration), path])
        .filter(([letterId]) => Boolean(letterId))
    );

    edges.forEach((edge) => {
      const letterId = normalizeLetterId(edge?.hebrewLetterId || edge?.associations?.hebrewLetterId);
      const path = pathByLetterId.get(letterId) || null;
      const signId = path?.astrology?.type === "zodiac"
        ? String(path?.astrology?.name || "").trim().toLowerCase()
        : "";

      if (!signId || placements.has(signId)) {
        return;
      }

      const wallsForEdge = edgeWalls(edge);
      const primaryWallId = wallsForEdge[0] || "";
      const primaryWall = wallById.get(primaryWallId);

      placements.set(signId, {
        wallId: primaryWallId,
        edgeId: String(edge?.id || "").trim().toLowerCase(),
        wallName: primaryWall?.name || cap(primaryWallId || "wall"),
        edgeName: resolveCubeDirectionLabel(primaryWallId, edge)
      });
    });

    return placements;
  }

  function cubePlacementLabel(placement) {
    const wallName = placement?.wallName || "Wall";
    const edgeName = placement?.edgeName || "Direction";
    return `Cube: ${wallName} Wall - ${edgeName}`;
  }

  // ── List ──────────────────────────────────────────────────────────────
  function applyFilter() {
    const q = norm(state.searchQuery);
    state.filteredEntries = q
      ? state.entries.filter((s) => buildSearchText(s).includes(q))
      : [...state.entries];
  }

  function renderList(els) {
    if (!els.listEl) return;
    els.listEl.innerHTML = "";
    state.filteredEntries.forEach((sign) => {
      const active = sign.id === state.selectedId;
      const el = document.createElement("div");
      el.className = "planet-list-item" + (active ? " is-selected" : "");
      el.setAttribute("role", "option");
      el.setAttribute("aria-selected", active ? "true" : "false");
      el.dataset.id = sign.id;

      const elemStyle = ELEMENT_STYLE[sign.elementId] || {};
      el.innerHTML = `
        <div class="zod-list-row">
          <span class="zod-list-symbol">${sign.symbol || "?"}</span>
          <span class="planet-list-name">${sign.name?.en || sign.id}</span>
          <span class="zod-list-elem ${elemStyle.badge || ""}">${elemStyle.emoji || ""}</span>
        </div>
        <div class="planet-list-meta">${cap(sign.elementId)} · ${cap(sign.quadruplicity)} · ${cap(sign.planetId)}</div>
      `;
      el.addEventListener("click", () => { selectById(sign.id, els); });
      els.listEl.appendChild(el);
    });

    if (els.countEl) {
      els.countEl.textContent = state.searchQuery
        ? `${state.filteredEntries.length} of ${state.entries.length} signs`
        : `${state.entries.length} signs`;
    }
  }

  // ── Detail ────────────────────────────────────────────────────────────
  function renderDetail(sign, els) {
    if (!els.detailNameEl) return;

    const elemStyle = ELEMENT_STYLE[sign.elementId] || {};
    const polarity  = ["fire", "air"].includes(sign.elementId) ? "Masculine / Positive" : "Feminine / Negative";
    const kabPath   = state.kabPaths.find(
      (p) => p.astrology?.type === "zodiac" &&
             p.astrology?.name?.toLowerCase() === sign.id
    );
    const decans    = state.decansBySign[sign.id] || [];
    const monthRefs = state.monthRefsBySignId.get(String(sign.id || "").toLowerCase()) || [];
    const cubePlacement = state.cubePlacementBySignId.get(String(sign.id || "").toLowerCase()) || null;

    // Heading
    els.detailNameEl.textContent = sign.symbol || sign.id;
    els.detailSubEl.textContent  = `${sign.name?.en || ""} — ${sign.meaning?.en || ""}`;

    const sections = [];

    // ── Sign Details ──────────────────────────────────────────────────
    const elemBadge = `<span class="zod-badge ${elemStyle.badge || ""}">${elemStyle.emoji || ""} ${cap(sign.elementId)}</span>`;
    const quadBadge = `<span class="zod-badge zod-badge--quad">${cap(sign.quadruplicity)}</span>`;
    sections.push(`<div class="planet-meta-card">
      <strong>Sign Details</strong>
      <div class="planet-text">
        <dl class="alpha-dl">
          <dt>Symbol</dt><dd>${sign.symbol || "—"}</dd>
          <dt>Meaning</dt><dd>${sign.meaning?.en || "—"}</dd>
          <dt>Element</dt><dd>${elemBadge}</dd>
          <dt>Modality</dt><dd>${quadBadge}</dd>
          <dt>Polarity</dt><dd>${polarity}</dd>
          <dt>Dates</dt><dd>${formatDateRange(sign.rulesFrom)}</dd>
          <dt>Position</dt><dd>#${sign.no} of 12</dd>
        </dl>
      </div>
    </div>`);

    // ── Ruling Planet ─────────────────────────────────────────────────
    const planetSym = PLANET_SYMBOLS[sign.planetId] || "";
    sections.push(`<div class="planet-meta-card">
      <strong>Ruling Planet</strong>
      <div class="planet-text">
        <p style="font-size:22px;margin:0 0 6px">${planetSym} ${cap(sign.planetId)}</p>
        <button class="alpha-nav-btn" data-nav="planet" data-planet-id="${sign.planetId}">
          View ${cap(sign.planetId)} ↗
        </button>
      </div>
    </div>`);

    if (cubePlacement) {
      sections.push(`<div class="planet-meta-card">
        <strong>Cube of Space</strong>
        <div class="planet-text">This sign appears in Cube edge correspondences.</div>
        <div class="alpha-nav-btns">
          <button class="alpha-nav-btn" data-nav="cube-sign" data-sign-id="${sign.id}" data-wall-id="${cubePlacement.wallId}" data-edge-id="${cubePlacement.edgeId}">
            ${cubePlacementLabel(cubePlacement)} ↗
          </button>
        </div>
      </div>`);
    }

    // ── Kabbalah Path + Trump ─────────────────────────────────────────
    if (kabPath) {
      const hl = kabPath.hebrewLetter || {};
      sections.push(`<div class="planet-meta-card">
        <strong>Kabbalah & Major Arcana</strong>
        <div class="planet-text">
          <div style="display:flex;align-items:center;gap:12px;margin-bottom:8px">
            <span class="zod-hebrew-glyph">${hl.char || ""}</span>
            <div>
              <div style="font-weight:600">${hl.transliteration || ""} (${hl.meaning || ""})</div>
              <div class="planet-list-meta">${cap(hl.letterType || "")} letter · Path ${kabPath.pathNumber}</div>
            </div>
          </div>
          <dl class="alpha-dl" style="margin-bottom:8px">
            <dt>Trump Card</dt><dd>${kabPath.tarot?.card || "—"}</dd>
            <dt>Intelligence</dt><dd>${kabPath.intelligence || "—"}</dd>
          </dl>
          <div class="alpha-nav-btns">
            <button class="alpha-nav-btn" data-nav="kab-path" data-path-number="${kabPath.pathNumber}">
              Kabbalah Path ${kabPath.pathNumber} ↗
            </button>
            <button class="alpha-nav-btn" data-nav="trump" data-trump-number="${kabPath.tarot?.trumpNumber}">
              ${kabPath.tarot?.card || "Tarot Card"} ↗
            </button>
          </div>
        </div>
      </div>`);
    }

    // ── Decans & Minor Arcana ─────────────────────────────────────────
    if (decans.length) {
      const decanRows = decans.map((d) => {
        const ord = ["1st","2nd","3rd"][d.index - 1] || d.index;
        const sym = PLANET_SYMBOLS[d.rulerPlanetId] || "";
        return `<div class="zod-decan-row">
          <span class="zod-decan-ord">${ord}</span>
          <span class="zod-decan-planet">${sym} ${cap(d.rulerPlanetId)}</span>
          <button class="zod-decan-card-btn" data-nav="tarot-card" data-card-name="${d.tarotMinorArcana}">
            ${d.tarotMinorArcana} ↗
          </button>
        </div>`;
      }).join("");
      sections.push(`<div class="planet-meta-card">
        <strong>Decans & Minor Arcana</strong>
        <div class="planet-text">${decanRows}</div>
      </div>`);
    }

    if (monthRefs.length) {
      const monthButtons = monthRefs.map((month) =>
        `<button class="alpha-nav-btn" data-nav="calendar-month" data-month-id="${month.id}">${month.name} ↗</button>`
      ).join("");

      sections.push(`<div class="planet-meta-card">
        <strong>Calendar Months</strong>
        <div class="planet-text">Month correspondences linked to ${sign.name?.en || sign.id}.</div>
        <div class="alpha-nav-btns">${monthButtons}</div>
      </div>`);
    }

    // ── Kabbalah extras ───────────────────────────────────────────────
    if (sign.tribeOfIsraelId || sign.tetragrammatonPermutation) {
      sections.push(`<div class="planet-meta-card">
        <strong>Kabbalah Correspondences</strong>
        <div class="planet-text">
          <dl class="alpha-dl">
            ${sign.tribeOfIsraelId ? `<dt>Tribe of Israel</dt><dd>${cap(sign.tribeOfIsraelId)}</dd>` : ""}
            ${sign.tetragrammatonPermutation ? `<dt>Tetragrammaton</dt><dd class="zod-tetra">${sign.tetragrammatonPermutation}</dd>` : ""}
          </dl>
        </div>
      </div>`);
    }

    els.detailBodyEl.innerHTML = `<div class="planet-meta-grid">${sections.join("")}</div>`;

    // Attach button listeners
    els.detailBodyEl.querySelectorAll("[data-nav]").forEach((btn) => {
      btn.addEventListener("click", () => {
        const nav = btn.dataset.nav;
        if (nav === "planet") {
          document.dispatchEvent(new CustomEvent("nav:planet", {
            detail: { planetId: btn.dataset.planetId }
          }));
        } else if (nav === "kab-path") {
          document.dispatchEvent(new CustomEvent("tarot:view-kab-path", {
            detail: { pathNumber: Number(btn.dataset.pathNumber) }
          }));
        } else if (nav === "trump") {
          document.dispatchEvent(new CustomEvent("kab:view-trump", {
            detail: { trumpNumber: Number(btn.dataset.trumpNumber) }
          }));
        } else if (nav === "tarot-card") {
          document.dispatchEvent(new CustomEvent("nav:tarot-trump", {
            detail: { cardName: btn.dataset.cardName }
          }));
        } else if (nav === "calendar-month") {
          document.dispatchEvent(new CustomEvent("nav:calendar-month", {
            detail: { monthId: btn.dataset.monthId }
          }));
        } else if (nav === "cube-sign") {
          document.dispatchEvent(new CustomEvent("nav:cube", {
            detail: {
              signId: btn.dataset.signId,
              wallId: btn.dataset.wallId,
              edgeId: btn.dataset.edgeId
            }
          }));
        }
      });
    });
  }

  function resetDetail(els) {
    if (els.detailNameEl) els.detailNameEl.textContent = "--";
    if (els.detailSubEl)  els.detailSubEl.textContent  = "Select a sign to explore";
    if (els.detailBodyEl) els.detailBodyEl.innerHTML   = "";
  }

  // ── Selection ─────────────────────────────────────────────────────────
  function selectById(id, els) {
    const sign = state.entries.find((s) => s.id === id);
    if (!sign) return;
    state.selectedId = id;
    renderList(els);
    renderDetail(sign, els);
  }

  // ── Public select (for incoming navigation) ───────────────────────────
  function selectBySignId(signId) {
    const els = getElements();
    if (!state.initialized) return;
    const sign = state.entries.find((s) => s.id === signId);
    if (sign) selectById(signId, els);
  }

  // ── Init ───────────────────────────────────────────────────────────────
  function ensureZodiacSection(referenceData, magickDataset) {
    state.monthRefsBySignId = buildMonthReferencesBySign(referenceData);
    state.cubePlacementBySignId = buildCubeSignPlacements(magickDataset);

    if (state.initialized) {
      const els = getElements();
      const current = state.entries.find((entry) => entry.id === state.selectedId);
      if (current) {
        renderDetail(current, els);
      }
      return;
    }
    state.initialized = true;

    const zodiacObj = magickDataset?.grouped?.astrology?.zodiac || {};
    state.entries = Object.values(zodiacObj).sort((a, b) => (a.no || 0) - (b.no || 0));

    const kabTree = magickDataset?.grouped?.kabbalah?.["kabbalah-tree"];
    state.kabPaths = Array.isArray(kabTree?.paths) ? kabTree.paths : [];

    state.decansBySign = referenceData?.decansBySign || {};

    const els = getElements();
    applyFilter();
    renderList(els);

    if (state.entries.length > 0) {
      selectById(state.entries[0].id, els);
    }

    // Search
    if (els.searchEl) {
      els.searchEl.addEventListener("input", () => {
        state.searchQuery = els.searchEl.value;
        if (els.searchClearEl) els.searchClearEl.disabled = !state.searchQuery;
        applyFilter();
        renderList(els);
        if (!state.filteredEntries.some((s) => s.id === state.selectedId)) {
          if (state.filteredEntries.length > 0) {
            selectById(state.filteredEntries[0].id, els);
          } else {
            state.selectedId = null;
            resetDetail(els);
          }
        }
      });
    }
    if (els.searchClearEl) {
      els.searchClearEl.addEventListener("click", () => {
        state.searchQuery = "";
        if (els.searchEl) els.searchEl.value = "";
        els.searchClearEl.disabled = true;
        applyFilter();
        renderList(els);
        if (state.entries.length > 0) selectById(state.entries[0].id, els);
      });
    }
  }

  window.ZodiacSectionUi = {
    ensureZodiacSection,
    selectBySignId
  };
})();