// The Religion page — Religion Family Tree.
//
// A tree showing the world's major religious traditions tracing back to
// a common root: direct human experience of the sacred. The branches
// are the institutional forms; the root is the experience all of them
// originally pointed at. Click any branch to see what it preserved
// from the source, and what it institutionalized away.

(function () {
  const root = document.getElementById("religiontree");
  if (!root) return;

  const t = (k, fb) => (window.i18n && window.i18n.t) ? window.i18n.t(k, fb) : fb;

  // Tree layout — simple hand-placed nodes.
  // SVG viewBox 0 0 800 520. Root at bottom-center, branches up.
  const NODES = [
    // id, label-key, x, y, color, depth (0=root)
    { id: "root",       x: 400, y: 480, color: "#fde047", depth: 0 },
    // First branches: the great traditions.
    { id: "abrahamic",  x: 150, y: 360, color: "#3b82f6", depth: 1, parent: "root" },
    { id: "dharmic",    x: 380, y: 360, color: "#a855f7", depth: 1, parent: "root" },
    { id: "taoic",      x: 580, y: 360, color: "#10b981", depth: 1, parent: "root" },
    { id: "indigenous", x: 720, y: 360, color: "#f59e0b", depth: 1, parent: "root" },
    // Abrahamic children
    { id: "judaism",    x:  60, y: 220, color: "#60a5fa", depth: 2, parent: "abrahamic" },
    { id: "christianity", x: 150, y: 220, color: "#60a5fa", depth: 2, parent: "abrahamic" },
    { id: "islam",      x: 240, y: 220, color: "#60a5fa", depth: 2, parent: "abrahamic" },
    // Dharmic children
    { id: "hinduism",   x: 310, y: 220, color: "#c084fc", depth: 2, parent: "dharmic" },
    { id: "buddhism",   x: 380, y: 220, color: "#c084fc", depth: 2, parent: "dharmic" },
    { id: "jainism",    x: 440, y: 220, color: "#c084fc", depth: 2, parent: "dharmic" },
    { id: "sikhism",    x: 500, y: 220, color: "#c084fc", depth: 2, parent: "dharmic" },
    // Taoic children
    { id: "taoism",     x: 560, y: 220, color: "#6ee7b7", depth: 2, parent: "taoic" },
    { id: "confucianism", x: 620, y: 220, color: "#6ee7b7", depth: 2, parent: "taoic" },
    // Indigenous children
    { id: "shamanism",  x: 700, y: 220, color: "#fcd34d", depth: 2, parent: "indigenous" },
    { id: "animism",    x: 760, y: 220, color: "#fcd34d", depth: 2, parent: "indigenous" }
  ];

  const svg = root.querySelector(".rt-svg");
  const detailsEl = root.querySelector(".rt-details");
  const SVG_NS = "http://www.w3.org/2000/svg";

  function nodeById(id) { return NODES.find((n) => n.id === id); }

  // Edges first (under the nodes).
  NODES.forEach((n) => {
    if (!n.parent) return;
    const p = nodeById(n.parent);
    const path = document.createElementNS(SVG_NS, "path");
    // Curved line from parent up to child.
    const midY = (p.y + n.y) / 2;
    path.setAttribute("d",
      "M " + p.x + " " + p.y +
      " C " + p.x + " " + midY + ", " + n.x + " " + midY + ", " + n.x + " " + n.y);
    path.setAttribute("class", "rt-edge");
    svg.appendChild(path);
  });

  // Nodes.
  NODES.forEach((n) => {
    const g = document.createElementNS(SVG_NS, "g");
    g.setAttribute("class", "rt-node rt-node-d" + n.depth);
    g.dataset.id = n.id;
    const r = n.depth === 0 ? 36 : (n.depth === 1 ? 28 : 22);
    const c = document.createElementNS(SVG_NS, "circle");
    c.setAttribute("cx", n.x); c.setAttribute("cy", n.y);
    c.setAttribute("r", r);
    c.setAttribute("fill", n.color);
    c.setAttribute("class", "rt-node-circle");
    g.appendChild(c);
    const text = document.createElementNS(SVG_NS, "text");
    text.setAttribute("x", n.x);
    text.setAttribute("y", n.y);
    text.setAttribute("text-anchor", "middle");
    text.setAttribute("dominant-baseline", "middle");
    text.setAttribute("class", "rt-node-label");
    text.setAttribute("data-i18n", "page.religion.rt_" + n.id + "_name");
    text.textContent = n.id;
    g.appendChild(text);
    svg.appendChild(g);
  });

  let selected = null;
  function show(id, color) {
    detailsEl.innerHTML =
      '<div class="rt-d-head" style="border-color:' + color + '">' +
        '<span class="rt-d-name" style="color:' + color + '">'
          + t("page.religion.rt_" + id + "_name", id) + '</span>' +
      '</div>' +
      '<div class="rt-d-block"><span class="rt-d-label">'
        + t("page.religion.rt_preserved", "What it preserved from the source") + '</span>'
        + '<span class="rt-d-body">' + t("page.religion.rt_" + id + "_preserved", "") + '</span></div>' +
      '<div class="rt-d-block"><span class="rt-d-label">'
        + t("page.religion.rt_institutionalized", "What it institutionalized away") + '</span>'
        + '<span class="rt-d-body">' + t("page.religion.rt_" + id + "_institutionalized", "") + '</span></div>';
    detailsEl.classList.add("visible");
  }
  svg.addEventListener("click", (e) => {
    const node = e.target.closest(".rt-node");
    if (!node) return;
    if (selected) selected.classList.remove("active");
    if (node === selected) {
      selected = null;
      detailsEl.classList.remove("visible");
      return;
    }
    selected = node; node.classList.add("active");
    const n = nodeById(node.dataset.id);
    show(n.id, n.color);
  });
  window.addEventListener("langchange", () => {
    svg.querySelectorAll("[data-i18n]").forEach((el) => {
      const k = el.getAttribute("data-i18n");
      const v = window.i18n && window.i18n.t ? window.i18n.t(k, null) : null;
      if (v && v !== k) el.innerHTML = v;
    });
    if (selected) {
      const n = nodeById(selected.dataset.id);
      show(n.id, n.color);
    }
  });
})();
