// The Family page — Karpman Drama Triangle.
//
// Three roles in the unconscious family dance (Karpman, 1968): Victim,
// Rescuer, Persecutor. People rotate between them — the rescuer who
// gets tired becomes the persecutor; the persecutor who gets caught
// plays the victim; the victim who is helped becomes the rescuer's
// rescuer. Closed loop, generations long.
//
// Click any role to see what you actually do there, what you fear,
// what it costs. Toggle to the Empowerment Triangle (Creator / Coach
// / Challenger) — the same three positions held consciously.

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

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

  const ROLES = {
    drama: [
      { id: "victim",     color: "#3b82f6", x: 200, y: 320 },
      { id: "rescuer",    color: "#10b981", x:  80, y: 120 },
      { id: "persecutor", color: "#ef4444", x: 320, y: 120 }
    ],
    empower: [
      { id: "creator",    color: "#06b6d4", x: 200, y: 320 },
      { id: "coach",      color: "#a855f7", x:  80, y: 120 },
      { id: "challenger", color: "#f59e0b", x: 320, y: 120 }
    ]
  };

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

  let mode = "drama"; // "drama" | "empower"
  let selected = null;

  function buildTriangle() {
    while (svg.firstChild) svg.removeChild(svg.firstChild);
    const roles = ROLES[mode];
    // Triangle edges (cycle showing role-switching).
    const edges = [
      { from: 0, to: 1 },
      { from: 1, to: 2 },
      { from: 2, to: 0 }
    ];
    edges.forEach((e) => {
      const a = roles[e.from], b = roles[e.to];
      const line = document.createElementNS(SVG_NS, "line");
      line.setAttribute("x1", a.x); line.setAttribute("y1", a.y);
      line.setAttribute("x2", b.x); line.setAttribute("y2", b.y);
      line.setAttribute("class", "kp-edge");
      svg.appendChild(line);
    });
    // Nodes.
    roles.forEach((r) => {
      const g = document.createElementNS(SVG_NS, "g");
      g.setAttribute("class", "kp-node");
      g.dataset.role = r.id;
      const circle = document.createElementNS(SVG_NS, "circle");
      circle.setAttribute("cx", r.x); circle.setAttribute("cy", r.y);
      circle.setAttribute("r", 52);
      circle.setAttribute("fill", r.color);
      circle.setAttribute("class", "kp-node-circle");
      g.appendChild(circle);
      const text = document.createElementNS(SVG_NS, "text");
      text.setAttribute("x", r.x); text.setAttribute("y", r.y);
      text.setAttribute("text-anchor", "middle");
      text.setAttribute("dominant-baseline", "middle");
      text.setAttribute("class", "kp-node-label");
      text.setAttribute("data-i18n", "page.family.kp_" + mode + "_" + r.id + "_name");
      text.textContent = r.id;
      g.appendChild(text);
      svg.appendChild(g);
    });
  }

  function showRole(roleId, color) {
    detailsEl.innerHTML =
      '<div class="kp-d-head" style="border-color:' + color + '">' +
        '<span class="kp-d-name" style="color:' + color + '">'
          + t("page.family.kp_" + mode + "_" + roleId + "_name", roleId) + '</span>' +
      '</div>' +
      '<div class="kp-d-block"><span class="kp-d-label">'
        + t("page.family.kp_" + mode + "_does", "What you do here") + '</span>'
        + '<span class="kp-d-body">' + t("page.family.kp_" + mode + "_" + roleId + "_does", "") + '</span></div>' +
      '<div class="kp-d-block"><span class="kp-d-label">'
        + t("page.family.kp_" + mode + "_fear", "What you fear") + '</span>'
        + '<span class="kp-d-body">' + t("page.family.kp_" + mode + "_" + roleId + "_fear", "") + '</span></div>' +
      '<div class="kp-d-block"><span class="kp-d-label">'
        + t("page.family.kp_" + mode + "_cost", "What it costs") + '</span>'
        + '<span class="kp-d-body">' + t("page.family.kp_" + mode + "_" + roleId + "_cost", "") + '</span></div>';
    detailsEl.classList.add("visible");
  }

  svg.addEventListener("click", (e) => {
    const node = e.target.closest(".kp-node");
    if (!node) return;
    const id = node.dataset.role;
    if (selected) selected.classList.remove("active");
    selected = node; node.classList.add("active");
    const r = ROLES[mode].find((x) => x.id === id);
    showRole(id, r.color);
  });
  toggleEls.forEach((tg) => tg.addEventListener("click", () => {
    mode = tg.dataset.mode;
    toggleEls.forEach((t) => t.classList.toggle("active", t.dataset.mode === mode));
    selected = null;
    detailsEl.classList.remove("visible");
    buildTriangle();
  }));
  window.addEventListener("langchange", () => {
    buildTriangle();
    if (selected) {
      const id = selected.dataset.role;
      const r = ROLES[mode].find((x) => x.id === id);
      const node = svg.querySelector('.kp-node[data-role="' + id + '"]');
      if (node) { selected = node; node.classList.add("active"); }
      showRole(id, r.color);
    }
  });

  buildTriangle();
})();
