/**
 * Update Mindmap
 * Dieses Skript fügt Knoten zur Mindmap hinzu und stellt sicher,
 * dass sie im neuronalen Netzwerk-Design angezeigt werden.
 * Implementiert Lazy Loading & Progressive Disclosure
 */

// Neue zentrale Konfiguration
const mindmapConfig = {
    categories: {
        'Philosophie': {
            icon: 'fa-solid fa-lightbulb',
            color: '#b71c1c',
            description: 'Die Lehre vom Denken und der Erkenntnis'
        },
        'Wissenschaft': {
            icon: 'fa-solid fa-atom',
            color: '#f4b400',
            description: 'Systematische Erforschung der Natur und Gesellschaft'
        },
        'Technologie': {
            icon: 'fa-solid fa-microchip',
            color: '#0d47a1',
            description: 'Anwendung wissenschaftlicher Erkenntnisse'
        },
        'Künste': {
            icon: 'fa-solid fa-palette',
            color: '#c2185b',
            description: 'Kreativer Ausdruck und künstlerische Gestaltung'
        }
    },
    defaultNodeStyle: {
        fontSize: 18,
        fontColor: '#fff',
        neuronSize: 8,
        neuronActivity: 0.8
    },
    centerNodeStyle: {
        fontSize: 22,
        fontColor: '#222',
        neuronSize: 12,
        neuronActivity: 1.0,
        color: '#f5f5f5',
        icon: 'fa-solid fa-circle'
    }
};

// Zentrale Styling-Konfiguration
const mindmapStyles = {
    node: {
        base: {
            'background-color': 'data(color)',
            'label': 'data(label)',
            'color': '#ffffff',
            'text-background-color': 'rgba(0, 0, 0, 0.7)',
            'text-background-opacity': 0.8,
            'text-background-padding': '4px',
            'text-valign': 'center',
            'text-halign': 'center',
            'font-size': 16,
            'width': 40,
            'height': 40,
            'border-width': 2,
            'border-color': '#ffffff',
            'border-opacity': 0.8,
            'shape': 'ellipse',
            'background-opacity': 0.85
        },
        center: {
            'background-color': '#f5f5f5',
            'color': '#222',
            'font-size': 20,
            'border-width': 3,
            'width': 100,
            'height': 100
        },
        selected: {
            'border-color': '#f59e42',
            'border-width': 3,
            'background-opacity': 1
        }
    },
    edge: {
        base: {
            'width': function(ele) {
                return ele.data('strength') ? ele.data('strength') * 2 : 1;
            },
            'line-color': function(ele) {
                const sourceColor = ele.source().data('color');
                return sourceColor || '#8a8aaa';
            },
            'line-opacity': function(ele) {
                return ele.data('strength') ? ele.data('strength') * 0.6 : 0.4;
            },
            'curve-style': 'bezier',
            'target-arrow-shape': 'none',
            'control-point-distances': [30, -30],
            'control-point-weights': [0.5, 0.5]
        }
    },
    layout: {
        base: {
            name: 'cose',
            animate: true,
            animationDuration: 500,
            refresh: 20,
            fit: true,
            padding: 30,
            nodeRepulsion: 4500,
            idealEdgeLength: 50,
            edgeElasticity: 0.45,
            randomize: true,
            componentSpacing: 100,
            nodeOverlap: 20,
            gravity: 0.25,
            initialTemp: 1000,
            coolingFactor: 0.95,
            minTemp: 1
        }
    }
};

// Globale Variable für die Mindmap-Daten
let mindmapData = null;

// Funktion zum Laden der Mindmap-Daten aus der Datenbank
async function loadMindmapData(nodeId = null) {
    try {
        const apiUrl = nodeId ? `/api/mindmap/${nodeId}` : '/api/mindmap/root';
        console.log('Lade Mindmap-Daten von:', apiUrl);
        
        const response = await fetch(apiUrl);
        console.log('API-Antwort Status:', response.status);
        
        if (!response.ok) {
            let errorData;
            try {
                errorData = await response.json();
                console.log('API-Fehler Details:', errorData);
            } catch (e) {
                console.error('Fehler beim Parsen der Fehlerantwort:', e);
                errorData = {
                    error: `HTTP-Fehler ${response.status}: ${response.statusText}`
                };
            }
            
            // Fehlerobjekt für die Benachrichtigung erstellen
            const errorMessage = errorData.error || 'Unbekannter Fehler';
            
            showUINotification(errorMessage, 'error');
            throw new Error(errorMessage);
        }
        
        const data = await response.json();
        console.log('Geladene Mindmap-Daten:', data);
        
        if (!data.success) {
            const errorMessage = data.error || 'Mindmap-Daten konnten nicht geladen werden';
            showUINotification(errorMessage, 'error');
            throw new Error(errorMessage);
        }
        
        // Überprüfen, ob Nodes und Edges existieren
        if (!data.nodes || !data.edges) {
            const errorMessage = 'Ungültiges Datenformat: Nodes oder Edges fehlen';
            showUINotification(errorMessage, 'error');
            throw new Error(errorMessage);
        }
        
        // Erfolgreiche Antwort
        mindmapData = data; // Speichere die Daten in der globalen Variable
        showUINotification('Mindmap-Daten erfolgreich geladen', 'success');
        return data;
    } catch (error) {
        console.error('Fehler beim Laden der Mindmap-Daten:', error);
        
        // Stelle sicher, dass wir eine aussagekräftige Fehlermeldung haben
        const errorMessage = error.message || 'Unbekannter Fehler beim Laden der Mindmap-Daten';
        
        showUINotification(errorMessage, 'error');
        throw error;
    }
}

/**
 * Implementiert Zoomfunktionalität für die Mindmap
 * @param {Object} cy - Cytoscape-Instanz
 */
