// sc-settings-help.js
// Kapselt die UI und Logik für den Info-Bereich (Markdown-Inhalte und Akkordeons), inklusive HTML und CSS.

import { marked } from 'https://cdn.jsdelivr.net/npm/marked@12.0.1/lib/marked.esm.js'; 

export class HelpSettings {
    /**
     * Erstellt eine Instanz von HelpSettings.
     * @param {HTMLElement} staticContentArea - Der DOM-Bereich für statische Inhalte (Einstellungen).
     * @param {HTMLElement} dynamicContentArea - Der DOM-Bereich für dynamische Inhalte (Info).
     * @param {HTMLElement} settingsTitleElement - Das Element, das den Titel des Panels anzeigt.
     */
    constructor(staticContentArea, dynamicContentArea, settingsTitleElement) {
        this.staticContentArea = staticContentArea;
        this.dynamicContentArea = dynamicContentArea;
        this.settingsTitleElement = settingsTitleElement;

        this._injectHTML();
        this._injectCSS();
        this._cacheElements();
        this._addEventListeners();

        console.log("HelpSettings: Instanziiert.");
    }

    /**
     * Injiziert das HTML für den Info-Link/Button in den statischen Bereich.
     * @private
     */
    _injectHTML() {
        const htmlContent = `
            <div class="settings-help-link">
                <button type="button" id="open-help-button" class="help-button">Info</button>
            </div>
            <hr class="settings-divider">
        `;
        if (this.staticContentArea) {
            this.staticContentArea.insertAdjacentHTML('afterbegin', htmlContent);
            console.log("Help Settings HTML injected.");
        } else {
            console.error("HelpSettings: Static content area not provided for HTML injection.");
        }
    }

    /**
     * Injiziert das spezifische CSS für den Info-Bereich.
     * @private
     */
    _injectCSS() {
        const cssContent = `
            /* Stil für den Info-Button im Panel */
            .settings-help-link {
                text-align: right; /* Richtet den Button rechts aus */
                margin-top: 10px; /* Abstand nach oben */
                margin-bottom: 10px; /* Abstand nach unten zum Divider */
            }

            .help-button {
                background-color: #007bff;
                color: white;
                border: none;
                border-radius: 5px;
                padding: 8px 15px;
                font-size: 0.9em;
                cursor: pointer;
                transition: background-color 0.2s ease, transform 0.1s ease;
                box-shadow: 0 2px 4px rgba(0,0,0,0.2);
                width: 100%; /* Macht den Button 100% breit */
            }

            .help-button:hover {
                background-color: #0056b3;
                transform: translateY(-1px);
            }

            .help-button:active {
                background-color: #004085;
                transform: translateY(0);
            }

            /* Horizontale Linie unter dem Info-Button */
            .settings-divider {
                border: none;
                border-top: 1px solid #eee;
                margin: 10px 0 20px 0; /* Abstand oben, kein horizontaler Margin, Abstand unten */
            }

            /* Statischer Inhaltsbereich (Einstellungen) */
            /* Dies ist hier nur zur Klarheit, die Haupt-Styles kommen vom Panel */
            #settings-static-content {
                /* flex-shrink: 0; */ 
            }

            /* Dynamischer Inhaltsbereich (Info) */
            /* Dies ist hier nur zur Klarheit, die Haupt-Styles kommen vom Panel */
            #settings-dynamic-content {
                /* flex-shrink: 0; */
                /* padding-top: 10px; */ 
                /* padding-bottom: 10px; */ 
            }

            /* Collapsible-Styles für Info-Inhalt */
            .accordion-section {
                margin-bottom: 10px;
                border: 1px solid var(--border-color, #ddd);
                border-radius: 8px;
                overflow: hidden; 
                background-color: var(--panel-background, #fff);
            }

            .accordion-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 15px;
                background-color: var(--header-background, #f2f2f2);
                cursor: pointer;
                font-weight: bold;
                color: var(--text-color, #333);
                border-bottom: 1px solid var(--border-color, #eee);
                transition: background-color 0.2s ease;
            }

            .accordion-header:hover {
                background-color: var(--hover-background, #e9e9e9);
            }

            .accordion-header.active {
                background-color: var(--primary-color, #007bff);
                color: white;
            }

            .accordion-header h2,
            .accordion-header h3 {
                margin: 0; 
                padding: 0;
                font-size: 1.1em; 
            }

            .accordion-header.active h2,
            .accordion-header.active h3 {
                color: white; 
            }

            .toggle-icon {
                font-size: 1.4em;
                line-height: 1;
                margin-left: 10px;
                transition: transform 0.3s ease, color 0.2s ease;
            }

            .accordion-header.active .toggle-icon {
                color: white;
            }

            .section-content {
                padding-left: 15px;
                padding-right: 15px;
                max-height: 0; 
                overflow: hidden;
                transition: max-height 0.3s ease-out, padding 0.3s ease-out;
                padding-top: 0; 
                padding-bottom: 0; 
                background-color: var(--panel-background, #fff);
                color: var(--text-color, #333);
            }

            .section-content p {
                margin: 10px 0;
                line-height: 1.6;
            }

            /* Stil für hr-Tags aus Markdown */
            #settings-dynamic-content hr {
                border: none;
                border-top: 1px dashed var(--border-color, #ccc);
                margin: 20px 0;
            }
        `;
        if (!document.getElementById('sc-help-settings-styles')) {
            const styleElement = document.createElement('style');
            styleElement.id = 'sc-help-settings-styles';
            styleElement.textContent = cssContent;
            document.head.appendChild(styleElement);
            console.log("Help Settings CSS injected.");
        }
    }

