// sc-close-button.js
export class ScCloseButton {
    /**
     * Erstellt einen standardisierten Schließen-Button.
     * @param {string} [id=''] - Optionale ID für den Button.
     * @param {Array<string>} [additionalClasses=[]] - Optionale zusätzliche CSS-Klassen.
     * @returns {HTMLButtonElement} Das erstellte Button-Element.
     */
    constructor(id = '', additionalClasses = []) {
        this.buttonElement = document.createElement('button');
        if (id) {
            this.buttonElement.id = id;
        }
        // NEU: Speichere die ID auch in der Instanz für Logs und Referenzen
        this.id = id; 
        
        this.buttonElement.classList.add('sc-close-button', ...additionalClasses);
        this.buttonElement.innerHTML = '<i class="fas fa-times"></i>'; // Font Awesome Icon

        this._injectCSS(); 

        this.eventHandlers = []; // Für onClose-Callbacks
    }

    /**
     * Injiziert das CSS für den Close-Button einmalig in den Head des Dokuments.
     * @private
     */
    _injectCSS() {
        if (!document.getElementById('sc-close-button-styles')) { // Nur einmal injizieren
            const styleElement = document.createElement('style');
            styleElement.id = 'sc-close-button-styles';
            styleElement.textContent = `
                .sc-close-button {
                    background-color: #F44336; /* Rot, wie im Adress-Sheet */
                    border: none;
                    cursor: pointer;
                    padding: 0;
                    width: 30px; /* Breite wie im Adress-Sheet */
                    height: 30px; /* Höhe wie im Adress-Sheet */
                    border-radius: 50%; /* Für einen runden Button */
                    flex-shrink: 0;
                    margin-left: 10px; /* Standardabstand zum Nachbarelement */
                    margin-top: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: white; /* Farbe des Kreuzes (Icon) - Weiß */
                    font-size: unset; /* Neutralisiert Vererbung vom Button selbst */
                    line-height: unset;
                    transition: background-color 0.2s ease; /* Smooth transition for hover */
                }
                .sc-close-button:hover {
                    background-color: #d32f2f; /* Dunkleres Rot beim Hover */
                }
                .sc-close-button i.fas.fa-times {
                    font-size: 20px; /* Größe des Icons wie im Adress-Sheet */
                    line-height: 1; /* Wichtig für präzise vertikale Ausrichtung */
                    font-weight: 900; /* Font Awesome Solid Gewicht */
                    color: inherit; /* Icon erbt die weiße Farbe vom Button */
                    /* Stellen Sie sicher, dass keine unerwünschten ::before-Regeln greifen */
                    /* content: none !important;  Diese Regel ist problematisch und wird entfernt */
                    display: inline-block;
                }
                /* Optional: Verhindert, dass Textauswahl auf dem Icon funktioniert */
                .sc-close-button i.fas.fa-times::selection {
                    background: transparent;
                }
            `;
            document.head.appendChild(styleElement);
        }
    }

    /**
     * Gibt das gerenderte Button-Element zurück.
     * @returns {HTMLButtonElement}
     */
    getElement() {
        return this.buttonElement;
    }

    /**
     * Zeigt den Button an.
     */
    show() {
        this.buttonElement.classList.remove('hidden');
    }

    /**
     * Versteckt den Button.
     */
    hide() {
        this.buttonElement.classList.add('hidden');
    }

    /**
     * Fügt einen Event-Listener für den Klick auf den Button hinzu.
     * @param {Function} handler - Die Funktion, die beim Klick aufgerufen wird.
     */
    onClick(handler) {
        // Entferne alte Listener, um Duplikate zu vermeiden
        // Dies sollte nur einmal pro Instanz gebunden werden, um Probleme zu vermeiden
        if (this._boundHandler) {
            this.buttonElement.removeEventListener('click', this._boundHandler);
        }

        // Binde den Handler an 'this' der Komponente und speichere ihn
        this._boundHandler = (event) => {
            event.stopPropagation(); // WICHTIG: Verhindert, dass der Klick weiterblubbert
            console.log(`ScCloseButton: Klick auf Button '${this.id}'. Event-Propagation gestoppt.`);
            handler(event); // Rufe den ursprünglichen Handler auf
        };
        this.buttonElement.addEventListener('click', this._boundHandler);
        this.eventHandlers.push(handler); // Speichern für cleanup - jetzt wird der *ursprüngliche* Handler gespeichert
    }

    /**
     * Entfernt alle registrierten Event-Listener.
     */
    destroy() {
        if (this._boundHandler) {
            this.buttonElement.removeEventListener('click', this._boundHandler);
        }
        this.eventHandlers = []; // Setze die Liste zurück
        this.buttonElement.remove(); // Entfernt den Button aus dem DOM
    }
}
