(() => {
  "use strict";
  const $ = (s, r = document) => r.querySelector(s);
  const grid = $("#atlas-grid");
  if (!grid) return;
  const search = $("#atlas-search");
  const layer = $("#atlas-layer");
  const confidence = $("#atlas-confidence");
  const count = $("#atlas-count");
  const empty = $("#atlas-empty");
  const detail = $("#atlas-detail");
  let cases = [];
  let selected = null;

  const escape = (value) => String(value ?? "").replace(/[&<>"']/g, (ch) => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[ch]));
  const scoreLabel = (value) => ["нет", "косвенно", "существенно", "ведущий"][Number(value)] || "нет";

  function renderDetail(item) {
    selected = item?.идентификатор || null;
    if (!item) {
      detail.innerHTML = '<p class="eyebrow">Временная шкала</p><h2>Выберите случай</h2><p>Карточка показывает переход от базовой линии к узкому применению, расширению и нормализации.</p>';
      return;
    }
    const timeline = item.временная_шкала.map((step, index) => `<li><span>${String(index + 1).padStart(2,"0")}</span><div><strong>${escape(step.этап)}</strong><p>${escape(step.состояние)}</p></div></li>`).join("");
    const sources = item.источники.map((url) => `<a href="${escape(url)}">Доклад ↗</a>`).join("");
    detail.innerHTML = `<p class="eyebrow">${escape(item.идентификатор)} · ${escape(item.ведущий_слой)}</p><h2>${escape(item.название)}</h2><p>${escape(item.механизм)}</p><ol class="drift-timeline">${timeline}</ol><dl class="detail-dl"><div><dt>Срок</dt><dd>${escape(item.срок)}</dd></div><div><dt>Демонтаж</dt><dd>${escape(item.возможность_демонтажа)}</dd></div><div><dt>Уверенность</dt><dd>${escape(item.уверенность)}</dd></div><div><dt>Условие опровержения</dt><dd>${escape(item.условие_опровержения)}</dd></div></dl><div class="source-row">${sources}</div>`;
    document.querySelectorAll(".atlas-card").forEach((card) => card.classList.toggle("is-selected", card.dataset.id === selected));
  }

  function card(item) {
    const matrix = Object.entries(item.слои).map(([name, value]) => `<div title="${escape(name)}: ${scoreLabel(value)}"><span>${escape(name)}</span><i data-score="${value}"></i><b>${value}</b></div>`).join("");
    const article = document.createElement("article");
    article.className = "atlas-card";
    article.dataset.id = item.идентификатор;
    article.dataset.layer = item.ведущий_слой;
    article.dataset.confidence = item.уверенность;
    article.innerHTML = `<div class="case-head"><span>${escape(item.идентификатор)}</span><span>${escape(item.ведущий_слой)}</span></div><h2>${escape(item.название)}</h2><p>${escape(item.механизм)}</p><div class="layer-matrix">${matrix}</div><dl><div><dt>Признак</dt><dd>${escape(item.наблюдаемый_признак)}</dd></div><div><dt>Срок</dt><dd>${escape(item.срок)}</dd></div><div><dt>Демонтаж</dt><dd>${escape(item.возможность_демонтажа)}</dd></div></dl><button type="button" class="text-button">Открыть временную шкалу →</button>`;
    article.querySelector("button").addEventListener("click", () => renderDetail(item));
    return article;
  }

  function apply() {
    const q = (search.value || "").trim().toLocaleLowerCase("ru");
    const chosenLayer = layer.value;
    const chosenConfidence = confidence.value;
    let visible = 0;
    grid.querySelectorAll(".atlas-card").forEach((node) => {
      const item = cases.find((entry) => entry.идентификатор === node.dataset.id);
      const hay = `${item.название} ${item.механизм} ${item.наблюдаемый_признак} ${item.ведущий_слой}`.toLocaleLowerCase("ru");
      const show = (chosenLayer === "все" || item.ведущий_слой === chosenLayer) && (chosenConfidence === "все" || item.уверенность === chosenConfidence) && (!q || hay.includes(q));
      node.hidden = !show;
      if (show) visible += 1;
    });
    count.textContent = String(visible);
    empty.classList.toggle("is-visible", visible === 0);
    if (selected && grid.querySelector(`[data-id="${CSS.escape(selected)}"]`)?.hidden) renderDetail(null);
  }

  fetch("атлас-цензуры.json", {cache:"no-store"}).then((response) => {
    if (!response.ok) throw new Error("Данные атласа недоступны");
    return response.json();
  }).then((data) => {
    cases = data.случаи || [];
    (data.слои || []).forEach((name) => {
      const option = document.createElement("option");
      option.value = name;
      option.textContent = name[0].toLocaleUpperCase("ru") + name.slice(1);
      layer.appendChild(option);
    });
    const fragment = document.createDocumentFragment();
    cases.forEach((item) => fragment.appendChild(card(item)));
    grid.appendChild(fragment);
    [search, layer, confidence].forEach((control) => control.addEventListener(control === search ? "input" : "change", apply));
    apply();
    if (cases[0]) renderDetail(cases[0]);
  }).catch((error) => {
    grid.innerHTML = `<div class="boundary-box"><h2>Атлас не загружен</h2><p>${escape(error.message)}. Откройте сайт через сетевой адрес, а не как отдельный локальный файл.</p></div>`;
  });
})();
