{% extends "base.html" %}

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

{% block extra_css %}
<style>
  /* Spezifische Stile für die Mindmap-Seite */
  #cy {
    width: 100%;
    height: 600px;
    background-color: var(--bg-secondary);
    transition: background-color 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
  }
  
  .mindmap-container {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  
  .dark .mindmap-container {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  }
  
  .mindmap-toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.75rem;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s ease;
  }
  
  body:not(.dark) .mindmap-toolbar {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
  }
  
  .category-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.75rem;
    background-color: var(--bg-secondary);
    transition: background-color 0.3s ease;
  }
  
  .category-filter {
    border: none;
    border-radius: 0.25rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: opacity 0.2s;
    color: white;
  }
  
  .category-filter:not(.active) {
    opacity: 0.6;
  }
  
  .category-filter:hover:not(.active) {
    opacity: 0.8;
  }
  
  /* Kontextmenü */
  #context-menu {
    position: absolute;
    border-radius: 0.375rem;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  
  .dark #context-menu {
    background-color: #232837;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  body:not(.dark) #context-menu {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  #context-menu .menu-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .dark #context-menu .menu-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }
  
  body:not(.dark) #context-menu .menu-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }
  
  /* Zusätzliches Layout */
  .mindmap-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  @media (min-width: 1024px) {
    .mindmap-section {
      grid-template-columns: 2fr 1fr;
    }
  }
</style>
{% endblock %}