function implementZoomFunctions(cy) {
    if (!cy) {
        console.error('Cytoscape-Instanz nicht gefunden!');
        return;
    }
    
    // Vergrößern-Button
    const zoomInButton = document.getElementById('zoomIn');
    if (zoomInButton) {
        zoomInButton.addEventListener('click', function() {
            cy.zoom(cy.zoom() * 1.2);
            cy.center();
            showUINotification('Ansicht vergrößert', 'info', 1500);
        });
    }
    
    // Verkleinern-Button
    const zoomOutButton = document.getElementById('zoomOut');
    if (zoomOutButton) {
        zoomOutButton.addEventListener('click', function() {
            cy.zoom(cy.zoom() * 0.8);
            cy.center();
            showUINotification('Ansicht verkleinert', 'info', 1500);
        });
    }
    
    // Zurücksetzen-Button
    const resetViewButton = document.getElementById('resetView');
    if (resetViewButton) {
        resetViewButton.addEventListener('click', function() {
            cy.fit();
            cy.center();
            showUINotification('Ansicht zurückgesetzt', 'info', 1500);
        });
    }
    
    // Legende-Button
    const toggleLegendButton = document.getElementById('toggleLegend');
    const categoryLegend = document.getElementById('categoryLegend');
    
    if (toggleLegendButton && categoryLegend) {
        toggleLegendButton.addEventListener('click', function() {
            if (categoryLegend.style.display === 'none') {
                categoryLegend.style.display = 'flex';
                showUINotification('Legende angezeigt', 'info', 1500);
            } else {
                categoryLegend.style.display = 'none';
                showUINotification('Legende ausgeblendet', 'info', 1500);
            }
        });
    }
}

/**
 * Funktion zum Starten der Mindmap-Anwendung
 */
async function startMindmapApp() {
    try {
        const loader = document.getElementById('loader');
        const statusMessage = document.getElementById('statusMessage');
        const cyContainer = document.getElementById('cy');
        
        if (!cyContainer) {
            throw new Error('Cytoscape-Container nicht gefunden');
        }
        
        // Anzeigen der Ladeanzeige
        if (loader) loader.style.display = 'block';
        if (statusMessage) {
            statusMessage.textContent = 'Lade Mindmap...';
            statusMessage.style.display = 'block';
        }
        
        // Initialisieren der Mindmap
        const cy = await initializeMindmap();
        window.cy = cy; // Speichern für globalen Zugriff
        
        // Zoom-Funktionen und Legendensteuerung implementieren
        implementZoomFunctions(cy);
        
        // Verstecken der Ladeanzeige
        if (loader) loader.style.display = 'none';
        if (statusMessage) statusMessage.style.display = 'none';
        
        return cy;
    } catch (error) {
        console.error('Fehler beim Starten der Mindmap-Anwendung:', error);
        const statusMessage = document.getElementById('statusMessage');
        
        if (statusMessage) {
            statusMessage.textContent = 'Fehler beim Laden der Mindmap: ' + error.message;
            statusMessage.style.display = 'block';
        }
        
        const loader = document.getElementById('loader');
        if (loader) loader.style.display = 'none';
        
        showUINotification('Fehler beim Laden der Mindmap: ' + error.message, 'error');
    }
}

// Eventlistener für DOM-Ready
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM vollständig geladen, starte Mindmap-Anwendung');
    startMindmapApp();
});

// Funktion zum Initialisieren der Mindmap
async function initializeMindmap() {
    try {
        const data = await loadMindmapData();
        if (!data || !data.nodes || !data.edges) {
            throw new Error('Ungültiges Datenformat: Mindmap-Daten fehlen oder sind unvollständig');
        }

        const elements = [
            // Knoten
            ...data.nodes.map(node => ({
                data: {
                    id: node.id,
                    label: node.name,
                    category: node.category,
                    description: node.description,
                    color: getCategoryColor(node.category)
                }
            })),
            // Kanten
            ...data.edges.map(edge => ({
                data: {
                    id: edge.id,
                    source: edge.source,
                    target: edge.target,
                    strength: edge.weight || 1.0
                }
            }))
        ];

        // Cytoscape-Container
        const cyContainer = document.getElementById('cy');
        if (!cyContainer) {
            throw new Error('Cytoscape-Container nicht gefunden');
        }

        // Cytoscape initialisieren
        const cy = cytoscape({
            container: cyContainer,
            elements: elements,
            style: [
                // Knoten-Styling
                {
                    selector: 'node',
                    style: mindmapStyles.node.base
                },
                // Kanten-Styling
                {
                    selector: 'edge',
                    style: mindmapStyles.edge.base
                },
                // Ausgewählte Knoten
                {
                    selector: 'node:selected',
                    style: mindmapStyles.node.selected
                }
            ],
            layout: mindmapStyles.layout.base
        });

        // Event-Listener für Knoten-Interaktionen
        cy.on('tap', 'node', function(evt) {
            const node = evt.target;
            showNodeInfo(node);
        });

        // UI aktualisieren
        document.getElementById('loader').style.display = 'none';
        document.getElementById('statusMessage').style.display = 'none';

        // Neurales Design anwenden
        initializeNeuralDesign(cy);

        // Gebe die Cytoscape-Instanz zurück
        return cy;
    } catch (error) {
        console.error('Fehler beim Initialisieren der Mindmap:', error);
        document.getElementById('statusMessage').textContent = 'Fehler: ' + error.message;
        document.getElementById('statusMessage').style.display = 'block';
        document.getElementById('loader').style.display = 'none';
        
        showUINotification('Fehler beim Initialisieren der Mindmap: ' + error.message, 'error');
        throw error;
    }
}

/**
 * Gibt die Farbe für eine Kategorie zurück
 * @param {string} category - Die Kategorie
 * @returns {string} - Die Farbe als Hex-Code
 */
function getCategoryColor(category) {
    const categoryMap = {
        'Philosophie': '#9F7AEA',  // Violett
        'Wissenschaft': '#60A5FA', // Blau
        'Technologie': '#10B981',  // Grün
        'Künste': '#F59E0B',       // Orange
        'Psychologie': '#EF4444'   // Rot
    };
    
    return categoryMap[category] || '#8B5CF6'; // Standardfarbe, wenn Kategorie nicht gefunden
}

/**
 * Zeigt Informationen zu einem Knoten an
 * @param {Object} node - Der Knoten, dessen Informationen angezeigt werden sollen
 */
function showNodeInfo(node) {
    if (!node || !node.isNode()) return;
    
    const infoPanel = document.getElementById('infoPanel');
    const infoTitle = infoPanel.querySelector('.info-title');
    const infoContent = infoPanel.querySelector('.info-content');
    
    if (!infoPanel || !infoTitle || !infoContent) return;
    
    const data = node.data();
    
    infoTitle.textContent = data.label || 'Knotendetails';
    
    let contentHTML = `
        <p><strong>Kategorie:</strong> ${data.category || 'Nicht kategorisiert'}</p>
        <p><strong>Beschreibung:</strong> ${data.description || 'Keine Beschreibung verfügbar'}</p>
    `;
    
    infoContent.innerHTML = contentHTML;
    infoPanel.classList.add('visible');
}

