// The Truth page — Truth Filter Cascade.
//
// The reader types a sentence they believe to be true. The widget then
// drops that sentence through seven stacked filters — Social, Tribal,
// Ideological, Professional, Religious, Ego, Fear. Each filter asks
// the reader a hard question. At the bottom, the same sentence: was it
// the truth, or was it what survived seven layers of permission?
//
// We cannot semantically evaluate. The work is the user's. The widget
// makes the work visible.

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

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

  const FILTERS = ["social", "tribal", "ideological", "professional", "religious", "ego", "fear"];
  const COLORS = ["#fde047", "#fbbf24", "#f59e0b", "#fb923c", "#f97316", "#ef4444", "#dc2626"];

  const inputEl    = root.querySelector(".tf-input");
  const goBtn      = root.querySelector(".tf-go");
  const cascadeEl  = root.querySelector(".tf-cascade");
  const resultEl   = root.querySelector(".tf-result");

  // Build the 7 filter cards once.
  FILTERS.forEach((id, i) => {
    const card = document.createElement("div");
    card.className = "tf-filter";
    card.dataset.id = id;
    card.style.setProperty("--c", COLORS[i]);
    card.innerHTML =
      '<div class="tf-f-num">' + (i + 1) + '</div>' +
      '<div class="tf-f-body">' +
        '<div class="tf-f-name" data-i18n="page.truth.tf_' + id + '_name">' + id + '</div>' +
        '<div class="tf-f-q" data-i18n="page.truth.tf_' + id + '_q">…</div>' +
        '<div class="tf-f-desc" data-i18n="page.truth.tf_' + id + '_desc">…</div>' +
      '</div>';
    cascadeEl.appendChild(card);
  });

  function fade(el) {
    return new Promise((res) => {
      el.classList.add("fading");
      setTimeout(() => { el.classList.remove("fading"); res(); }, 280);
    });
  }
  async function runCascade() {
    const sentence = inputEl.value.trim();
    if (!sentence) {
      inputEl.focus();
      return;
    }
    // Reset.
    cascadeEl.querySelectorAll(".tf-filter").forEach((c) => c.classList.remove("active", "passed"));
    resultEl.classList.remove("visible");
    const sentenceEl = cascadeEl.parentElement.querySelector(".tf-sentence");
    if (sentenceEl) sentenceEl.remove();
    // Show the sentence as a chip that "drops" through each filter.
    const chip = document.createElement("div");
    chip.className = "tf-sentence";
    chip.textContent = '"' + sentence + '"';
    cascadeEl.parentElement.insertBefore(chip, cascadeEl);
    // Run cascade — light each filter in turn.
    const cards = cascadeEl.querySelectorAll(".tf-filter");
    for (let i = 0; i < cards.length; i++) {
      cards[i].classList.add("active");
      await new Promise((res) => setTimeout(res, 380));
      cards[i].classList.add("passed");
      cards[i].classList.remove("active");
    }
    // Reveal result.
    resultEl.innerHTML =
      '<div class="tf-r-head">' + t("page.truth.tf_r_head", "What survived all seven?") + '</div>' +
      '<div class="tf-r-quote">"' + escapeHtml(sentence) + '"</div>' +
      '<p class="tf-r-body">' + t("page.truth.tf_r_body", "") + '</p>';
    resultEl.classList.add("visible");
  }
  function escapeHtml(s) {
    return s.replace(/[<>&"]/g, (c) => ({ "<": "&lt;", ">": "&gt;", "&": "&amp;", '"': "&quot;" }[c]));
  }

  goBtn.addEventListener("click", runCascade);
  inputEl.addEventListener("keydown", (e) => {
    if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); runCascade(); }
  });
})();
