(function () {
  const form = document.getElementById("filters");
  const tags = [...new Set(SK.videos.flatMap(v => v.tags))].sort((a, b) => a.localeCompare(b, "ru"));
  document.getElementById("f-ch").insertAdjacentHTML("beforeend", SK.channels.map(c =>
    `<label class="c-${c.color}"><input type="checkbox" name="ch" value="${c.id}"><i class="chip"></i>${SK.esc(c.name)}</label>`).join(""));
  document.getElementById("f-tag").insertAdjacentHTML("beforeend", tags.map(t =>
    `<label><input type="checkbox" name="tag" value="${SK.esc(t)}">${SK.esc(t)}</label>`).join(""));

  const p = new URLSearchParams(location.search);
  const q = (p.get("q") || "").trim();
  if (q) document.getElementById("q").value = q;
  p.getAll("tag").forEach(t => { const i = form.querySelector(`input[name=tag][value="${CSS.escape(t)}"]`); if (i) i.checked = true; });
  p.getAll("ch").forEach(t => { const i = form.querySelector(`input[name=ch][value="${CSS.escape(t)}"]`); if (i) i.checked = true; });
  p.getAll("ratio").forEach(t => { const i = form.querySelector(`input[name=ratio][value="${CSS.escape(t)}"]`); if (i) i.checked = true; });
  const sort = document.getElementById("sort");
  if (p.get("sort")) sort.value = p.get("sort");

  const out = document.getElementById("results"), title = document.getElementById("cat-title");
  function run() {
    const sel = n => [...form.querySelectorAll(`input[name=${n}]:checked`)].map(i => i.value);
    const ratios = sel("ratio"), chs = sel("ch"), tg = sel("tag");
    const needle = q.toLowerCase();
    let list = SK.videos.filter(v =>
      (!ratios.length || ratios.includes(v.ratio)) &&
      (!chs.length || chs.includes(v.ch)) &&
      (!tg.length || tg.some(t => v.tags.includes(t))) &&
      (!needle || (v.title + " " + v.desc + " " + v.tags.join(" ") + " " + SK.ch(v.ch).name).toLowerCase().includes(needle)));
    const s = sort.value;
    list.sort(s === "views" ? (a, b) => b.views - a.views : s === "az" ? (a, b) => a.title.localeCompare(b.title, "ru") : (a, b) => b.date.localeCompare(a.date));

    const n = list.length;
    title.textContent = q ? `«${q}»: ${n} ${SK.plural(n, "видео", "видео", "видео")}` : `Каталог, ${n} видео`;
    out.innerHTML = n ? list.map(SK.card).join("")
      : `<div class="empty" style="flex:1"><strong>Ничего не нашлось</strong>Уберите часть фильтров или поищите другое слово, например «фракталы» или «луп».</div>`;

    const np = new URLSearchParams();
    if (q) np.set("q", q);
    ratios.forEach(x => np.append("ratio", x)); chs.forEach(x => np.append("ch", x)); tg.forEach(x => np.append("tag", x));
    if (s !== "new") np.set("sort", s);
    history.replaceState(null, "", "catalog.html" + (np.toString() ? "?" + np : ""));
  }
  form.addEventListener("change", run);
  form.addEventListener("reset", () => setTimeout(run));
  sort.addEventListener("change", run);
  run();
})();