// The Kin page — 7-Generation Doubling.
//
// 2 parents → 4 grandparents → 8 great-grandparents → ... → 128 ancestors
// at generation 7. Cumulative total: 254 people, every one of whom had
// to survive long enough, meet the right person, and have a child at the
// right time — or you do not exist. Roughly 200 years back, every
// generation choice that ended in your conception was made.
//
// Visualize as expanding concentric rings, each ring full of dots,
// doubling with each generation. Hover for the count + approximate year.

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

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

  const GENS = 7;
  const YEARS_PER_GEN = 28; // average generation length

  const svg = root.querySelector(".an-svg");
  const summaryEl = root.querySelector(".an-summary");
  const SVG_NS = "http://www.w3.org/2000/svg";

  const CX = 200, CY = 200;
  const R0 = 24;             // innermost (you) radius from center
  const R_STEP = 18;          // ring spacing
  const COLORS = ["#fde047", "#fbbf24", "#f59e0b", "#fb923c", "#f97316", "#ef4444", "#dc2626", "#a855f7"];

  // Center "you" dot.
  const me = document.createElementNS(SVG_NS, "circle");
  me.setAttribute("cx", CX); me.setAttribute("cy", CY);
  me.setAttribute("r", 9);
  me.setAttribute("class", "an-me");
  me.setAttribute("fill", COLORS[0]);
  svg.appendChild(me);
  const meLabel = document.createElementNS(SVG_NS, "text");
  meLabel.setAttribute("x", CX); meLabel.setAttribute("y", CY - 16);
  meLabel.setAttribute("class", "an-me-label");
  meLabel.setAttribute("text-anchor", "middle");
  meLabel.setAttribute("data-i18n", "page.kin.an_you");
  meLabel.textContent = "You";
  svg.appendChild(meLabel);

  let cumulative = 0;
  const ringInfo = [];
  for (let g = 1; g <= GENS; g++) {
    const count = Math.pow(2, g);
    cumulative += count;
    const r = R0 + g * R_STEP;
    // Ring of dots (limit visible per ring to keep the SVG fast).
    const visible = Math.min(count, 64);
    for (let i = 0; i < visible; i++) {
      const ang = (i / visible) * Math.PI * 2 - Math.PI / 2;
      const x = CX + r * Math.cos(ang);
      const y = CY + r * Math.sin(ang);
      const dot = document.createElementNS(SVG_NS, "circle");
      dot.setAttribute("cx", x.toFixed(1));
      dot.setAttribute("cy", y.toFixed(1));
      dot.setAttribute("r", Math.max(2.2, 6 - g * 0.5));
      dot.setAttribute("fill", COLORS[g] || COLORS[COLORS.length - 1]);
      dot.setAttribute("class", "an-dot an-dot-g" + g);
      dot.dataset.gen = String(g);
      svg.appendChild(dot);
    }
    // Connecting ring (faint guide).
    const ring = document.createElementNS(SVG_NS, "circle");
    ring.setAttribute("cx", CX); ring.setAttribute("cy", CY);
    ring.setAttribute("r", r);
    ring.setAttribute("class", "an-ring");
    svg.insertBefore(ring, me);
    ringInfo.push({ g, count, cumulative, r });
  }

  // Summary cards for each generation.
  function renderSummary() {
    const yearNow = new Date().getFullYear();
    let html = '<div class="an-card an-card-you"><span class="an-card-num">' + t("page.kin.an_you", "You") + '</span>'
      + '<span class="an-card-lbl">' + t("page.kin.an_g0_lbl", "1 person — here, now") + '</span></div>';
    ringInfo.forEach((r) => {
      const startYear = yearNow - r.g * YEARS_PER_GEN;
      const generation = t("page.kin.an_gen", "Generation") + " " + r.g;
      const desc = t("page.kin.an_g" + r.g + "_lbl", r.count.toLocaleString() + " people · ~" + startYear);
      html += '<div class="an-card" style="--c:' + (COLORS[r.g] || COLORS[COLORS.length - 1]) + '">'
        + '<span class="an-card-num">' + r.count.toLocaleString() + '</span>'
        + '<span class="an-card-gen">' + generation + '</span>'
        + '<span class="an-card-lbl">' + desc + '</span></div>';
    });
    html += '<div class="an-card an-card-total">'
      + '<span class="an-card-num">' + cumulative.toLocaleString() + '</span>'
      + '<span class="an-card-lbl">' + t("page.kin.an_total", "ancestors total in 7 generations") + '</span></div>';
    summaryEl.innerHTML = html;
  }
  renderSummary();
  window.addEventListener("langchange", renderSummary);
})();
