/**
 * 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;
    }
}

// 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,
                    hasChildren: node.has_children,
                    expanded: false,
                    color: node.color_code,
                    fontColor: '#ffffff',
                    fontSize: node.is_center ? 20 : 16
                }
            })),
            // Kanten
            ...data.edges.map(edge => ({
                data: {
                    source: edge.source,
                    target: edge.target,
                    strength: edge.strength || 0.5
                }
            }))
        ];

        // Bestehende Cytoscape-Instanz entfernen, falls vorhanden
        if (window.cy && typeof window.cy.destroy === 'function') {
            window.cy.destroy();
        }

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

        window.cy = cytoscape({
            container: cyContainer,
            elements: elements,
            style: [
                {
                    selector: 'node',
                    style: mindmapStyles.node.base
                },
                {
                    selector: 'node[isCenter]',
                    style: mindmapStyles.node.center
                },
                {
                    selector: 'node:selected',
                    style: mindmapStyles.node.selected
                },
                {
                    selector: 'edge',
                    style: mindmapStyles.edge.base
                }
            ],
            layout: mindmapStyles.layout.base
        });

        // Füge neuronale Eigenschaften zu allen Knoten hinzu
        cy.nodes().forEach(node => {
            const data = node.data();
            // Verwende mindmapConfig für Kategorie-Farben oder einen Standardwert
            const categoryColor = data.category && mindmapConfig.categories[data.category] 
                ? mindmapConfig.categories[data.category].color 
                : '#60a5fa';
            
            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,
                color: data.color || categoryColor
            });
        });

        // 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
            });
        });

        // Event-Listener für Knoten-Klicks
        cy.on('tap', 'node', async function(evt) {
            const node = evt.target;
            console.log('Node clicked:', node.id(), 'hasChildren:', node.data('hasChildren'), 'expanded:', node.data('expanded'));
            
            if (node.data('hasChildren') && !node.data('expanded')) {
                await loadSubthemes(node);
            }
        });

        // Layout ausführen
        cy.layout(mindmapStyles.layout.base).run();
        
        // Starte neuronale Aktivitätssimulation
        startNeuralActivitySimulation(cy);
        
        // Mindmap mit echten Daten befüllen (Styles, Farben etc.)
        updateMindmap();
        
        return true;
    } catch (error) {
        console.error('Fehler bei der Mindmap-Initialisierung:', error);
        showUINotification({
            error: 'Mindmap konnte nicht initialisiert werden',
            details: error.message
        }, 'error');
        return false;
    }
}

// Warte bis DOM geladen ist
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOMContentLoaded Event ausgelöst');
    
    // Prüfe, ob der Container existiert
    const cyContainer = document.getElementById('cy');
    console.log('Container gefunden:', cyContainer);
    
    if (!cyContainer) {
        console.error('Mindmap-Container #cy nicht gefunden!');
        return;
    }
    
    // Prüfe, ob Cytoscape verfügbar ist
    if (typeof cytoscape === 'undefined') {
        console.error('Cytoscape ist nicht definiert!');
        return;
    }
    console.log('Cytoscape ist verfügbar');

    // Initialisiere die Mindmap
    initializeMindmap()
        .then(success => {
            if (success) {
                console.log('Mindmap wurde erfolgreich initialisiert');
                // Event auslösen, damit andere Scripte reagieren können
                document.dispatchEvent(new Event('mindmap-loaded'));
                console.log('mindmap-loaded Event ausgelöst');
            } else {
                console.error('Mindmap-Initialisierung fehlgeschlagen');
            }
        })
        .catch(error => {
            console.error('Fehler bei der Mindmap-Initialisierung:', error);
            showUINotification({
                error: 'Mindmap konnte nicht initialisiert werden',
                details: error.message
            }, 'error');
        });
});

// Funktion zum Initialisieren des neuronalen Designs
function initializeNeuralDesign(cy) {
    // Füge neuronale Eigenschaften zu allen Knoten hinzu
    cy.nodes().forEach(node => {
        const data = node.data();
        // Verwende mindmapConfig für Kategorie-Farben oder einen Standardwert
        const categoryColor = data.category && mindmapConfig.categories[data.category] 
            ? mindmapConfig.categories[data.category].color 
            : '#60a5fa';
            
        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,
            color: data.color || categoryColor
        });
    });

    // 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 neuronales Styling an
    cy.style()
        .selector('node')
        .style({
            'background-color': 'data(color)',
            'label': 'data(label)',
            'color': '#fff',
            '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': '#fff',
            'border-opacity': 0.8,
            'overlay-padding': 4,
            'z-index': 10,
            'shape': 'ellipse',
            'background-opacity': 0.85,
            'shadow-blur': 15,
            'shadow-color': 'data(color)',
            'shadow-opacity': 0.6,
            'shadow-offset-x': 0,
            'shadow-offset-y': 0
        })
        .selector('edge')
        .style({
            'width': function(ele) {
                return ele.data('strength') ? ele.data('strength') * 3 : 1;
            },
            'curve-style': 'bezier',
            '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.8 : 0.4;
            },
            'line-style': function(ele) {
                const strength = ele.data('strength');
                if (!strength) return 'solid';
                if (strength <= 0.4) return 'dotted';
                if (strength <= 0.6) return 'dashed';
                return 'solid';
            },
            'target-arrow-shape': 'none',
            'source-endpoint': '0% 50%',
            'target-endpoint': '100% 50%',
            'transition-property': 'line-opacity, width',
            'transition-duration': '0.3s',
            'transition-timing-function': 'ease-in-out'
        })
        .update();

    // Starte neuronale Aktivitätssimulation
    startNeuralActivitySimulation(cy);
}

// 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);
}

/**
 * Wendet detaillierte neuronale Netzwerkstile auf die Mindmap an
 * @param {Object} cy - Cytoscape-Instanz
 */