// Funktion zum Initialisieren des neuronalen Designs
function initializeNeuralDesign(cy) {
    if (!cy) return;
    
    console.log('Initialisiere neurales Design für Mindmap');
    
    // Füge neurale Eigenschaften zu allen Knoten hinzu
    cy.nodes().forEach(node => {
        const data = node.data();
        node.data({
            ...data,
            neuronSize: data.neuronSize || 8,
            neuronActivity: data.neuronActivity || 0.8,
            refractionPeriod: Math.random() * 300 + 700,
            threshold: Math.random() * 0.3 + 0.6,
            lastFired: 0
        });
    });
    
    // Füge synaptische Eigenschaften zu allen Kanten hinzu
    cy.edges().forEach(edge => {
        const data = edge.data();
        edge.data({
            ...data,
            strength: data.strength || 0.5,
            conductionVelocity: Math.random() * 0.5 + 0.3,
            latency: Math.random() * 100 + 50
        });
    });
    
    // Wende neurales Netzwerk-Styling an
    applyNeuralNetworkStyle(cy);
    
    // Starte Simulation der neuronalen Aktivität
    startNeuralActivitySimulation(cy);
    
    return cy;
}

// Funktionen für das neurale Netzwerk-Design
function applyNeuralNetworkStyle(cy) {
    if (!cy) return;
    
    // Animation für pulsierende Knoten
    const pulseKeyframes = [
        { scale: 1.0, opacity: 0.8, borderOpacity: 0.6 },
        { scale: 1.05, opacity: 1.0, borderOpacity: 0.9 },
        { scale: 1.0, opacity: 0.8, borderOpacity: 0.6 }
    ];
    
    // Anwenden auf alle Knoten
    cy.nodes().forEach(node => {
        const randomDelay = Math.random() * 3000;
        
        // CSS-Animationen auf die Knoten anwenden
        node.style({
            'border-width': 3,
            'border-opacity': 0.6,
            'background-opacity': 0.8,
            'transition-property': 'background-opacity, border-opacity, width, height',
            'transition-duration': '300ms'
        });
        
        // Pulseffekt mit zufälligem Delay starten
        setTimeout(() => {
            node.animate({
                style: pulseKeyframes,
                duration: 2000 + Math.random() * 1000,
                complete: function() {
                    // Animation wiederholen
                    this.loopAnimation = true;
                    if (this.loopAnimation) {
                        setTimeout(() => {
                            applyNeuralNetworkStyle(cy);
                        }, 100);
                    }
                }
            });
        }, randomDelay);
    });
}

// Simulation der neuronalen Aktivität
function startNeuralActivitySimulation(cy) {
    if (!cy) return;
    
    console.log('Starte Simulation der neuronalen Aktivität');
    let isSimulationRunning = true;
    
    // Funktion zur Simulation der neuronalen Aktivität
    function simulateNeuralActivity() {
        if (!isSimulationRunning) return;
        
        const currentTime = Date.now();
        
        // Wähle zufällige Knoten zum Feuern aus
        const randomNode = cy.nodes()[Math.floor(Math.random() * cy.nodes().length)];
        if (randomNode) {
            fireNeuron(randomNode, { isPrimary: true }, currentTime);
        }
        
        // Wiederholung der Simulation
        setTimeout(simulateNeuralActivity, 2000 + Math.random() * 3000);
    }
    
    // Funktion zum "Feuern" eines Neurons
    function fireNeuron(node, state, currentTime) {
        if (!node) return;
        
        const data = node.data();
        const lastFired = data.lastFired || 0;
        const refractionPeriod = data.refractionPeriod || 1000;
        
        // Prüfe, ob das Neuron feuerbereit ist (Refraktärzeit vorbei)
        if (currentTime - lastFired < refractionPeriod && !state.isPrimary) {
            return; // Neuron ist noch in Refraktärphase
        }
        
        // Aktualisiere "Letztes Feuern"-Zeitstempel
        node.data('lastFired', currentTime);
        
        // Visuellen Effekt des Feuerns anzeigen
        node.animate({
            style: {
                'background-opacity': 1,
                'border-opacity': 1,
                'border-color': '#f59e42',
                'border-width': 4
            },
            duration: 300,
            complete: function() {
                // Zurück zum Normalzustand
                node.animate({
                    style: {
                        'background-opacity': 0.8,
                        'border-opacity': 0.6,
                        'border-color': '#ffffff',
                        'border-width': 3
                    },
                    duration: 500
                });
                
                // Signal an verbundene Knoten weitergeben
                propagateSignal(node, currentTime);
            }
        });
    }
    
    // Funktion zur Signalausbreitung zu verbundenen Knoten
    function propagateSignal(sourceNode, currentTime) {
        // Verbundene Kanten finden
        const connectedEdges = sourceNode.outgoers('edge');
        
        connectedEdges.forEach(edge => {
            const targetNode = edge.target();
            const data = edge.data();
            const strength = data.strength || 0.5;
            const conductionVelocity = data.conductionVelocity || 0.5;
            const latency = data.latency || 100;
            
            // Kante hervorheben (Signal fließt durch die Kante)
            edge.animate({
                style: {
                    'line-opacity': 1,
                    'width': 3
                },
                duration: 200,
                complete: function() {
                    // Nach einer Verzögerung (Latenz), das Ziel-Neuron feuern lassen
                    setTimeout(() => {
                        edge.animate({
                            style: {
                                'line-opacity': data.strength ? data.strength * 0.6 : 0.4,
                                'width': data.strength ? data.strength * 2 : 1
                            },
                            duration: 300
                        });
                        
                        // Ziel-Neuron feuern lassen mit Wahrscheinlichkeit basierend auf Stärke
                        if (Math.random() < strength) {
                            fireNeuron(targetNode, { isPrimary: false }, currentTime + latency);
                        }
                    }, latency / conductionVelocity);
                }
            });
        });
    }
    
    // Starte die Simulation
    simulateNeuralActivity();
    
    // Funktion zum Stoppen der Simulation
    cy.stopNeuralSimulation = function() {
        isSimulationRunning = false;
    };
}

