// The Self page — The Onion.
//
// 8 concentric layers, each a label for something you call "yourself"
// but that is not the deepest you. Click the outermost ring to peel
// it away. Keep peeling — Job, Roles, Nationality, Opinions, Beliefs,
// Body, Mind, Name. What remains in the center is the only thing that
// was never taught to you. It is the only thing that is actually you.

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

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

  // Outer → inner. Last peel reveals "I AM" in the center.
  const LAYERS = [
    { id: "job",        color: "#0ea5e9" },
    { id: "roles",      color: "#10b981" },
    { id: "nationality",color: "#eab308" },
    { id: "opinions",   color: "#f97316" },
    { id: "beliefs",    color: "#ef4444" },
    { id: "body",       color: "#ec4899" },
    { id: "mind",       color: "#a855f7" },
    { id: "name",       color: "#c4b5fd" }
  ];

  const svg = root.querySelector(".on-svg");
  const SVG_NS = "http://www.w3.org/2000/svg";
  const CX = 200, CY = 200;
  const R_OUTER = 180, R_CORE = 32;
  const STEP = (R_OUTER - R_CORE) / LAYERS.length;

  const detailsEl = root.querySelector(".on-details");
  const peeledLog = root.querySelector(".on-peeled");
  const resetBtn  = root.querySelector(".on-reset");
  const coreEl    = root.querySelector(".on-core");

  let peeled = 0; // how many outer layers removed

  // Build the rings (outer → inner).
  LAYERS.forEach((L, i) => {
    const r = R_OUTER - i * STEP;
    const ring = document.createElementNS(SVG_NS, "circle");
    ring.setAttribute("cx", CX);
    ring.setAttribute("cy", CY);
    ring.setAttribute("r", r);
    ring.setAttribute("fill", L.color);
    ring.setAttribute("class", "on-ring on-ring-" + i);
    ring.dataset.idx = String(i);
    ring.dataset.id = L.id;
    svg.appendChild(ring);

    // Label sitting on the ring (top).
    const text = document.createElementNS(SVG_NS, "text");
    text.setAttribute("x", CX);
    text.setAttribute("y", CY - r + 14);
    text.setAttribute("class", "on-ring-label on-ring-label-" + i);
    text.setAttribute("text-anchor", "middle");
    text.setAttribute("dominant-baseline", "middle");
    text.setAttribute("data-i18n", "page.self.on_layer_" + L.id);
    text.textContent = L.id;
    svg.appendChild(text);
  });

  function applyPeel() {
    LAYERS.forEach((L, i) => {
      const ring = svg.querySelector(".on-ring-" + i);
      const lbl  = svg.querySelector(".on-ring-label-" + i);
      const off = i < peeled;
      ring.classList.toggle("peeled", off);
      lbl.classList.toggle("peeled", off);
    });
    coreEl.classList.toggle("visible", peeled >= LAYERS.length);
    // Show description of currently outermost remaining (or core).
    if (peeled >= LAYERS.length) {
      detailsEl.innerHTML =
        '<div class="on-d-title">' + t("page.self.on_core_title", "I AM") + '</div>' +
        '<div class="on-d-body">' + t("page.self.on_core_body", "") + '</div>';
    } else {
      const L = LAYERS[peeled];
      detailsEl.innerHTML =
        '<div class="on-d-title" style="color:' + L.color + '">'
          + t("page.self.on_layer_" + L.id, L.id) + '</div>' +
        '<div class="on-d-body">' + t("page.self.on_desc_" + L.id, "") + '</div>' +
        '<div class="on-d-hint">' + t("page.self.on_peel_hint", "Click the ring to peel.") + '</div>';
    }
    // Peeled log
    peeledLog.innerHTML = LAYERS.slice(0, peeled)
      .map((L) => '<span class="on-peel-chip" style="--c:' + L.color + '">'
        + t("page.self.on_layer_" + L.id, L.id) + '</span>')
      .join("");
  }

  svg.addEventListener("click", (e) => {
    const ring = e.target.closest(".on-ring");
    if (!ring) return;
    const idx = +ring.dataset.idx;
    // Only allow peeling the current outermost.
    if (idx === peeled) {
      peeled++;
      applyPeel();
    }
  });
  resetBtn.addEventListener("click", () => {
    peeled = 0;
    applyPeel();
  });
  window.addEventListener("langchange", applyPeel);

  applyPeel();
})();