function applyNeuralNetworkStyle(cy) {
    cy.style()
        .selector('node')
        .style({
            'label': 'data(label)',
            'text-valign': 'center',
            'text-halign': 'center',
            'color': 'data(fontColor)',
            'text-outline-width': 2,
            'text-outline-color': 'rgba(0,0,0,0.8)',
            'text-outline-opacity': 0.9,
            'font-size': 'data(fontSize)',
            'font-weight': '500',
            'text-margin-y': 8,
            'width': function(ele) {
                if (ele.data('isCenter')) return 120;
                return 80;
            },
            'height': function(ele) {
                if (ele.data('isCenter')) return 120;
                return 80;
            },
            'background-color': 'data(color)',
            'background-opacity': 0.9,
            'border-width': 2,
            'border-color': '#ffffff',
            'border-opacity': 0.8,
            'shape': 'ellipse',
            'transition-property': 'background-color, background-opacity, border-width',
            'transition-duration': '0.3s',
            'transition-timing-function': 'ease-in-out'
        })
        .selector('edge')
        .style({
            'width': function(ele) {
                return ele.data('strength') ? ele.data('strength') * 3 : 1;
            },
            'curve-style': 'bezier',
            '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.8 : 0.4;
            },
            'line-style': function(ele) {
                const strength = ele.data('strength');
                if (!strength) return 'solid';
                if (strength <= 0.4) return 'dotted';
                if (strength <= 0.6) return 'dashed';
                return 'solid';
            },
            'target-arrow-shape': 'none',
            'source-endpoint': '0% 50%',
            'target-endpoint': '100% 50%',
            'transition-property': 'line-opacity, width',
            'transition-duration': '0.3s',
            'transition-timing-function': 'ease-in-out'
        })
        .update();
}

