{% load css_tags %}{% block_css 'enap_designsystem/blocks/faq_busca.css' %}
{% load wagtailcore_tags %}

<section class="faq-busca" id="faq-busca-{{ id }}">
    <div class="faq-busca__container">
        {% if value.titulo %}
            <h2 class="faq-busca__titulo">{{ value.titulo }}</h2>
        {% endif %}

        <div class="faq-busca__campo-busca">
            <i class="fa-solid fa-magnifying-glass faq-busca__icone-busca"></i>
            <input
                type="search"
                class="faq-busca__input"
                placeholder="{{ value.placeholder_busca }}"
                aria-label="{{ value.placeholder_busca }}"
            >
        </div>

        {% if value.categorias %}
            <div class="faq-busca__abas">
                {% for categoria in value.categorias %}
                    <button
                        type="button"
                        class="faq-busca__aba {% if forloop.first %}is-active{% endif %}"
                        data-faq-tab-target="faq-busca-cat-{{ forloop.counter }}-{{ id }}"
                    >
                        {{ categoria.nome_categoria }}
                    </button>
                {% endfor %}
            </div>

            <div class="faq-busca__categorias">
                {% for categoria in value.categorias %}
                    <div
                        class="faq-busca__categoria {% if forloop.first %}is-active{% endif %}"
                        id="faq-busca-cat-{{ forloop.counter }}-{{ id }}"
                        data-faq-categoria
                    >
                        <h3 class="faq-busca__nome-categoria">{{ categoria.nome_categoria }}</h3>

                        <div class="faq-busca__perguntas">
                            {% for pergunta in categoria.perguntas %}
                                <div class="faq-busca__item" data-faq-item>
                                    <button
                                        type="button"
                                        class="faq-busca__pergunta"
                                        aria-expanded="false"
                                        data-faq-toggle
                                    >
                                        <span class="faq-busca__pergunta-texto" data-faq-pergunta>{{ pergunta.pergunta }}</span>
                                        <i class="fa-solid fa-chevron-down faq-busca__pergunta-icone"></i>
                                    </button>
                                    <div class="faq-busca__resposta-wrapper">
                                        <div class="faq-busca__resposta" data-faq-resposta>
                                            {{ pergunta.resposta|richtext }}
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                {% endfor %}
            </div>

            <div class="faq-busca__vazio" data-faq-vazio hidden>
                <p>Nenhuma pergunta encontrada para a sua busca.</p>
            </div>
        {% endif %}
    </div>
</section>

<script>
(function() {
    var root = document.getElementById('faq-busca-{{ id }}');
    if (!root || root.dataset.faqInitialized) {
        return;
    }
    root.dataset.faqInitialized = 'true';

    var searchInput = root.querySelector('.faq-busca__input');
    var tabs = root.querySelectorAll('[data-faq-tab-target]');
    var categorias = root.querySelectorAll('[data-faq-categoria]');
    var items = root.querySelectorAll('[data-faq-item]');
    var emptyState = root.querySelector('[data-faq-vazio]');

    function setItemOpen(item, open) {
        var button = item.querySelector('[data-faq-toggle]');
        var icon = item.querySelector('.faq-busca__pergunta-icone');
        button.setAttribute('aria-expanded', open ? 'true' : 'false');
        item.classList.toggle('is-open', open);
        if (icon) {
            icon.style.transform = open ? 'rotate(180deg)' : 'rotate(0deg)';
        }
    }

    items.forEach(function(item) {
        var button = item.querySelector('[data-faq-toggle]');
        button.addEventListener('click', function() {
            setItemOpen(item, button.getAttribute('aria-expanded') !== 'true');
        });
    });

    tabs.forEach(function(tab) {
        tab.addEventListener('click', function() {
            if (root.classList.contains('is-searching')) {
                return;
            }
            tabs.forEach(function(t) { t.classList.remove('is-active'); });
            tab.classList.add('is-active');
            var targetId = tab.getAttribute('data-faq-tab-target');
            categorias.forEach(function(categoria) {
                categoria.classList.toggle('is-active', categoria.id === targetId);
            });
        });
    });

    if (searchInput) {
        searchInput.addEventListener('input', function() {
            var query = searchInput.value.trim().toLowerCase();
            var isSearching = query.length > 0;
            root.classList.toggle('is-searching', isSearching);

            if (!isSearching) {
                items.forEach(function(item) {
                    item.hidden = false;
                    setItemOpen(item, false);
                });
                categorias.forEach(function(categoria, index) {
                    categoria.hidden = false;
                    categoria.classList.toggle('is-active', index === 0);
                });
                emptyState.hidden = true;
                return;
            }

            var totalVisivel = 0;

            categorias.forEach(function(categoria) {
                categoria.classList.add('is-active');
                var categoriaTemMatch = false;

                categoria.querySelectorAll('[data-faq-item]').forEach(function(item) {
                    var pergunta = item.querySelector('[data-faq-pergunta]').textContent.toLowerCase();
                    var resposta = item.querySelector('[data-faq-resposta]').textContent.toLowerCase();
                    var match = pergunta.indexOf(query) !== -1 || resposta.indexOf(query) !== -1;

                    item.hidden = !match;
                    setItemOpen(item, false);

                    if (match) {
                        categoriaTemMatch = true;
                        totalVisivel++;
                    }
                });

                categoria.hidden = !categoriaTemMatch;
            });

            emptyState.hidden = totalVisivel > 0;
        });
    }
})();
</script>