// app-startpage-ui.js

/**
 * AppStartPageUI.js
 * Verwaltet und injiziert die Styles und das Markup für die Startseite:
 * 1. Overlay (für den Grant-Location-Button)
 * 2. Lade-Spinner (mit geschätzter Zeit)
 * 3. Spezifische Styles für Start-Elemente (Button, Container, Input)
 */
export class AppStartPageUI {
    constructor() {
        this.styles = this.#getStyles();
        this.markup = this.#getMarkup(); // NEU: Markup der Startseite
    }

    /**
     * Injiziert die Styles und das Markup in das DOM.
     * Das Markup wird in den <body> injiziert.
     */
    injectIntoDOM() {
        this.#injectCSS();
        this.#injectHTML();
    }

    /**
     * Injiziert die CSS-Styles in den <head> des Dokuments.
     * @private
     */
    #injectCSS() {
        if (!document.getElementById('start-page-styles')) {
            const styleElement = document.createElement('style');
            styleElement.id = 'start-page-styles';
            styleElement.textContent = this.styles;
            document.head.appendChild(styleElement);
        }
    }
    
    /**
     * Injiziert das HTML-Markup (Overlay und Spinner) in den Body.
     * @private
     */
    #injectHTML() {
        // Fügt das Markup am Ende des Bodys ein
        document.body.insertAdjacentHTML('beforeend', this.markup);
    }

    /**
     * Gibt den HTML-Markup-String für die Startseite zurück (Overlay und Ladeanzeige).
     * Wichtig: Diese Elemente wurden aus der AppShellUI entfernt.
     * @returns {string} Das HTML-Markup.
     * @private
     */
    #getMarkup() {
        return `
            <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>
        `;
    }

    /**
     * Gibt den CSS-String für alle Startseiten-spezifischen Elemente zurück.
     * Enthält auch die Styles, die aus der AppShellUI entfernt wurden (Loading/Overlay).
     *
     * @returns {string} Die Inline-Styles.
     * @private
     */
    #getStyles() {
        return `
/* =======================================
 * START PAGE SPECIFIC UI Styles 
 * ======================================= */

/* Styles für den allgemeinen Start-Container (falls verwendet) */
.container {
    text-align: center;
    position: relative;
    z-index: 400;
    padding: 0px;
    border-radius: 10px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.0);
}

h1 {
    margin-bottom: 4em;
    margin-top: 10px;
}


/* Styles für den Haupt-Aktions-Button (grant-location-button) */
button {
    background-color: #666; /* Basis-Style aus der ursprünglichen Definition */
    color: white;
    font-size: 2em;
    width: auto;
    height: 10vh;
    border: none;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(255, 255, 255, 0);
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 400;
    margin-top: 0px;
    
    /* Spezifische Styles für den Grant-Button (ersetzt AppShellUI-Styles) */
    background-color: #349d4c;
    padding: 15px 30px;
    font-size: 1.5em;
    height: auto; /* Anpassen auf Inhalt */
    width: auto;
}

button:hover {
    background-color: #555;
    box-shadow: 0px 6px 12px rgba(255, 255, 255, 0);
    background-color: #218838; /* Spezifisches Hover für Grant-Button */
}

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

/* Styles für das Location Permission Overlay (aus AppShellUI verschoben) */
#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;
}

/* Styles für den Lade-Spinner (aus AppShellUI verschoben) */
#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;
}
        `;
    }
}