// Modifiziere die updateMindmap Funktion
function updateMindmap() {
    if (!cy) return;
    
    // Bestehende Elemente entfernen
    cy.elements().remove();
    
    // Neue Knoten hinzufügen
    mindmapData.nodes.forEach(node => {
        cy.add({
            group: 'nodes',
            data: {
                id: node.id,
                label: node.name,
                category: node.category,
                description: node.description,
                hasChildren: node.has_children,
                expanded: false,
                color: node.color_code || mindmapConfig.categories[node.category]?.color || '#60a5fa',
                icon: node.icon || mindmapConfig.categories[node.category]?.icon || 'fa-solid fa-circle'
            }
        });
    });
    
    // Neue Kanten hinzufügen
    mindmapData.edges.forEach(edge => {
        cy.add({
            group: 'edges',
            data: {
                source: edge.source,
                target: edge.target,
                strength: edge.strength || 0.5
            }
        });
    });
    
    // Layout aktualisieren
    cy.layout(mindmapStyles.layout.base).run();
}

/**
 * Erweitert die Mindmap mit dem neuronalen Netzwerk-Design
 */
function enhanceMindmap() {
    // Auf die bestehende Cytoscape-Instanz zugreifen
    const cy = window.cy;
    
    if (!cy) {
        console.error('Keine Cytoscape-Instanz gefunden.');
        return;
    }
    
    // Aktualisiere das Layout für eine bessere Verteilung
    cy.layout({
        name: 'cose',
        animate: true,
        animationDuration: 2000,
        nodeDimensionsIncludeLabels: true,
        padding: 100,
        spacingFactor: 2,
        randomize: true,
        fit: true,
        componentSpacing: 150,
        nodeRepulsion: 10000,
        edgeElasticity: 150,
        nestingFactor: 1.5,
        gravity: 100,
        initialTemp: 1000,
        coolingFactor: 0.95,
        minTemp: 1
    }).run();
    
    // Neuronen-Namen mit besserer Lesbarkeit umgestalten
    cy.style()
      .selector('node')
      .style({
        'text-background-color': 'rgba(10, 14, 25, 0.7)',
        'text-background-opacity': 0.7,
        'text-background-padding': '2px',
        'text-border-opacity': 0.2,
        'text-border-width': 1,
        'text-border-color': '#8b5cf6'
      })
      .update();
    
    // Sicherstellen, dass alle Knoten Neuronen-Eigenschaften haben
    cy.nodes().forEach(node => {
        if (!node.data('neuronSize')) {
            const neuronSize = Math.floor(Math.random() * 8) + 3;
            node.data('neuronSize', neuronSize);
        }
        
        if (!node.data('neuronActivity')) {
            const neuronActivity = Math.random() * 0.7 + 0.3;
            node.data('neuronActivity', neuronActivity);
        }
        
        // Zusätzliche Neuronale Eigenschaften
        node.data('pulseFrequency', Math.random() * 4 + 2); // Pulsfrequenz (2-6 Hz)
        node.data('refractionPeriod', Math.random() * 300 + 700); // Refraktionszeit (700-1000ms)
        node.data('threshold', Math.random() * 0.3 + 0.6); // Aktivierungsschwelle (0.6-0.9)
    });
    
    // Sicherstellen, dass alle Kanten Synapse-Eigenschaften haben
    cy.edges().forEach(edge => {
        if (!edge.data('strength')) {
            const strength = Math.random() * 0.6 + 0.2;
            edge.data('strength', strength);
        }
        
        // Zusätzliche synaptische Eigenschaften
        edge.data('conductionVelocity', Math.random() * 0.5 + 0.3); // Leitungsgeschwindigkeit (0.3-0.8)
        edge.data('latency', Math.random() * 100 + 50); // Signalverzögerung (50-150ms)
    });
    
    // Neuronales Netzwerk-Stil anwenden
    applyNeuralNetworkStyle(cy);
    
    console.log('Mindmap wurde erfolgreich im neuronalen Netzwerk-Stil aktualisiert');
    
    // Spezielle Effekte für das neuronale Netzwerk hinzufügen
    startNeuralActivitySimulation(cy);
}

// Hilfe-Funktion zum Hinzufügen eines Flash-Hinweises
function showFlash(message, type = 'info') {
    const flash = document.createElement('div');
    flash.className = `flash-message ${type}`;
    flash.innerHTML = `
        <div class="flex items-center">
            <i class="fas ${type === 'error' ? 'fa-exclamation-triangle' : 'fa-info-circle'} mr-2"></i>
            <span>${message}</span>
        </div>
    `;
    
    document.body.appendChild(flash);
    
    // Animation zum Einblenden
    setTimeout(() => {
        flash.classList.add('visible');
    }, 10);
    
    // Automatisches Ausblenden nach 3 Sekunden
    setTimeout(() => {
        flash.classList.remove('visible');
        setTimeout(() => {
            document.body.removeChild(flash);
        }, 300);
    }, 3000);
}

/**
 * Zeigt eine UI-Benachrichtigung
 * @param {string} message - Die Nachricht
 * @param {string} type - Der Typ der Benachrichtigung (info, success, warning, error)
 * @param {number} duration - Die Anzeigedauer in Millisekunden
 */
function showUINotification(message, type = 'info', duration = 3000) {
    // Prüfe, ob Toast-Container existiert, sonst erstellen
    let toastContainer = document.getElementById('toast-container');
    
    if (!toastContainer) {
        toastContainer = document.createElement('div');
        toastContainer.id = 'toast-container';
        toastContainer.className = 'fixed top-4 right-4 z-50 flex flex-col gap-2';
        document.body.appendChild(toastContainer);
    }
    
    // Erstelle Toast-Element
    const toast = document.createElement('div');
    toast.className = 'toast-message transform transition-all duration-300 ease-out translate-x-full';
    
    // Setze Styling basierend auf Typ
    let iconClass = 'fa-info-circle';
    let bgColorClass = 'bg-blue-500';
    
    switch (type) {
        case 'success':
            iconClass = 'fa-check-circle';
            bgColorClass = 'bg-green-500';
            break;
        case 'warning':
            iconClass = 'fa-exclamation-circle';
            bgColorClass = 'bg-yellow-500';
            break;
        case 'error':
            iconClass = 'fa-exclamation-triangle';
            bgColorClass = 'bg-red-500';
            break;
    }
    
    // Inhalt des Toasts
    toast.innerHTML = `
        <div class="flex items-center p-3 rounded-lg shadow-lg ${bgColorClass} text-white">
            <i class="fas ${iconClass} mr-2"></i>
            <span>${message}</span>
            <button class="ml-auto pl-3 focus:outline-none hover:opacity-75">
                <i class="fas fa-times"></i>
            </button>
        </div>
    `;
    
    // Füge Toast zum Container hinzu
    toastContainer.appendChild(toast);
    
    // Animation zum Einblenden
    setTimeout(() => {
        toast.classList.remove('translate-x-full');
    }, 10);
    
    // Schließen-Button-Funktionalität
    const closeButton = toast.querySelector('button');
    closeButton.addEventListener('click', () => {
        removeToast(toast);
    });
    
    // Automatisches Ausblenden nach der angegebenen Dauer
    const timeoutId = setTimeout(() => {
        removeToast(toast);
    }, duration);
    
    // Funktion zum Entfernen des Toasts
    function removeToast(toastElement) {
        // Animation zum Ausblenden
        toastElement.classList.add('translate-x-full');
        
        // Entfernen nach Abschluss der Animation
        setTimeout(() => {
            if (toastElement.parentNode === toastContainer) {
                toastContainer.removeChild(toastElement);
            }
            
            // Entferne Container, wenn keine Toasts mehr vorhanden sind
            if (toastContainer.children.length === 0) {
                document.body.removeChild(toastContainer);
            }
        }, 300);
        
        // Timeout löschen
        clearTimeout(timeoutId);
    }
}

