/**
 * PS Mobile Flags Carousel — Parcel Selector Mobile Layer
 * map/Mobilki/ps-mobile-flags.js
 *
 * CZEMU TEN PLIK ISTNIEJE:
 * Na ekranach mobilnych pasek flag (12 krajów) nie mieści się i scrolluje
 * poziomo - użytkownicy tego nie odkrywają. Zastępujemy go karuzelą
 * z przyciskami < > (prev/next), pokazując ~3 flagi jednocześnie.
 *
 * PODEJŚCIE NIEDESTRUKCYJNE:
 * - Nie modyfikujemy intro-popup.js ani anunaki-popup.js
 * - Obserwujemy DOM przez MutationObserver — gdy map otwiera się dynamicznie,
 *   wykrywamy pojawienie się paska flag i owijamy go karuzelą
 * - Istniejące click handlery flag działają bez zmian
 * - Na desktop: karuzela nie jest dodawana (sprawdzamy PS_MOBILE)
 *
 * SELEKTORY:
 *   Classic: .inpost-popup-flags (kontener flag) + .inpost-flag-btn (przyciski)
 *   Anunaki: .ank-flags-wrap > .ank-flags (kontener) + .ank-flag-btn (przyciski)
 *
 * @version 1.0.0
 * @package ParcelSelector/Mobilki
 */
;(function() {
    'use strict';

    // Tylko na touch devices
    var ps = window.PS_MOBILE;
    if (!ps || ps.isDesktop) return;

    // ─── Stałe ───────────────────────────────────────────────────────────────

    var VISIBLE_FLAGS = ps.isMobile ? 3 : 4;   // ile flag widać naraz

    // ─── Pomocnik: stwórz przycisk strzałki ─────────────────────────────────

    function makeArrow(direction, onClick) {
        var btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'ps-flag-arrow ' + (direction === 'prev' ? 'left' : 'right');
        btn.setAttribute('aria-label', direction === 'prev' ? 'Poprzedni kraj' : 'Następny kraj');
        btn.innerHTML = direction === 'prev' ? '&#8249;' : '&#8250;';
        btn.addEventListener('click', function(e) {
            e.stopPropagation();
            onClick();
        });
        return btn;
    }

    // ─── Główna funkcja: owiń pasek flag karuzelą ───────────────────────────

    function wrapFlagsCarousel(flagsEl, flagSelector) {
        // Nie owijaj ponownie jeśli już opakowane
        if (flagsEl.dataset.psCarousel) return;
        flagsEl.dataset.psCarousel = '1';

        var parent = flagsEl.parentNode;

        // Stwórz wrapper karuzeli
        var wrapper = document.createElement('div');
        wrapper.className = 'ps-flags-carousel';

        var track = document.createElement('div');
        track.className = 'ps-flags-track';

        // Przenieś flagsEl do tracku
        parent.insertBefore(wrapper, flagsEl);
        track.appendChild(flagsEl);
        wrapper.appendChild(track);

        // Oblicz index aktywnej flagi
        function getActiveIndex() {
            var flags = flagsEl.querySelectorAll(flagSelector);
            var idx = 0;
            flags.forEach(function(f, i) {
                if (f.classList.contains('active')) idx = i;
            });
            return idx;
        }

        var currentIdx = getActiveIndex();

        function getFlagCount() {
            return flagsEl.querySelectorAll(flagSelector).length;
        }

        function scrollToIndex(idx) {
            var flags = flagsEl.querySelectorAll(flagSelector);
            var total = flags.length;
            if (total === 0) return;

            // Clamp
            idx = Math.max(0, Math.min(idx, total - 1));
            currentIdx = idx;

            // Scroll aby idx był widoczny (wyśrodkuj jeśli możliwe)
            var target = Math.max(0, idx - Math.floor(VISIBLE_FLAGS / 2));
            target = Math.min(target, total - VISIBLE_FLAGS);
            target = Math.max(0, target);

            if (flags[target]) {
                flags[target].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
            }

            // Aktualizuj stan strzałek
            prevBtn.disabled = (idx <= 0);
            nextBtn.disabled = (idx >= total - 1);
        }

        // Stwórz strzałki
        var prevBtn = makeArrow('prev', function() {
            scrollToIndex(currentIdx - 1);
        });
        var nextBtn = makeArrow('next', function() {
            scrollToIndex(currentIdx + 1);
        });

        wrapper.insertBefore(prevBtn, track);
        wrapper.appendChild(nextBtn);

        // Scroll do aktywnej flagi przy starcie
        setTimeout(function() { scrollToIndex(currentIdx); }, 100);

        // Obserwuj kliknięcia flag — update currentIdx
        flagsEl.addEventListener('click', function(e) {
            var flagBtn = e.target.closest(flagSelector);
            if (!flagBtn) return;
            var flags = Array.from(flagsEl.querySelectorAll(flagSelector));
            var idx = flags.indexOf(flagBtn);
            if (idx !== -1) {
                currentIdx = idx;
                prevBtn.disabled = (idx <= 0);
                nextBtn.disabled = (idx >= flags.length - 1);
            }
        });

        // MutationObserver: gdy aktywna klasa się zmienia (switchCountry)
        var mo = new MutationObserver(function() {
            var newIdx = getActiveIndex();
            if (newIdx !== currentIdx) {
                scrollToIndex(newIdx);
            }
        });
        mo.observe(flagsEl, { attributes: true, subtree: true, attributeFilter: ['class'] });
    }

    // ─── Obserwuj DOM — mapy otwierają się dynamicznie ──────────────────────

    function tryEnhance(root) {
        if (!root || root.nodeType !== 1) return;

        // Classic engine
        var classicFlags = root.matches('.inpost-popup-flags') ? root : root.querySelector('.inpost-popup-flags');
        if (classicFlags && !classicFlags.dataset.psCarousel) {
            wrapFlagsCarousel(classicFlags, '.inpost-flag-btn');
        }

        // Anunaki engine
        var anunakiFlags = root.matches('.ank-flags') ? root : root.querySelector('.ank-flags');
        if (anunakiFlags && !anunakiFlags.dataset.psCarousel) {
            wrapFlagsCarousel(anunakiFlags, '.ank-flag-btn');
        }
    }

    // MutationObserver na body — wykryj otwarcie mapy
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(m) {
            m.addedNodes.forEach(function(node) {
                if (node.nodeType !== 1) return;
                tryEnhance(node);
            });
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });

    // Initial scan
    tryEnhance(document.body);

    if (window.PS_DEBUG) console.log('[PS Mobilki] Flag carousel observer active (VISIBLE_FLAGS=' + VISIBLE_FLAGS + ')');

})();
