document.addEventListener('DOMContentLoaded',async function(){
    // Globale Hilfsfunktionen und Initialisierung
    
    // State-Management
    const globalState = {
        workspaces: [],
        currentWorkspace: null,
        availableFiles: [],
        availableAgents: [],
        availablePrompts: [],
    };

    async function loadModuleHtml(filename) {
        // Backend-URL für HTML Module verwenden
        try {
            const apiBaseUrl = `${window.location.protocol}//${window.location.hostname}:8000`;
            const modulePath = `${apiBaseUrl}/webparts/${filename}`;
            console.log(`Lade HTML-Modul von: ${modulePath}`);
            const response = await fetch(modulePath);
            if (!response.ok) {
                throw new Error(`HTTP-Fehler beim Laden des Moduls: ${response.status} ${response.statusText}`);
            }
            const htmlContent = await response.text();
            return htmlContent;
        } catch (error) {
            console.error(`Fehler beim Laden des Moduls ${filename}:`, error);
            throw error;
        }        
    }    

    async function loadModuleJs(filename) {
        try {
            const apiBaseUrl = `${window.location.protocol}//${window.location.hostname}:8000`;
            const response = await fetch(`${apiBaseUrl}/webparts/${filename}`);
            if (!response.ok) {
                throw new Error(`Failed to load JS module: ${response.status} ${response.statusText}`);
            }
            const jsContent = await response.text();
            // Create a script element and add it to the page
            const scriptElement = document.createElement('script');
            scriptElement.textContent = jsContent;
            document.head.appendChild(scriptElement);
            console.log(`JS module ${filename} loaded successfully`);
        } catch (error) {
            console.error(`Error loading JS module ${filename}:`, error);
        }
    }

    function fetchFromApi(url) {
        // Basis-URL für die API mit korrektem Port
        const apiBaseUrl = `${window.location.protocol}//${window.location.hostname}:8000`;
        const fullUrl = url.startsWith('http') ? url : `${apiBaseUrl}${url}`;
        console.log(`Fetching data from: ${fullUrl}`);
        return fullUrl
    }

    // Hilfsfunktion zum Abrufen von Daten vom Backend
    async function fetchData(url) {
        try {
            fullUrl=fetchFromApi(url)
            const response = await fetch(fullUrl);
            if (!response.ok) {
                throw new Error(`Format-Fehler beim Abrufen von ${fullUrl}: ${response.statusText}`);
            }
            return await response.json();
        } catch (error) {
            console.error(`Genereller Fehler beim Abrufen von ${fullUrl}:`, error);
            return [];
        }
    }
    
    // Hilfsfunktion zum Senden von Daten an das Backend
    async function postData(url, data) {
        try {
            fullUrl=fetchFromApi(url)
            const response = await fetch(fullUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
            });
            if (!response.ok) {
                throw new Error(`Fehler beim Senden an ${fullUrl}: ${response.statusText}`);
            }
            return await response.json();
        } catch (error) {
            console.error(`Fehler beim Senden an ${fullUrl}:`, error);
            throw error;
        }
    }

    // Globale Initialisierungsfunktion
    async function initialize() {
        try {
            // Load Module Scripts
            loadModuleJs("part-workflow.js")
            loadModuleJs("part-data.js")
            loadModuleJs("part-prompts.js")
            loadModuleJs("part-agents.js")

            // Daten vom Backend abrufen
            globalState.workspaces = await fetchData('/api/workspaces');
            globalState.availableFiles = await fetchData('/api/files');
            globalState.availablePrompts = await fetchData('/api/prompts');
            
            // Wenn Workspaces vorhanden sind, den ersten auswählen
            if (globalState.workspaces.length > 0) {
                globalState.currentWorkspace = globalState.workspaces[0];
                
                // Agenten für den aktuellen Workspace abrufen
                globalState.availableAgents = await fetchData(`/api/agents?workspace_id=${globalState.currentWorkspace.id}`);
                console.info("Debug agents set for: "+`/api/agents?workspace_id=${globalState.currentWorkspace.id}`+", result="+globalState.availableAgents)
            }
            
            // Event-Listener für Menüpunkte
            setupMenuNavigation();

            // Workspaces rendern, nachdem alle Daten geladen wurden
            renderWorkspaces();            
            
        } catch (error) {
            console.error("Fehler beim Initialisieren der Daten:", error);
        }
    }

    // Menünavigation einrichten
    function setupMenuNavigation() {
        const menuItems = {
            'workflow': document.querySelector('a[href="#workflow"]').parentElement,
            'data': document.querySelector('a[href="#data"]').parentElement,
            'prompts': document.querySelector('a[href="#prompts"]').parentElement,
            'agents': document.querySelector('a[href="#agents"]').parentElement
        };

        const moduleContainers = {
            'workflow': document.getElementById('part-workflow'),
            'data': document.getElementById('part-data'),
            'prompts': document.getElementById('part-prompts'),
            'agents': document.getElementById('part-agents')
        };

        // Menüpunkte initialisieren
        Object.keys(menuItems).forEach(key => {
            menuItems[key].addEventListener('click', function(e) {
                e.preventDefault();
                
                // Aktive Klasse von allen Menüpunkten entfernen
                Object.values(menuItems).forEach(item => item.classList.remove('active'));
                
                // Alle Module ausblenden
                Object.values(moduleContainers).forEach(container => container.style.display = 'none')
                
                    // Aktuelle Ansicht aktivieren
                    this.classList.add('active');
                    moduleContainers[key].style.display = 'block';
    
                    // Laden und Aktualisieren der Moduldaten
                    switch(key) {
                        case 'workflow':
                            loadWorkflowModule();
                            break;
                        case 'data':
                            loadDataModule();
                            break;
                        case 'prompts':
                            loadPromptsModule();
                            break;
                        case 'agents':
                            loadAgentsModule();
                            break;
                    }
                });
            });
    
            // Initial das Workflow-Modul laden
            loadWorkflowModule();
        }
    
        // Modul-Ladungsfunktionen
        async function loadWorkflowModule() {
            try {
                // Dynamisches Laden des Workflow-Moduls
                const moduleContent = await loadModuleHtml('part-workflow.html');
                const workflowModule = document.getElementById('part-workflow');
                workflowModule.innerHTML = moduleContent;
    
                // Initialisiere Workflow-Modul-Funktionalität
                if (window.initWorkflowModule) {
                    window.initWorkflowModule(globalState);
                }
            } catch (error) {
                console.error("Fehler beim Laden des Workflow-Moduls:", error);
            }
        }
    
        async function loadDataModule() {
            try {
                // Dynamisches Laden des Daten-Moduls
                const moduleContent = await loadModuleHtml('part-data.html');
                const dataModule = document.getElementById('part-data');
                dataModule.innerHTML = moduleContent;
    
                // Initialisiere Daten-Modul-Funktionalität
                if (window.initDataModule) {
                    window.initDataModule(globalState);
                }
            } catch (error) {
                console.error("Fehler beim Laden des Daten-Moduls:", error);
            }
        }
    
        async function loadPromptsModule() {
            try {
                // Dynamisches Laden des Prompts-Moduls
                const moduleContent = await loadModuleHtml('part-prompts.html');
                const promptsModule = document.getElementById('part-prompts');
                promptsModule.innerHTML = moduleContent;
    
                // Initialisiere Prompts-Modul-Funktionalität
                if (window.initPromptsModule) {
                    window.initPromptsModule(globalState);
                }
            } catch (error) {
                console.error("Fehler beim Laden des Prompts-Moduls:", error);
            }
        }
    
        async function loadAgentsModule() {
            try {
                // Dynamisches Laden des Agenten-Moduls
                const moduleContent = await loadModuleHtml('part-agents.html');
                const agentsModule = document.getElementById('part-agents');
                agentsModule.innerHTML = moduleContent;
    
                // Initialisiere Agenten-Modul-Funktionalität
                if (window.initAgentsModule) {
                    window.initAgentsModule(globalState);
                }
            } catch (error) {
                console.error("Fehler beim Laden des Agenten-Moduls:", error);
            }
        }
    
        // Workspace-Funktionen
        function renderWorkspaces() {
            const workspaceList = document.getElementById('workspace-list');
            workspaceList.innerHTML = '';
            
            globalState.workspaces.forEach(workspace => {
                const li = document.createElement('li');
                li.className = `workspace-item ${workspace.id === globalState.currentWorkspace?.id ? 'active' : ''}`;
                li.innerHTML = `
                    <i class="fas fa-folder"></i>
                    <span>${workspace.name}</span>
                `;
                li.addEventListener('click', async () => {
                    globalState.currentWorkspace = workspace;
                    
                    // Agenten für den neuen Workspace abrufen
                    globalState.availableAgents = await fetchData(`/api/agents?workspace_id=${workspace.id}`);
                    
                    renderWorkspaces();
                    
                    // Aktualisiere aktive Module
                    loadWorkflowModule();
                    loadAgentsModule();
                });
                workspaceList.appendChild(li);
            });
        }
    
        // Gemeinsame Utility-Funktionen
        function handleFileUpload(fileInput, onUploadSuccess) {
            return async () => {
                if (fileInput.files.length > 0) {
                    for (const file of fileInput.files) {
                        try {
                            const formData = new FormData();
                            formData.append('file', file);
                            
                            const response = await fetch('/files/upload', {
                                method: 'POST',
                                body: formData
                            });
                            
                            if (!response.ok) {
                                throw new Error(`Fehler beim Hochladen der Datei: ${response.statusText}`);
                            }
                            
                            const newFile = await response.json();
                            
                            if (onUploadSuccess) {
                                onUploadSuccess(newFile);
                            }
                            
                            // Globale Dateiliste aktualisieren
                            globalState.availableFiles.push(newFile);
                        } catch (error) {
                            console.error("Fehler beim Hochladen der Datei:", error);
                        }
                    }
                    
                    // Eingabefeld zurücksetzen
                    fileInput.value = "";
                }
            };
        }
    
        // Initialisierung starten
        initialize();
    
        // Globale Funktionen für Module exportieren
        window.globalUtils = {
            fetchData,
            postData,
            handleFileUpload,
            renderWorkspaces
        };
    }
);