为使用 timeline 标签功能页面增加筛选功能（安知鱼版）

(function() {
  function getCategoryFromIcon(spanElem) {
    const classNames = spanElem.className.split(/\s+/);
    for (let cls of classNames) {
      if (cls.startsWith('icon-')) {
        return cls.replace(/^icon-/, '').toLowerCase();
      }
    }
    return '';
  }

  function getCategoryFromText(textElem) {
    let text = textElem.innerText.trim();
    text = text.replace(/[：:、\s]+$/, '');
    return text.toLowerCase();
  }

  function findItemCategories(item) {
    const categories = new Set();

    const textElems = item.querySelectorAll('.timeline-item-content strong');
    textElems.forEach(elem => {
      const cat = getCategoryFromText(elem);
      if (cat) categories.add(cat);
    });

    if (categories.size === 0) {
      const spans = item.querySelectorAll('.timeline-item-content span');
      for (let span of spans) {
        const cat = getCategoryFromIcon(span);
        if (cat) categories.add(cat);
      }
    }
    return Array.from(categories);
  }

  function filterTimeline(category) {
    let effectiveCategory = category;
    if (category !== 'all') {
      if (category.startsWith('icon ') || category.startsWith('text ')) {
        effectiveCategory = category.substring(5);
      } else {
        effectiveCategory = category;
      }
    }
    effectiveCategory = effectiveCategory.trim().toLowerCase();

    const containers = document.querySelectorAll('.timeline');
    containers.forEach(container => {
      container.style.display = '';

      let hasMatch = false;
      const items = container.querySelectorAll('.timeline-item');
      items.forEach(item => {
        if (item.classList.contains('headline')) return;

        const itemCategories = findItemCategories(item);
        const hasIdentifier = itemCategories.length > 0;
        if (!hasIdentifier) {
          item.style.display = (category === 'all') ? '' : 'none';
          return;
        }

        const matches = (category === 'all') || itemCategories.includes(effectiveCategory);
        if (matches) {
          hasMatch = true;
          item.style.display = '';
        } else {
          item.style.display = 'none';
        }
      });

      const headline = container.querySelector('.timeline-item.headline');
      if (headline) {
        headline.style.display = (category === 'all' || hasMatch) ? '' : 'none';
      }
      if (category !== 'all' && !hasMatch) {
        container.style.display = 'none';
      }
    });

    const allContainers = document.querySelectorAll('.timeline');
    let firstVisible = null;
    for (let i = 0; i < allContainers.length; i++) {
      if (allContainers[i].style.display !== 'none') {
        firstVisible = allContainers[i];
        break;
      }
    }

    allContainers.forEach(container => {
      container.style.marginTop = '';
    });
    if (firstVisible && document.querySelector('.category-filter')) {
      firstVisible.style.marginTop = '0';
    }
  }

  function bindFilterButtons() {
    const btns = document.querySelectorAll('.filter-btn');
    if (btns.length === 0) return;

    btns.forEach(btn => {
      if (btn._filterBound) return;
      btn._filterBound = true;
      btn.addEventListener('click', function() {
        const category = this.getAttribute('data-category');
        document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
        document.querySelectorAll('.filter-btn').forEach(b => {
          if (b.getAttribute('data-category') === category) {
            b.classList.add('active');
          }
        });
        filterTimeline(category);
      });
    });
  }

  function syncActiveButtons() {
    const activeBtn = document.querySelector('.filter-btn.active');
    if (activeBtn) {
      const category = activeBtn.getAttribute('data-category');
      document.querySelectorAll('.filter-btn').forEach(btn => {
        if (btn.getAttribute('data-category') === category) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
    } else {
      const allBtn = document.querySelector('.filter-btn[data-category="all"]');
      if (allBtn) allBtn.classList.add('active');
      syncActiveButtons();
    }
  }

  function updateFilterCounts() {
    const containers = document.querySelectorAll('.timeline');
    const allItems = [];
    containers.forEach(container => {
      const items = container.querySelectorAll('.timeline-item:not(.headline)');
      items.forEach(item => allItems.push(item));
    });

    const itemsData = allItems.map(item => ({
      item: item,
      categories: findItemCategories(item)
    }));

    const totalCount = itemsData.length;
    const btns = document.querySelectorAll('.filter-btn');
    btns.forEach(btn => {
      const existingCount = btn.querySelector('.filter-count');
      if (existingCount) existingCount.remove();

      let count = 0;
      const category = btn.getAttribute('data-category');

      if (category === 'all') {
        count = totalCount;
      } else {
        let effectiveCategory = category;
        if (category.startsWith('icon ') || category.startsWith('text ')) {
          effectiveCategory = category.substring(5);
        }
        effectiveCategory = effectiveCategory.trim().toLowerCase();
        count = itemsData.filter(data => data.categories.includes(effectiveCategory)).length;
      }

      const countSpan = document.createElement('span');
      countSpan.className = 'filter-count';
      countSpan.textContent = ` (${count})`;

      btn.appendChild(countSpan);
      if (count === 0) {
        btn.setAttribute('hidden', 'hidden');
      } else {
        btn.removeAttribute('hidden');
      }
    });
  }

  function init() {
    bindFilterButtons();
    syncActiveButtons();
    updateFilterCounts();
    document.addEventListener('pjax:complete', function() {
      bindFilterButtons();
      syncActiveButtons();
      updateFilterCounts();
      const allBtn = document.querySelector('.filter-btn[data-category="all"]');
      if (allBtn) allBtn.click();
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();