// =====================================================================
// WebGIS Citizen Participation Portal — Onboarding Tour
// Guides Users through the Participation Portal.
// On Mobile centered Overlays. On Desktop attached to User Interface.
// =====================================================================


// =================================================================
// Block 1: Onboarding Configuration
// =================================================================

// Prevents double Initialization
let onboardingStarted = false;

// Detects Mobile Viewport
function isMobile() {
    return window.innerWidth < 769;
}


// =================================================================
// Block 2: Tour Definition
// =================================================================

function startTour(manual) {
    // Prevents double Start
    if (onboardingStarted) return;
    onboardingStarted = true;

    const mobile = isMobile();

    const tour = new Shepherd.Tour({
        useModalOverlay: !mobile,
        defaultStepOptions: {
            cancelIcon: { enabled: false },
            scrollTo: false,
            classes: 'onboarding-step',
            popperOptions: {
                modifiers: [
                    { name: 'offset', options: { offset: [0, 14] } }
                ]
            }
        }
    });


// -----------------------------------------------------------------
    // Step 1: Welcome — Skip Timer at automatic Start
    // -----------------------------------------------------------------
    var welcomeButtons = [
        {
            text: 'Überspringen',
            action: tour.cancel,
            classes: 'shepherd-button-secondary' + (manual ? '' : ' skip-btn-locked')
        },
        {
            text: 'Los geht\'s <i class="fa-solid fa-arrow-right"></i>',
            action: tour.next,
            classes: 'shepherd-button-primary'
        }
    ];

    tour.addStep({
        id: 'welcome',
        title: '<i class="fa-solid fa-hand-wave"></i> Willkommen bei der Mitmachkarte!',
        text: 'Dieses <strong>interaktive Tutorial</strong> zeigt Ihnen die Kernfunktionen der Mitmachkarte.' +
              '<br><br><span style="color:var(--color-text-secondary);">Sie können das Tutorial jederzeit über den Hilfe-Tab der Seitenleiste wiederholen.</span>',
        buttons: welcomeButtons,
        when: {
            show: function () {
                if (manual) return;

                // Locks Skip Button with Progress Bar for 5 Seconds
                var skipBtn = document.querySelector('.skip-btn-locked');
                if (!skipBtn) return;
                skipBtn.disabled = true;
                skipBtn.style.pointerEvents = 'none';

                setTimeout(function () {
                    skipBtn.disabled = false;
                    skipBtn.style.pointerEvents = '';
                    skipBtn.classList.remove('skip-btn-locked');
                }, 5000);
            }
        }
    });


    // -----------------------------------------------------------------
    // Step 2: Drawing Tools
    // -----------------------------------------------------------------
    var drawingStep = {
        id: 'drawing-tools',
        title: '<i class="fa-solid fa-pencil"></i> Beitrag hinzufügen',
        buttons: [
            {
                text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
                action: tour.back,
                classes: 'shepherd-button-secondary'
            },
            {
                text: 'Weiter <i class="fa-solid fa-arrow-right"></i>',
                action: tour.next,
                classes: 'shepherd-button-primary'
            }
        ]
    };

    if (mobile) {
        drawingStep.text = 'Verwenden Sie die <strong>Zeichenwerkzeuge</strong> ' +
            '<i class="fa-solid fa-location-dot"></i> ' +
            'rechts, um Hinweise als Punkte, Linien oder Flächen hinzuzufügen.';
    } else {
        drawingStep.text = 'Verwenden Sie die <strong>Zeichenwerkzeuge</strong>, um Hinweise, Anregungen und Vorschläge auf der Mitmachkarte als Punkte, Linien oder Flächen hinzuzufügen.';
        drawingStep.attachTo = { element: '.leaflet-pm-toolbar', on: 'left' };
        drawingStep.beforeShowPromise = function () {
            return new Promise(function (resolve) {
                sidebar.close();
                setTimeout(resolve, 300);
            });
        };
    }

    tour.addStep(drawingStep);


    // -----------------------------------------------------------------
    // Step 3: Address Search
    // -----------------------------------------------------------------
    var searchStep = {
        id: 'address-search',
        title: '<i class="fa-solid fa-magnifying-glass"></i> Adresssuche',
        buttons: [
            {
                text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
                action: tour.back,
                classes: 'shepherd-button-secondary'
            },
            {
                text: 'Weiter <i class="fa-solid fa-arrow-right"></i>',
                action: tour.next,
                classes: 'shepherd-button-primary'
            }
        ]
    };

    if (mobile) {
        searchStep.text = 'Verwenden Sie die <strong>Adresssuche</strong> ' +
            '<i class="fa-solid fa-magnifying-glass"></i> rechts, um schnell den richtigen Ort auf der Mitmachkarte zu finden.';
    } else {
        searchStep.text = 'Verwenden Sie die <strong>Adresssuche</strong>, um schnell den richtigen Ort auf der Mitmachkarte zu finden.';
        searchStep.attachTo = { element: '.leaflet-control-geocoder', on: 'left' };
    }

    tour.addStep(searchStep);


    // -----------------------------------------------------------------
    // Step 4: Layer Control
    // -----------------------------------------------------------------
    var layerStep = {
        id: 'layer-control',
        title: '<i class="fa-solid fa-layer-group"></i> Kartenansicht',
        buttons: [
            {
                text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
                action: tour.back,
                classes: 'shepherd-button-secondary'
            },
            {
                text: 'Weiter <i class="fa-solid fa-arrow-right"></i>',
                action: tour.next,
                classes: 'shepherd-button-primary'
            }
        ]
    };

    if (mobile) {
        layerStep.text = 'Wechseln Sie über das <strong>Layer-Symbol</strong> ' +
            '<i class="fa-solid fa-layer-group"></i> oben rechts zwischen verschiedenen Hintergrundkarten und Satellitenbildern.';
    } else {
        layerStep.text = 'Wechseln Sie zwischen verschiedenen <strong>Hintergrundkarten</strong> und <strong>Satellitenbildern</strong>.';
        layerStep.attachTo = { element: '.leaflet-control-layers', on: 'left' };
    }

    tour.addStep(layerStep);


    // -----------------------------------------------------------------
    // Step 5: Sidebar
    // -----------------------------------------------------------------
    var sidebarStep = {
        id: 'sidebar',
        title: '<i class="fa-solid fa-bars"></i> Seitenleiste',
        buttons: [
            {
                text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
                action: tour.back,
                classes: 'shepherd-button-secondary'
            },
            {
                text: 'Abschließen <i class="fa-solid fa-check"></i>',
                action: tour.next,
                classes: 'shepherd-button-primary'
            }
        ]
    };

    if (mobile) {
        sidebarStep.text = 'In der <strong>Seitenleiste</strong> ' +
            '<i class="fa-solid fa-house"></i> ' +
            'links finden Sie Hilfestellungen, Listenansichten und Neuigkeiten.';
    } else {
        sidebarStep.text = 'In der <strong>Seitenleiste</strong> finden Sie Hilfestellungen, Listenansichten und Neuigkeiten.';
        sidebarStep.attachTo = { element: '#sidebar', on: 'right' };
        sidebarStep.beforeShowPromise = function () {
            return new Promise(function (resolve) {
                sidebar.open('tab-help');
                setTimeout(resolve, 400);
            });
        };
    }

    tour.addStep(sidebarStep);


    // -----------------------------------------------------------------
    // Completion and Cancellation — shows Drawing Arrow
    // -----------------------------------------------------------------
    function onTourEnd() {
        onboardingStarted = false;
        if (mobile) sidebar.close();

        // Shows Arrow Hint
        if (!localStorage.getItem('webgis_onboarding_done')) {
            localStorage.setItem('webgis_onboarding_done', 'true');
            showDrawingArrow();
        }
    }

    tour.on('complete', onTourEnd);
    tour.on('cancel', onTourEnd);

    tour.start();
}