    /**
     * Cacht die DOM-Elemente des Info-Bereichs.
     * @private
     */
    _cacheElements() {
        this.openHelpButton = this.staticContentArea.querySelector('#open-help-button');
    }

    /**
     * Fügt Event-Listener für die Info-UI-Elemente hinzu.
     * @private
     */
    _addEventListeners() {
        if (this.openHelpButton) {
            this.openHelpButton.addEventListener('click', this._handleOpenHelpLinkClick.bind(this));
        }
    }

    /**
     * Handler für den Klick auf den "Info"-Link (jetzt Button).
     * @param {Event} event - Das Event-Objekt.
     * @private
     */
    _handleOpenHelpLinkClick(event) {
        event.preventDefault(); 
        console.log("Help button clicked in HelpSettings.");
        this.loadAndDisplayHelpContent(); // Direkter Aufruf der integrierten Methode
    }

    /**
     * Lädt und zeigt den Infoinhalt aus Markdown an.
     * Diese Methode wurde von SettingsMarkdownLoader integriert.
     */
    async loadAndDisplayHelpContent() {
        console.log("HelpSettings: Startet das Laden des Infoinhalts aus Markdown.");
        if (!this.dynamicContentArea) {
            console.error("HelpSettings: Dynamischer Inhaltsbereich (settings-dynamic-content) nicht gefunden.");
            return;
        }

        // Zeige einen Lade-Indikator im dynamischen Bereich
        this.dynamicContentArea.innerHTML = `<h3>Info & Informationen</h3><p>Lade Inhalte...</p>`;
        this.dynamicContentArea.style.display = 'block'; 
        this.staticContentArea.style.display = 'none'; 
        this.settingsTitleElement.textContent = "Info und Einstellungen"; 

        try {
            const response = await fetch('./sc-help.md'); 
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status} - Datei: ./sc-help.md`);
            }
            const markdownText = await response.text();

            const htmlContent = marked.parse(markdownText); 

            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = htmlContent;

            const children = Array.from(tempDiv.children);
            
            tempDiv.innerHTML = ''; 

            let currentContentDiv = null; 

            children.forEach(element => {
                if (element.tagName === 'H2' || element.tagName === 'H3') {
                    const headerWrapper = document.createElement('div');
                    headerWrapper.className = 'accordion-header';
                    
                    const toggleIcon = document.createElement('span');
                    toggleIcon.className = 'toggle-icon';
                    toggleIcon.textContent = '+'; 

                    const headerTextSpan = document.createElement('span');
                    headerTextSpan.innerHTML = element.innerHTML; 
                    headerWrapper.appendChild(headerTextSpan);
                    headerWrapper.appendChild(toggleIcon);

                    currentContentDiv = document.createElement('div');
                    currentContentDiv.className = 'section-content';
                    
                    const accordionSectionDiv = document.createElement('div');
                    accordionSectionDiv.className = 'accordion-section';
                    accordionSectionDiv.appendChild(headerWrapper);
                    accordionSectionDiv.appendChild(currentContentDiv);
                    
                    tempDiv.appendChild(accordionSectionDiv); 

                } else if (currentContentDiv) {
                    currentContentDiv.appendChild(element);
                }
            });

            this.dynamicContentArea.innerHTML = tempDiv.innerHTML;

            this._initializeCollapsibles(); // Rufe die Akkordeon-Initialisierung direkt auf

            console.log("HelpSettings: Infoinhalt erfolgreich aus Markdown geladen, konvertiert und angezeigt.");
        } catch (error) {
            console.error("HelpSettings: Fehler beim Laden oder Konvertieren der Infoinhalte:", error);
            this.dynamicContentArea.innerHTML = `<h3>Fehler</h3><p>Infoinhalte konnten nicht geladen werden: ${error.message}</p>`;
            this.dynamicContentArea.style.display = 'block';
        }
    }

    /**
     * Initialisiert Event-Listener für aufklappbare Elemente, nachdem der Inhalt ins DOM geladen wurde.
     * @private
     */
    _initializeCollapsibles() {
        if (!this.dynamicContentArea) {
            console.warn("HelpSettings: dynamicContentArea ist nicht verfügbar. Kollabierfunktion kann nicht hinzugefügt werden.");
            return;
        }

        this.dynamicContentArea.querySelectorAll('.accordion-header').forEach(header => {
            header.removeEventListener('click', this._toggleCollapsible.bind(this));
            header.addEventListener('click', this._toggleCollapsible.bind(this));

            const content = header.nextElementSibling;
            const icon = header.querySelector('.toggle-icon'); 

            if (content && content.classList.contains('section-content') && icon) {
                content.style.maxHeight = '0px';
                content.style.paddingTop = '0px';
                content.style.paddingBottom = '0px';
                icon.textContent = '+';
                header.classList.remove('active');
            } else {
                console.warn("HelpSettings: Konnte Inhalt oder Toggle-Icon für Akkordeon-Header nicht finden:", header);
            }
        });
    }

    /**
     * Private Helfer-Methode für die Toggle-Funktion eines aufklappbaren Elements.
     * @param {Event} event - Das Event-Objekt vom Klick.
     * @private
     */
    _toggleCollapsible(event) { 
        const header = event.currentTarget; 
        console.log("DEBUG: header in _toggleCollapsible:", header);
        console.log("DEBUG: header instanceof HTMLElement:", header instanceof HTMLElement);

        const content = header.nextElementSibling; 
        const icon = header.querySelector('.toggle-icon'); 

        if (content && icon) {
            if (content.style.maxHeight !== '0px') { 
                content.style.maxHeight = '0px';
                content.style.paddingTop = '0px';
                content.style.paddingBottom = '0px';
                icon.textContent = '+';
                header.classList.remove('active');
            } else { 
                content.style.maxHeight = content.scrollHeight + 'px';
                content.style.paddingTop = '10px'; 
                content.style.paddingBottom = '10px'; 
                icon.textContent = '-';
                header.classList.add('active');
            }
        } else {
            console.warn("DEBUG: Missing content or icon in _toggleCollapsible for header:", header);
        }
    }

    /**
     * Versteckt den Infoinhalt und kehrt zur Einstellungsansicht zurück.
     * Diese Methode wird von SettingsUI aufgerufen, wenn der Schließen-Button
     * gedrückt wird, während die Infoansicht aktiv ist.
     */
    hideHelpContent() {
        if (this.dynamicContentArea) {
            this.dynamicContentArea.innerHTML = ''; // Infoinhalt leeren
            this.dynamicContentArea.style.display = 'none'; // Infoinhalt-Bereich ausblenden
        }
        if (this.staticContentArea) {
            this.staticContentArea.style.display = ''; // Statischen Einstellungsbereich anzeigen
        }
        if (this.settingsTitleElement) {
            this.settingsTitleElement.textContent = "Info und Einstellungen"; // Titel auf "Info" zurücksetzen
        }
    }

    /**
     * Prüft, ob der Infoinhalt aktuell sichtbar ist.
     * @returns {boolean} True, wenn der dynamische Inhalt sichtbar ist, sonst false.
     */
    isHelpContentVisible() {
        return this.dynamicContentArea && this.dynamicContentArea.style.display === 'block';
    }
}