// Funktion zum Anzeigen der Bearbeitungssteuerungen
function showEditingControls(nodeId) {
    const container = nodeId ? 
        document.getElementById(`cy-${nodeId}`).parentElement : 
        document.getElementById('cy').parentElement;
    
    if (!container) return;
    
    // Erstelle Bearbeitungswerkzeuge, wenn sie noch nicht existieren
    let editingControls = container.querySelector('.editing-controls');
    if (!editingControls) {
        editingControls = document.createElement('div');
        editingControls.className = 'editing-controls';
        editingControls.innerHTML = `
            <div class="editing-toolbar">
                <button class="tool-button" data-action="add-node" title="Neuen Knoten hinzufügen">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"></circle>
                        <line x1="12" y1="8" x2="12" y2="16"></line>
                        <line x1="8" y1="12" x2="16" y2="12"></line>
                    </svg>
                </button>
                <button class="tool-button" data-action="add-edge" title="Verbindung hinzufügen">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                        <polyline points="15 3 21 3 21 9"></polyline>
                        <line x1="10" y1="14" x2="21" y2="3"></line>
                    </svg>
                </button>
                <button class="tool-button" data-action="delete" title="Löschen">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="3 6 5 6 21 6"></polyline>
                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                    </svg>
                </button>
                <button class="tool-button" data-action="save" title="Änderungen speichern">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
                        <polyline points="17 21 17 13 7 13 7 21"></polyline>
                        <polyline points="7 3 7 8 15 8"></polyline>
                    </svg>
                </button>
                <button class="tool-button" data-action="cancel" title="Bearbeitungsmodus beenden" onclick="disableMindmapEditing('${nodeId || ''}')">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"></circle>
                        <line x1="15" y1="9" x2="9" y2="15"></line>
                        <line x1="9" y1="9" x2="15" y2="15"></line>
                    </svg>
                </button>
            </div>
        `;
        
        container.appendChild(editingControls);
        
        // Event-Listener für die Bearbeitungswerkzeuge hinzufügen
        const toolButtons = editingControls.querySelectorAll('.tool-button');
        toolButtons.forEach(button => {
            button.addEventListener('click', function() {
                const action = this.getAttribute('data-action');
                handleEditingAction(action, nodeId);
            });
        });
    }
    
    // Zeige die Steuerungen an
    editingControls.style.display = 'block';
}

// Funktion zum Ausblenden der Bearbeitungssteuerungen
function hideEditingControls(nodeId) {
    const container = nodeId ? 
        document.getElementById(`cy-${nodeId}`).parentElement : 
        document.getElementById('cy').parentElement;
    
    if (!container) return;
    
    const editingControls = container.querySelector('.editing-controls');
    if (editingControls) {
        editingControls.style.display = 'none';
    }
}

// Funktion zum Verarbeiten von Bearbeitungsaktionen
function handleEditingAction(action, nodeId) {
    console.log('Bearbeitungsaktion:', action, 'für NodeId:', nodeId);
    
    // Finde die relevante Cytoscape-Instanz
    const cy = nodeId ? 
        (window.subthemeCyInstances && window.subthemeCyInstances[nodeId]) : 
        window.cy;
    
    if (!cy) {
        console.error('Keine Cytoscape-Instanz gefunden');
        return;
    }
    
    switch (action) {
        case 'add-node':
            addNewNode(cy);
            break;
        case 'add-edge':
            enableEdgeCreationMode(cy);
            break;
        case 'delete':
            deleteSelectedElements(cy);
            break;
        case 'save':
            saveMindmapChanges(cy, nodeId);
            break;
        default:
            console.warn('Unbekannte Aktion:', action);
    }
}

// Funktion zum Hinzufügen eines neuen Knotens
function addNewNode(cy) {
    // Zentriere den neuen Knoten im sichtbaren Bereich
    const extent = cy.extent();
    const centerX = (extent.x1 + extent.x2) / 2;
    const centerY = (extent.y1 + extent.y2) / 2;
    
    // Generiere eine eindeutige ID
    const newId = 'new-node-' + Date.now();
    
    // Füge den neuen Knoten hinzu
    cy.add({
        group: 'nodes',
        data: {
            id: newId,
            label: 'Neuer Knoten',
            category: 'Wissenschaft',
            description: 'Beschreibung hinzufügen',
            hasChildren: false,
            expanded: false,
            color: mindmapConfig.categories['Wissenschaft'].color,
            fontColor: '#ffffff',
            fontSize: 16,
            neuronSize: 8,
            neuronActivity: 0.8
        },
        position: { x: centerX, y: centerY }
    });
    
    // Wähle den neuen Knoten aus, um ihn zu bearbeiten
    const newNode = cy.getElementById(newId);
    newNode.select();
    
    // Öffne den Bearbeitungsdialog für den neuen Knoten
    setTimeout(() => {
        editNodeProperties(newNode);
    }, 300);
}

