{% extends 'partials/base.html.twig' %}

{% block body %}
<div class="container">
  {% include 'partials/breadcrumbs.html.twig' %}
  <section class="search-page">
    <h1 class="t-display" style="margin-bottom:18px;">Busca</h1>
    {% include 'partials/search-form.html.twig' with {q: uri.query('q')} %}
    <div class="search-page__filters" id="search-filters" role="group" aria-label="Filtrar por tipo de conteúdo"></div>
    <p class="search-page__count" id="search-count" aria-live="polite"></p>
    <ul class="search-results" id="search-results"></ul>
    <noscript><p class="empty-state">A busca precisa de JavaScript ativado.</p></noscript>
  </section>
</div>

<script>
(function () {
  var INDEX_URL = {{ url('/busca.json')|json_encode|raw }};
  var resultsEl = document.getElementById('search-results');
  var countEl = document.getElementById('search-count');
  var filtersEl = document.getElementById('search-filters');
  var input = document.querySelector('.search-page__form input[name="q"]');
  var activeType = '';
  var currentData = [];
  var currentQ = '';

  function norm(s){ return (s || '').toString().toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""); }
  function getQ(){ return new URLSearchParams(window.location.search).get('q') || ''; }
  function esc(s){ var d=document.createElement('div'); d.textContent=s||''; return d.innerHTML; }

  function renderFilters(data){
    var types = {};
    data.forEach(function (it) { if (it.type && it.type_label) types[it.type] = it.type_label; });
    var keys = Object.keys(types).sort(function (a, b) { return types[a].localeCompare(types[b], 'pt-BR'); });
    if (!keys.length) return;
    var html = '<button type="button" class="search-filter is-active" data-type="">Todos</button>';
    html += keys.map(function (t) { return '<button type="button" class="search-filter" data-type="' + t + '">' + esc(types[t]) + '</button>'; }).join('');
    filtersEl.innerHTML = html;
    filtersEl.addEventListener('click', function (e) {
      var btn = e.target.closest('[data-type]');
      if (!btn) return;
      activeType = btn.getAttribute('data-type');
      Array.prototype.forEach.call(filtersEl.querySelectorAll('.search-filter'), function (b) { b.classList.toggle('is-active', b === btn); });
      render(search(currentData, currentQ), currentQ);
    });
  }

  function render(items, q){
    if (!q) { countEl.textContent = 'Digite um termo para buscar.'; resultsEl.innerHTML=''; return; }
    if (!items.length) { countEl.textContent = 'Nenhum resultado para “' + q + '”.'; resultsEl.innerHTML=''; return; }
    countEl.textContent = items.length + (items.length === 1 ? ' resultado' : ' resultados') + ' para “' + q + '”.';
    resultsEl.innerHTML = items.map(function (it) {
      return '<li class="search-result">' +
        '<div class="search-result__meta">' +
          (it.type_label ? '<span class="tag">' + esc(it.type_label) + '</span>' : '') +
          (it.editoria ? '<span class="tag">' + esc(it.editoria) + '</span>' : '') +
          '<span class="date-style">' + esc(it.date) + '</span>' +
        '</div>' +
        '<a class="search-result__title" href="' + it.url + '">' + esc(it.title) + '</a>' +
        '<p class="search-result__excerpt">' + esc(it.summary || it.text).slice(0, 200) + '…</p>' +
      '</li>';
    }).join('');
  }

  function search(data, q){
    var n = norm(q);
    var byType = activeType ? data.filter(function (it) { return it.type === activeType; }) : data;
    if (!n) return [];
    return byType.filter(function (it) {
      var hay = norm([it.title, it.summary, it.text, it.author, it.editoria, (it.tags||[]).join(' ')].join(' '));
      return n.split(/\s+/).every(function (w) { return hay.indexOf(w) !== -1; });
    });
  }

  fetch(INDEX_URL).then(function (r) { return r.json(); }).then(function (data) {
    currentData = data;
    renderFilters(data);
    currentQ = getQ();
    if (input) input.value = currentQ;
    render(search(currentData, currentQ), currentQ);
    var form = document.querySelector('.search-page__form');
    if (form) form.addEventListener('submit', function (e) {
      e.preventDefault();
      currentQ = input.value.trim();
      history.replaceState(null, '', window.location.pathname + (currentQ ? '?q=' + encodeURIComponent(currentQ) : ''));
      render(search(currentData, currentQ), currentQ);
    });
  }).catch(function () { countEl.textContent = 'Não foi possível carregar o índice de busca.'; });
})();
</script>
{% endblock %}