// Vereinfachte neuronale Aktivitätssimulation
function startNeuralActivitySimulation(cy) {
    if (window.neuralInterval) clearInterval(window.neuralInterval);
    
    const nodes = cy.nodes();
    let currentTime = Date.now();
    
    function simulateNeuralActivity() {
        currentTime = Date.now();
        
        nodes.forEach(node => {
            const data = node.data();
            const lastFired = data.lastFired || 0;
            const timeSinceLastFire = currentTime - lastFired;
            
            if (timeSinceLastFire > data.refractionPeriod) {
                if (Math.random() < data.neuronActivity * 0.1) {
                    fireNeuron(node, true, currentTime);
                }
            }
        });
    }
    
    function fireNeuron(node, state, currentTime) {
        const data = node.data();
        data.lastFired = currentTime;
        
        node.style({
            'background-opacity': 1,
            'border-width': 3
        });
        
        setTimeout(() => {
            node.style({
                'background-opacity': 0.9,
                'border-width': 2
            });
        }, 200);
        
        if (state) {
            propagateSignal(node, currentTime);
        }
    }
    
    function propagateSignal(sourceNode, currentTime) {
        const outgoingEdges = sourceNode.connectedEdges();
        
        outgoingEdges.forEach(edge => {
            const targetNode = edge.target();
            const edgeData = edge.data();
            const latency = edgeData.latency;
            
            edge.style({
                'line-opacity': 0.8,
                'width': edgeData.strength * 3
            });
            
            setTimeout(() => {
                edge.style({
                    'line-opacity': edgeData.strength * 0.6,
                    'width': edgeData.strength * 2
                });
            }, 200);
            
            setTimeout(() => {
                const targetData = targetNode.data();
                const timeSinceLastFire = currentTime - (targetData.lastFired || 0);
                
                if (timeSinceLastFire > targetData.refractionPeriod) {
                    const signalStrength = edgeData.strength * 
                                        edgeData.conductionVelocity * 
                                        sourceNode.data('neuronActivity');
                    
                    if (signalStrength > targetData.threshold) {
                        fireNeuron(targetNode, true, currentTime + latency);
                    }
                }
            }, latency);
        });
    }
    
    window.neuralInterval = setInterval(simulateNeuralActivity, 100);
}

// Hilfe-Funktion zum Hinzufügen eines Flash-Hinweises
function showFlash(message, type = 'info') {
    const flashContainer = createFlashContainer();
    const flash = document.createElement('div');
    flash.className = `flash-message ${type}`;
    flash.textContent = message;
    flashContainer.appendChild(flash);
    document.body.appendChild(flashContainer);

    setTimeout(() => {
        flash.classList.add('show');
        setTimeout(() => {
            flash.classList.remove('show');
            setTimeout(() => {
                flashContainer.remove();
            }, 300);
        }, 3000);
    }, 100);
}

/**
 * Zeigt eine Benachrichtigung in der UI an
 * @param {string|object} message - Die anzuzeigende Nachricht oder ein Fehlerobjekt
 * @param {string} type - Der Typ der Benachrichtigung ('info', 'success', 'warning', 'error')
 * @param {number} duration - Die Anzeigedauer in Millisekunden (Standard: 3000)
 */
