// Silence mode for the Silence page.
//
// One button opens a full-viewport overlay. Pure black-purple, no chrome,
// one centered word, and a quiet counter that begins appearing after 10
// seconds so the user gets to feel how long they've been there. Tap, click,
// or press Esc to leave.
//
// Also pauses any breath/heart/freq/star animations under the overlay so
// the silence is actual — nothing moves anywhere on screen.

(function () {
  const root = document.getElementById("silence");
  if (!root) return;
  const opener = root.querySelector(".sil-enter");
  if (!opener) return;

  let overlay = null;
  let wordEl = null;
  let counterEl = null;
  let hintEl = null;
  let startedAt = 0;
  let rafId = null;

  function t(key, fallback) {
    return (window.i18n && window.i18n.t) ? window.i18n.t(key, fallback) : fallback;
  }

  function pad(n) { return n < 10 ? "0" + n : String(n); }
  function fmt(seconds) {
    const m = Math.floor(seconds / 60);
    const s = Math.floor(seconds % 60);
    return pad(m) + ":" + pad(s);
  }

  function enter() {
    if (overlay) return;
    overlay = document.createElement("div");
    overlay.className = "sil-overlay";
    overlay.innerHTML =
      '<div class="sil-word">' + escapeHTML(t("page.silence.sil_word", "Listen.")) + '</div>' +
      '<div class="sil-counter" aria-live="off"></div>' +
      '<div class="sil-hint">' + escapeHTML(t("page.silence.sil_dismiss", "Tap anywhere to leave.")) + '</div>';
    document.body.appendChild(overlay);
    document.body.classList.add("sil-active");
    wordEl    = overlay.querySelector(".sil-word");
    counterEl = overlay.querySelector(".sil-counter");
    hintEl    = overlay.querySelector(".sil-hint");

    startedAt = performance.now();
    // The dismiss hint fades after 5 s so it doesn't sit there shouting.
    setTimeout(() => { if (hintEl) hintEl.classList.add("fading"); }, 5000);
    // Fade-in.
    requestAnimationFrame(() => overlay.classList.add("in"));
    rafId = requestAnimationFrame(tick);

    // Wire dismissers.
    overlay.addEventListener("click", exit);
    document.addEventListener("keydown", onKey);
  }

  function tick(now) {
    if (!overlay) return;
    const elapsed = (now - startedAt) / 1000;
    if (elapsed >= 10 && counterEl) {
      counterEl.classList.add("visible");
      counterEl.textContent = t("page.silence.sil_silent_for", "Silent for") + "  " + fmt(elapsed);
    }
    rafId = requestAnimationFrame(tick);
  }

  function exit() {
    if (!overlay) return;
    if (rafId) cancelAnimationFrame(rafId);
    rafId = null;
    overlay.classList.remove("in");
    document.removeEventListener("keydown", onKey);
    const n = overlay;
    overlay = wordEl = counterEl = hintEl = null;
    document.body.classList.remove("sil-active");
    setTimeout(() => { if (n.parentNode) n.parentNode.removeChild(n); }, 400);
  }

  function onKey(e) {
    if (e.key === "Escape") exit();
  }

  function escapeHTML(s) {
    return String(s).replace(/[&<>"']/g, (c) =>
      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
  }

  opener.addEventListener("click", enter);

  // If user navigates away from the Silence page, dismiss any active overlay.
  const silView = document.querySelector('.view[data-view="silence"]');
  if (silView && "MutationObserver" in window) {
    new MutationObserver(() => {
      if (!silView.classList.contains("active") && overlay) exit();
    }).observe(silView, { attributes: true, attributeFilter: ["class"] });
  }
})();
