// The Healing page — Modality Wheel.
//
// A wheel split into 6 slices for the major healing paradigms humans
// have ever used. Each slice opens to: what it actually heals well,
// what it ignores, the trap it falls into, when to use it. The point
// is integration — no single paradigm is whole, and pretending one is
// is the original mistake of medicine.

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

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

  const MODALITIES = [
    { id: "allopathic",  color: "#3b82f6" },
    { id: "herbal",      color: "#10b981" },
    { id: "energetic",   color: "#a855f7" },
    { id: "spiritual",   color: "#f59e0b" },
    { id: "nutritional", color: "#ec4899" },
    { id: "movement",    color: "#06b6d4" }
  ];

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

  const CX = 200, CY = 200;
  const R_OUTER = 175;
  const R_INNER = 50;

  function polar(cx, cy, r, deg) {
    const rad = (deg - 90) * Math.PI / 180;
    return [cx + r * Math.cos(rad), cy + r * Math.sin(rad)];
  }
  function arcPath(rInner, rOuter, deg1, deg2) {
    const [x1, y1] = polar(CX, CY, rOuter, deg1);
    const [x2, y2] = polar(CX, CY, rOuter, deg2);
    const [x3, y3] = polar(CX, CY, rInner, deg2);
    const [x4, y4] = polar(CX, CY, rInner, deg1);
    const large = (deg2 - deg1) > 180 ? 1 : 0;
    return "M " + x1 + " " + y1 +
      " A " + rOuter + " " + rOuter + " 0 " + large + " 1 " + x2 + " " + y2 +
      " L " + x3 + " " + y3 +
      " A " + rInner + " " + rInner + " 0 " + large + " 0 " + x4 + " " + y4 + " Z";
  }

  // Build 6 slices.
  const seg = 360 / MODALITIES.length;
  MODALITIES.forEach((M, i) => {
    const start = i * seg - 90 + 90; // start at top
    const end = start + seg;
    const path = document.createElementNS(SVG_NS, "path");
    path.setAttribute("d", arcPath(R_INNER, R_OUTER, start, end));
    path.setAttribute("fill", M.color);
    path.setAttribute("class", "md-slice");
    path.dataset.id = M.id;
    svg.appendChild(path);

    // Label at the middle of the slice.
    const labelR = (R_INNER + R_OUTER) / 2;
    const mid = (start + end) / 2;
    const [lx, ly] = polar(CX, CY, labelR, mid);
    const text = document.createElementNS(SVG_NS, "text");
    text.setAttribute("x", lx);
    text.setAttribute("y", ly);
    text.setAttribute("class", "md-slice-label");
    text.setAttribute("text-anchor", "middle");
    text.setAttribute("dominant-baseline", "middle");
    text.setAttribute("data-i18n", "page.healing.md_" + M.id + "_name");
    text.textContent = M.id;
    svg.appendChild(text);
  });

  let selected = null;
  function show(id, color) {
    detailsEl.innerHTML =
      '<div class="md-d-head" style="border-color:' + color + '">' +
        '<span class="md-d-name" style="color:' + color + '">'
          + t("page.healing.md_" + id + "_name", id) + '</span>' +
      '</div>' +
      '<div class="md-d-block"><span class="md-d-label">'
        + t("page.healing.md_heals", "What it heals well") + '</span>'
        + '<span class="md-d-body">' + t("page.healing.md_" + id + "_heals", "") + '</span></div>' +
      '<div class="md-d-block"><span class="md-d-label">'
        + t("page.healing.md_ignores", "What it ignores") + '</span>'
        + '<span class="md-d-body">' + t("page.healing.md_" + id + "_ignores", "") + '</span></div>' +
      '<div class="md-d-block"><span class="md-d-label">'
        + t("page.healing.md_trap", "The trap") + '</span>'
        + '<span class="md-d-body">' + t("page.healing.md_" + id + "_trap", "") + '</span></div>' +
      '<div class="md-d-block"><span class="md-d-label">'
        + t("page.healing.md_when", "When to use it") + '</span>'
        + '<span class="md-d-body">' + t("page.healing.md_" + id + "_when", "") + '</span></div>';
    detailsEl.classList.add("visible");
  }
  svg.addEventListener("click", (e) => {
    const slice = e.target.closest(".md-slice");
    if (!slice) return;
    if (selected) selected.classList.remove("active");
    if (slice === selected) {
      selected = null;
      detailsEl.classList.remove("visible");
      return;
    }
    selected = slice;
    slice.classList.add("active");
    const M = MODALITIES.find(x => x.id === slice.dataset.id);
    show(M.id, M.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 M = MODALITIES.find(x => x.id === selected.dataset.id);
      show(M.id, M.color);
    }
  });
})();
