/**
 * AppShellUI.js
 * Verwaltet das statische HTML-Markup und die CSS-Definitionen der 
 * primären Anwendungshülle.
 */
export class AppShellUI {
    constructor() {
        // Konsistente Namensgebung
        this.panelCSS = this.#getStyles();
        this.panelHTML = this.#getMarkup();
        
        this.mapElement = null;
        this.settingsIconElement = null;
        this.searchTriggerElement = null;
        this.locationPermissionOverlay = null;
    }

    /**
     * Startet den Injektionsprozess.
     * @param {HTMLElement} targetBody - Das <body> Element der Seite.
     */
    injectIntoDOM(targetBody) {
        // 1. Injektion über interne Methoden (Konsistenz mit AddressSheetUI)
        this._injectCSS();
        this._injectHTML(targetBody); // targetBody muss übergeben werden

        // 2. Wichtige DOM-Referenzen cachen
        this.mapElement = document.getElementById('map');
        this.settingsIconElement = document.getElementById('settings-icon');
        this.searchTriggerElement = document.getElementById('search-address-trigger');
        this.locationPermissionOverlay = document.getElementById('location-permission-overlay');
    }

    /**
     * Injiziert die CSS-Styles in den <head> des Dokuments.
     * @private
     */
    _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);
        }
    }

    /**
     * Injiziert das HTML-Template in den Body des Dokuments.
     * @param {HTMLElement} targetBody - Das <body> Element der Seite.
     * @private
     */
    _injectHTML(targetBody) {
        // KRITISCHE KORREKTUR: Verwende 'beforeend' um Listener nicht zu verlieren.
        if (!document.getElementById('map')) { // Prüfe, ob das Haupt-Element schon existiert
             targetBody.insertAdjacentHTML('beforeend', this.panelHTML);
        }
    }


    /**
     * Gibt den HTML-Markup-String für den <body> zurück.
     * NUR EIN SPINNER: #loading-spinner-content
     * @returns {string} Das HTML-Markup.
     * @private
     */
    #getMarkup() {
        return `
            <div id="background-image-container"></div>
            
            <div id="loading-spinner-content" class="hidden">
                <i class="fas fa-spinner fa-spin" style="margin-right: 15px; font-size: 3em;"></i>
                <p id="estimated-time-display" style="text-align: center; margin: 0;"></p>
            </div>
            
            <div id="location-permission-overlay" class="hidden">
                <button id="grant-location-button">Stolpersteine anzeigen</button>
            </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">
                <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">Adresse suchen...</span>
            </div>
        `;
    }

    /**
     * Gibt den CSS-String (ohne Imports) zurück.
     * CSS für #initial-load-info wurde entfernt/konsolidiert.
     * @returns {string} Die Inline-Styles.
     * @private
     */
    #getStyles() {
        return `
            body {
                margin: 0;
                font-family: Arial, sans-serif;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #f0f0f0;
            }

            #background-image-container {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100dvh;
                opacity: 0;
                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: 20px;
                right: 20px;
                width: 48px;
                height: 48px;
                display: inline-block;
                cursor: pointer;
            }

            .icon-gear {
                color: #16a151;
                font-size: 48px;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
            }

            .gear-fill {
                background-color: #16a151;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                position: absolute;
                top: 14px;
                left: 14px;
                z-index: 1;
            }

            .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;
            }

            #location-permission-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.2);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                z-index: 1000;
                color: white;
                text-align: center;
                padding: 20px;
                box-sizing: border-box;
                transition: opacity 0.5s ease-out;
            }

            #location-permission-overlay.hidden {
                opacity: 0;
                pointer-events: none;
            }

            #loading-spinner-content {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100dvh;
                background-color: rgba(0, 0, 0, 0.7); 
                z-index: 500;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                color: #f1f4f1;
                font-size: 1.2em;
                transition: opacity 0.5s ease-out;
            }

            #loading-spinner-content .fa-spinner {
                font-size: 3em;
                margin-bottom: 15px;
            }

            #loading-spinner-content.fade-out {
                opacity: 0;
                z-index: -1;
                transition: opacity 0.5s ease-in-out, z-index 0s 0.5s;
            }

            #grant-location-button {
                background-color: #349d4c;
                color: white;
                padding: 15px 30px;
                border: none;
                border-radius: 8px;
                font-size: 1.5em;
                cursor: pointer;
                transition: background-color 0.3s ease;
            }

            #grant-location-button:active {
                background-color: #1a702e;
                transform: translateY(1px);
            }

            #grant-location-button:hover {
                background-color: #218838;
            }
            
            /* Styles für den Adress-Trigger */
            #search-address-trigger {
                position: fixed;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                width: 70%;
                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;
            }
        `;
    }
}