// =================================================================
// Drawing Arrow — Points to Geoman Toolbar after Tour
// =================================================================

function showDrawingArrow() {
    var hint = document.createElement('div');
    hint.id = 'drawing-hint-arrow';
    hint.innerHTML = '<span class="drawing-hint-label">' +
                         '<i class="fa-solid fa-pencil"></i> Beitrag hinzufügen' +
                     '</span>' +
                     '<span class="drawing-hint-chevrons">' +
                         '<i class="fa-solid fa-chevron-right"></i>' +
                         '<i class="fa-solid fa-chevron-right"></i>' +
                     '</span>';
    document.body.appendChild(hint);

    // Positions Hint centered on Geoman Toolbar
    function positionHint() {
        var toolbar = document.querySelector('.leaflet-pm-toolbar');
        if (!toolbar) { removeDrawingArrow(); return; }

        var rect = toolbar.getBoundingClientRect();
        var hintHeight = hint.offsetHeight || 32;
        hint.style.top = (rect.top + (rect.height / 2) - (hintHeight / 2)) + 'px';
        hint.style.right = (window.innerWidth - rect.left + 10) + 'px';
    }

    positionHint();
    window.addEventListener('resize', positionHint);

    var timeout = setTimeout(removeDrawingArrow, 60000);

    map.on('pm:globaldrawmodetoggled', function onDraw() {
        clearTimeout(timeout);
        removeDrawingArrow();
        map.off('pm:globaldrawmodetoggled', onDraw);
        window.removeEventListener('resize', positionHint);
    });
}

function removeDrawingArrow() {
    var arrow = document.getElementById('drawing-hint-arrow');
    if (arrow) {
        arrow.classList.add('fade-out');
        setTimeout(function () { arrow.remove(); }, 300);
    }
}


// =================================================================
// Manual Tour Restart (from Info Modal or Help Tab)
// =================================================================

function restartOnboarding() {
    onboardingStarted = false;
    startTour(true);
}