/**
 * 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';
        // Deaktiviere Bearbeitungsfunktionen
        cy.nodes().grabify();
        cy.container().classList.remove('editing-mode');
        cy.removeListener('dragfree');
        cy.removeListener('dblclick');
        cy.removeListener('cxttap');
    }
}

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