// AppShellUI.js

/**
 * AppShellUI.js
 * Verwaltet das statische HTML-Markup, die CSS-Definitionen und die Logik
 * zur Erkennung der Admin-Tap-Sequenz.
 */
export class AppShellUI {

    constructor() {
        this.panelCSS = this.#getStyles();
        this.panelHTML = this.#getMarkup();

        this.mapElement = null;
        this.settingsIconElement = null;
        this.searchTriggerElement = null;
        // 🛑 locationPermissionOverlay wird nicht mehr hier gesucht, da es aus dem Markup entfernt wurde.
        this.tzDetectorElement = null;
    }

    /**
     * Startet den Injektionsprozess und initialisiert den Admin-Detector.
     * @param {HTMLElement} targetBody - Das <body> Element der Seite.
     * @param {function(): void} adminCallback - Der Handler im ApplicationCoordinator.
     */
    injectIntoDOM(targetBody, adminCallback) {
        this._injectCSS();
        this._injectHTML(targetBody);

        // Wichtige DOM-Referenzen cachen
        this.mapElement = document.getElementById('map');
        this.settingsIconElement = document.getElementById('settings-icon');
        this.searchTriggerElement = document.getElementById('search-address-trigger');
        // 🛑 Referenz entfernt: this.locationPermissionOverlay = document.getElementById('location-permission-overlay');
        this.tzDetectorElement = document.getElementById('tz');

        // Admin-Modus Detector initialisieren
        this.setupAdminDetector(adminCallback);
    }

    /**
     * Initialisiert den "Admin-Modus"-Erkenner.
     * @param {function(): void} callback - Der Handler im ApplicationCoordinator.
     */
    setupAdminDetector(callback) {
        const triggerElement = this.tzDetectorElement;

        if (triggerElement) {
            new this.#TzTapDetector(triggerElement, callback);
        } else {
            console.warn("Trigger-Element für Zusatzfunktionen nicht gefunden.");
        }
    }


    /**
     * @private
     * Die Logik zur Erkennung der Tap-Sequenz.
     */
    #TzTapDetector = class {
        constructor(triggerElement, onSuccessfulTapSequence) {
            this._tapCount = 0;
            this._lastTapTime = 0;
            const TAP_THRESHOLD_MS = 1000;
            const REQUIRED_TAPS = 2;

            triggerElement.addEventListener('click', () => {
                const now = Date.now();
                if (now - this._lastTapTime < TAP_THRESHOLD_MS) {
                    this._tapCount++;
                } else {
                    this._tapCount = 1;
                }
                this._lastTapTime = now;

                if (this._tapCount >= REQUIRED_TAPS) {
                    this._tapCount = 0;
                    if (onSuccessfulTapSequence) {
                        onSuccessfulTapSequence();
                    }
                }
            });
        }
    }



    // --- Basis UI Methoden ---

    _injectCSS() {
        if (!document.getElementById('app-shell-styles')) {
            const styleElement = document.createElement('style');
            styleElement.id = 'app-shell-styles';
            styleElement.textContent = this.panelCSS;
            document.head.appendChild(styleElement);
        }
    }

    _injectHTML(targetBody) {
        if (!document.getElementById('map')) {
            targetBody.insertAdjacentHTML('beforeend', this.panelHTML);
        }
    }

    /**
     * Aktualisiert den visuellen Status des Settings-Icons basierend auf dem Login.
     * @param {boolean} isLoggedIn - Ob ein User angemeldet ist.
     */
    updateLoginStatus(isLoggedIn) {
        if (!this.settingsIconElement) return;

        if (isLoggedIn) {
            this.settingsIconElement.classList.add('is-logged-in');
        } else {
            this.settingsIconElement.classList.remove('is-logged-in');
        }
    }
    /**
     * Gibt den HTML-Markup-String für den <body> zurück.
     * 🛑 Markup für Spinner/Overlay/Button wurde entfernt.
     * @returns {string} Das HTML-Markup.
     * @private
     */
