// sc-settings-ui.js
// UI-Logik für das Einstellungs-Panel, inklusive HTML-Struktur und CSS-Styling
// Diese Datei orchestriert die verschiedenen UI-Komponenten.

// Importiere die ScCloseButton Komponente
import { ScCloseButton } from './close-button.js'; 
// import { LocationTrackingCoordinator } from './loc-tracking-co.js';; // ❌ NICHT MEHR BENÖTIGT

// Importiere die neuen modularen Klassen für spezifische Sektionen
import { ScSettingsLocation, initializeLocationSettings } from './sc-settings-location.js'; 
import { HelpSettings } from './sc-settings-help.js';


export class SettingsUI {
    /**
     * @private {HTMLElement} settingsOverlay - Das überlagernde Div für das Einstellungs-Panel.
     * @private {HTMLElement} settingsPanel - Das eigentliche Einstellungs-Panel.
     * @private {HTMLElement} settingsTitle - Der Titel des Einstellungs-Panels.
     * @private {HTMLElement} staticContentArea - Der Bereich für statische Einstellungen (z.B. Location).
     * @private {HTMLElement} dynamicContentArea - Der Bereich für dynamischen Inhalt (z.B. Hilfe-Details).
     * @private {HTMLElement} settingsIcon - Das externe Icon zum Öffnen des Panels.
     * @private {ScCloseButton} closeButtonComponent - Die Instanz der Close-Button Komponente.
     * @private {HelpSettings} helpSettings - Die Instanz der HelpSettings Komponente.
     * @private {Array<function(): void>} _closeButtonListeners - Callbacks für das Schließen des Panels.
     * @private {Array<function(): void>} _helpButtonListeners - Callbacks für den Help/Info Button.
     * @private {boolean} _overlayClickListenerActive - Flag, ob der Overlay-Klick-Listener aktiv ist.
     * @private {function(Event): void} _boundHandleSettingsIconClick - Gebundene Version des Handlers für den Settings Icon Click.
     * @private {function(Event): void} _boundHandleOverlayClick - Gebundene Version des Handlers für den Overlay Click.
     * * @private {ScSettingsLocation} _scSettingsLocation - Die Instanz der ScSettingsLocation Komponente.
     */
    
    /**
     * @param {LocationTrackingCoordinator} locTrackingCoordinator - Die LocationTrackingCoordinator-Instanz (wird im nächsten Schritt entfernt, aber hier zur Klarheit belassen)
     */
    constructor(locTrackingCoordinator) { 
        console.log("SettingsUI: Konstruktor gestartet."); 

        this.closeButtonComponent = new ScCloseButton('settings-close-button'); 
        this._closeButtonListeners = []; 
        this._helpButtonListeners = []; 

        // HTML-Template für das Settings Panel als String (bleibt hier als Rahmen)
        this.panelHTML = `
            <div id="settings-overlay" class="settings-overlay">
                <div id="settings-panel" class="settings-panel" tabindex="-1">
                    <div class="settings-header">
                        <h3 id="settings-title">Info und Einstellungen</h3> <div id="settings-close-button-placeholder"></div> 
                    </div>
                    
                    <div id="settings-static-content"> 
                        </div>
                    
                    <div id="settings-dynamic-content">
                        </div>
                </div>
            </div>
        `;

        // CSS-Styles für das Settings Panel als String (bleibt hier als Rahmen)
        this.panelCSS = `
            /* Settings Panel Overlay */
            .settings-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5); 
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 10002; /* Höherer z-index als settings-icon */
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s ease, visibility 0.3s ease;
            }

            .settings-overlay.visible {
                opacity: 1;
                visibility: visible;
            }

            /* Settings Panel */
            .settings-panel {
                background-color: white;
                padding: 15px; 
                border-radius: 8px;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
                width: 90%;
                max-width: 400px;
                max-height: 90vh; 
                display: flex;
                flex-direction: column;
                overflow-y: auto; 
                overflow-x: hidden; 
                transition: opacity 0.3s ease, visibility 0.3s ease;
                opacity: 0;
                outline: none;
            }

            .settings-overlay.visible .settings-panel {
                opacity: 1;
            }

            .settings-header {
                display: flex;
                justify-content: space-between;
                align-items: center; 
                border-bottom: 1px solid #eee;
                padding-bottom: 5px;
                padding-top: 0px;
                flex-shrink: 0; 
            }

            .settings-header h3 {
                margin: 0;
                font-size: 1.5em;
                color: #333;
                flex-grow: 1;
            }

            /* Placeholder für den Close-Button */
            #settings-close-button-placeholder {
                flex-shrink: 0; 
            }

            /* Statischer Inhaltsbereich (Einstellungen) */
            #settings-static-content {
                flex-shrink: 0; 
            }

            /* Dynamischer Inhaltsbereich (Hilfe) */
            #settings-dynamic-content {
                flex-shrink: 0; 
                padding-top: 10px; 
                padding-bottom: 10px; 
            }

        `;

        // 1. CSS des Hauptpanels in den Head des Dokuments injizieren
        this._injectCSS(); 

        // 2. HTML des Hauptpanels in den Body des Dokuments injizieren
        this._injectHTML(); 

        // 3. Nachdem HTML und CSS im DOM sind, können wir die Elemente cachen
        this._cacheElements();
        
        // Initialisiere modulare Komponenten für spezifische Sektionen
        // ✅ initializeLocationSettings wird jetzt ohne locTrackingCoordinator aufgerufen
        this._scSettingsLocation = initializeLocationSettings(this.staticContentArea); 
        
        this.helpSettings = new HelpSettings(
            this.staticContentArea, 
            this.dynamicContentArea, 
            this.settingsTitle 
        );

        // Bindung der Handler für EventListener, um 'this' Kontext zu erhalten
        this._boundHandleSettingsIconClick = this._handleSettingsIconClick.bind(this);
        this._boundHandleOverlayClick = this._handleOverlayClick.bind(this);

        // Initialisiere Event-Listener
        this._addEventListeners();

        console.log("SettingsUI initialisiert.");
    }
    