function showUINotification(message, type = 'info', duration = 3000) {
    // Container erstellen, falls er nicht existiert
    let container = document.getElementById('notification-container');
    if (!container) {
        container = document.createElement('div');
        container.id = 'notification-container';
        container.style.position = 'fixed';
        container.style.top = '1rem';
        container.style.right = '1rem';
        container.style.zIndex = '1000';
        container.style.maxWidth = '400px';
        document.body.appendChild(container);
    }
    
    // Benachrichtigung erstellen
    const notification = document.createElement('div');
    notification.className = `notification notification-${type}`;
    notification.style.padding = '1rem';
    notification.style.marginBottom = '0.5rem';
    notification.style.borderRadius = '0.25rem';
    notification.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.2)';
    notification.style.position = 'relative';
    notification.style.opacity = '0';
    notification.style.transform = 'translateY(-20px)';
    notification.style.transition = 'all 0.3s ease-in-out';
    
    // Farben nach Typ
    if (type === 'success') {
        notification.style.backgroundColor = '#059669';
        notification.style.color = '#ffffff';
    } else if (type === 'error') {
        notification.style.backgroundColor = '#DC2626';
        notification.style.color = '#ffffff';
    } else if (type === 'warning') {
        notification.style.backgroundColor = '#F59E0B';
        notification.style.color = '#ffffff';
    } else {
        notification.style.backgroundColor = '#3B82F6';
        notification.style.color = '#ffffff';
    }
    
    // Nachrichteninhalt formatieren
    let content = '';
    
    if (typeof message === 'object' && message !== null) {
        // Wenn es ein Fehler-Objekt ist
        if (message.error) {
            content = message.error;
            if (message.details) {
                content += `<br><small>${message.details}</small>`;
            }
        } else {
            // Versuche, das Objekt zu stringifizieren
            try {
                content = JSON.stringify(message);
            } catch (e) {
                content = 'Objekt konnte nicht angezeigt werden';
            }
        }
    } else {
        // String oder andere primitive Typen
        content = message;
    }
    
    notification.innerHTML = content;
    
    // Schließen-Button
    const closeButton = document.createElement('span');
    closeButton.innerHTML = '&times;';
    closeButton.style.position = 'absolute';
    closeButton.style.top = '0.25rem';
    closeButton.style.right = '0.5rem';
    closeButton.style.fontSize = '1.25rem';
    closeButton.style.cursor = 'pointer';
    closeButton.onclick = () => {
        notification.style.opacity = '0';
        notification.style.transform = 'translateY(-20px)';
        setTimeout(() => {
            if (notification.parentNode === container) {
                container.removeChild(notification);
            }
        }, 300);
    };
    notification.appendChild(closeButton);
    
    // Zur Seite hinzufügen
    container.appendChild(notification);
    
    // Animation starten
    setTimeout(() => {
        notification.style.opacity = '1';
        notification.style.transform = 'translateY(0)';
    }, 10);
    
    // Automatisch ausblenden, wenn keine Dauer von 0 übergeben wurde
    if (duration > 0) {
        setTimeout(() => {
            if (notification.parentNode === container) {
                notification.style.opacity = '0';
                notification.style.transform = 'translateY(-20px)';
                setTimeout(() => {
                    if (notification.parentNode === container) {
                        container.removeChild(notification);
                    }
                }, 300);
            }
        }, duration);
    }
}