/**
     * Gibt den HTML-Markup-String für den <body> zurück.
     * Enthält das Basis-Layout, Steuerelemente und das Adress-Korrektur-Modal.
     * @returns {string} Das HTML-Markup.
     * @private
     */
    #getMarkup() {
        return `
            <div id="background-image-container"></div>
            <div id="tz" style="position: absolute; bottom: 0; left: 0; width: 100px; height: 100px; z-index: 100;"></div>
            <div id="map" class="hidden"></div>
            
            <div id="settings-icon" class="ctrl-button hidden">
                <i class="fas fa-cog icon-gear-shadow"></i>
                <span class="gear-fill"></span>
                <i class="fas fa-cog icon-gear"></i>
                <span class="icon-info">i</span>
            </div>
            
            <div id="search-address-trigger" class="hidden">
                <i class="fas fa-search"></i>
                <span id="search-address-placeholder-text">Name, Adresse, ...</span>
            </div>

        `;
    }
    /**
     * Gibt den CSS-String (ohne Imports) zurück.
     * 🛑 Opazität für Hintergrund wurde auf 1 gesetzt.
     * @returns {string} Die Inline-Styles.
     * @private
     */
    #getStyles() {
        return `
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #f0f0f0;
            }

            #background-image-container {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100svh;
                opacity: 1; /* <-- NEU: Sofort sichtbar */
                transition: opacity 1s ease-in-out;
                z-index: 10;
            }

            #background-image-container.fade-out {
                opacity: 0;
                z-index: -1;
            }

            #map {
                height: 100vh;
                height: 100dvh;
                width: 100vw;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 0;
                transition: opacity 1s ease-in-out;
            }

            #map.hidden {
                opacity: 0;
            }

            .user-location-emoji {
                font-size: 20px;
            }

            #add-button {
                background-color: #3498db;
                color: white;
                border-radius: 50%;
                width: 30px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                z-index: 400;
            }

            #add-icon {
                font-size: 30px;
                color: #fff;
            }

            #add-button:hover {
                background-color: #2980b9;
            }

            .hidden {
                display: none !important;
            }

            .user-location-emoji.pulsieren {
                animation: pulsate 1.5s infinite ease-out;
            }

            @keyframes pulsate {
                0% {
                    transform: scale(0.8);
                    opacity: 0.7;
                }

                50% {
                    transform: scale(1.1);
                    opacity: 1;
                }

                100% {
                    transform: scale(0.8);
                    opacity: 0.7;
                }
            }

            #settings-icon {
                position: fixed;
                bottom: 50px;
                right: 20px;
                width: 48px;
                height: 48px;
                display: inline-block;
                cursor: pointer;
                transition: transform 0.3s ease-out;
            }

/* --- Das Original-Zahnrad (Blau) --- */
.icon-gear {
    color: #007bff; 
    font-size: 48px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; /* Liegt über dem grünen Schatten */
}

.gear-fill {
    background-color: #007bff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1; /* Liegt unter dem blauen Icon */
}

            .icon-info {
                color: white;
                font-size: 36px;
                font-weight: bold;
                font-family: 'Dancing Script', cursive;
                position: absolute;
                top: 40%;
                left: 40%;
                transform: translate(-10%, -50%);
                z-index: 3;
                pointer-events: none;
            }

            /* 🛑 Styles für #location-permission-overlay wurden nach AppStartPageUI verschoben */
            /* 🛑 Styles für #loading-spinner-content wurden nach AppStartPageUI verschoben */
            /* 🛑 Styles für #grant-location-button wurden nach AppStartPageUI verschoben */

            /* Styles für den Adress-Trigger */
            #search-address-trigger {
                position: fixed;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                width: 60%;
                max-width: 500px;
                height: 50px;
                background-color: #fff;
                border-radius: 25px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                z-index: 500;
                display: flex;
                align-items: center;
                padding: 0 15px;
                cursor: pointer;
                box-sizing: border-box;
                font-size: 1em;
                color: #555;
            }
            #search-address-trigger i {
                margin-right: 10px;
                color: #888;
            }
            #search-address-trigger:hover {
                background-color: #f5f5f5;
            }
                /* In #getStyles() ergänzen */

/* --- DAS GRÜNE "SCHATTEN"-ZAHNRAD (UNTERLEGT) --- */
.icon-gear-shadow {
    color: #6cf30b; /* Apple Success Green */
    font-size: 56px;  /* 4px größer als das 48px Icon */
    position: absolute;
    
    /* Um das Icon zentriert zu halten, müssen wir top/left leicht anpassen */
    top: -4px; 
    left: -4px;
    
    /* Standardmäßig transparent/opak */
    opacity: 0;
    background-color: transparent;
    
    transition: all 0.5s ease-out; /* Sanfter Übergang */
    z-index: 0; /* Liegt ganz hinten im Icon-Stack */
}

/* --- ZUSTAND WENN EINGELOGGT: DAS GRÜNE SCHATTEN-ZAHNRAD WIRD SICHTBAR --- */
#settings-icon.is-logged-in .icon-gear-shadow {
    opacity: 1; /* Grün, opak (100% sichtbar) */
}

/* Sicherstellen, dass die anderen Elemente drüber liegen */
.gear-fill { z-index: 1; }
.icon-gear { z-index: 2; }
.icon-info { z-index: 3; }
        `;
    }
}