/**
 * Mapplic Custom Script - Outway Adventures
 * Ensures regional coloring and mobile styling within the Mapplic Shadow DOM.
 */

(function() {
    'use strict';

    // === CONFIGURATION ===
    const continentLocationIds = {
        'ameryka-centralna-meksyk': 'region-ameryka-centralna',
        'regiony-polarne': 'region-polarne',
        'europa': 'region-europa',
        'afryka': 'region-afryka',
        'azja': 'region-azja',
        'bliski-wschod': 'region-bliski-wschod',
        'usa-kanada': 'region-usa-kanada',
        'australia-oceania': 'region-australia-oceania',
        'karaiby': 'region-karaiby',
        'ameryka-poludniowa': 'region-ameryka-poludniowa'
    };

    const continentNames = {
        'azja': ['azja', 'Azja'],
        'europa': ['europa', 'Europa'],
        'afryka': ['afryka', 'Afryka'],
        'ameryka-poludniowa': ['ameryka-poludniowa', 'Ameryka Południowa'],
        'ameryka-centralna-meksyk': ['ameryka-centralna-meksyk', 'Ameryka Centralna i Meksyk'],
        'usa-kanada': ['usa-kanada', 'USA i Kanada'],
        'australia-oceania': ['australia-oceania', 'Australia i Oceania'],
        'karaiby': ['karaiby', 'Karaiby'],
        'bliski-wschod': ['bliski-wschod', 'Bliski Wschód'],
        'regiony-polarne': ['regiony-polarne', 'Regiony Polarne']
    };

    // Use ACF colors if available, otherwise fallback to defaults
    const colors = window.mapplic_colors || {};

    const regionStyles = {
        'north-america': { ids: ['US', 'CA', 'GL', 'PM', 'BM'], color: colors.north_america || '#4885a2' },
        'central-america': { ids: ['MX', 'BZ', 'GT', 'HN', 'SV', 'NI', 'CR', 'PA', 'CU', 'JM', 'HT', 'DO', 'PR', 'BS', 'KY', 'TC', 'VG', 'VI', 'AI', 'KN', 'AG', 'MS', 'GP', 'DM', 'MQ', 'LC', 'VC', 'GD', 'BB', 'TT', 'AW', 'CW', 'BQ', 'SX', 'BL', 'MF', 'loc35'], color: colors.central_america || '#ff7a30' },
        'south-america': { ids: ['VE', 'UY', 'GS', 'FK', 'SR', 'PE', 'PY', 'GY', 'EC', 'CO', 'CL', 'BO', 'AR', 'BR'], color: colors.south_america || '#2ecc71' },
        'africa': { ids: ['ZW', 'ZM', 'UG', 'TN', 'TG', 'TZ', 'SZ', 'SS', 'SD', 'ZA', 'SO', 'SL', 'SN', 'RW', 'RE', 'NG', 'NE', 'NA', 'MZ', 'MR', 'ML', 'MW', 'MG', 'LY', 'LR', 'LS', 'KE', 'GW', 'GN', 'GH', 'GM', 'GA', 'ET', 'ER', 'GQ', 'EG', 'DJ', 'CI', 'CD', 'CG', 'TD', 'CF', 'CM', 'BI', 'BF', 'BW', 'BJ', 'AO', 'DZ'], color: colors.africa || '#f1c40f' },
        'middle-east': { ids: ['YE', 'AE', 'TR', 'SY', 'SA', 'QA', 'OM', 'LB', 'KW', 'JO', 'IL', 'PS', 'IQ', 'IR'], color: colors.middle_east || '#e67e22' },
        'asia': { ids: ['VN', 'UZ', 'TM', 'TJ', 'TH', 'LK', 'KR', 'KP', 'PH', 'PK', 'NP', 'MM', 'MN', 'MY', 'MV', 'LA', 'KG', 'KZ', 'JP', 'ID', 'IN', 'HK', 'CN', 'BN', 'BT', 'BD', 'AF', 'RU', 'KH'], color: colors.asia || '#e74c3c' },
        'europe': { ids: ['UA', 'CH', 'SE', 'ES', 'SI', 'SK', 'RS', 'RO', 'PT', 'PL', 'NO', 'NL', 'ME', 'MC', 'MD', 'MT', 'MK', 'LU', 'LT', 'LI', 'LV', 'IT', 'IM', 'IE', 'IS', 'HU', 'GR', 'GI', 'DE', 'FR', 'FI', 'EE', 'DK', 'CZ', 'CY', 'HR', 'BG', 'BE', 'BY', 'AZ', 'AT', 'AM', 'AL', 'AD', 'GB'], color: colors.europe || '#9b59b6' },
        'australia-oceania': { ids: ['VU', 'TV', 'TO', 'SB', 'PW', 'PG', 'NZ', 'NU', 'NR', 'NC', 'MH', 'FM', 'FJ', 'CK', 'AU'], color: colors.australia || '#1abc9c' }
    };

    let mapplicElement = null;
    let mapData = null;
    let activeCountryIds = [];

    /**
     * Injects styles into Shadow DOM to color regions and manage mobile markers.
     */
    function applyPersistentStyles() {
        mapplicElement = document.querySelector('mapplic-map');
        const shadowRoot = mapplicElement?.shadowRoot;
        if (!shadowRoot) return;

        let styleTag = shadowRoot.querySelector('#outway-custom-styles');
        if (!styleTag) {
            styleTag = document.createElement('style');
            styleTag.id = 'outway-custom-styles';
        }
        // Ensure style tag is always at the end of shadowRoot for precedence
        shadowRoot.appendChild(styleTag);

        // Extract active IDs if not already done
        if (activeCountryIds.length === 0 && mapplicElement.getAttribute('data-json')) {
            try {
                const data = JSON.parse(mapplicElement.getAttribute('data-json'));
                activeCountryIds = (data.locations || []).map(loc => loc.id).filter(id => id);
            } catch (e) {}
        }

        let css = `/* Persistent Regional Coloring */\n`;
        
        // Dynamic map background (water)
        if (colors.background) {
            css += `.mapplic-container { background-color: ${colors.background} !important; }\n`;
            css += `:host { --neutral-050: ${colors.background} !important; }\n`;
        }

        // Base color for ALL countries (no trips)
        const noTripsColor = colors.no_trips || '#E5E7EB';
        css += `path { fill: ${noTripsColor} !important; fill-opacity: 1 !important; }\n`;

        Object.entries(regionStyles).forEach(([region, data]) => {
            // Only color countries that have ACTIVE trips
            const activeIdsInRegion = data.ids.filter(id => activeCountryIds.includes(id));
            if (activeIdsInRegion.length > 0) {
                const idSelectors = activeIdsInRegion.map(id => '#' + id).join(', ');
                css += idSelectors + `, .region-${region} path { fill: ${data.color} !important; fill-opacity: 1 !important; }\n`;
            }
        });

        // Hover & Persistence Logic
        css += `
            path { 
                transition: fill 0.2s ease; 
                stroke: ${colors.background || '#F9FAFB'} !important;
                stroke-width: 0.5px !important;
            }
            path:hover { filter: brightness(1.1); cursor: pointer; }
            
            /* Active Location Styling (Black border) - High specificity for Mapplic 7 */
            .mapplic-layer svg path.mapplic-active, 
            .mapplic-layer svg .mapplic-active,
            .mapplic-layer svg .mapplic-active > *,
            path.mapplic-active {
                stroke: #000 !important;
                stroke-width: 1.1px !important;
                vector-effect: non-scaling-stroke !important;
                stroke-opacity: 1 !important;
            }

            /* Prevent gray override */
            path.mapplic-clickable, path.mapplic-active, path[id] {
                fill-opacity: 1 !important;
            }

            /* Mobile Marker Styling */
            @media (max-width: 768px) {
                a.mapplic-marker:not(.force-show) { opacity: 0 !important; pointer-events: none; }
                a.mapplic-marker.force-show { 
                    opacity: 1 !important; 
                    pointer-events: auto; 
                    transform: scale(1.4) !important; /* Larger markers for easier clicking */
                }
            }
        `;

        if (styleTag.textContent !== css) {
            styleTag.textContent = css;
        }
    }

    /**
     * Show markers on mobile (all markers, since Mapplic 7 React doesn't expose IDs easily in DOM)
     */
    function showMarkersOnMobile() {
        if (window.innerWidth <= 768) {
            const shadowRoot = mapplicElement?.shadowRoot;
            if (shadowRoot) {
                shadowRoot.querySelectorAll('a.mapplic-marker:not(.force-show)').forEach(m => {
                    m.classList.add('force-show');
                });
            }
        }
    }

    /**
     * Zoom to a specific continent/region
     */
    function zoomToContinent(continentId) {
        if (!mapplicElement?.store) return;
        const locationId = continentLocationIds[continentId];
        if (!locationId) return;

        try {
            const state = mapplicElement.store.getState();
            const loc = state.getLocationById ? state.getLocationById(locationId) : null;

            if (loc && loc.coord) {
                const isMobile = window.innerWidth <= 768;
                mapplicElement.store.setState({ 
                    location: locationId, 
                    target: { x: loc.coord[0], y: loc.coord[1], scale: (loc.zoom || 1) * (isMobile ? 2.0 : 1) },
                    transition: { duration: isMobile ? 0 : 500 }
                });
            } else {
                mapplicElement.store.setState({ location: locationId });
            }
            
            // Ensure markers show up
            showMarkersOnMobile();
            setTimeout(showMarkersOnMobile, 200);
            setTimeout(showMarkersOnMobile, 600);

        } catch (e) {
            console.warn('Zoom error:', e);
        }
    }

    /**
     * Filter and show trips for a continent
     */
    function showTrips(continentId) {
        if (!mapData) return;

        const locations = mapData.locations || [];
        const possibleNames = continentNames[continentId] || [continentId];
        
        const filtered = locations.filter(loc => {
            const groups = loc.group || [];
            const groupArray = Array.isArray(groups) ? groups : [groups];
            return groupArray.some(g => 
                possibleNames.some(name => g.toLowerCase().includes(name.toLowerCase()))
            );
        });

        zoomToContinent(continentId);

        const list = document.querySelector('#trips-list');
        if (list) {
            list.innerHTML = filtered.length === 0 
                ? '<p class="no-trips">Brak wycieczek w tym regionie.</p>'
                : filtered.map(t => `<div class="trip-item"><h3>${t.title}</h3>${t.desc||''}</div>`).join('');
        }
    }

    /**
     * Initialization logic
     */
    function init() {
        mapplicElement = document.querySelector('mapplic-map');
        if (!mapplicElement) return;

        const dataStr = mapplicElement.getAttribute('data-json');
        if (dataStr) {
            try { mapData = JSON.parse(dataStr); } catch (e) {}
        }

        // Apply styles and setup observer for React-rendered markers
        applyPersistentStyles();
        
        const observer = new MutationObserver(showMarkersOnMobile);
        const setupObserver = () => {
            const shadowRoot = mapplicElement?.shadowRoot;
            if (shadowRoot) {
                observer.observe(shadowRoot, { childList: true, subtree: true });
            } else {
                setTimeout(setupObserver, 500);
            }
        };
        setupObserver();

        // Backup interval for styles
        const styleInterval = setInterval(() => {
            const shadowRoot = mapplicElement?.shadowRoot;
            if (shadowRoot && !shadowRoot.querySelector('#outway-custom-styles')) {
                applyPersistentStyles();
            }
        }, 2000);
        setTimeout(() => clearInterval(styleInterval), 20000);

        // Setup Continent Buttons
        document.querySelectorAll('.continent-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                const continentId = btn.dataset.continent;
                showTrips(continentId);
                document.querySelectorAll('.continent-btn').forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
            });
        });
    }

    // Run when ready
    if (document.readyState === 'complete') {
        init();
    } else {
        window.addEventListener('load', init);
    }

    console.log('Mapplic Custom JS Loaded - v1.9 (Cambodia Fix)');
})();