{% block content %}
<div class="container mx-auto px-4">
  <div class="mb-8">
    <h1 class="text-3xl font-bold mb-2 gradient-text">Interaktive Mindmap</h1>
    <p class="text-gray-500 dark:text-gray-400">Visualisieren und erkunden Sie Wissensnetze und Gedankenkonstrukte</p>
  </div>
  
  <div class="mindmap-section">
    <!-- Linke Spalte: Mindmap -->
    <div class="mindmap-container">
      <!-- Suchleiste -->
      <div class="mindmap-toolbar">
        <div class="flex-1">
          <input type="text" id="search-mindmap" 
                 class="w-full max-w-md px-3 py-2 rounded-lg"
                 x-bind:class="darkMode ? 'bg-gray-800 border border-gray-700 text-white' : 'bg-white border border-gray-300 text-gray-700'"
                 placeholder="In der Mindmap suchen...">
        </div>
        
        <button id="addNode" class="btn"
                x-bind:class="darkMode ? 'bg-primary-600 hover:bg-primary-700 text-white' : 'bg-primary-500 hover:bg-primary-600 text-white'">
          <i class="fa-solid fa-plus"></i>
          <span class="hidden sm:inline">Knoten hinzufügen</span>
        </button>
        
        <button id="addEdge" class="btn"
                x-bind:class="darkMode ? 'bg-primary-600 hover:bg-primary-700 text-white' : 'bg-primary-500 hover:bg-primary-600 text-white'">
          <i class="fa-solid fa-link"></i>
          <span class="hidden sm:inline">Verbindung</span>
        </button>
        
        <button id="reLayout" class="btn"
                x-bind:class="darkMode ? 'bg-gray-700 hover:bg-gray-600 text-white' : 'bg-gray-200 hover:bg-gray-300 text-gray-700'">
          <i class="fa-solid fa-compass-drafting"></i>
          <span class="hidden sm:inline">Anordnen</span>
        </button>
        
        <div class="relative" x-data="{ open: false }">
          <button @click="open = !open" class="btn"
                  x-bind:class="darkMode ? 'bg-gray-700 hover:bg-gray-600 text-white' : 'bg-gray-200 hover:bg-gray-300 text-gray-700'">
            <i class="fa-solid fa-ellipsis-vertical"></i>
          </button>
          
          <div x-show="open" @click.away="open = false"
               x-transition:enter="transition ease-out duration-200"
               x-transition:enter-start="opacity-0 scale-95"
               x-transition:enter-end="opacity-100 scale-100"
               x-transition:leave="transition ease-in duration-150"
               x-transition:leave-start="opacity-100 scale-100"
               x-transition:leave-end="opacity-0 scale-95"
               class="absolute right-0 mt-2 w-48 origin-top-right z-10 rounded-md shadow-lg"
               x-bind:class="darkMode ? 'bg-gray-800' : 'bg-white'">
            <div class="py-1">
              <button id="editNode" class="block w-full text-left px-4 py-2 text-sm hover:bg-gray-700"
                      x-bind:class="darkMode ? 'text-gray-300 hover:bg-gray-700' : 'text-gray-700 hover:bg-gray-100'">
                <i class="fa-solid fa-edit mr-2"></i>Knoten bearbeiten
              </button>
              <button id="deleteNode" class="block w-full text-left px-4 py-2 text-sm hover:bg-red-600/20"
                      x-bind:class="darkMode ? 'text-gray-300 hover:bg-red-600/20' : 'text-gray-700 hover:bg-red-100'">
                <i class="fa-solid fa-trash-alt mr-2"></i>Knoten löschen
              </button>
              <button id="deleteEdge" class="block w-full text-left px-4 py-2 text-sm hover:bg-red-600/20"
                      x-bind:class="darkMode ? 'text-gray-300 hover:bg-red-600/20' : 'text-gray-700 hover:bg-red-100'">
                <i class="fa-solid fa-unlink mr-2"></i>Verbindung löschen
              </button>
              <button id="exportMindmap" class="block w-full text-left px-4 py-2 text-sm"
                      x-bind:class="darkMode ? 'text-gray-300 hover:bg-gray-700' : 'text-gray-700 hover:bg-gray-100'">
                <i class="fa-solid fa-file-export mr-2"></i>Exportieren
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Kategoriefilter -->
      <div id="category-filters" class="category-filters"></div>
      
      <!-- Mindmap-Visualisierung -->
      <div id="cy"></div>
    </div>
    
    <!-- Rechte Spalte: Detail-Ansicht und Interaktionen -->
    <div class="space-y-6">
      <!-- Knoteninformationen -->
      <div class="card p-5"
           x-bind:class="darkMode ? 'bg-gray-800/80 border border-gray-700' : 'bg-white/90 border border-gray-200'">
        <h2 class="text-xl font-semibold mb-3"
            x-bind:class="darkMode ? 'text-white' : 'text-gray-800'">
          <i class="fa-solid fa-circle-info mr-2"></i>Information
        </h2>
        <div id="node-details">
          <p class="text-sm"
             x-bind:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
            Wählen Sie einen Knoten aus der Mindmap aus, um Details anzuzeigen.
          </p>
        </div>
      </div>
      
      <!-- Verbundene Gedanken -->
      <div class="card p-5"
           x-bind:class="darkMode ? 'bg-gray-800/80 border border-gray-700' : 'bg-white/90 border border-gray-200'">
        <div class="flex justify-between items-center mb-3">
          <h2 class="text-xl font-semibold"
              x-bind:class="darkMode ? 'text-white' : 'text-gray-800'">
            <i class="fa-solid fa-lightbulb mr-2"></i>Gedanken
          </h2>
          <button class="btn-sm"
                  x-bind:class="darkMode ? 'bg-primary-600 hover:bg-primary-700 text-white' : 'bg-primary-500 hover:bg-primary-600 text-white'">
            <i class="fa-solid fa-plus mr-1"></i>Neu
          </button>
        </div>
        <div id="thoughts-container">
          <p class="text-sm"
             x-bind:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
            Wählen Sie einen Knoten aus, um zugehörige Gedanken zu sehen.
          </p>
        </div>
      </div>
      
      <!-- Schnellhilfe -->
      <div class="card p-5"
           x-bind:class="darkMode ? 'bg-gray-800/80 border border-gray-700' : 'bg-white/90 border border-gray-200'">
        <h2 class="text-xl font-semibold mb-3"
            x-bind:class="darkMode ? 'text-white' : 'text-gray-800'">
          <i class="fa-solid fa-circle-question mr-2"></i>Schnellhilfe
        </h2>
        <ul class="text-sm space-y-2"
            x-bind:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
          <li><i class="fa-solid fa-mouse mr-2"></i>Klicken Sie auf einen Knoten, um ihn auszuwählen</li>
          <li><i class="fa-solid fa-arrows-up-down-left-right mr-2"></i>Ziehen Sie die Maus, um die Ansicht zu verschieben</li>
          <li><i class="fa-solid fa-magnifying-glass-plus mr-2"></i>Mausrad zum Zoomen</li>
          <li><i class="fa-solid fa-right-click mr-2"></i>Rechtsklick für Kontextmenü</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- Cytoscape.js für die Mindmap-Visualisierung -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js"></script>

<!-- Socket.IO für Echtzeitaktualisierungen -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
{% endblock %}

{% block scripts %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Verarbeite Dark-Mode-Umschaltungen für die Mindmap-Visualisierung
    document.addEventListener('darkModeToggled', function(event) {
      // Hier könnten wir das Mindmap-Styling basierend auf Dark/Light-Mode aktualisieren
      // z.B. Hintergrundfarben, Knotenfarben etc.
      console.log('Dark Mode für Mindmap aktualisiert:', event.detail.isDark);
    });
    
    // Weitere Mindmap-spezifische Initialisierung
    // Sollte mit dem vorhandenen mindmap.js-Modul funktionieren
  });
</script>
{% endblock %}