    // ... [ _injectCSS, _injectHTML, _cacheElements unverändert ] ...

    /**
     * Injiziert das CSS des Hauptpanels in den <head> des Dokuments.
     * @private
     */
    _injectCSS() {
        if (!document.getElementById('sc-settings-ui-styles')) {
            const styleElement = document.createElement('style');
            styleElement.id = 'sc-settings-ui-styles';
            styleElement.textContent = this.panelCSS;
            document.head.appendChild(styleElement);
            console.log("Settings Panel CSS injected.");
        }
    }

    /**
     * Injiziert das HTML des Panels in den <body> des Dokuments.
     * @private
     */
    _injectHTML() {
        if (!document.getElementById('settings-overlay')) {
            document.body.insertAdjacentHTML('beforeend', this.panelHTML); 
            console.log("Settings Panel HTML injected.");
        } else {
            console.log("Settings Panel HTML already exists in DOM.");
        }
    }

    /**
     * Cacht die DOM-Elemente des Hauptpanels.
     * @private
     */
    _cacheElements() {
        console.log("SettingsUI: _cacheElements() gestartet."); 
        this.settingsOverlay = document.getElementById('settings-overlay');
        this.settingsPanel = document.getElementById('settings-panel');
        this.settingsTitle = document.getElementById('settings-title'); 
        this.staticContentArea = document.getElementById('settings-static-content'); 
        this.dynamicContentArea = document.getElementById('settings-dynamic-content'); 
        
        // Füge den CloseButton an seinem Platzhalter ein
        const closeButtonPlaceholder = document.getElementById('settings-close-button-placeholder');
        if (closeButtonPlaceholder) {
            closeButtonPlaceholder.appendChild(this.closeButtonComponent.getElement());
        } else {
            console.error("ERROR: settings-close-button-placeholder not found. Close button cannot be rendered.");
        }

        // Überprüfe, ob das settingsIcon gefunden wurde
        this.settingsIcon = document.getElementById('settings-icon'); 
        if (this.settingsIcon) {
            console.log("SettingsUI: 'settings-icon' Element gefunden:", this.settingsIcon); 
        } else {
            console.warn("SettingsUI: Das Element mit der ID 'settings-icon' wurde NICHT gefunden. Das Panel kann möglicherweise nicht über ein externes Icon geöffnet werden.");
        }
        console.log("SettingsUI: _cacheElements() beendet."); 
    }