// 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, parentNode = null) {
    // Dialog erstellen
    const dialog = document.createElement('div');
    dialog.className = 'node-dialog';
    dialog.style.position = 'absolute';
    dialog.style.top = '50%';
    dialog.style.left = '50%';
    dialog.style.transform = 'translate(-50%, -50%)';
    dialog.style.background = 'rgba(15, 23, 42, 0.95)';
    dialog.style.padding = '1.5rem';
    dialog.style.borderRadius = '0.75rem';
    dialog.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
    dialog.style.zIndex = '2000';
    dialog.style.width = '400px';
    dialog.style.maxWidth = '90vw';
    dialog.style.backdropFilter = 'blur(8px)';
    dialog.style.border = '1px solid rgba(255, 255, 255, 0.1)';

    dialog.innerHTML = `
        <h3 style="color: white; margin-top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.75rem;">Neuen Knoten erstellen</h3>
        <div style="margin-bottom: 1rem;">
            <label style="display: block; color: white; margin-bottom: 0.5rem;">Name:</label>
            <input id="node-name" type="text" style="width: 100%; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 0.5rem;">
        </div>
        <div style="margin-bottom: 1rem;">
            <label style="display: block; color: white; margin-bottom: 0.5rem;">Beschreibung:</label>
            <textarea id="node-description" style="width: 100%; height: 100px; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 0.5rem;"></textarea>
        </div>
        <div style="margin-bottom: 1rem;">
            <label style="display: block; color: white; margin-bottom: 0.5rem;">Kategorie:</label>
            <select id="node-category" style="width: 100%; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 0.5rem;">
                <option value="">Keine Kategorie</option>
                <option value="Philosophie">Philosophie</option>
                <option value="Wissenschaft">Wissenschaft</option>
                <option value="Technologie">Technologie</option>
                <option value="Künste">Künste</option>
                <option value="Psychologie">Psychologie</option>
            </select>
        </div>
        <div style="margin-bottom: 1.5rem;">
            <label style="display: block; color: white; margin-bottom: 0.5rem;">Farbe:</label>
            <input id="node-color" type="color" value="#9F7AEA" style="width: 100%; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.5rem;">
        </div>
        <div style="display: flex; justify-content: flex-end; gap: 0.5rem;">
            <button id="cancel-node" style="padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.5rem; cursor: pointer;">Abbrechen</button>
            <button id="create-node" style="padding: 0.5rem 1rem; background: rgba(16, 185, 129, 0.3); color: white; border: 1px solid rgba(16, 185, 129, 0.5); border-radius: 0.5rem; cursor: pointer;">Erstellen</button>
        </div>
    `;

    document.body.appendChild(dialog);

    // Event-Listener
    document.getElementById('cancel-node').addEventListener('click', () => {
        document.body.removeChild(dialog);
    });

    document.getElementById('create-node').addEventListener('click', () => {
        const name = document.getElementById('node-name').value || 'Neuer Knoten';
        const description = document.getElementById('node-description').value || '';
        const category = document.getElementById('node-category').value;
        const color = document.getElementById('node-color').value;

        // Temporäre ID erstellen (wird später durch die echte ID ersetzt)
        const tempId = 'new-' + Date.now();
        
        // Knoten zur Visualisierung hinzufügen
        const newNode = cy.add({
            group: 'nodes',
            data: {
                id: tempId,
                label: name,
                description: description,
                category: category,
                color: color,
                icon: 'fa-solid fa-circle'
            },
            position: {
                x: cy.width() / 2 + (Math.random() * 100 - 50),
                y: cy.height() / 2 + (Math.random() * 100 - 50)
            }
        });

        // Wenn ein Elternknoten angegeben ist, eine Verbindung erstellen
        if (parentNode) {
            cy.add({
                group: 'edges',
                data: {
                    source: parentNode.id(),
                    target: tempId,
                    strength: 0.5
                }
            });
        }

        // Layout neu berechnen
        cy.layout(mindmapStyles.layout.base).run();

        document.body.removeChild(dialog);
        showUINotification('Neuer Knoten erstellt!', 'success');
    });

    // Kategorie-Auswahl mit Farben verknüpfen
    document.getElementById('node-category').addEventListener('change', (e) => {
        const category = e.target.value;
        let color = '#9F7AEA'; // Standardfarbe
        
        switch(category) {
            case 'Philosophie':
                color = '#9F7AEA'; // Lila
                break;
            case 'Wissenschaft':
                color = '#60A5FA'; // Blau
                break;
            case 'Technologie':
                color = '#10B981'; // Grün
                break;
            case 'Künste':
                color = '#F59E0B'; // Orange
                break;
            case 'Psychologie':
                color = '#EF4444'; // Rot
                break;
        }
        
        document.getElementById('node-color').value = color;
    });
}

