{% 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 container-medium padding-global">
        {% if value.titulo %}
            <h2 class="faq-busca__titulo">{{ value.titulo }}</h2>
        {% endif %}

        <div class="faq-busca__busca-painel">
            <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 }}"
                >
                <button type="button" class="faq-busca__limpar-busca" data-faq-limpar aria-label="Limpar busca" hidden>
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <p class="faq-busca__contagem" data-faq-contagem hidden></p>

            {% if value.abas %}
                <div class="faq-busca__abas" role="tablist" aria-label="{{ value.titulo|default:'Categorias de perguntas frequentes' }}">
                    {% for aba in value.abas %}
                        <button
                            type="button"
                            class="faq-busca__aba {% if forloop.first %}is-active{% endif %}"
                            id="faq-busca-tab-{{ forloop.counter }}-{{ id }}"
                            role="tab"
                            aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
                            aria-controls="faq-busca-aba-{{ forloop.counter }}-{{ id }}"
                            tabindex="{% if forloop.first %}0{% else %}-1{% endif %}"
                            data-faq-tab-target="faq-busca-aba-{{ forloop.counter }}-{{ id }}"
                        >
                            {{ aba.nome_aba }}
                        </button>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        {% if value.abas %}
            <div class="faq-busca__categorias">
                {% for aba in value.abas %}
                    {% with aba_index=forloop.counter %}
                    <div
                        class="faq-busca__categoria"
                        id="faq-busca-aba-{{ aba_index }}-{{ id }}"
                        role="tabpanel"
                        aria-labelledby="faq-busca-tab-{{ aba_index }}-{{ id }}"
                        tabindex="0"
                        {% if not forloop.first %}hidden{% endif %}
                        data-faq-categoria
                    >
                        {% if aba.faqs|length > 1 %}
                            <div class="faq-busca__subabas" role="tablist" aria-label="{{ aba.nome_aba }}">
                                {% for faq in aba.faqs %}
                                    <button
                                        type="button"
                                        class="faq-busca__subaba {% if forloop.first %}is-active{% endif %}"
                                        id="faq-busca-subaba-btn-{{ aba_index }}-{{ forloop.counter }}-{{ id }}"
                                        role="tab"
                                        aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
                                        aria-controls="faq-busca-subaba-{{ aba_index }}-{{ forloop.counter }}-{{ id }}"
                                        tabindex="{% if forloop.first %}0{% else %}-1{% endif %}"
                                        data-faq-subaba-target="faq-busca-subaba-{{ aba_index }}-{{ forloop.counter }}-{{ id }}"
                                    >
                                        {{ faq.nome_categoria }}
                                    </button>
                                {% endfor %}
                            </div>
                        {% endif %}

                        {% for faq in aba.faqs %}
                            {% with faq_index=forloop.counter %}
                            <div
                                class="faq-busca__faq-grupo"
                                id="faq-busca-subaba-{{ aba_index }}-{{ faq_index }}-{{ id }}"
                                data-faq-subaba-panel
                                {% if not forloop.first %}hidden{% endif %}
                            >
                                {% if aba.faqs|length == 1 %}
                                    <h3 class="faq-busca__nome-categoria">{{ faq.nome_categoria }}</h3>
                                {% endif %}

                                {% if faq.titulos %}
                                    <div class="faq-busca__titulo-layout">
                                        <div class="faq-busca__titulos-nav" role="tablist" aria-label="{{ faq.nome_categoria }}">
                                            {% for titulo_block in faq.titulos %}
                                                {% if titulo_block.block_type == 'titulo' %}
                                                    <button
                                                        type="button"
                                                        class="faq-busca__titulo-btn {% if forloop.first %}is-active{% endif %}"
                                                        data-faq-titulo-target="faq-busca-titulo-{{ aba_index }}-{{ faq_index }}-{{ forloop.counter }}-{{ id }}"
                                                    >
                                                        {{ titulo_block.value.titulo }}
                                                    </button>
                                                {% endif %}
                                            {% endfor %}
                                        </div>

                                        <div class="faq-busca__titulo-conteudo">
                                            {% for titulo_block in faq.titulos %}
                                                {% if titulo_block.block_type == 'titulo' %}
                                                    {% with titulo=titulo_block.value %}
                                                    <div
                                                        class="faq-busca__titulo-grupo"
                                                        id="faq-busca-titulo-{{ aba_index }}-{{ faq_index }}-{{ forloop.counter }}-{{ id }}"
                                                        data-faq-titulo-grupo
                                                        {% if not forloop.first %}hidden{% endif %}
                                                    >
                                                        <h4 class="faq-busca__titulo-nome">{{ titulo.titulo }}</h4>

                                                        <div class="faq-busca__perguntas">
                                                            {% for pergunta_block in titulo.perguntas %}
                                                                {% if pergunta_block.block_type == 'pergunta' %}
                                                                    {% with pergunta=pergunta_block.value %}
                                                                    <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>
                                                                    {% endwith %}
                                                                {% endif %}
                                                            {% endfor %}
                                                        </div>
                                                    </div>
                                                    {% endwith %}
                                                {% endif %}
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                            {% endwith %}
                        {% endfor %}
                    </div>
                    {% endwith %}
                {% 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 clearBtn = root.querySelector('[data-faq-limpar]');
    var contagem = root.querySelector('[data-faq-contagem]');
    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]');
    var tituloBtns = root.querySelectorAll('[data-faq-titulo-target]');
    var subabaBtns = root.querySelectorAll('[data-faq-subaba-target]');

    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');
        });
    });

    tituloBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            var targetId = btn.getAttribute('data-faq-titulo-target');
            var target = document.getElementById(targetId);
            if (!target) {
                return;
            }
            var nav = btn.closest('.faq-busca__titulos-nav');
            if (nav) {
                nav.querySelectorAll('.faq-busca__titulo-btn').forEach(function(b) {
                    b.classList.remove('is-active');
                });
            }
            btn.classList.add('is-active');

            var faqGrupo = btn.closest('.faq-busca__faq-grupo');
            if (faqGrupo) {
                faqGrupo.querySelectorAll('[data-faq-titulo-grupo]').forEach(function(grupo) {
                    grupo.hidden = grupo !== target;
                });
            }
        });
    });

    subabaBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            var targetId = btn.getAttribute('data-faq-subaba-target');
            var target = document.getElementById(targetId);
            if (!target) {
                return;
            }
            var nav = btn.closest('.faq-busca__subabas');
            if (nav) {
                nav.querySelectorAll('.faq-busca__subaba').forEach(function(b) {
                    var isActive = b === btn;
                    b.classList.toggle('is-active', isActive);
                    b.setAttribute('aria-selected', isActive ? 'true' : 'false');
                    b.setAttribute('tabindex', isActive ? '0' : '-1');
                });
            }

            var categoriaEl = btn.closest('.faq-busca__categoria');
            if (categoriaEl) {
                categoriaEl.querySelectorAll('[data-faq-subaba-panel]').forEach(function(panel) {
                    panel.hidden = panel !== target;
                });
            }
        });
    });

    var tabsList = Array.prototype.slice.call(tabs);

    function activateTab(tab, options) {
        var opts = options || {};
        var targetId = tab.getAttribute('data-faq-tab-target');

        tabsList.forEach(function(t) {
            var isActive = t === tab;
            t.classList.toggle('is-active', isActive);
            t.setAttribute('aria-selected', isActive ? 'true' : 'false');
            t.setAttribute('tabindex', isActive ? '0' : '-1');
        });

        categorias.forEach(function(categoria) {
            categoria.hidden = categoria.id !== targetId;
        });

        if (opts.focus) {
            tab.focus();
        }
    }

    tabsList.forEach(function(tab, index) {
        tab.addEventListener('click', function() {
            activateTab(tab);
        });

        tab.addEventListener('keydown', function(event) {
            var newIndex = null;

            if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
                newIndex = (index + 1) % tabsList.length;
            } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
                newIndex = (index - 1 + tabsList.length) % tabsList.length;
            } else if (event.key === 'Home') {
                newIndex = 0;
            } else if (event.key === 'End') {
                newIndex = tabsList.length - 1;
            }

            if (newIndex !== null) {
                event.preventDefault();
                activateTab(tabsList[newIndex], { focus: true });
            }
        });
    });

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

            if (clearBtn) {
                clearBtn.hidden = !isSearching;
            }

            if (!isSearching) {
                items.forEach(function(item) {
                    item.hidden = false;
                    setItemOpen(item, false);
                });
                subabaBtns.forEach(function(btn) {
                    var targetId = btn.getAttribute('data-faq-subaba-target');
                    var target = document.getElementById(targetId);
                    if (target) {
                        target.hidden = !btn.classList.contains('is-active');
                    }
                });
                tituloBtns.forEach(function(btn) {
                    var targetId = btn.getAttribute('data-faq-titulo-target');
                    var target = document.getElementById(targetId);
                    if (target) {
                        target.hidden = !btn.classList.contains('is-active');
                    }
                });
                var activeTab = tabsList.filter(function(t) {
                    return t.classList.contains('is-active');
                })[0];
                if (activeTab) {
                    activateTab(activeTab);
                }
                emptyState.hidden = true;
                if (contagem) {
                    contagem.hidden = true;
                }
                return;
            }

            var totalVisivel = 0;

            categorias.forEach(function(categoria) {
                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.dataset.faqHasMatch = categoriaTemMatch ? 'true' : 'false';
            });

            var currentTab = tabsList.filter(function(t) {
                return t.classList.contains('is-active');
            })[0];
            var currentCategoria = currentTab ? document.getElementById(currentTab.getAttribute('data-faq-tab-target')) : null;

            var categoriasList = Array.prototype.slice.call(categorias);
            var chosenCategoria = (currentCategoria && currentCategoria.dataset.faqHasMatch === 'true')
                ? currentCategoria
                : categoriasList.filter(function(c) { return c.dataset.faqHasMatch === 'true'; })[0];

            if (!chosenCategoria) {
                chosenCategoria = currentCategoria || categoriasList[0];
            }

            var chosenTab = tabsList.filter(function(t) {
                return t.getAttribute('data-faq-tab-target') === chosenCategoria.id;
            })[0];

            if (chosenTab) {
                activateTab(chosenTab);
            }

            var panels = Array.prototype.slice.call(chosenCategoria.querySelectorAll('[data-faq-subaba-panel]'));

            if (panels.length) {
                panels.forEach(function(panel) {
                    var hasMatch = panel.querySelectorAll('[data-faq-item]:not([hidden])').length > 0;
                    panel.dataset.faqHasMatch = hasMatch ? 'true' : 'false';
                });

                var currentPanel = panels.filter(function(p) { return !p.hidden; })[0];
                var chosenPanel = (currentPanel && currentPanel.dataset.faqHasMatch === 'true')
                    ? currentPanel
                    : panels.filter(function(p) { return p.dataset.faqHasMatch === 'true'; })[0];

                if (!chosenPanel) {
                    chosenPanel = currentPanel || panels[0];
                }

                panels.forEach(function(panel) {
                    panel.hidden = panel !== chosenPanel;
                });

                var subabasNav = chosenCategoria.querySelector('.faq-busca__subabas');
                if (subabasNav) {
                    subabasNav.querySelectorAll('.faq-busca__subaba').forEach(function(btn) {
                        var isActive = btn.getAttribute('data-faq-subaba-target') === chosenPanel.id;
                        btn.classList.toggle('is-active', isActive);
                        btn.setAttribute('aria-selected', isActive ? 'true' : 'false');
                        btn.setAttribute('tabindex', isActive ? '0' : '-1');
                    });
                }
            }

            chosenCategoria.querySelectorAll('.faq-busca__faq-grupo').forEach(function(faqGrupo) {
                var grupoBtns = Array.prototype.slice.call(faqGrupo.querySelectorAll('.faq-busca__titulo-btn'));
                var currentBtn = faqGrupo.querySelector('.faq-busca__titulo-btn.is-active');

                grupoBtns.forEach(function(btn) {
                    var targetId = btn.getAttribute('data-faq-titulo-target');
                    var target = document.getElementById(targetId);
                    var hasMatch = !!(target && target.querySelectorAll('[data-faq-item]:not([hidden])').length > 0);
                    btn.dataset.faqHasMatch = hasMatch ? 'true' : 'false';
                });

                var chosenBtn = (currentBtn && currentBtn.dataset.faqHasMatch === 'true')
                    ? currentBtn
                    : grupoBtns.filter(function(b) { return b.dataset.faqHasMatch === 'true'; })[0];

                if (!chosenBtn) {
                    chosenBtn = currentBtn || grupoBtns[0];
                }

                grupoBtns.forEach(function(btn) {
                    btn.classList.toggle('is-active', btn === chosenBtn);
                });

                faqGrupo.querySelectorAll('[data-faq-titulo-grupo]').forEach(function(grupo) {
                    grupo.hidden = chosenBtn ? grupo.id !== chosenBtn.getAttribute('data-faq-titulo-target') : false;
                });
            });

            emptyState.hidden = totalVisivel > 0;

            if (contagem) {
                contagem.hidden = false;
                contagem.textContent = totalVisivel === 1
                    ? '1 pergunta encontrada'
                    : totalVisivel + ' perguntas encontradas';
            }
        }

        searchInput.addEventListener('input', runSearch);

        if (clearBtn) {
            clearBtn.addEventListener('click', function() {
                searchInput.value = '';
                runSearch();
                searchInput.focus();
            });
        }
    }
})();
</script>