    /**
     * Fügt alle Event-Listener zu den UI-Elementen hinzu.
     * @private
     */
    _addEventListeners() {
        console.log("SettingsUI: _addEventListeners() gestartet."); 
        
        // Listener für den externen Settings-Icon zum Öffnen des Panels (falls vorhanden)
        if (this.settingsIcon) {
            this.settingsIcon.removeEventListener('click', this._boundHandleSettingsIconClick); 
            this.settingsIcon.addEventListener('click', this._boundHandleSettingsIconClick);
            console.log("SettingsUI: Klick-Listener für 'settings-icon' erfolgreich hinzugefügt."); 
        } else {
            console.log("SettingsUI: Kein 'settings-icon' gefunden, daher kein Klick-Listener für externes Icon hinzugefügt."); 
        }

        // Listener für den Schließen-Button (über die ScCloseButton Komponente)
        if (this.closeButtonComponent) {
            this.closeButtonComponent.onClick(() => this._handleClosePanelOrHelpReturn()); 
            console.log("SettingsUI: Interner Listener für closeButtonComponent hinzugefügt.");
        } else {
            console.error("ERROR: closeButtonComponent not found for attaching hide listener.");
        }
        
        // ❌ Abonnieren des Location Toggle Events entfernt, da der Coordinator dies jetzt direkt macht.
        
        // Abonnieren des Help Button Klicks von der HelpSettings-Komponente
        if (this.helpSettings.onHelpButtonClick) { 
            this.helpSettings.onHelpButtonClick(() => {
                console.log("SettingsUI: Erhaltener onHelpButtonClick von HelpSettings.");
                // Leitet das Event an externe Listener der SettingsUI weiter (z.B. SettingsCoordinator)
                this._helpButtonListeners.forEach(callback => callback());
            });
        }
        
        console.log("SettingsUI: _addEventListeners() beendet."); 
    }
    
    // ... [ _enableOverlayClickListener, _disableOverlayClickListener, _handleSettingsIconClick, _handleClosePanelOrHelpReturn, _handleOverlayClick, open, close unverändert ] ...

    /**
     * Aktiviert den Klick-Listener für das Overlay.
     * @private
     */
    _enableOverlayClickListener() {
        if (this.settingsOverlay && !this._overlayClickListenerActive) {
            this.settingsOverlay.addEventListener('click', this._boundHandleOverlayClick);
            this._overlayClickListenerActive = true;
            console.log("SettingsUI: Overlay Klick-Listener aktiviert.");
        }
    }

    /**
     * Deaktiviert den Klick-Listener für das Overlay.
     * @private
     */
    _disableOverlayClickListener() {
        if (this.settingsOverlay && this._overlayClickListenerActive) {
            this.settingsOverlay.removeEventListener('click', this._boundHandleOverlayClick);
            this._overlayClickListenerActive = false;
            console.log("SettingsUI: Overlay Klick-Listener deaktiviert.");
        }
    }

    /**
     * Handler für den Klick auf das externe Settings-Icon.
     * @private
     */
    _handleSettingsIconClick(event) { 
        event.preventDefault(); 
        event.stopPropagation(); 
        console.log("SettingsUI: '_handleSettingsIconClick()' wurde aufgerufen. 'settings-icon' wurde geklickt."); 
        this.open();
    }

    /**
     * Handler für den Schließen-Button, der zwischen Hilfe und Einstellungen wechselt oder das Panel schließt.
     * @private
     */
    _handleClosePanelOrHelpReturn() {
        this._disableOverlayClickListener(); 

        if (this.helpSettings.isHelpContentVisible()) {
            console.log("SettingsUI: Hilfe ist offen, kehre zu Einstellungen zurück.");
            this.helpSettings.hideHelpContent(); 
            this._enableOverlayClickListener(); 
            console.log("SettingsUI: Übergang von Hilfe zu Einstellungen abgeschlossen.");
        } else {
            console.log("SettingsUI: Einstellungen sind offen, schließe das gesamte Panel.");
            this.close(); 
        }
        this._closeButtonListeners.forEach(handler => handler());
    }

    /**
     * Handler für Klicks auf das Overlay außerhalb des Panels.
     * @private
     */
    _handleOverlayClick(event) {
        console.log("SettingsUI: '_handleOverlayClick()' wurde aufgerufen.");
        if (this.settingsPanel && !this.settingsPanel.contains(event.target)) {
            this.close();
            console.log("SettingsUI: Auf Overlay geklickt (außerhalb des Panels), Panel wird versteckt.");
        } else {
            console.log("SettingsUI: Klick erfolgte innerhalb des Panels, schließe nicht.");
        }
    }

