// source --> https://elanillounico.com/wp-content/plugins/tolkienpedia/assets/js/portada-search.js?ver=0.9.60 
(() => {
  const boxes = document.querySelectorAll('.tolkienpedia-portada-search');
  boxes.forEach((box) => {
    const input = box.querySelector('input[name="buscar"]');
    const suggestions = box.querySelector('.tolkienpedia-search-suggestions');
    if (!input || !suggestions) return;

    let timer;
    let controller;
    input.addEventListener('input', () => {
      clearTimeout(timer);
      const query = input.value.trim();
      if (query.length < 3) {
        suggestions.hidden = true;
        suggestions.innerHTML = '';
        return;
      }
      timer = setTimeout(async () => {
        if (controller) controller.abort();
        controller = new AbortController();
        const url = new URL(tolkienpediaSearch.restUrl);
        url.searchParams.set('q', query);
        if (box.dataset.category) url.searchParams.set('categoria', box.dataset.category);
        try {
          const response = await fetch(url, { signal: controller.signal });
          const items = await response.json();
          suggestions.innerHTML = items.map((item) =>
            `<a href="${escapeHtml(item.url)}"><strong>${escapeHtml(item.title)}</strong><span>${escapeHtml(item.type)}</span></a>`
          ).join('');
          suggestions.hidden = !items.length;
        } catch (error) {
          if (error.name !== 'AbortError') suggestions.hidden = true;
        }
      }, 180);
    });

    document.addEventListener('click', (event) => {
      if (!box.contains(event.target)) suggestions.hidden = true;
    });
  });

  function escapeHtml(value) {
    const div = document.createElement('div');
    div.textContent = value || '';
    return div.innerHTML;
  }
})();