// Funktion zum Bearbeiten eines Knotens
function editNodeProperties(node) {
    if (!node) return;
    
    const data = node.data();
    
    // Dialog erstellen
    const dialog = document.createElement('div');
    dialog.className = 'node-dialog';
    dialog.style.position = 'absolute';
    dialog.style.top = '50%';
    dialog.style.left = '50%';
    dialog.style.transform = 'translate(-50%, -50%)';
    dialog.style.background = 'rgba(15, 23, 42, 0.95)';
    dialog.style.padding = '1.5rem';
    dialog.style.borderRadius = '0.75rem';
    dialog.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
    dialog.style.zIndex = '2000';
    dialog.style.width = '400px';
    dialog.style.maxWidth = '90vw';
    dialog.style.backdropFilter = 'blur(8px)';
    dialog.style.border = '1px solid rgba(255, 255, 255, 0.1)';

    dialog.innerHTML = `
        <h3 style="color: white; margin-top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.75rem;">Knoten bearbeiten</h3>
        <div style="margin-bottom: 1rem;">
            <label style="display: block; color: white; margin-bottom: 0.5rem;">Name:</label>
            <input id="node-name" type="text" value="${data.label || ''}" style="width: 100%; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 0.5rem;">
        </div>
        <div style="margin-bottom: 1rem;">
            <label style="display: block; color: white; margin-bottom: 0.5rem;">Beschreibung:</label>
            <textarea id="node-description" style="width: 100%; height: 100px; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 0.5rem;">${data.description || ''}</textarea>
        </div>
        <div style="margin-bottom: 1rem;">
            <label style="display: block; color: white; margin-bottom: 0.5rem;">Kategorie:</label>
            <select id="node-category" style="width: 100%; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 0.5rem;">
                <option value="">Keine Kategorie</option>
                <option value="Philosophie" ${data.category === 'Philosophie' ? 'selected' : ''}>Philosophie</option>
                <option value="Wissenschaft" ${data.category === 'Wissenschaft' ? 'selected' : ''}>Wissenschaft</option>
                <option value="Technologie" ${data.category === 'Technologie' ? 'selected' : ''}>Technologie</option>
                <option value="Künste" ${data.category === 'Künste' ? 'selected' : ''}>Künste</option>
                <option value="Psychologie" ${data.category === 'Psychologie' ? 'selected' : ''}>Psychologie</option>
            </select>
        </div>
        <div style="margin-bottom: 1.5rem;">
            <label style="display: block; color: white; margin-bottom: 0.5rem;">Farbe:</label>
            <input id="node-color" type="color" value="${data.color || data.color_code || '#9F7AEA'}" style="width: 100%; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.5rem;">
        </div>
        <div style="display: flex; justify-content: flex-end; gap: 0.5rem;">
            <button id="cancel-edit" style="padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.5rem; cursor: pointer;">Abbrechen</button>
            <button id="save-edit" style="padding: 0.5rem 1rem; background: rgba(59, 130, 246, 0.3); color: white; border: 1px solid rgba(59, 130, 246, 0.5); border-radius: 0.5rem; cursor: pointer;">Speichern</button>
        </div>
    `;

    document.body.appendChild(dialog);

    // Event-Listener
    document.getElementById('cancel-edit').addEventListener('click', () => {
        document.body.removeChild(dialog);
    });

    document.getElementById('save-edit').addEventListener('click', () => {
        const name = document.getElementById('node-name').value || 'Unbenannter Knoten';
        const description = document.getElementById('node-description').value || '';
        const category = document.getElementById('node-category').value;
        const color = document.getElementById('node-color').value;

        // Knoten aktualisieren
        node.data({
            label: name,
            description: description,
            category: category,
            color: color
        });

        document.body.removeChild(dialog);
        showUINotification('Knoten wurde aktualisiert!', 'success');
    });

    // Kategorie-Auswahl mit Farben verknüpfen
    document.getElementById('node-category').addEventListener('change', (e) => {
        const category = e.target.value;
        let color = '#9F7AEA'; // Standardfarbe
        
        switch(category) {
            case 'Philosophie':
                color = '#9F7AEA'; // Lila
                break;
            case 'Wissenschaft':
                color = '#60A5FA'; // Blau
                break;
            case 'Technologie':
                color = '#10B981'; // Grün
                break;
            case 'Künste':
                color = '#F59E0B'; // Orange
                break;
            case 'Psychologie':
                color = '#EF4444'; // Rot
                break;
        }
        
        document.getElementById('node-color').value = color;
    });
}

// Funktion zum Löschen eines Knotens
function deleteNode(node) {
    if (!node) return;
    
    if (confirm(`Möchten Sie den Knoten "${node.data('label')}" wirklich löschen?`)) {
        // Alle verbundenen Kanten löschen
        node.connectedEdges().remove();
        // Knoten löschen
        node.remove();
        showUINotification('Knoten wurde gelöscht!', 'success');
    }
}

