(() => {
  const input = document.getElementById('search-input');
  const resultsBox = document.getElementById('search-results');
  if (!input || !resultsBox) return;

  let index = [];
  let loaded = false;

  const render = (items) => {
    if (!items.length) {
      resultsBox.innerHTML = '<p class="muted">No matches.</p>';
      resultsBox.classList.add('active');
      return;
    }

    const list = items
      .slice(0, 12)
      .map(item => `
        <li>
          <a href="${item.url}">
            <div class="result-title">${item.title}</div>
            <div class="result-section">${item.section}</div>
            <div class="muted">${item.summary}</div>
          </a>
        </li>
      `).join('');

    resultsBox.innerHTML = `<ul>${list}</ul>`;
    resultsBox.classList.add('active');
  };

  const filter = (query) => {
    if (!query.trim()) {
      resultsBox.classList.remove('active');
      return;
    }

    const q = query.toLowerCase();
    const items = index.filter(item => {
      return (
        item.title.toLowerCase().includes(q) ||
        item.section.toLowerCase().includes(q) ||
        item.summary.toLowerCase().includes(q) ||
        item.tags.some(tag => tag.toLowerCase().includes(q))
      );
    });
    render(items);
  };

  const loadIndex = async () => {
    if (loaded) return index;
    try {
      const res = await fetch('/search-index.json');
      index = await res.json();
      loaded = true;
    } catch (err) {
      console.error('Search index failed to load', err);
    }
    return index;
  };

  input.addEventListener('input', async (e) => {
    await loadIndex();
    filter(e.target.value);
  });

  document.addEventListener('click', (e) => {
    if (!resultsBox.contains(e.target) && e.target !== input) {
      resultsBox.classList.remove('active');
    }
  });
})();