/* Category filter bar enhancement (Proxify-style).
 *
 * Progressively enhances the existing category chip rows on the Events &
 * Projects, Blog and News pages into a single rounded pill bar with a trailing
 * search button. Clicking search swaps the tabs for a search input; typing
 * opens a results dropdown listing matching cards (thumbnail + category +
 * title). The existing chip elements keep their classes and data-attributes,
 * so the current filtering + pagination logic (main.js / blog-filter.js /
 * news-filter.js) keeps working unchanged. Filtering happens against the cards
 * already rendered on the page — no network calls.
 */
(function () {
    'use strict';

    function qsa(sel, root) { return [].slice.call((root || document).querySelectorAll(sel)); }
    function el(tag, cls) { var e = document.createElement(tag); if (cls) e.className = cls; return e; }
    function escapeHtml(s) {
        return String(s).replace(/[&<>"]/g, function (c) {
            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c];
        });
    }

    // --- Localised strings -------------------------------------------------
    var lang = (document.documentElement.getAttribute('lang') || 'en').toLowerCase();
    if (lang === 'sl') lang = 'si';
    if (['en', 'si', 'mk'].indexOf(lang) === -1) lang = 'en';
    var I18N = {
        en: { ph: 'Search', none: 'No results found', count: function (n) { return n + ' result' + (n === 1 ? '' : 's') + ' found'; } },
        si: { ph: 'Iskanje', none: 'Ni zadetkov', count: function (n) { return n + ' ' + (n === 1 ? 'zadetek' : 'zadetkov'); } },
        mk: { ph: 'Пребарување', none: 'Нема резултати', count: function (n) { return n + ' ' + (n === 1 ? 'резултат' : 'резултати'); } }
    };
    var t = I18N[lang];

    // --- Per-page adapters -------------------------------------------------
    // Each returns, for a card element, { href, title, img, icon, cat }.
    function projectItem(card, labelMap) {
        var link = card.querySelector('.post-link');
        var titleEl = card.querySelector('.post-title');
        var img = card.querySelector('.post-image');
        if (!link || !titleEl) return null;
        return {
            href: link.getAttribute('href'),
            title: titleEl.textContent.trim(),
            img: img ? img.getAttribute('src') : '',
            cat: labelMap ? (labelMap[card.getAttribute('data-category')] || '') : ''
        };
    }
    function blogItem(card) {
        var titleEl = card.querySelector('h3');
        var tag = card.querySelector('.blog-tag');
        var thumb = card.querySelector('.blog-thumb');
        if (!titleEl) return null;
        return {
            href: card.getAttribute('href'),
            title: titleEl.textContent.trim(),
            icon: thumb ? thumb.innerHTML : '',
            cat: tag ? tag.textContent.trim() : ''
        };
    }
    function newsItem(card) {
        var titleLink = card.querySelector('.newshub-body h3 a') || card.querySelector('h3 a');
        var media = card.querySelector('.newshub-media');
        var img = card.querySelector('.newshub-media img');
        var badge = card.querySelector('.news-badge');
        if (!titleLink) return null;
        return {
            href: media ? media.getAttribute('href') : titleLink.getAttribute('href'),
            title: titleLink.textContent.trim(),
            img: img ? img.getAttribute('src') : '',
            cat: badge ? badge.textContent.trim() : ''
        };
    }

    var CONFIGS = [
        { tabs: '.filter-nav', cards: '.posts-grid .post-card', item: projectItem, labels: true },
        { tabs: '.blog-filters', cards: '.blog-grid .blog-card', item: blogItem },
        { tabs: '.newshub-filters', cards: '.newshub-grid .newshub-card', item: newsItem }
    ];

    CONFIGS.forEach(function (cfg) {
        var tabsEl = document.querySelector(cfg.tabs);
        if (tabsEl) upgrade(tabsEl, cfg);
    });

    function upgrade(tabsEl, cfg) {
        // Map of data-filter -> visible label (projects only; used for result category chips).
        var labelMap = null;
        if (cfg.labels) {
            labelMap = {};
            qsa('button', tabsEl).forEach(function (b) { labelMap[b.getAttribute('data-filter')] = b.textContent.trim(); });
        }

        // Wrap the tabs row inside the new bar.
        var bar = el('div', 'filterbar');
        tabsEl.parentNode.insertBefore(bar, tabsEl);
        tabsEl.classList.add('filterbar-tabs');
        bar.appendChild(tabsEl);

        // Search icon button.
        var searchBtn = el('button', 'filterbar-search-btn');
        searchBtn.type = 'button';
        searchBtn.setAttribute('aria-label', t.ph);
        searchBtn.innerHTML = '<i class="fas fa-search" aria-hidden="true"></i>';
        bar.appendChild(searchBtn);

        // Search row (hidden until activated).
        var firstTab = tabsEl.querySelector('button, a');
        var searchRow = el('div', 'filterbar-search');
        searchRow.hidden = true;
        searchRow.innerHTML =
            '<span class="filterbar-search-label"></span>' +
            '<div class="filterbar-search-field"><i class="fas fa-search" aria-hidden="true"></i>' +
            '<input type="text" aria-label="' + escapeHtml(t.ph) + '"></div>' +
            '<button type="button" class="filterbar-search-close" aria-label="Close"><i class="fas fa-times" aria-hidden="true"></i></button>';
        searchRow.querySelector('.filterbar-search-label').textContent = firstTab ? firstTab.textContent.trim() : '';
        var input = searchRow.querySelector('input');
        input.placeholder = t.ph;
        bar.appendChild(searchRow);

        // Results dropdown.
        var results = el('div', 'filterbar-results');
        results.hidden = true;
        results.innerHTML = '<p class="filterbar-results-count"></p><ul class="filterbar-results-list"></ul>';
        bar.appendChild(results);
        var countEl = results.querySelector('.filterbar-results-count');
        var listEl = results.querySelector('.filterbar-results-list');

        function openSearch() {
            bar.classList.add('is-searching');
            tabsEl.hidden = true;
            searchBtn.hidden = true;
            searchRow.hidden = false;
            input.value = '';
            render('');
            input.focus();
        }
        function closeSearch() {
            bar.classList.remove('is-searching');
            searchRow.hidden = true;
            results.hidden = true;
            tabsEl.hidden = false;
            searchBtn.hidden = false;
        }

        function render(q) {
            q = (q || '').trim().toLowerCase();
            if (!q) { results.hidden = true; listEl.innerHTML = ''; countEl.textContent = ''; return; }
            var found = qsa(cfg.cards)
                .map(function (c) { return cfg.item(c, labelMap); })
                .filter(function (it) { return it && it.title.toLowerCase().indexOf(q) !== -1; });
            listEl.innerHTML = '';
            countEl.textContent = found.length ? t.count(found.length) : t.none;
            found.forEach(function (it) { listEl.appendChild(resultRow(it)); });
            results.hidden = false;
        }

        searchBtn.addEventListener('click', openSearch);
        searchRow.querySelector('.filterbar-search-close').addEventListener('click', closeSearch);
        input.addEventListener('input', function () { render(input.value); });
        document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && !searchRow.hidden) closeSearch(); });
        document.addEventListener('click', function (e) { if (!bar.contains(e.target) && !searchRow.hidden) closeSearch(); });
    }

    function resultRow(it) {
        var li = el('li', 'filterbar-result');
        var a = el('a', 'filterbar-result-link');
        a.href = it.href;
        var thumb = it.img
            ? '<img src="' + escapeHtml(it.img) + '" alt="" loading="lazy">'
            : (it.icon || '');
        a.innerHTML =
            '<span class="filterbar-result-thumb">' + thumb + '</span>' +
            '<span class="filterbar-result-body">' +
            (it.cat ? '<span class="filterbar-result-cat">' + escapeHtml(it.cat) + '</span>' : '') +
            '<span class="filterbar-result-title">' + escapeHtml(it.title) + '</span>' +
            '</span>';
        li.appendChild(a);
        return li;
    }
})();