export async function initKnowledgePage() {
    const wissenList = document.getElementById('wissen-list');
    const gebeteList = document.getElementById('gebete-list');

    if (wissenList) {
        try {
            const knowledgeResponse = await fetch('data/knowledge/knowledge.json');
            const knowledgeItems = await knowledgeResponse.json();
            renderKnowledgeList(wissenList, knowledgeItems);
        } catch (error) {
            console.error('Fehler beim Laden der Wissens-Übersicht:', error);
        }
    }

    if (gebeteList) {
        try {
            const gebeteResponse = await fetch('data/prayers/prayers.json');
            const gebeteItems = await gebeteResponse.json();
            renderGebeteList(gebeteList, gebeteItems);
        } catch (error) {
            console.error('Fehler beim Laden der Gebete:', error);
        }
    }

    const tabs = document.querySelectorAll('.wissen-tab');
    const panelGebete = document.getElementById('panel-gebete');
    const panelWissen = document.getElementById('panel-wissen');

    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            tabs.forEach(t => t.classList.remove('active'));
            tab.classList.add('active');

            const target = tab.dataset.tab;
            if (panelGebete) panelGebete.classList.toggle('active', target === 'gebete');
            if (panelWissen) panelWissen.classList.toggle('active', target === 'wissen');
        });
    });
}

function createAccordionItem(title, filename, basePath) {
    const element = document.createElement('div');
    element.className = 'wissen-item';

    element.innerHTML = `
        <button class="wissen-header">
            <span class="wissen-title">${title}</span>
            <img src="assets/icons/arrow_down.svg" alt="Pfeil nach unten" class="wissen-arrow">
        </button>
        <div class="wissen-content">
            <p class="loading">Loading...</p>
        </div>
    `;

    const header = element.querySelector('.wissen-header');
    const contentDiv = element.querySelector('.wissen-content');
    let isLoaded = false;

    header.addEventListener('click', async () => {
        element.classList.toggle('active');

        if (element.classList.contains('active') && !isLoaded) {
            try {
                const contentResponse = await fetch(`${basePath}/${filename}`);
                if (!contentResponse.ok) throw new Error('Failed to load file');

                const htmlContent = await contentResponse.text();
                contentDiv.innerHTML = htmlContent;
                isLoaded = true;
            } catch (err) {
                contentDiv.innerHTML = '<p>Failed to load content.</p>';
            }
        }
    });

    return element;
}

function renderKnowledgeList(container, items) {
    container.innerHTML = '';
    items.forEach(item => {
        const title = item.titel || item.title;
        const element = createAccordionItem(title, item.file, 'data/knowledge');
        container.appendChild(element);
    });
}

function renderGebeteList(container, items) {
    container.innerHTML = '';
    items.forEach(item => {
        const title = item.title || item.titel;
        const element = createAccordionItem(title, item.file, 'data/prayers');
        container.appendChild(element);
    });
}