// Funktion zum Bearbeiten von Knoteneigenschaften
function editNodeProperties(node) {
    if (!node) return;
    
    // Erstelle den Modal-Hintergrund
    const backdrop = document.createElement('div');
    backdrop.className = 'modal-backdrop';
    document.body.appendChild(backdrop);
    
    // Erstelle den Bearbeitungsdialog
    const dialog = document.createElement('div');
    dialog.className = 'node-edit-dialog';
    
    // Hole die aktuellen Daten des Knotens
    const data = node.data();
    
    // Generiere die Kategorie-Optionen
    let categoryOptions = '';
    for (const category in mindmapConfig.categories) {
        categoryOptions += `<option value="${category}" ${data.category === category ? 'selected' : ''}>${category}</option>`;
    }
    
    // Erstelle das Formular
    dialog.innerHTML = `
        <h3>Knoten bearbeiten</h3>
        <form id="node-edit-form">
            <div class="form-group">
                <label for="node-label">Bezeichnung</label>
                <input type="text" id="node-label" value="${data.label || ''}" placeholder="Knotenbezeichnung">
            </div>
            
            <div class="form-group">
                <label for="node-category">Kategorie</label>
                <select id="node-category">
                    ${categoryOptions}
                </select>
            </div>
            
            <div class="form-group">
                <label for="node-description">Beschreibung</label>
                <textarea id="node-description" rows="3" placeholder="Beschreibung hinzufügen">${data.description || ''}</textarea>
            </div>
            
            <div class="form-group">
                <label for="node-has-children">Hat Unterthemen</label>
                <select id="node-has-children">
                    <option value="true" ${data.hasChildren ? 'selected' : ''}>Ja</option>
                    <option value="false" ${!data.hasChildren ? 'selected' : ''}>Nein</option>
                </select>
            </div>
            
            <div class="form-actions">
                <button type="button" class="cancel">Abbrechen</button>
                <button type="submit" class="save">Speichern</button>
            </div>
        </form>
    `;
    
    document.body.appendChild(dialog);
    
    // Event-Listener für den Abbrechen-Button
    dialog.querySelector('button.cancel').addEventListener('click', function() {
        document.body.removeChild(dialog);
        document.body.removeChild(backdrop);
    });
    
    // Event-Listener für den Modal-Hintergrund
    backdrop.addEventListener('click', function() {
        document.body.removeChild(dialog);
        document.body.removeChild(backdrop);
    });
    
    // Event-Listener für das Formular
    dialog.querySelector('form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Hole die neuen Werte aus dem Formular
        const label = document.getElementById('node-label').value;
        const category = document.getElementById('node-category').value;
        const description = document.getElementById('node-description').value;
        const hasChildren = document.getElementById('node-has-children').value === 'true';
        
        // Bestimme die Farbe basierend auf der Kategorie
        const color = mindmapConfig.categories[category]?.color || data.color || '#60a5fa';
        
        // Aktualisiere die Daten des Knotens
        node.data({
            ...data,
            label,
            category,
            description,
            hasChildren,
            color
        });
        
        // Schließe den Dialog
        document.body.removeChild(dialog);
        document.body.removeChild(backdrop);
        
        // Benachrichtigung anzeigen
        showUINotification('Knoten wurde aktualisiert', 'success');
    });
}

// Funktion zum Anzeigen des Kontext-Menüs für einen Knoten
function showNodeContextMenu(node, position) {
    if (!node) return;
    
    // Entferne existierende Kontext-Menüs
    const existingMenu = document.querySelector('.context-menu');
    if (existingMenu) {
        existingMenu.parentNode.removeChild(existingMenu);
    }
    
    // Erstelle das Kontext-Menü
    const menu = document.createElement('div');
    menu.className = 'context-menu';
    menu.style.left = `${position.x}px`;
    menu.style.top = `${position.y}px`;
    
    // Menü-Einträge
    menu.innerHTML = `
        <div class="context-menu-item" data-action="edit">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
            </svg>
            Bearbeiten
        </div>
        <div class="context-menu-item" data-action="connect">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                <polyline points="15 3 21 3 21 9"></polyline>
                <line x1="10" y1="14" x2="21" y2="3"></line>
            </svg>
            Verbindung erstellen
        </div>
        <div class="context-menu-item" data-action="delete">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="3 6 5 6 21 6"></polyline>
                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
            </svg>
            Löschen
        </div>
    `;
    
    document.body.appendChild(menu);
    
    // Event-Listener für Menü-Einträge
    menu.querySelectorAll('.context-menu-item').forEach(item => {
        item.addEventListener('click', function() {
            const action = this.getAttribute('data-action');
            
            switch (action) {
                case 'edit':
                    editNodeProperties(node);
                    break;
                case 'connect':
                    startEdgeCreation(node);
                    break;
                case 'delete':
                    deleteNode(node);
                    break;
            }
            
            // Entferne das Menü
            document.body.removeChild(menu);
        });
    });
    
    // Klick außerhalb des Menüs schließt es
    document.addEventListener('click', function closeMenu(e) {
        if (!menu.contains(e.target)) {
            if (document.body.contains(menu)) {
                document.body.removeChild(menu);
            }
            document.removeEventListener('click', closeMenu);
        }
    });
}

// Funktion zum Anzeigen des Menüs zum Hinzufügen eines Knotens
function showAddNodeMenu(position) {
    // Entferne existierende Kontext-Menüs
    const existingMenu = document.querySelector('.context-menu');
    if (existingMenu) {
        existingMenu.parentNode.removeChild(existingMenu);
    }
    
    // Erstelle das Kontext-Menü
    const menu = document.createElement('div');
    menu.className = 'context-menu';
    menu.style.left = `${position.x}px`;
    menu.style.top = `${position.y}px`;
    
    // Kategorie-Einträge für neue Knoten
    let categoryItems = '';
    for (const category in mindmapConfig.categories) {
        const categoryConfig = mindmapConfig.categories[category];
        categoryItems += `
            <div class="context-menu-item" data-category="${category}" style="color: ${categoryConfig.color}">
                <i class="${categoryConfig.icon}"></i>
                ${category}
            </div>
        `;
    }
    
    // Menü-Einträge
    menu.innerHTML = `
        <div class="context-menu-header" style="padding: 8px 16px; font-size: 0.9rem; opacity: 0.7;">Neuen Knoten hinzufügen</div>
        ${categoryItems}
    `;
    
    document.body.appendChild(menu);
    
    // Event-Listener für Kategorie-Einträge
    menu.querySelectorAll('.context-menu-item').forEach(item => {
        item.addEventListener('click', function() {
            const category = this.getAttribute('data-category');
            
            // Füge einen neuen Knoten an der Position hinzu
            addNewNodeAtPosition(cy, position, category);
            
            // Entferne das Menü
            document.body.removeChild(menu);
        });
    });
    
    // Klick außerhalb des Menüs schließt es
    document.addEventListener('click', function closeMenu(e) {
        if (!menu.contains(e.target)) {
            if (document.body.contains(menu)) {
                document.body.removeChild(menu);
            }
            document.removeEventListener('click', closeMenu);
        }
    });
}

