/* Celena Admin — UI controls: sidebar toggle, mobile menu, notifications, modal. */
(function () {
  'use strict';

  // ---------- Modal: Celena.alert / Celena.confirm ----------
  var ICONS = { info: 'i', success: '✓', error: '!', warning: '⚠' };
  function buildModal(opts) {
    opts = opts || {};
    var type = opts.type || 'info';
    var title = opts.title || ({ info: 'Информация', success: 'Готово', error: 'Ошибка', warning: 'Внимание' }[type]);
    var overlay = document.createElement('div');
    overlay.className = 'celena-modal-overlay';
    overlay.setAttribute('role', 'dialog');
    overlay.setAttribute('aria-modal', 'true');
    var modal = document.createElement('div');
    modal.className = 'celena-modal';
    var head = document.createElement('div');
    head.className = 'celena-modal-head';
    head.innerHTML = '<span class="celena-modal-icon ' + type + '">' + (ICONS[type] || 'i') + '</span>'
      + '<span class="celena-modal-title"></span>';
    head.querySelector('.celena-modal-title').textContent = title;
    var msg = document.createElement('div');
    msg.className = 'celena-modal-msg';
    msg.textContent = String(opts.message || '');
    var actions = document.createElement('div');
    actions.className = 'celena-modal-actions';
    modal.appendChild(head);
    modal.appendChild(msg);
    modal.appendChild(actions);
    overlay.appendChild(modal);
    return { overlay: overlay, modal: modal, actions: actions };
  }
  function openModal(ui, onClose) {
    document.body.appendChild(ui.overlay);
    requestAnimationFrame(function () { ui.overlay.classList.add('is-visible'); });
    function close(result) {
      ui.overlay.classList.remove('is-visible');
      setTimeout(function () {
        if (ui.overlay.parentNode) ui.overlay.parentNode.removeChild(ui.overlay);
        if (onClose) onClose(result);
      }, 180);
      document.removeEventListener('keydown', onKey);
    }
    function onKey(e) {
      if (e.key === 'Escape') close(false);
      else if (e.key === 'Enter') close(true);
    }
    document.addEventListener('keydown', onKey);
    ui.overlay.addEventListener('click', function (e) { if (e.target === ui.overlay) close(false); });
    return close;
  }
  function celenaAlert(message, opts) {
    opts = Object.assign({ message: message }, opts || {});
    var ui = buildModal(opts);
    var ok = document.createElement('button');
    ok.type = 'button'; ok.className = 'btn btn-primary'; ok.textContent = opts.okText || 'OK';
    ui.actions.appendChild(ok);
    return new Promise(function (resolve) {
      var close = openModal(ui, function () { resolve(true); });
      ok.addEventListener('click', function () { close(true); });
      setTimeout(function () { ok.focus(); }, 50);
    });
  }
  function celenaConfirm(message, opts) {
    opts = Object.assign({ message: message, type: 'warning' }, opts || {});
    var ui = buildModal(opts);
    var cancel = document.createElement('button');
    cancel.type = 'button'; cancel.className = 'btn btn-secondary'; cancel.textContent = opts.cancelText || 'Отмена';
    var ok = document.createElement('button');
    ok.type = 'button';
    ok.className = 'btn ' + (opts.danger ? 'btn-danger-solid' : 'btn-primary');
    ok.textContent = opts.okText || 'Да';
    ui.actions.appendChild(cancel);
    ui.actions.appendChild(ok);
    return new Promise(function (resolve) {
      var close = openModal(ui, function (result) { resolve(Boolean(result)); });
      ok.addEventListener('click', function () { close(true); });
      cancel.addEventListener('click', function () { close(false); });
      setTimeout(function () { ok.focus(); }, 50);
    });
  }

  /**
   * Celena.prompt(message, opts) → Promise<string|null>
   * opts: { type, title, placeholder, defaultValue, okText, cancelText, multiline, required, validator }
   * Возвращает строку (введённую) или null (отмена/Esc).
   */
  function celenaPrompt(message, opts) {
    opts = Object.assign({ message: message, type: 'info' }, opts || {});
    var ui = buildModal(opts);
    var inputWrap = document.createElement('div');
    inputWrap.className = 'celena-modal-input';
    var input;
    if (opts.multiline) {
      input = document.createElement('textarea');
      input.rows = 4;
    } else {
      input = document.createElement('input');
      input.type = 'text';
    }
    if (opts.placeholder) input.placeholder = opts.placeholder;
    input.value = opts.defaultValue != null ? String(opts.defaultValue) : '';
    inputWrap.appendChild(input);
    var errEl = document.createElement('div');
    errEl.className = 'celena-modal-err';
    inputWrap.appendChild(errEl);
    ui.modal.insertBefore(inputWrap, ui.actions);

    var cancel = document.createElement('button');
    cancel.type = 'button'; cancel.className = 'btn btn-secondary'; cancel.textContent = opts.cancelText || 'Отмена';
    var ok = document.createElement('button');
    ok.type = 'button'; ok.className = 'btn btn-primary'; ok.textContent = opts.okText || 'OK';
    ui.actions.appendChild(cancel);
    ui.actions.appendChild(ok);

    return new Promise(function (resolve) {
      var resolved = false;
      function attempt() {
        var v = input.value;
        if (opts.required && v.trim() === '') {
          errEl.textContent = 'Поле обязательно';
          input.focus();
          return;
        }
        if (typeof opts.validator === 'function') {
          var msg = opts.validator(v);
          if (msg) { errEl.textContent = String(msg); input.focus(); return; }
        }
        resolved = true;
        close(v);
      }
      var close = openModal(ui, function (result) {
        if (!resolved) resolve(null);
        else resolve(result);
      });
      ok.addEventListener('click', attempt);
      cancel.addEventListener('click', function () { close(null); });
      input.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' && !opts.multiline) { e.preventDefault(); attempt(); }
      });
      setTimeout(function () { input.focus(); input.select && input.select(); }, 50);
    });
  }
  // ---------- Lightbox: Celena.lightbox(urls, startIndex) ----------
  function celenaLightbox(urls, startIndex) {
    if (!Array.isArray(urls) || urls.length === 0) return;
    var index = Math.max(0, Math.min(startIndex | 0, urls.length - 1));
    var overlay = document.createElement('div');
    overlay.className = 'celena-lb-overlay';
    overlay.innerHTML =
      '<button type="button" class="celena-lb-close" aria-label="Закрыть">×</button>' +
      '<button type="button" class="celena-lb-prev" aria-label="Назад">‹</button>' +
      '<img class="celena-lb-img" alt="">' +
      '<button type="button" class="celena-lb-next" aria-label="Вперёд">›</button>' +
      '<div class="celena-lb-counter"></div>';
    var img = overlay.querySelector('.celena-lb-img');
    var counter = overlay.querySelector('.celena-lb-counter');
    var prev = overlay.querySelector('.celena-lb-prev');
    var next = overlay.querySelector('.celena-lb-next');
    var close = overlay.querySelector('.celena-lb-close');
    function render() {
      img.src = urls[index];
      counter.textContent = (index + 1) + ' / ' + urls.length;
      prev.style.visibility = urls.length > 1 ? 'visible' : 'hidden';
      next.style.visibility = urls.length > 1 ? 'visible' : 'hidden';
    }
    function go(delta) {
      index = (index + delta + urls.length) % urls.length;
      render();
    }
    function destroy() {
      overlay.classList.remove('is-visible');
      setTimeout(function () { if (overlay.parentNode) overlay.parentNode.removeChild(overlay); }, 180);
      document.removeEventListener('keydown', onKey);
    }
    function onKey(e) {
      if (e.key === 'Escape') destroy();
      else if (e.key === 'ArrowLeft') go(-1);
      else if (e.key === 'ArrowRight') go(1);
    }
    close.addEventListener('click', destroy);
    prev.addEventListener('click', function () { go(-1); });
    next.addEventListener('click', function () { go(1); });
    overlay.addEventListener('click', function (e) { if (e.target === overlay) destroy(); });
    document.addEventListener('keydown', onKey);
    document.body.appendChild(overlay);
    render();
    requestAnimationFrame(function () { overlay.classList.add('is-visible'); });
  }

  window.Celena = window.Celena || {};
  window.Celena.alert = celenaAlert;
  window.Celena.confirm = celenaConfirm;
  window.Celena.prompt = celenaPrompt;
  window.Celena.lightbox = celenaLightbox;

  /**
   * Авто-перехват подтверждений: вместо нативного confirm() — стилизованный
   * Celena.confirm. Шаблон вешает атрибуты:
   *   <form ... data-confirm="Удалить запись?">          — спросит при submit
   *   <button data-confirm="...">                          — спросит при click
   *   <a href="..." data-confirm="...">                    — спросит при переходе
   * Дополнительные атрибуты:
   *   data-confirm-title="Заголовок"
   *   data-confirm-ok="Удалить"   data-confirm-cancel="Отмена"
   *   data-confirm-danger="1"     — красная кнопка ОК (для удаления)
   */
  function buildConfirmOpts(el) {
    return {
      title: el.getAttribute('data-confirm-title') || 'Подтверждение',
      okText: el.getAttribute('data-confirm-ok') || 'Да',
      cancelText: el.getAttribute('data-confirm-cancel') || 'Отмена',
      type: el.getAttribute('data-confirm-type') || (el.hasAttribute('data-confirm-danger') ? 'warning' : 'warning'),
      danger: el.hasAttribute('data-confirm-danger'),
    };
  }
  // Submit форм с data-confirm.
  document.addEventListener('submit', function (e) {
    var form = e.target;
    if (!form.hasAttribute('data-confirm')) return;
    if (form.dataset.confirmed === '1') { delete form.dataset.confirmed; return; }
    e.preventDefault();
    celenaConfirm(form.getAttribute('data-confirm'), buildConfirmOpts(form)).then(function (ok) {
      if (!ok) return;
      form.dataset.confirmed = '1';
      // Пробрасываем именно ту submit-кнопку, которая инициировала событие, если знаем.
      form.submit();
    });
  }, true);
  // Клики по ссылкам/кнопкам с data-confirm (без формы).
  document.addEventListener('click', function (e) {
    var el = e.target.closest('[data-confirm]');
    if (!el) return;
    if (el.tagName === 'FORM') return; // data-confirm на форме обработает submit-листенер
    if (el.tagName === 'BUTTON' && el.type === 'submit' && el.form) return; // обработает submit-листенер
    if (el.dataset.confirmed === '1') { delete el.dataset.confirmed; return; }
    e.preventDefault();
    e.stopPropagation();
    celenaConfirm(el.getAttribute('data-confirm'), buildConfirmOpts(el)).then(function (ok) {
      if (!ok) return;
      el.dataset.confirmed = '1';
      if (el.tagName === 'A') window.location.href = el.href;
      else el.click();
    });
  }, true);

  // Делегированная подписка на data-lightbox-group — клик по картинке открывает лайтбокс,
  // навигация листает все картинки этой группы.
  document.addEventListener('click', function (e) {
    var trigger = e.target.closest('[data-lightbox]');
    if (!trigger) return;
    e.preventDefault();
    var group = trigger.getAttribute('data-lightbox');
    var items = document.querySelectorAll('[data-lightbox="' + group + '"]');
    var urls = [];
    var startIndex = 0;
    items.forEach(function (el, i) {
      var url = el.getAttribute('data-lightbox-src') ||
                (el.tagName === 'IMG' ? el.getAttribute('src') : '') ||
                el.getAttribute('href') || '';
      if (url) urls.push(url);
      if (el === trigger) startIndex = urls.length - 1;
    });
    celenaLightbox(urls, startIndex);
  });

  var body = document.body;
  var html = document.documentElement;
  var KEY = 'celena_admin_collapsed';

  // Desktop collapse — класс живёт на <html>, чтобы inline-скрипт в <head>
  // успевал его применить до первой отрисовки (без прыжка меню при загрузке).
  var collapseBtn = document.querySelector('[data-sidebar-collapse]');
  if (collapseBtn) {
    var SVG_LEFT = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>';
    var SVG_RIGHT = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>';
    function updateIcon() {
      collapseBtn.innerHTML = html.classList.contains('is-collapsed') ? SVG_RIGHT : SVG_LEFT;
    }
    updateIcon();
    collapseBtn.addEventListener('click', function () {
      html.classList.toggle('is-collapsed');
      updateIcon();
      try { localStorage.setItem(KEY, html.classList.contains('is-collapsed') ? '1' : '0'); } catch (e) {}
    });
  }

  // Универсальный drawer документации.
  // Триггер: <a data-docs-open data-docs-url="/admin/docs/tags-panel" data-docs-title="…">
  // Cпец-обработчики (BC): [data-tag-docs-open] → /admin/docs/tags-panel
  (function () {
    var drawer = document.querySelector('[data-docs-drawer]');
    if (!drawer) return;
    var body = drawer.querySelector('[data-docs-body]');
    var titleEl = drawer.querySelector('[data-docs-title]');
    var defaultTitle = titleEl ? titleEl.textContent : '';
    var cache = {};
    var currentUrl = null;

    function load(url, title) {
      if (titleEl && typeof title === 'string') titleEl.textContent = title || defaultTitle;
      currentUrl = url;
      if (cache[url]) {
        body.innerHTML = cache[url];
        return;
      }
      body.innerHTML = '<p class="muted">…</p>';
      fetch(url, { credentials: 'same-origin' })
        .then(function (r) { return r.text(); })
        .then(function (html) {
          cache[url] = html;
          if (currentUrl === url) body.innerHTML = html;
        })
        .catch(function () {
          if (currentUrl === url) body.innerHTML = '<p class="muted">Не удалось загрузить документацию.</p>';
        });
    }
    function open(url, title) {
      drawer.hidden = false;
      requestAnimationFrame(function () { drawer.classList.add('is-open'); });
      document.body.style.overflow = 'hidden';
      load(url, title);
    }
    function close() {
      drawer.classList.remove('is-open');
      document.body.style.overflow = '';
      setTimeout(function () { drawer.hidden = true; }, 300);
    }

    document.addEventListener('click', function (e) {
      // Универсальный триггер — по URL из data-атрибута
      var trigger = e.target.closest('[data-docs-open]');
      if (trigger) {
        e.preventDefault();
        var url = trigger.getAttribute('data-docs-url');
        var title = trigger.getAttribute('data-docs-title') || '';
        if (!url) return;
        // Если drawer уже открыт — переключаем содержимое (для табов внутри drawer'а).
        if (drawer.classList.contains('is-open')) load(url, title);
        else open(url, title);
        return;
      }
      // BC: старая кнопка справочника тегов
      if (e.target.closest('[data-tag-docs-open]')) {
        e.preventDefault();
        open('/admin/docs/tags-panel', defaultTitle);
        return;
      }
      if (e.target.closest('[data-docs-close]') || e.target.closest('[data-tag-docs-close]')) close();
    });
    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape' && drawer.classList.contains('is-open')) close();
    });
  })();

  // Sidebar submenu toggle (plugin groups with children)
  document.addEventListener('click', function (e) {
    var btn = e.target.closest('[data-sb-toggle]');
    if (!btn) return;
    e.preventDefault();
    var group = btn.closest('[data-sb-group]');
    if (group) group.classList.toggle('is-open');
  });

  // Mobile hamburger
  var mobileBtn = document.querySelector('[data-sidebar-mobile]');
  if (mobileBtn) {
    mobileBtn.addEventListener('click', function () {
      body.classList.toggle('is-mobile-open');
    });
    // закрыть при клике вне сайдбара на мобилке
    document.addEventListener('click', function (e) {
      if (!body.classList.contains('is-mobile-open')) return;
      if (e.target === mobileBtn || mobileBtn.contains(e.target)) return;
      if (!e.target.closest('.sidebar')) {
        body.classList.remove('is-mobile-open');
      }
    });
  }

  // Language dropdown
  var langWrap = document.querySelector('[data-lang-dd]');
  if (langWrap) {
    var langBtn = langWrap.querySelector('[data-lang-toggle]');
    var langMenu = langWrap.querySelector('[data-lang-menu]');
    if (langBtn && langMenu) {
      langBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        langMenu.hidden = !langMenu.hidden;
      });
      document.addEventListener('click', function (e) {
        if (!langMenu.hidden && !langWrap.contains(e.target)) langMenu.hidden = true;
      });
      document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') langMenu.hidden = true;
      });
    }
  }

  // Галерея доп.поля типа "Изображение" с image_count > 1
  document.querySelectorAll('[data-cf-gallery]').forEach(function (wrap) {
    var input = wrap.querySelector('input[type="hidden"][name]');
    var grid = wrap.querySelector('[data-cf-gallery-grid]');
    var picker = wrap.querySelector('input[type="hidden"]:not([name])');
    var addBtn = wrap.querySelector('[data-media-picker]');
    var max = parseInt(wrap.getAttribute('data-max'), 10) || 1;
    function parseList() {
      var raw = (input.value || '').trim();
      if (!raw || raw === 'null') return [];
      try { var arr = JSON.parse(raw); return Array.isArray(arr) ? arr.filter(Boolean) : []; }
      catch (e) { return []; }
    }
    function save(list) { input.value = JSON.stringify(list); }
    function redraw(list) {
      grid.innerHTML = '';
      list.forEach(function (url, i) {
        var cell = document.createElement('div');
        cell.className = 'cf-gallery-cell';
        cell.innerHTML = '<img src="' + url + '" alt=""><button type="button" class="cf-gallery-del" title="Удалить">×</button>';
        cell.querySelector('.cf-gallery-del').addEventListener('click', function () {
          list.splice(i, 1); save(list); redraw(list);
        });
        grid.appendChild(cell);
      });
      if (addBtn) addBtn.style.display = list.length >= max ? 'none' : '';
    }
    redraw(parseList());
    addBtn.addEventListener('celena:media-picked', function (e) {
      var urls = e.detail || [];
      if (!urls.length) return;
      var list = parseList();
      urls.forEach(function (u) { if (list.length < max && list.indexOf(u) === -1) list.push(u); });
      save(list); redraw(list);
    });
  });

  // Крестик на миниатюре обложки — очищает input и превью
  document.addEventListener('click', function (e) {
    var btn = e.target.closest('[data-cover-clear]');
    if (!btn) return;
    e.preventDefault();
    var inpSel = btn.getAttribute('data-cover-clear');
    var prevSel = btn.getAttribute('data-cover-preview');
    var inp = inpSel ? document.querySelector(inpSel) : null;
    var prev = prevSel ? document.querySelector(prevSel) : null;
    if (inp) { inp.value = ''; inp.dispatchEvent(new Event('change', { bubbles: true })); }
    if (prev) prev.innerHTML = '';
  });

  // ---------- Уведомления: общее хранилище «прочитанных» (per-браузер, localStorage) ----------
  // Каждое уведомление имеет стабильный data-notif-id (генерит сервер). Эти функции
  // используются и колокольчиком в топбаре, и страницей /admin/notifications.
  var NOTIF_READ_KEY = 'celena_admin_notif_read';
  var NOTIF_READ_MAX = 200; // не даём списку прочитанных расти бесконечно
  function notifReadIds() {
    try {
      var arr = JSON.parse(localStorage.getItem(NOTIF_READ_KEY) || '[]');
      return Array.isArray(arr) ? arr : [];
    } catch (e) { return []; }
  }
  function notifIsRead(id) { return notifReadIds().indexOf(id) !== -1; }
  function notifMarkRead(id) {
    if (!id) return;
    var ids = notifReadIds();
    if (ids.indexOf(id) === -1) {
      ids.push(id);
      try { localStorage.setItem(NOTIF_READ_KEY, JSON.stringify(ids.slice(-NOTIF_READ_MAX))); } catch (e) {}
    }
  }
  function notifUnmarkRead(id) {
    if (!id) return;
    var ids = notifReadIds().filter(function (x) { return x !== id; });
    try { localStorage.setItem(NOTIF_READ_KEY, JSON.stringify(ids)); } catch (e) {}
  }

  // ---------- Колокольчик в топбаре ----------
  // Прочитанные уведомления скрываются; непрочитанные подсвечиваются, бейдж = их число.
  var notifWrap = document.querySelector('[data-notif]');
  if (notifWrap) {
    var notifBtn = notifWrap.querySelector('[data-notif-toggle]');
    var notifPanel = notifWrap.querySelector('[data-notif-panel]');
    var notifList = notifWrap.querySelector('[data-notif-list]');
    var notifEmpty = notifWrap.querySelector('[data-notif-empty]');
    var notifClear = notifWrap.querySelector('[data-notif-clear]');
    var items = notifList ? Array.prototype.slice.call(notifList.querySelectorAll('.notif-item')) : [];

    function updateBadge(count) {
      var badge = notifBtn ? notifBtn.querySelector('[data-notif-badge]') : null;
      if (count > 0) {
        if (!badge && notifBtn) {
          badge = document.createElement('span');
          badge.className = 'notif-badge';
          badge.setAttribute('data-notif-badge', '');
          notifBtn.appendChild(badge);
        }
        if (badge) badge.textContent = String(count);
      } else if (badge) {
        badge.remove();
      }
    }

    function refresh() {
      var unread = 0;
      items.forEach(function (li) {
        if (notifIsRead(li.getAttribute('data-notif-id'))) {
          li.hidden = true;
          li.classList.remove('is-unread');
        } else {
          li.hidden = false;
          li.classList.add('is-unread');
          unread++;
        }
      });
      updateBadge(unread);
      if (notifClear) notifClear.hidden = unread === 0;
      if (notifEmpty) notifEmpty.hidden = unread !== 0;
    }

    refresh();

    if (notifBtn && notifPanel) {
      notifBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        notifPanel.hidden = !notifPanel.hidden;
      });
      document.addEventListener('click', function (e) {
        if (!notifPanel.hidden && !notifWrap.contains(e.target)) notifPanel.hidden = true;
      });
      document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') notifPanel.hidden = true;
      });
    }

    notifWrap.addEventListener('click', function (e) {
      // Галочка «прочитано» у конкретного уведомления.
      var readBtn = e.target.closest('[data-notif-read]');
      if (readBtn) {
        e.preventDefault();
        e.stopPropagation();
        var li = readBtn.closest('.notif-item');
        if (li) { notifMarkRead(li.getAttribute('data-notif-id')); refresh(); }
        return;
      }
      // «Прочитать все» — помечаем все ещё видимые уведомления.
      if (e.target.closest('[data-notif-clear]')) {
        e.preventDefault();
        items.forEach(function (li) { if (!li.hidden) notifMarkRead(li.getAttribute('data-notif-id')); });
        refresh();
        return;
      }
      // Клик по самому уведомлению (переход на заказ) — тоже считаем прочитанным.
      var link = e.target.closest('.notif-link');
      if (link) {
        var li2 = link.closest('.notif-item');
        if (li2) notifMarkRead(li2.getAttribute('data-notif-id'));
      }
    });
  }

  // ---------- Страница «Все уведомления» (/admin/notifications) ----------
  // Здесь прочитанные не скрываются: их можно посмотреть, отфильтровать и снять отметку.
  var notifPage = document.querySelector('[data-notif-page]');
  if (notifPage) {
    var pageItems = Array.prototype.slice.call(notifPage.querySelectorAll('.notif-page-item'));
    var filterBtns = Array.prototype.slice.call(notifPage.querySelectorAll('[data-notif-filter]'));
    var filterEmpty = notifPage.querySelector('[data-notif-filter-empty]');
    var pageClearBtn = document.querySelector('[data-notif-page-clear]');
    var currentFilter = 'all';

    function syncPage() {
      var shown = 0;
      pageItems.forEach(function (li) {
        var read = notifIsRead(li.getAttribute('data-notif-id'));
        li.classList.toggle('is-unread', !read);
        li.classList.toggle('is-read', read);
        var visible = currentFilter === 'all'
          || (currentFilter === 'unread' && !read)
          || (currentFilter === 'read' && read);
        li.hidden = !visible;
        if (visible) shown++;
        var btn = li.querySelector('[data-notif-toggle-read]');
        if (btn) {
          var label = read ? btn.getAttribute('data-label-unread') : btn.getAttribute('data-label-read');
          if (label) { btn.title = label; btn.setAttribute('aria-label', label); }
        }
      });
      if (filterEmpty) filterEmpty.hidden = shown !== 0;
    }
    syncPage();

    filterBtns.forEach(function (b) {
      b.addEventListener('click', function () {
        currentFilter = b.getAttribute('data-notif-filter') || 'all';
        filterBtns.forEach(function (x) { x.classList.toggle('active', x === b); });
        syncPage();
      });
    });

    notifPage.addEventListener('click', function (e) {
      var toggle = e.target.closest('[data-notif-toggle-read]');
      if (!toggle) return;
      e.preventDefault();
      var li = toggle.closest('.notif-page-item');
      if (!li) return;
      var id = li.getAttribute('data-notif-id');
      if (notifIsRead(id)) notifUnmarkRead(id); else notifMarkRead(id);
      syncPage();
    });

    if (pageClearBtn) {
      pageClearBtn.addEventListener('click', function () {
        pageItems.forEach(function (li) { notifMarkRead(li.getAttribute('data-notif-id')); });
        syncPage();
      });
    }
  }
})();
