// The Time page — your life in weeks.
//
// 90 years × 52 weeks ≈ 4,680 dots. Each dot is one week of an average
// human lifespan. Filled dots are weeks you have lived; empty dots are
// weeks remaining (statistically — none of us is promised tomorrow).
//
// Birthday saved to localStorage so the dots fill in next time. The
// shock is intentional: you have fewer weeks than you think.

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

  const STORAGE_KEY = "wuys-life-bday";
  const WEEKS_PER_YEAR = 52;
  const YEARS = 90;
  const TOTAL = WEEKS_PER_YEAR * YEARS;

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

  const inputEl = root.querySelector(".lw-bday");
  const gridEl  = root.querySelector(".lw-grid");
  const statsEl = root.querySelector(".lw-stats");
  const promptEl = root.querySelector(".lw-prompt");

  // Restore saved birthday.
  try {
    const saved = localStorage.getItem(STORAGE_KEY);
    if (saved) inputEl.value = saved;
  } catch (_) {}

  // Build the empty grid once. 4,680 dots is fine for browsers.
  function buildGrid() {
    const frag = document.createDocumentFragment();
    for (let y = 0; y < YEARS; y++) {
      const row = document.createElement("div");
      row.className = "lw-row";
      row.dataset.year = y;
      // Decade tick label every 10 years.
      if (y % 10 === 0) {
        const tick = document.createElement("span");
        tick.className = "lw-tick";
        tick.textContent = y;
        row.appendChild(tick);
      }
      for (let w = 0; w < WEEKS_PER_YEAR; w++) {
        const dot = document.createElement("span");
        dot.className = "lw-dot phase-" + phaseFor(y);
        row.appendChild(dot);
      }
      frag.appendChild(row);
    }
    gridEl.innerHTML = "";
    gridEl.appendChild(frag);
  }
  function phaseFor(year) {
    if (year < 18) return "child";
    if (year < 30) return "young";
    if (year < 50) return "middle";
    if (year < 65) return "elder";
    return "wise";
  }

  function render() {
    if (!inputEl.value) {
      promptEl.style.display = "";
      statsEl.style.display = "none";
      gridEl.querySelectorAll(".lw-dot.filled").forEach((d) => d.classList.remove("filled"));
      return;
    }
    promptEl.style.display = "none";
    statsEl.style.display = "";

    const birth = new Date(inputEl.value);
    if (isNaN(birth.getTime())) return;
    const now = new Date();
    const msPerWeek = 1000 * 60 * 60 * 24 * 7;
    const weeksLived = Math.max(0, Math.min(TOTAL, Math.floor((now - birth) / msPerWeek)));
    const weeksLeft = Math.max(0, TOTAL - weeksLived);
    const pct = (weeksLived / TOTAL) * 100;

    // Fill the dots.
    const dots = gridEl.querySelectorAll(".lw-dot");
    dots.forEach((d, i) => d.classList.toggle("filled", i < weeksLived));

    statsEl.innerHTML =
      '<div class="lw-stat"><span class="lw-stat-num">' + weeksLived.toLocaleString() + '</span>'
        + '<span class="lw-stat-lbl">' + t("page.time.lw_lived", "weeks lived") + '</span></div>' +
      '<div class="lw-stat"><span class="lw-stat-num">' + weeksLeft.toLocaleString() + '</span>'
        + '<span class="lw-stat-lbl">' + t("page.time.lw_left", "weeks remaining") + '</span></div>' +
      '<div class="lw-stat"><span class="lw-stat-num">' + pct.toFixed(1) + '%</span>'
        + '<span class="lw-stat-lbl">' + t("page.time.lw_pct", "of a long life") + '</span></div>';
  }

  inputEl.addEventListener("change", () => {
    try { localStorage.setItem(STORAGE_KEY, inputEl.value); } catch (_) {}
    render();
  });
  window.addEventListener("langchange", render);

  buildGrid();
  render();
})();