// Funktion zum Hinzufügen eines neuen Knotens an einer bestimmten Position
function addNewNodeAtPosition(cy, position, category) {
    if (!cy) return;
    
    // Berechne die Modellposition (statt der gerenderten Position)
    const modelPosition = cy.renderer().projectIntoViewport(position.x, position.y);
    
    // Generiere eine eindeutige ID
    const newId = 'new-node-' + Date.now();
    
    // Hole die Kategorie-Konfiguration
    const categoryConfig = mindmapConfig.categories[category] || mindmapConfig.categories['Wissenschaft'];
    
    // Füge den neuen Knoten hinzu
    cy.add({
        group: 'nodes',
        data: {
            id: newId,
            label: 'Neuer ' + category + '-Knoten',
            category: category,
            description: categoryConfig.description || 'Beschreibung hinzufügen',
            hasChildren: false,
            expanded: false,
            color: categoryConfig.color,
            fontColor: '#ffffff',
            fontSize: 16,
            neuronSize: 8,
            neuronActivity: 0.8
        },
        position: {
            x: modelPosition[0],
            y: modelPosition[1]
        }
    });
    
    // Wähle den neuen Knoten aus, um ihn zu bearbeiten
    const newNode = cy.getElementById(newId);
    newNode.select();
    
    // Öffne den Bearbeitungsdialog für den neuen Knoten
    setTimeout(() => {
        editNodeProperties(newNode);
    }, 300);
}

// Funktion zum Starten der Erstellung einer Kante
function startEdgeCreation(sourceNode) {
    if (!sourceNode) return;
    
    const cy = sourceNode.cy();
    if (!cy) return;
    
    // Markiere den Quellknoten
    sourceNode.addClass('edge-source');
    
    // Füge dem Container die Klasse für den Kanten-Erstellungsmodus hinzu
    cy.container().classList.add('edge-creation-mode');
    
    // Zeige Hinweis an
    showUINotification('Wähle einen Zielknoten für die Verbindung', 'info');
    
    // Einmaliger Event-Listener für das Auswählen des Zielknotens
    cy.once('tap', 'node', function(evt) {
        const targetNode = evt.target;
        
        // Ignoriere, wenn es der gleiche Knoten ist
        if (targetNode.id() === sourceNode.id()) {
            showUINotification('Quell- und Zielknoten dürfen nicht identisch sein', 'warning');
            finishEdgeCreation();
            return;
        }
        
        // Prüfe, ob bereits eine Kante existiert
        const existingEdge = cy.edges(`[source="${sourceNode.id()}"][target="${targetNode.id()}"]`);
        if (existingEdge.length > 0) {
            showUINotification('Verbindung existiert bereits', 'warning');
            finishEdgeCreation();
            return;
        }
        
        // Füge die neue Kante hinzu
        cy.add({
            group: 'edges',
            data: {
                source: sourceNode.id(),
                target: targetNode.id(),
                strength: 0.5,
                conductionVelocity: Math.random() * 0.5 + 0.3,
                latency: Math.random() * 100 + 50
            }
        });
        
        showUINotification('Verbindung wurde erstellt', 'success');
        finishEdgeCreation();
    });
    
    // Event-Listener für Abbruch durch Klick auf leeren Bereich
    cy.once('tap', function(evt) {
        if (evt.target === cy) {
            showUINotification('Kantenerstellung abgebrochen', 'info');
            finishEdgeCreation();
        }
    });
    
    function finishEdgeCreation() {
        sourceNode.removeClass('edge-source');
        cy.container().classList.remove('edge-creation-mode');
    }
}

// Funktion zum Aktivieren des Kantenerstellungsmodus
function enableEdgeCreationMode(cy) {
    if (!cy) return;
    
    // Füge dem Container die Klasse für den Kanten-Erstellungsmodus hinzu
    cy.container().classList.add('edge-creation-mode');
    
    // Zeige Hinweis an
    showUINotification('Wähle einen Quellknoten für die Verbindung', 'info');
    
    // Einmaliger Event-Listener für das Auswählen des Quellknotens
    cy.once('tap', 'node', function(evt) {
        const sourceNode = evt.target;
        startEdgeCreation(sourceNode);
    });
    
    // Event-Listener für Abbruch durch Rechtsklick oder Escape-Taste
    const cancelEdgeCreation = function() {
        cy.container().classList.remove('edge-creation-mode');
        cy.removeListener('tap');
        showUINotification('Kantenerstellung abgebrochen', 'info');
    };
    
    cy.once('cxttap', cancelEdgeCreation);
    document.addEventListener('keydown', function escKeyHandler(e) {
        if (e.key === 'Escape') {
            cancelEdgeCreation();
            document.removeEventListener('keydown', escKeyHandler);
        }
    });
}

// Funktion zum Löschen eines Knotens
function deleteNode(node) {
    if (!node) return;
    
    // Frage den Benutzer, ob er den Knoten wirklich löschen möchte
    if (confirm(`Möchtest du den Knoten "${node.data('label')}" wirklich löschen?`)) {
        // Entferne den Knoten und alle zugehörigen Kanten
        node.remove();
        showUINotification('Knoten wurde gelöscht', 'success');
    }
}

// Funktion zum Löschen ausgewählter Elemente
function deleteSelectedElements(cy) {
    if (!cy) return;
    
    const selectedElements = cy.elements(':selected');
    if (selectedElements.length === 0) {
        showUINotification('Keine Elemente ausgewählt', 'warning');
        return;
    }
    
    // Zähle die ausgewählten Knoten und Kanten
    const selectedNodes = selectedElements.filter('node');
    const selectedEdges = selectedElements.filter('edge');
    
    let confirmMessage = 'Möchtest du die ausgewählten Elemente wirklich löschen?';
    if (selectedNodes.length > 0 && selectedEdges.length > 0) {
        confirmMessage = `Möchtest du ${selectedNodes.length} Knoten und ${selectedEdges.length} Verbindungen wirklich löschen?`;
    } else if (selectedNodes.length > 0) {
        confirmMessage = `Möchtest du ${selectedNodes.length} Knoten wirklich löschen?`;
    } else if (selectedEdges.length > 0) {
        confirmMessage = `Möchtest du ${selectedEdges.length} Verbindungen wirklich löschen?`;
    }
    
    // Frage den Benutzer, ob er die ausgewählten Elemente wirklich löschen möchte
    if (confirm(confirmMessage)) {
        // Entferne die ausgewählten Elemente
        selectedElements.remove();
        
        let successMessage = 'Elemente wurden gelöscht';
        if (selectedNodes.length > 0 && selectedEdges.length > 0) {
            successMessage = `${selectedNodes.length} Knoten und ${selectedEdges.length} Verbindungen wurden gelöscht`;
        } else if (selectedNodes.length > 0) {
            successMessage = `${selectedNodes.length} Knoten wurden gelöscht`;
        } else if (selectedEdges.length > 0) {
            successMessage = `${selectedEdges.length} Verbindungen wurden gelöscht`;
        }
        
        showUINotification(successMessage, 'success');
    }
}