    /**
     * Öffnet das Einstellungs-Panel.
     * Setzt die 'visible'-Klasse auf das Overlay.
     * Stellt sicher, dass der statische Inhalt sichtbar ist und der dynamische Inhalt geleert ist.
     */
    open() {
        console.log("SettingsUI: Methode 'open()' wurde aufgerufen."); 
        if (this.settingsOverlay) {
            this.settingsOverlay.classList.add('visible');
            console.log("SettingsUI: 'settings-overlay' Klasse 'visible' hinzugefügt."); 
            this.settingsPanel.focus();
            
            if (this.settingsTitle) {
                this.settingsTitle.textContent = "Info und Einstellungen";
            }
            this.helpSettings.hideHelpContent(); 
            
            this._enableOverlayClickListener();
        } else {
            console.error("SettingsUI: Fehler: 'settings-overlay' Element nicht gefunden in open()."); 
        }
    }

    /**
     * Versteckt das Einstellungs-Panel.
     * Entfernt die 'visible'-Klasse vom Overlay.
     */
    close() {
        if (this.settingsOverlay) {
            this.settingsOverlay.classList.remove('visible');
            console.log("SettingsUI: Panel versteckt.");
            this.helpSettings.hideHelpContent(); 
            
            this._disableOverlayClickListener();
        }
    }

    /**
     * Setzt den Zustand des Standortfreigabe-Toggles (Slider) in der UI.
     * Delegation an die ScSettingsLocation-Komponente.
     * @param {boolean} isEnabled - True für 'An', False für 'Aus'.
     */
    updateLocationToggle(isEnabled) { // 💡 Umbenannt von setLocationToggle für mehr Klarheit in der UI-Steuerung
        this._scSettingsLocation.setLocationToggle(isEnabled); 
    }

    /**
     * Gibt den aktuellen Zustand des Sandortfreigabe-Toggles (Slider) zurück.
     * Delegation an die ScSettingsLocation-Komponente.
     * @returns {boolean|null} True, wenn 'An', False, wenn 'Aus', oder null, wenn Element nicht gefunden.
     */
    getLocationToggleState() {
        return this._scSettingsLocation.getLocationToggleState(); 
    }

    // ❌ onLocationToggleChange entfernt

    /**
     * Registriert einen Callback für den Klick auf den Schließen-Button.
     * @param {Function} handler - Die Callback-Funktion.
     */
    onCloseButtonClick(handler) {
        if (typeof handler === 'function') {
            this._closeButtonListeners.push(handler); 
            console.log("SettingsUI: Externer Close-Button-Handler registriert.");
        }
    }

    /**
     * Registriert einen Callback für den Klick auf den Hilfe/Info-Button.
     * Dieser Callback fängt Ereignisse vom HelpSettings-Modul ab und leitet sie weiter.
     * @param {Function} handler - Die Callback-Funktion.
     */
    onHelpButtonClick(handler) { 
        if (typeof handler === 'function') {
            this._helpButtonListeners.push(handler);
            console.log("SettingsUI: Externer Help-Button-Handler registriert.");
        }
    }

    /**
     * Diese Methode ist obsolet, da der Info-Icon-Klick jetzt vom HelpSettings-Modul
     * über onHelpButtonClick() gemeldet und dann über onHelpButtonClick() in SettingsUI weitergeleitet wird.
     * @param {Function} handler - Die Callback-Funktion.
     */
    onInfoIconClick(handler) {
        console.warn("SettingsUI: onInfoIconClick ist obsolet und sollte entfernt werden.");
    }

    /**
     * Prüft, ob das Settings Panel aktuell sichtbar ist.
     * @returns {boolean} True, wenn das Panel sichtbar ist, sonst False.
     */
    isOpen() {
        return this.settingsOverlay && this.settingsOverlay.classList.contains('visible');
    }

    /**
     * Prüft, ob ein gegebenes DOM-Element innerhalb des Settings Panels liegt.
     * Wird für Klicks außerhalb des Panels benötigt.
     * @param {HTMLElement} targetElement - Das zu prüfende Element.
     * @returns {boolean} True, wenn das Element Teil des Panels ist, sonst False.
     */
    contains(targetElement) {
        return this.settingsPanel && this.settingsPanel.contains(targetElement);
    }
}