// Kontextmenü für Knoten anzeigen
function showNodeContextMenu(node, position) {
    // Entferne vorhandene Kontextmenüs
    removeContextMenus();
    
    const contextMenu = document.createElement('div');
    contextMenu.className = 'context-menu';
    contextMenu.style.left = `${position.x}px`;
    contextMenu.style.top = `${position.y}px`;
    
    contextMenu.innerHTML = `
        <div class="context-menu-item" data-action="edit">
            <i class="fas fa-edit"></i> Bearbeiten
        </div>
        <div class="context-menu-item" data-action="add-child">
            <i class="fas fa-plus"></i> Unterknoten hinzufügen
        </div>
        <div class="context-menu-item" data-action="delete">
            <i class="fas fa-trash-alt"></i> Löschen
        </div>
    `;
    
    document.body.appendChild(contextMenu);
    
    // Event-Listener für Menüpunkte
    contextMenu.querySelectorAll('.context-menu-item').forEach(item => {
        item.addEventListener('click', function() {
            const action = this.getAttribute('data-action');
            
            switch (action) {
                case 'edit':
                    editNodeProperties(node);
                    break;
                case 'add-child':
                    addNewNode(window.cy, node);
                    break;
                case 'delete':
                    deleteNode(node);
                    break;
            }
            
            removeContextMenus();
        });
    });
    
    // Event-Listener zum Schließen des Menüs
    document.addEventListener('click', function closeMenu(e) {
        if (!contextMenu.contains(e.target)) {
            removeContextMenus();
            document.removeEventListener('click', closeMenu);
        }
    });
}

// Funktion zum Hinzufügen eines Knotens an einer bestimmten Position (Rechtsklick)
function showAddNodeMenu(position) {
    // Entferne vorhandene Kontextmenüs
    removeContextMenus();
    
    const contextMenu = document.createElement('div');
    contextMenu.className = 'context-menu';
    contextMenu.style.left = `${position.x}px`;
    contextMenu.style.top = `${position.y}px`;
    
    contextMenu.innerHTML = `
        <div class="context-menu-item" data-action="add-node">
            <i class="fas fa-plus-circle"></i> Knoten hinzufügen
        </div>
    `;
    
    document.body.appendChild(contextMenu);
    
    // Event-Listener für Menüpunkte
    contextMenu.querySelectorAll('.context-menu-item').forEach(item => {
        item.addEventListener('click', function() {
            const action = this.getAttribute('data-action');
            
            if (action === 'add-node') {
                // Position im Canvas ermitteln
                const containerPos = window.cy.container().getBoundingClientRect();
                const cyPos = {
                    x: position.x - containerPos.left,
                    y: position.y - containerPos.top
                };
                
                // Temporäre ID erstellen
                const tempId = 'new-' + Date.now();
                
                // Knoten hinzufügen (vereinfachte Version, zeigt direkt den Dialog an)
                addNewNode(window.cy);
            }
            
            removeContextMenus();
        });
    });
    
    // Event-Listener zum Schließen des Menüs
    document.addEventListener('click', function closeMenu(e) {
        if (!contextMenu.contains(e.target)) {
            removeContextMenus();
            document.removeEventListener('click', closeMenu);
        }
    });
}

// Hilfsfunktion zum Entfernen aller Kontextmenüs
function removeContextMenus() {
    document.querySelectorAll('.context-menu').forEach(menu => {
        menu.remove();
    });
}

