{% extends "base.html" %}

{% block title %}Interaktive Mindmap{% endblock %}

{% block extra_css %}
<style>
  /* Grundlegendes Layout */
  .mindmap-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 64px);
    background: linear-gradient(135deg, #1a1f2e 0%, #0f172a 100%);
    overflow: hidden;
  }

  /* Hauptcontainer für die Mindmap */
  #cy {
    width: 100%;
    height: 100%;
    background: transparent;
  }

  /* Zoom-Toolbar */
  .mindmap-toolbar {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    padding: 8px;
    background: rgba(30, 41, 59, 0.8);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 10;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .mindmap-toolbar button {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .mindmap-toolbar button:hover {
    background: rgba(139, 92, 246, 0.5);
    transform: translateY(-2px);
  }
  
  .mindmap-toolbar button i {
    font-size: 16px;
  }

  /* Header-Bereich */
  .mindmap-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mindmap-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    background: linear-gradient(90deg, #60a5fa, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Aktionsmenü im Header */
  .mindmap-actions {
    display: flex;
    gap: 0.75rem;
  }

  .action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    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;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .action-button:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  .action-button.primary {
    background: rgba(139, 92, 246, 0.3);
  }

  .action-button.primary:hover {
    background: rgba(139, 92, 246, 0.5);
  }

  .action-button.danger {
    background: rgba(220, 38, 38, 0.3);
  }

  .action-button.danger:hover {
    background: rgba(220, 38, 38, 0.5);
  }

  /* Kontrollpanel */
  .control-panel {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15, 23, 42, 0.9);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .control-button {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 0.5rem;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .control-button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(-5px);
  }

  .control-button i {
    margin-right: 0.75rem;
  }

  /* CRUD Panel */
  .crud-panel {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.9);
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 0.75rem;
    backdrop-filter: blur(8px);
  }

  .crud-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .crud-button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
  }

  .crud-button i {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
  }

  .crud-button span {
    font-size: 0.7rem;
    text-align: center;
  }

  .crud-button.create {
    background: rgba(16, 185, 129, 0.3);
  }

  .crud-button.create:hover {
    background: rgba(16, 185, 129, 0.5);
  }

  .crud-button.edit {
    background: rgba(245, 158, 11, 0.3);
  }

  .crud-button.edit:hover {
    background: rgba(245, 158, 11, 0.5);
  }

  .crud-button.delete {
    background: rgba(220, 38, 38, 0.3);
  }

  .crud-button.delete:hover {
    background: rgba(220, 38, 38, 0.5);
  }

  .crud-button.save {
    background: rgba(59, 130, 246, 0.3);
  }

  .crud-button.save:hover {
    background: rgba(59, 130, 246, 0.5);
  }

  /* Info-Panel */
  .info-panel {
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15, 23, 42, 0.9);
    border-radius: 1rem;
    padding: 1.5rem;
    width: 300px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s ease;
  }

  .info-panel.visible {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }

  .info-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .info-content {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* Kategorie-Legende */
  .category-legend {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.9);
    border-radius: 1rem;
    padding: 1rem 2rem;
    display: flex;
    gap: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .category-item {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
  }

  .category-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 0.5rem;
  }

  /* Animationen */
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }

  .pulse {
    animation: pulse 2s infinite;
  }
  
  /* Ladeanzeige */
  .loader {
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top: 4px solid #60a5fa;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    z-index: 5;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* Status-Meldung */
  .status-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(15, 23, 42, 0.9);
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    color: white;
    font-size: 1rem;
    z-index: 15;
    text-align: center;
    max-width: 80%;
  }
  
  /* Bearbeitungsmodus-Hinweis */
  .edit-mode-indicator {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    background: rgba(245, 158, 11, 0.8);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    z-index: 1000;
    display: none;
  }
  
  .edit-mode-indicator.active {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  /* 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);
  }
</style>
{% endblock %}

{% block content %}
<div class="mindmap-container">
  <div id="cy"></div>
  
  <!-- Toolbar -->
  <div class="mindmap-toolbar">
    <div class="toolbar-section">
      <button id="add-node-btn" class="toolbar-btn" title="Knoten hinzufügen">
        <i class="fas fa-plus"></i>
        <span>Knoten</span>
      </button>
      <button id="add-thought-btn" class="toolbar-btn" title="Gedanken hinzufügen">
        <i class="fas fa-lightbulb"></i>
        <span>Gedanke</span>
      </button>
      <button id="collaborate-btn" class="toolbar-btn" title="Kollaboration starten">
        <i class="fas fa-users"></i>
        <span>Kollaboration</span>
      </button>
    </div>
    
    <div class="toolbar-section">
      <button id="export-btn" class="toolbar-btn" title="Mindmap exportieren">
        <i class="fas fa-download"></i>
        <span>Export</span>
      </button>
      <button id="share-btn" class="toolbar-btn" title="Mindmap teilen">
        <i class="fas fa-share"></i>
        <span>Teilen</span>
      </button>
      <button id="fullscreen-btn" class="toolbar-btn" title="Vollbild">
        <i class="fas fa-expand"></i>
        <span>Vollbild</span>
      </button>
    </div>
    
    <div class="toolbar-section">
      <button id="zoom-in-btn" class="toolbar-btn" title="Vergrößern">
        <i class="fas fa-search-plus"></i>
      </button>
      <button id="zoom-out-btn" class="toolbar-btn" title="Verkleinern">
        <i class="fas fa-search-minus"></i>
      </button>
      <button id="reset-view-btn" class="toolbar-btn" title="Ansicht zurücksetzen">
        <i class="fas fa-home"></i>
      </button>
    </div>
  </div>
  
  <div class="mindmap-header">
    <h1 class="mindmap-title">Wissenslandschaft</h1>
    <div class="mindmap-actions">
      <button class="action-button" id="toggleCategories">
        <i class="fas fa-tags"></i> Kategorien
      </button>
      <button class="action-button primary" id="startEdit">
        <i class="fas fa-edit"></i> Bearbeiten
      </button>
    </div>
  </div>

  <!-- Info-Panel für Knotendetails -->
  <div id="infoPanel" class="info-panel">
    <h3 class="info-title">Knotendetails</h3>
    <div class="info-content"></div>
  </div>
  
  <div id="categoryLegend" class="category-legend"></div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Cytoscape und Erweiterungen -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape-cose-bilkent/4.1.0/cytoscape-cose-bilkent.min.js"></script>

<!-- Unsere JavaScript-Dateien -->
<script src="{{ url_for('static', filename='js/update_mindmap.js', v='1.0.1') }}"></script>

<!-- Initialisierung -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  console.log('DOMContentLoaded Event ausgelöst');
  
  const cyContainer = document.getElementById('cy');
  const loader = document.getElementById('loader');
  const statusMessage = document.getElementById('statusMessage');
  const crudPanel = document.getElementById('crudPanel');
  const editModeIndicator = document.getElementById('editModeIndicator');
  
  // CRUD Buttons
  const createNodeBtn = document.getElementById('createNode');
  const createEdgeBtn = document.getElementById('createEdge');
  const editNodeBtn = document.getElementById('editNode');
  const deleteElementBtn = document.getElementById('deleteElement');
  const saveMindmapBtn = document.getElementById('saveMindmap');
  
  // Header Action Buttons
  const toggleEditModeBtn = document.getElementById('toggleEditMode');
  const saveChangesBtn = document.getElementById('saveChanges');
  const cancelEditBtn = document.getElementById('cancelEdit');
  
  let isEditMode = false;
  let selectedElement = null;
  
  if (cyContainer) {
    console.log('Container gefunden:', cyContainer);
    
    // Loader und Statusmeldung anzeigen, nur wenn die Elemente existieren
    if (loader) loader.style.display = 'block';
    if (statusMessage) {
      statusMessage.textContent = 'Lade Mindmap...';
      statusMessage.style.display = 'block';
    }
    
    // Prüfen, ob Cytoscape vorhanden ist
    if (typeof cytoscape !== 'undefined') {
      console.log('Cytoscape ist verfügbar');
      
      // Initialisieren der Mindmap
      initializeMindmap().then(() => {
        // Erfolg: Loader und Statusmeldung ausblenden
        if (loader) loader.style.display = 'none';
        if (statusMessage) statusMessage.style.display = 'none';
        
        // Event-Listener für Knotenauswahl
        window.cy.on('select', 'node', function(event) {
          selectedElement = event.target;
          if (editNodeBtn) editNodeBtn.disabled = false;
          if (deleteElementBtn) deleteElementBtn.disabled = false;
          
          // Knotendetails im Info-Panel anzeigen
          showNodeInfo(selectedElement);
        });
        
        window.cy.on('select', 'edge', function(event) {
          selectedElement = event.target;
          if (editNodeBtn) editNodeBtn.disabled = true;
          if (deleteElementBtn) deleteElementBtn.disabled = false;
        });
        
        window.cy.on('unselect', function() {
          selectedElement = null;
          if (editNodeBtn) editNodeBtn.disabled = true;
          if (deleteElementBtn) deleteElementBtn.disabled = true;
          
          // Info-Panel ausblenden
          hideNodeInfo();
        });
        
        // Rechtsklick-Menü
        window.cy.on('cxttap', 'node', function(event) {
          // Kontextmenü für Knoten anzeigen
          if (isEditMode) {
            const node = event.target;
            const position = event.renderedPosition;
            showNodeContextMenu(node, {
              x: event.originalEvent.clientX,
              y: event.originalEvent.clientY
            });
            event.preventDefault();
          }
        });
        
        window.cy.on('cxttap', function(event) {
          // Kontextmenü zum Hinzufügen eines Knotens
          if (isEditMode && event.target === window.cy) {
            showAddNodeMenu({
              x: event.originalEvent.clientX,
              y: event.originalEvent.clientY
            });
            event.preventDefault();
          }
        });
      }).catch(error => {
        // Fehler: Fehlermeldung anzeigen
        console.error('Mindmap-Initialisierung fehlgeschlagen', error);
        if (loader) loader.style.display = 'none';
        if (statusMessage) {
          statusMessage.textContent = 'Mindmap konnte nicht initialisiert werden: ' + error.message;
          statusMessage.style.backgroundColor = 'rgba(220, 38, 38, 0.9)';
          statusMessage.style.display = 'block';
        }
      });
    } else {
      console.error('Cytoscape ist nicht verfügbar');
      if (loader) loader.style.display = 'none';
      if (statusMessage) {
        statusMessage.textContent = 'Cytoscape-Bibliothek konnte nicht geladen werden';
        statusMessage.style.backgroundColor = 'rgba(220, 38, 38, 0.9)';
        statusMessage.style.display = 'block';
      }
    }
  } else {
    console.error('Container #cy nicht gefunden');
  }
  
  // Bearbeitungsmodus umschalten (nur wenn alle erforderlichen Elemente existieren)
  if (toggleEditModeBtn && crudPanel && editModeIndicator && saveChangesBtn && cancelEditBtn && window.cy) {
    toggleEditModeBtn.addEventListener('click', function() {
      isEditMode = !isEditMode;
      
      if (isEditMode) {
        // Bearbeitungsmodus aktivieren
        crudPanel.style.display = 'flex';
        editModeIndicator.classList.add('active');
        toggleEditModeBtn.style.display = 'none';
        saveChangesBtn.style.display = 'inline-flex';
        cancelEditBtn.style.display = 'inline-flex';
        window.cy.container().classList.add('editing-mode');
        
        // Aktiviere Knotenbewegung (dragging)
        window.cy.nodes().unlock();
      } else {
        // Bearbeitungsmodus deaktivieren
        crudPanel.style.display = 'none';
        editModeIndicator.classList.remove('active');
        toggleEditModeBtn.style.display = 'inline-flex';
        saveChangesBtn.style.display = 'none';
        cancelEditBtn.style.display = 'none';
        window.cy.container().classList.remove('editing-mode');
        
        // Deaktiviere Knotenbewegung
        window.cy.nodes().lock();
      }
    });
  }
  
  // Änderungen speichern
  if (saveChangesBtn && window.cy) {
    saveChangesBtn.addEventListener('click', function() {
      saveMindmapChanges(window.cy);
    });
  }
  
  // Bearbeitungsmodus abbrechen
  if (cancelEditBtn && crudPanel && editModeIndicator && toggleEditModeBtn && saveChangesBtn && loader && statusMessage) {
    cancelEditBtn.addEventListener('click', function() {
      if (confirm('Möchten Sie den Bearbeitungsmodus wirklich verlassen? Nicht gespeicherte Änderungen gehen verloren.')) {
        isEditMode = false;
        crudPanel.style.display = 'none';
        editModeIndicator.classList.remove('active');
        toggleEditModeBtn.style.display = 'inline-flex';
        saveChangesBtn.style.display = 'none';
        cancelEditBtn.style.display = 'none';
        window.cy.container().classList.remove('editing-mode');
        
        // Neuinitialisierung der Mindmap
        initializeMindmap().then(() => {
          if (loader) loader.style.display = 'none';
          if (statusMessage) statusMessage.style.display = 'none';
        });
      }
    });
  }
  
  // CRUD-Funktionen
  if (createNodeBtn && window.cy) {
    createNodeBtn.addEventListener('click', function() {
      if (isEditMode) {
        addNewNode(window.cy);
      }
    });
  }
  
  if (createEdgeBtn && window.cy) {
    createEdgeBtn.addEventListener('click', function() {
      if (isEditMode) {
        enableEdgeCreationMode(window.cy);
      }
    });
  }
  
  if (editNodeBtn) {
    editNodeBtn.addEventListener('click', function() {
      if (isEditMode && selectedElement && selectedElement.isNode()) {
        editNodeProperties(selectedElement);
      }
    });
  }
  
  if (deleteElementBtn) {
    deleteElementBtn.addEventListener('click', function() {
      if (isEditMode && selectedElement) {
        if (selectedElement.isNode()) {
          deleteNode(selectedElement);
        } else if (selectedElement.isEdge()) {
          if (confirm('Möchten Sie diese Verbindung wirklich löschen?')) {
            selectedElement.remove();
          }
        }
      }
    });
  }
  
  if (saveMindmapBtn && window.cy) {
    saveMindmapBtn.addEventListener('click', function() {
      if (isEditMode) {
        saveMindmapChanges(window.cy);
      }
    });
  }
  
  // Funktionen für Zoom-Buttons und Reset
  const zoomInBtn = document.getElementById('zoom-in-btn');
  const zoomOutBtn = document.getElementById('zoom-out-btn');
  const resetViewBtn = document.getElementById('reset-view-btn');
  
  if (zoomInBtn && window.cy) {
    zoomInBtn.addEventListener('click', function() {
      if (window.cy) window.cy.zoom(window.cy.zoom() * 1.2);
    });
  }
  
  if (zoomOutBtn && window.cy) {
    zoomOutBtn.addEventListener('click', function() {
      if (window.cy) window.cy.zoom(window.cy.zoom() * 0.8);
    });
  }
  
  if (resetViewBtn && window.cy) {
    resetViewBtn.addEventListener('click', function() {
      if (window.cy) window.cy.fit();
    });
  }

  // Neue Toolbar-Funktionen
  const addNodeBtn = document.getElementById('add-node-btn');
  const addThoughtBtn = document.getElementById('add-thought-btn');
  const collaborateBtn = document.getElementById('collaborate-btn');
  const exportBtn = document.getElementById('export-btn');
  const shareBtn = document.getElementById('share-btn');
  const fullscreenBtn = document.getElementById('fullscreen-btn');
  
  if (addNodeBtn) {
    addNodeBtn.addEventListener('click', function() {
      // Öffne Modal zum Hinzufügen eines neuen Knotens
      showAddNodeModal();
    });
  }
  
  if (addThoughtBtn) {
    addThoughtBtn.addEventListener('click', function() {
      // Öffne Modal zum Hinzufügen eines Gedankens
      showAddThoughtModal();
    });
  }
  
  if (collaborateBtn) {
    collaborateBtn.addEventListener('click', function() {
      // Starte Kollaborationsmodus
      startCollaboration();
    });
  }
  
  if (exportBtn) {
    exportBtn.addEventListener('click', function() {
      // Exportiere Mindmap
      exportMindmap();
    });
  }
  
  if (shareBtn) {
    shareBtn.addEventListener('click', function() {
      // Teile Mindmap
      shareMindmap();
    });
  }
  
  if (fullscreenBtn) {
    fullscreenBtn.addEventListener('click', function() {
      // Vollbild-Modus
      toggleFullscreen();
    });
  }
  
  // Funktionen implementieren
  function showAddNodeModal() {
    // Erstelle ein einfaches Modal für neuen Knoten
    const nodeName = prompt('Name des neuen Knotens:');
    if (nodeName && nodeName.trim()) {
      addNewNode(nodeName.trim());
    }
  }
  
  function showAddThoughtModal() {
    // Erstelle ein Modal für neuen Gedanken
    const thoughtTitle = prompt('Titel des Gedankens:');
    if (thoughtTitle && thoughtTitle.trim()) {
      addNewThought(thoughtTitle.trim());
    }
  }
  
  function addNewNode(name) {
    // API-Aufruf zum Hinzufügen eines neuen Knotens
    fetch('/api/mindmap/public/add_node', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name: name,
        description: '',
        x_position: Math.random() * 400 + 100,
        y_position: Math.random() * 400 + 100
      })
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        // Lade Mindmap neu
        location.reload();
      } else {
        alert('Fehler beim Hinzufügen des Knotens: ' + (data.error || 'Unbekannter Fehler'));
      }
    })
    .catch(error => {
      console.error('Fehler:', error);
      alert('Ein Fehler ist aufgetreten.');
    });
  }
  
  function addNewThought(title) {
    // API-Aufruf zum Hinzufügen eines neuen Gedankens
    fetch('/api/thoughts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        title: title,
        content: 'Neuer Gedanke erstellt über die Mindmap',
        branch: 'Allgemein'
      })
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        alert('Gedanke erfolgreich erstellt!');
      } else {
        alert('Fehler beim Erstellen des Gedankens: ' + (data.error || 'Unbekannter Fehler'));
      }
    })
    .catch(error => {
      console.error('Fehler:', error);
      alert('Ein Fehler ist aufgetreten.');
    });
  }
  
  function startCollaboration() {
    // Kollaborationsmodus starten
    alert('Kollaborationsmodus wird bald verfügbar sein!\n\nGeplante Features:\n- Echtzeit-Bearbeitung\n- Live-Cursor anderer Benutzer\n- Chat-Integration\n- Änderungshistorie');
  }
  
  function exportMindmap() {
    // Mindmap exportieren
    const format = prompt('Export-Format wählen:\n1. JSON\n2. PNG (geplant)\n3. PDF (geplant)\n\nGeben Sie 1, 2 oder 3 ein:', '1');
    
    if (format === '1') {
      // JSON-Export
      if (window.cy) {
        const data = window.cy.json();
        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'mindmap-export.json';
        a.click();
        URL.revokeObjectURL(url);
      }
    } else {
      alert('Dieses Format wird bald verfügbar sein!');
    }
  }
  
  function shareMindmap() {
    // Mindmap teilen
    if (navigator.share) {
      navigator.share({
        title: 'SysTades Mindmap',
        text: 'Schau dir diese interessante Mindmap an!',
        url: window.location.href
      });
    } else {
      // Fallback: URL kopieren
      navigator.clipboard.writeText(window.location.href).then(() => {
        alert('Mindmap-Link wurde in die Zwischenablage kopiert!');
      }).catch(() => {
        prompt('Kopiere diesen Link zum Teilen:', window.location.href);
      });
    }
  }
  
  function toggleFullscreen() {
    // Vollbild-Modus umschalten
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen().catch(err => {
        console.error('Fehler beim Aktivieren des Vollbildmodus:', err);
      });
    } else {
      document.exitFullscreen();
    }
  }
  
  // Vollbild-Event-Listener
  document.addEventListener('fullscreenchange', function() {
    const fullscreenBtn = document.getElementById('fullscreen-btn');
    if (fullscreenBtn) {
      const icon = fullscreenBtn.querySelector('i');
      if (document.fullscreenElement) {
        icon.className = 'fas fa-compress';
        fullscreenBtn.title = 'Vollbild verlassen';
      } else {
        icon.className = 'fas fa-expand';
        fullscreenBtn.title = 'Vollbild';
      }
    }
  });
});
</script>
{% endblock %}