// Funktion zum Speichern der Änderungen an der Mindmap
function saveMindmapChanges(cy, nodeId) {
    if (!cy) return;
    
    // Sammle die Daten aller Knoten und Kanten
    const nodes = [];
    const edges = [];
    
    cy.nodes().forEach(node => {
        const data = node.data();
        const position = node.position();
        
        nodes.push({
            id: data.id,
            name: data.label,
            category: data.category,
            description: data.description,
            has_children: data.hasChildren,
            color_code: data.color,
            position_x: position.x,
            position_y: position.y
        });
    });
    
    cy.edges().forEach(edge => {
        const data = edge.data();
        
        edges.push({
            source: data.source,
            target: data.target,
            strength: data.strength
        });
    });
    
    // Erstelle die Daten für den API-Aufruf
    const saveData = {
        nodes: nodes,
        edges: edges,
        parent_id: nodeId || null
    };
    
    console.log('Speichere Mindmap-Änderungen:', saveData);
    
    // Zeige eine Speicherbenachrichtigung an
    showUINotification('Speichere Mindmap-Änderungen...', 'info');
    
    // Sende die Daten an den Server
    fetch('/api/mindmap/save', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(saveData)
    })
    .then(response => {
        if (!response.ok) {
            return response.json().then(data => {
                throw new Error(data.error || `Fehler ${response.status}: ${response.statusText}`);
            });
        }
        return response.json();
    })
    .then(data => {
        console.log('Speichern erfolgreich:', data);
        showUINotification('Mindmap wurde erfolgreich gespeichert', 'success');
    })
    .catch(error => {
        console.error('Fehler beim Speichern der Mindmap:', error);
        showUINotification({
            error: 'Fehler beim Speichern der Mindmap',
            details: error.message
        }, 'error');
    });
}

// Füge CSS-Stile für den Bearbeitungsmodus hinzu
const editingStyles = document.createElement('style');
editingStyles.textContent = `
    /* Bearbeitungsmodus-Cursor */
    .editing-mode {
        cursor: grab !important;
    }
    
    .editing-mode:active {
        cursor: grabbing !important;
    }
    
    /* Bearbeitungssteuerungen */
    .editing-controls {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1010;
        display: none;
    }
    
    .editing-toolbar {
        display: flex;
        background: rgba(30, 41, 59, 0.85);
        border-radius: 8px;
        padding: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .tool-button {
        background: rgba(255, 255, 255, 0.1);
        border: none;
        color: white;
        width: 40px;
        height: 40px;
        border-radius: 6px;
        margin: 0 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }
    
    .tool-button:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
    }
    
    .tool-button:active {
        transform: translateY(0);
    }
    
    .tool-button[data-action="add-node"] {
        background: rgba(16, 185, 129, 0.2);
    }
    
    .tool-button[data-action="add-edge"] {
        background: rgba(59, 130, 246, 0.2);
    }
    
    .tool-button[data-action="delete"] {
        background: rgba(239, 68, 68, 0.2);
    }
    
    .tool-button[data-action="save"] {
        background: rgba(245, 158, 11, 0.2);
    }
    
    /* Node-Bearbeitungsdialog */
    .node-edit-dialog {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(30, 41, 59, 0.95);
        border-radius: 12px;
        padding: 20px;
        width: 400px;
        max-width: 90vw;
        z-index: 2000;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .node-edit-dialog h3 {
        margin-top: 0;
        color: white;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 10px;
    }
    
    .form-group {
        margin-bottom: 16px;
    }
    
    .form-group label {
        display: block;
        margin-bottom: 6px;
        color: #e2e8f0;
        font-size: 0.9rem;
    }
    
    .form-group input, 
    .form-group textarea, 
    .form-group select {
        width: 100%;
        padding: 8px 12px;
        background: rgba(15, 23, 42, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        color: white;
        font-size: 0.95rem;
    }
    
    .form-group input:focus, 
    .form-group textarea:focus, 
    .form-group select:focus {
        outline: none;
        border-color: #8b5cf6;
        box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
    }
    
    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 20px;
    }
    
    .form-actions button {
        padding: 8px 16px;
        border-radius: 6px;
        border: none;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .form-actions button.save {
        background: #8b5cf6;
        color: white;
    }
    
    .form-actions button.cancel {
        background: rgba(255, 255, 255, 0.1);
        color: white;
    }
    
    .form-actions button:hover {
        transform: translateY(-2px);
    }
    
    /* Kontext-Menü */
    .context-menu {
        position: absolute;
        background: rgba(30, 41, 59, 0.95);
        border-radius: 8px;
        padding: 8px 0;
        min-width: 160px;
        z-index: 2000;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .context-menu-item {
        padding: 8px 16px;
        color: white;
        cursor: pointer;
        transition: background-color 0.2s ease;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .context-menu-item:hover {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .context-menu-item svg {
        width: 16px;
        height: 16px;
    }
    
    /* Modal-Hintergrund */
    .modal-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1999;
        backdrop-filter: blur(2px);
    }
    
    /* Edge-Erstellungsmodus */
    .edge-creation-mode {
        cursor: crosshair !important;
    }
    
    /* Erweiterte Mindmap-Seite */
    .mindmap-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .mindmap-actions {
        display: flex;
        gap: 10px;
    }
    
    .edit-button {
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(139, 92, 246, 0.2);
        border: none;
        color: white;
        padding: 6px 12px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .edit-button:hover {
        background: rgba(139, 92, 246, 0.3);
        transform: translateY(-2px);
    }
    
    .edit-button svg {
        opacity: 0.8;
    }
`;
document.head.appendChild(editingStyles);