@props([
    'searchInputId',
    'searchInfoId',
    'tocLinkSelector',
    'sectionSelector',
    'tocListSelector' => '.kb-toc-list',
])

<script>
    (function () {
        var normalize = function (text) {
            return (text || '')
                .toLowerCase()
                .normalize('NFD')
                .replace(/[\u0300-\u036f]/g, '');
        };

        var initKnowledgeBaseSearch = function (config) {
            var searchInput = document.getElementById(config.searchInputId);
            var searchInfo = document.getElementById(config.searchInfoId);
            var tocLinks = Array.prototype.slice.call(document.querySelectorAll(config.tocLinkSelector));
            var sections = Array.prototype.slice.call(document.querySelectorAll(config.sectionSelector));

            if (!searchInput || !searchInfo || !tocLinks.length || !sections.length) {
                return;
            }

            var scrollTocToActive = function (activeLink, behavior) {
                if (!activeLink || typeof activeLink.scrollIntoView !== 'function') {
                    return;
                }

                var targetBehavior = behavior || 'auto';

                try {
                    activeLink.scrollIntoView({
                        block: 'nearest',
                        inline: 'nearest',
                        behavior: targetBehavior
                    });
                } catch (e) {
                    activeLink.scrollIntoView(false);
                }
            };

            var applySearch = function () {
                var query = normalize(searchInput.value.trim());
                var tokens = query === '' ? [] : query.split(/\s+/).filter(Boolean);
                var visibleCount = 0;

                sections.forEach(function (section) {
                    var haystack = normalize(section.innerText);
                    var visible = tokens.length === 0 || tokens.every(function (token) {
                        return haystack.indexOf(token) !== -1;
                    });

                    section.classList.toggle('kb-hidden', !visible);
                    if (visible) {
                        visibleCount += 1;
                    }

                    var linked = document.querySelector(config.tocLinkSelector + '[href="#' + section.id + '"]');
                    if (linked && linked.parentElement) {
                        linked.parentElement.classList.toggle('kb-hidden', !visible);
                    }
                });

                if (tokens.length === 0) {
                    searchInfo.textContent = '';
                } else {
                    searchInfo.textContent = 'Wyniki wyszukiwania: ' + visibleCount;
                }
            };

            searchInput.addEventListener('input', applySearch);
            applySearch();

            var lastActiveId = null;
            var setActiveLink = function (id, scrollBehavior) {
                var activeLink = null;

                tocLinks.forEach(function (link) {
                    var active = link.getAttribute('href') === '#' + id;
                    link.classList.toggle('active', active);
                    if (active) {
                        activeLink = link;
                    }
                });

                if (activeLink && lastActiveId !== id) {
                    scrollTocToActive(activeLink, scrollBehavior || 'auto');
                    lastActiveId = id;
                }
            };

            var observer = new IntersectionObserver(function (entries) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting) {
                        setActiveLink(entry.target.id, 'auto');
                    }
                });
            }, {
                root: null,
                rootMargin: '-24% 0px -65% 0px',
                threshold: 0
            });

            sections.forEach(function (section) {
                observer.observe(section);
            });

            tocLinks.forEach(function (link) {
                link.addEventListener('click', function () {
                    setActiveLink((link.getAttribute('href') || '').replace('#', ''), 'smooth');
                });
            });
        };

        initKnowledgeBaseSearch({
            searchInputId: @json($searchInputId),
            searchInfoId: @json($searchInfoId),
            tocLinkSelector: @json($tocLinkSelector),
            sectionSelector: @json($sectionSelector),
            tocListSelector: @json($tocListSelector)
        });
    })();
</script>