// The Emotions page — interactive Plutchik wheel.
//
// 8 primary emotions arranged in a circle (joy, trust, fear, surprise,
// sadness, disgust, anger, anticipation). Each in 3 intensities (mild,
// moderate, intense) shown as 3 nested petals. Click any segment to
// read what the emotion is, what is underneath it, and what it is
// asking for.

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

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

  // 8 sectors with intensity scale.
  // Each row: id, color, intense, moderate, mild names (translation keys).
  const PETALS = [
    { id: "joy",          color: "#fde047", angle:    0 },
    { id: "trust",        color: "#86efac", angle:   45 },
    { id: "fear",         color: "#16a34a", angle:   90 },
    { id: "surprise",     color: "#67e8f9", angle:  135 },
    { id: "sadness",      color: "#60a5fa", angle:  180 },
    { id: "disgust",      color: "#c084fc", angle:  225 },
    { id: "anger",        color: "#f87171", angle:  270 },
    { id: "anticipation", color: "#fb923c", angle:  315 }
  ];
  // Intensity rings: 0 = innermost = most intense, 2 = outermost = mildest.
  const RINGS = [
    { idx: 0, label: "intense"  },
    { idx: 1, label: "moderate" },
    { idx: 2, label: "mild"     }
  ];

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

  const CX = 200, CY = 200;
  const R_MAX = 175;
  const R_MIN = 36;
  const RING_STEP = (R_MAX - R_MIN) / 3;

  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 segments: 8 petals × 3 rings = 24 segments.
  PETALS.forEach((p, pi) => {
    const startAngle = pi * 45 - 22.5;
    const endAngle   = pi * 45 + 22.5;
    RINGS.forEach((r) => {
      const rOuter = R_MAX - r.idx * RING_STEP;
      const rInner = rOuter - RING_STEP;
      const seg = document.createElementNS(SVG_NS, "path");
      seg.setAttribute("d", arcPath(rInner, rOuter, startAngle, endAngle));
      seg.setAttribute("fill", p.color);
      seg.setAttribute("class", "ew-seg ew-seg-" + r.label);
      seg.dataset.emotion = p.id;
      seg.dataset.intensity = r.label;
      svg.appendChild(seg);

      // Label centered in each segment.
      const labelR = (rInner + rOuter) / 2;
      const [lx, ly] = polar(CX, CY, labelR, pi * 45);
      const text = document.createElementNS(SVG_NS, "text");
      text.setAttribute("x", lx);
      text.setAttribute("y", ly);
      text.setAttribute("class", "ew-label");
      text.setAttribute("text-anchor", "middle");
      text.setAttribute("dominant-baseline", "middle");
      text.dataset.emotion = p.id;
      text.dataset.intensity = r.label;
      text.setAttribute("data-i18n", "page.emotions.ew_" + p.id + "_" + r.label);
      text.textContent = p.id + " · " + r.label;
      svg.appendChild(text);
    });
  });

  // Click handler.
  let selected = null;
  function showInfo(emotionId, intensity, color) {
    const nameKey = "page.emotions.ew_" + emotionId + "_" + intensity;
    detailsEl.innerHTML =
      '<div class="ew-d-head" style="border-color:' + color + '">' +
        '<span class="ew-d-name" style="color:' + color + '">'
          + t(nameKey, emotionId) + '</span>' +
        '<span class="ew-d-tag">' + t("page.emotions.ew_tag_" + intensity, intensity) + '</span>' +
      '</div>' +
      '<div class="ew-d-row"><span class="ew-d-label">'
        + t("page.emotions.ew_under", "What is underneath") + ':</span><span>'
        + t("page.emotions.ew_under_" + emotionId, "") + '</span></div>' +
      '<div class="ew-d-row"><span class="ew-d-label">'
        + t("page.emotions.ew_needs", "What it is asking for") + ':</span><span>'
        + t("page.emotions.ew_needs_" + emotionId, "") + '</span></div>';
    detailsEl.classList.add("visible");
  }
  svg.addEventListener("click", (e) => {
    const target = e.target.closest(".ew-seg, .ew-label");
    if (!target) return;
    const id = target.dataset.emotion;
    const intensity = target.dataset.intensity;
    const petal = PETALS.find(p => p.id === id);
    if (selected) selected.classList.remove("active");
    selected = svg.querySelector('.ew-seg[data-emotion="' + id + '"][data-intensity="' + intensity + '"]');
    if (selected) selected.classList.add("active");
    showInfo(id, intensity, petal.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 id = selected.dataset.emotion;
      const intensity = selected.dataset.intensity;
      const petal = PETALS.find(p => p.id === id);
      showInfo(id, intensity, petal.color);
    }
  });
})();
