// The Body page — biofield + aura layers + chakras.
//
// A stylized human silhouette wrapped in 5 concentric energy layers:
//   • Physical     — the dense body itself
//   • Etheric      — the energy template that maintains physical form
//   • Emotional    — where feelings live, colors shift with state
//   • Mental       — where thoughts, beliefs, programs run
//   • Spiritual    — soul presence, connection to source
//
// Plus 7 chakras along the central channel, each clickable.
// Layers and chakras toggle independently; click any element for its
// description.

(function () {
  const root = document.getElementById("biofield");
  if (!root) return;
  const view = document.querySelector('.view[data-view="body"]');
  if (!view) return;

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

  const LAYERS = [
    // Order matters: spiritual first (outermost), drawn first so inner layers
    // are visible on top.
    { id: "spiritual", color: "#a78bfa", radius: 175 },
    { id: "mental",    color: "#fcd34d", radius: 150 },
    { id: "emotional", color: "#f472b6", radius: 125 },
    { id: "etheric",   color: "#7dd3fc", radius: 105 },
    { id: "physical",  color: "#fbbf24", radius: 90  } // halo around the body itself
  ];

  // Chakra positions on the silhouette (y in SVG coords, 0..600).
  const CHAKRAS = [
    { id: "crown",    y: 60,  color: "#ddd6fe" },
    { id: "third_eye",y: 95,  color: "#7c3aed" },
    { id: "throat",   y: 145, color: "#3b82f6" },
    { id: "heart",    y: 215, color: "#10b981" },
    { id: "solar",    y: 290, color: "#f59e0b" },
    { id: "sacral",   y: 345, color: "#fb923c" },
    { id: "root",     y: 400, color: "#dc2626" }
  ];

  const svg       = root.querySelector(".bf-svg");
  const layersEl  = root.querySelector(".bf-layers");
  const chakrasEl = root.querySelector(".bf-chakras");
  const detailsEl = root.querySelector(".bf-details");
  const toggleEls = root.querySelectorAll(".bf-toggle");

  const SVG_NS = "http://www.w3.org/2000/svg";

  // Build aura ellipses.
  LAYERS.forEach((L) => {
    const ell = document.createElementNS(SVG_NS, "ellipse");
    ell.setAttribute("cx", "200");
    ell.setAttribute("cy", "250");
    ell.setAttribute("rx", L.radius);
    ell.setAttribute("ry", L.radius * 1.55);
    ell.setAttribute("class", "bf-aura bf-aura-" + L.id);
    ell.setAttribute("data-layer", L.id);
    ell.setAttribute("fill", "url(#bf-grad-" + L.id + ")");
    layersEl.appendChild(ell);
  });

  // Build chakra dots.
  CHAKRAS.forEach((c) => {
    const dot = document.createElementNS(SVG_NS, "circle");
    dot.setAttribute("cx", "200");
    dot.setAttribute("cy", c.y);
    dot.setAttribute("r", "9");
    dot.setAttribute("class", "bf-chakra bf-chakra-" + c.id);
    dot.setAttribute("data-chakra", c.id);
    dot.setAttribute("fill", c.color);
    chakrasEl.appendChild(dot);
  });

  // Build gradient defs (one per layer).
  let defs = svg.querySelector("defs");
  if (!defs) {
    defs = document.createElementNS(SVG_NS, "defs");
    svg.insertBefore(defs, svg.firstChild);
  }
  LAYERS.forEach((L) => {
    const grad = document.createElementNS(SVG_NS, "radialGradient");
    grad.setAttribute("id", "bf-grad-" + L.id);
    grad.setAttribute("cx", "50%");
    grad.setAttribute("cy", "50%");
    grad.setAttribute("r", "50%");
    const stops = [
      { off: "0%",   col: L.color, op: "0" },
      { off: "55%",  col: L.color, op: "0.05" },
      { off: "78%",  col: L.color, op: "0.18" },
      { off: "100%", col: L.color, op: "0" }
    ];
    stops.forEach((s) => {
      const stop = document.createElementNS(SVG_NS, "stop");
      stop.setAttribute("offset", s.off);
      stop.setAttribute("stop-color", s.col);
      stop.setAttribute("stop-opacity", s.op);
      grad.appendChild(stop);
    });
    defs.appendChild(grad);
  });

  // Toggle layer / chakra visibility. Each chakra has its own toggle now;
  // the data-target is either an aura layer id or "chakra-<id>".
  function applyToggles() {
    toggleEls.forEach((tg) => {
      const target = tg.dataset.target;
      const on = tg.classList.contains("active");
      if (target.indexOf("chakra-") === 0) {
        const id = target.slice("chakra-".length);
        const dot = svg.querySelector('.bf-chakra-' + id);
        if (dot) dot.style.display = on ? "" : "none";
      } else {
        const ell = svg.querySelector('.bf-aura-' + target);
        if (ell) ell.style.display = on ? "" : "none";
      }
    });
  }
  toggleEls.forEach((tg) => tg.addEventListener("click", () => {
    tg.classList.toggle("active");
    applyToggles();
  }));

  // Click handlers for layers + chakras + body itself.
  let selected = null;
  function showInfo(kind, id, color) {
    detailsEl.innerHTML =
      '<div class="bf-d-head" style="border-color:' + color + '">' +
        '<span class="bf-d-name" style="color:' + color + '">'
          + t("page.body.bf_" + kind + "_" + id, id) + '</span>' +
        '<span class="bf-d-tag">' + t("page.body.bf_tag_" + kind, kind) + '</span>' +
      '</div>' +
      '<p class="bf-d-body">' + t("page.body.bf_desc_" + id, "") + '</p>';
    detailsEl.classList.add("visible");
  }
  function clearSelection() {
    if (selected) selected.classList.remove("active");
    selected = null;
    detailsEl.classList.remove("visible");
  }

  layersEl.addEventListener("click", (e) => {
    const el = e.target.closest(".bf-aura");
    if (!el) return;
    if (el === selected) { clearSelection(); return; }
    if (selected) selected.classList.remove("active");
    selected = el; el.classList.add("active");
    const id = el.dataset.layer;
    const L = LAYERS.find(x => x.id === id);
    showInfo("layer", id, L.color);
  });
  chakrasEl.addEventListener("click", (e) => {
    const el = e.target.closest(".bf-chakra");
    if (!el) return;
    if (el === selected) { clearSelection(); return; }
    if (selected) selected.classList.remove("active");
    selected = el; el.classList.add("active");
    const id = el.dataset.chakra;
    const C = CHAKRAS.find(x => x.id === id);
    showInfo("chakra", id, C.color);
  });

  window.addEventListener("langchange", () => {
    if (selected) {
      const id = selected.dataset.layer || selected.dataset.chakra;
      const kind = selected.dataset.layer ? "layer" : "chakra";
      const list = kind === "layer" ? LAYERS : CHAKRAS;
      const item = list.find(x => x.id === id);
      showInfo(kind, id, item.color);
    }
  });

  applyToggles();
})();
