// The Manipulation page — Tactic Identifier.
//
// A catalog of common manipulation tactics, organized so a reader who
// recognizes a pattern in their own life can name it, learn the signs,
// and find the antidote. The act of naming the tactic is most of the
// freedom it removes.

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

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

  const TACTICS = [
    "gaslighting", "darvo", "love_bombing", "intermittent_reinforcement",
    "silent_treatment", "triangulation", "moving_goalposts", "future_faking",
    "word_salad", "projection", "negging", "guilt_tripping",
    "hoovering", "smear", "devaluation", "isolation"
  ];

  const gridEl = root.querySelector(".tx-grid");
  const detailsEl = root.querySelector(".tx-details");

  TACTICS.forEach((id) => {
    const card = document.createElement("button");
    card.type = "button";
    card.className = "tx-card";
    card.dataset.id = id;
    card.innerHTML =
      '<span class="tx-card-name" data-i18n="page.manipulation.tx_' + id + '_name">' + id + '</span>' +
      '<span class="tx-card-tag"  data-i18n="page.manipulation.tx_' + id + '_tag">…</span>';
    gridEl.appendChild(card);
  });

  let selected = null;
  function showTactic(id) {
    detailsEl.innerHTML =
      '<div class="tx-d-head"><span class="tx-d-name">'
        + t("page.manipulation.tx_" + id + "_name", id) + '</span></div>' +
      '<div class="tx-d-block"><span class="tx-d-label">'
        + t("page.manipulation.tx_what", "What it is") + '</span>'
        + '<span class="tx-d-body">' + t("page.manipulation.tx_" + id + "_what", "") + '</span></div>' +
      '<div class="tx-d-block"><span class="tx-d-label">'
        + t("page.manipulation.tx_signs", "How to recognize it") + '</span>'
        + '<span class="tx-d-body">' + t("page.manipulation.tx_" + id + "_signs", "") + '</span></div>' +
      '<div class="tx-d-block tx-d-anti"><span class="tx-d-label">'
        + t("page.manipulation.tx_antidote", "The antidote") + '</span>'
        + '<span class="tx-d-body">' + t("page.manipulation.tx_" + id + "_antidote", "") + '</span></div>';
    detailsEl.classList.add("visible");
  }
  gridEl.addEventListener("click", (e) => {
    const card = e.target.closest(".tx-card");
    if (!card) return;
    if (selected) selected.classList.remove("active");
    if (card === selected) {
      selected = null;
      detailsEl.classList.remove("visible");
      return;
    }
    selected = card;
    card.classList.add("active");
    showTactic(card.dataset.id);
  });
  window.addEventListener("langchange", () => {
    if (selected) showTactic(selected.dataset.id);
  });
})();