// Funktion zum Aktivieren des Kanten-Erstellungsmodus
function enableEdgeCreationMode(cy) {
    // Status anzeigen
    showUINotification('Bitte wählen Sie den Startknoten für die Verbindung', 'info');
    
    // Cursor-Stil ändern
    document.body.style.cursor = 'crosshair';
    cy.container().classList.add('edge-creation-mode');
    
    // Event-Handler für die Knotenauswahl
    const nodeSelectHandler = function(event) {
        // Ersten Knoten auswählen
        const sourceNode = event.target;
        
        // Status aktualisieren
        showUINotification('Wählen Sie jetzt den Zielknoten für die Verbindung', 'info');
        
        // Zweiten Knoten abwarten
        const secondNodeHandler = function(event) {
            const targetNode = event.target;
            
            // Prüfen, ob der Zielknoten ein Knoten ist und nicht derselbe wie der Startknoten
            if (targetNode.isNode() && targetNode.id() !== sourceNode.id()) {
                // Kante erstellen
                cy.add({
                    group: 'edges',
                    data: {
                        source: sourceNode.id(),
                        target: targetNode.id(),
                        strength: 0.5
                    }
                });
                
                // Erfolgsmeldung
                showUINotification('Verbindung erstellt!', 'success');
                
                // Event-Handler entfernen
                cy.off('tap', 'node', secondNodeHandler);
                
                // Modus beenden
                finishEdgeCreation();
            }
        };
        
        // Event-Handler für den zweiten Knoten
        cy.on('tap', 'node', secondNodeHandler);
        
        // Original-Handler entfernen
        cy.off('tap', 'node', nodeSelectHandler);
        
        // ESC-Taste zum Abbrechen
        document.addEventListener('keydown', function escKeyHandler(e) {
            if (e.key === 'Escape') {
                cy.off('tap', 'node', secondNodeHandler);
                finishEdgeCreation();
                document.removeEventListener('keydown', escKeyHandler);
                showUINotification('Verbindungserstellung abgebrochen', 'info');
            }
        });
    };
    
    // Event-Handler für den ersten Knoten
    cy.on('tap', 'node', nodeSelectHandler);
    
    // Funktion zum Beenden des Kantenerstellungsmodus
    function finishEdgeCreation() {
        document.body.style.cursor = '';
        cy.container().classList.remove('edge-creation-mode');
    }
    
    // Abbrechen durch Klick außerhalb
    cy.on('tap', function(event) {
        if (event.target === cy) {
            cy.off('tap', 'node', nodeSelectHandler);
            finishEdgeCreation();
            showUINotification('Verbindungserstellung abgebrochen', 'info');
        }
    });
}

// Funktion zum Speichern von Mindmap-Änderungen
async function saveMindmapChanges(cy) {
    try {
        showUINotification('Speichere Änderungen...', 'info');
        
        // Alle Knoten und Kanten sammeln
        const nodes = cy.nodes().map(node => {
            const data = node.data();
            return {
                id: data.id,
                name: data.label,
                description: data.description || '',
                color_code: data.color || data.color_code,
                category: data.category || null,
                icon: data.icon || 'fa-solid fa-circle',
                position_x: node.position().x,
                position_y: node.position().y
            };
        });
        
        const edges = cy.edges().map(edge => {
            return {
                source: edge.source().id(),
                target: edge.target().id(),
                strength: edge.data('strength') || 0.5
            };
        });
        
        // Daten an API senden
        const response = await fetch('/api/mindmap/save', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                nodes: nodes,
                edges: edges
            })
        });
        
        const result = await response.json();
        
        if (!response.ok || !result.success) {
            const errorMessage = result.error || 'Mindmap konnte nicht gespeichert werden';
            showUINotification(errorMessage, 'error');
            throw new Error(errorMessage);
        }
        
        // Wenn temporäre IDs aktualisiert wurden, Mapping anwenden
        if (result.node_mapping) {
            // Die echten IDs hinzufügen
            for (const [tempId, realId] of Object.entries(result.node_mapping)) {
                const node = cy.getElementById(tempId);
                if (node.length > 0) {
                    node.data('id', realId);
                }
            }
        }
        
        showUINotification('Mindmap wurde erfolgreich gespeichert!', 'success');
        return result;
    } catch (error) {
        console.error('Fehler beim Speichern der Mindmap:', error);
        showUINotification('Fehler beim Speichern: ' + error.message, 'error');
        throw 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);