{% 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);
  }
  
  /* Info-Panel */
  .mindmap-info-panel {
    position: absolute;
    right: 1rem;
    top: 5rem;
    width: 280px;
    background-color: rgba(15, 23, 42, 0.85);
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 1rem;
    color: #f1f5f9;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 10;
    backdrop-filter: blur(4px);
  }
  
  .mindmap-info-panel.visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
  
  .info-panel-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .info-panel-description {
    font-size: 0.875rem;
    margin-bottom: 1rem;
    line-height: 1.5;
  }
  
  .node-navigation-title {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
  }
  
  .node-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .node-link {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s ease;
    color: white;
  }
  
  .node-link:hover {
    transform: translateY(-2px);
  }
  
  /* Mindmap-Toolbar-Buttons */
  .mindmap-action-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    border-radius: 0.25rem;
    background-color: rgba(124, 58, 237, 0.1);
    color: #8b5cf6;
    border: 1px solid rgba(124, 58, 237, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .dark .mindmap-action-btn {
    background-color: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.3);
  }
  
  .mindmap-action-btn:hover {
    background-color: rgba(124, 58, 237, 0.2);
  }
  
  /* 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 py-8">
  <div class="flex flex-col lg:flex-row gap-8">
    <!-- Hauptinhalt -->
    <div class="w-full lg:w-3/4">
      <!-- Mindmap-Titelbereich -->
      <div class="mb-6">
        <h1 class="text-3xl font-bold mb-2 mystical-glow"
            x-bind:class="darkMode ? 'text-white' : 'text-gray-800'">
          Wissenslandkarte
        </h1>
        <p class="opacity-80 text-lg"
           x-bind:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
          Visualisiere die Verbindungen zwischen Gedanken und Konzepten
        </p>
      </div>

      <!-- Mindmap-Container -->
      <div class="mindmap-container">
        <!-- Toolbar -->
        <div class="mindmap-toolbar">
          <button id="fit-btn" class="mindmap-action-btn">
            <i class="fa-solid fa-expand"></i>
            <span>Ansicht anpassen</span>
          </button>
          <button id="reset-btn" class="mindmap-action-btn">
            <i class="fa-solid fa-undo"></i>
            <span>Zurücksetzen</span>
          </button>
          <button id="toggle-labels-btn" class="mindmap-action-btn">
            <i class="fa-solid fa-tags"></i>
            <span>Labels ein/aus</span>
          </button>
        </div>

        <!-- Hauptvisualisierung -->
        <div id="cy"></div>

        <!-- Info-Panel -->
        <div id="node-info-panel" class="mindmap-info-panel">
          <h4 class="info-panel-title">Knoteninfo</h4>
          <p id="node-description" class="info-panel-description">Wählen Sie einen Knoten aus...</p>
          
          <div class="node-navigation">
            <h5 class="node-navigation-title">Verknüpfte Knoten</h5>
            <div id="connected-nodes" class="node-links">
              <!-- Wird dynamisch befüllt -->
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Seitenleiste -->
    <div class="w-full lg:w-1/4 space-y-6">
      <!-- Nutzlänge -->
      <div class="p-5 rounded-lg overflow-hidden border transition-colors duration-300"
           x-bind:class="darkMode ? 'bg-slate-800/40 border-slate-700/50' : 'bg-white border-slate-200'">
        <h3 class="text-xl font-semibold mb-3"
            x-bind:class="darkMode ? 'text-white' : 'text-gray-800'">
          <i class="fa-solid fa-circle-info text-purple-400 mr-2"></i>Über die Mindmap
        </h3>
        <div x-bind:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
          <p class="mb-2">Die interaktive Wissenslandkarte zeigt Verbindungen zwischen verschiedenen Gedanken und Konzepten.</p>
          <p class="mb-2">Sie können:</p>
          <ul class="list-disc pl-5 space-y-1 text-sm">
            <li>Knoten auswählen, um Details zu sehen</li>
            <li>Zoomen (Mausrad oder Pinch-Geste)</li>
            <li>Die Karte verschieben (Drag & Drop)</li>
            <li>Die Toolbar nutzen für weitere Aktionen</li>
          </ul>
        </div>
      </div>

      <!-- Kategorienlegende -->
      <div class="p-5 rounded-lg overflow-hidden border transition-colors duration-300"
           x-bind:class="darkMode ? 'bg-slate-800/40 border-slate-700/50' : 'bg-white border-slate-200'">
        <h3 class="text-xl font-semibold mb-3"
            x-bind:class="darkMode ? 'text-white' : 'text-gray-800'">
          <i class="fa-solid fa-palette text-purple-400 mr-2"></i>Kategorien
        </h3>
        <div id="category-legend" class="space-y-2 text-sm"
             x-bind:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
          <!-- Wird dynamisch befüllt -->
          <div class="flex items-center"><span class="w-3 h-3 rounded-full bg-purple-500 mr-2"></span> Philosophie</div>
          <div class="flex items-center"><span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span> Wissenschaft</div>
          <div class="flex items-center"><span class="w-3 h-3 rounded-full bg-orange-500 mr-2"></span> Technologie</div>
          <div class="flex items-center"><span class="w-3 h-3 rounded-full bg-pink-500 mr-2"></span> Künste</div>
          <div class="flex items-center"><span class="w-3 h-3 rounded-full bg-blue-500 mr-2"></span> Psychologie</div>
        </div>
      </div>

      <!-- Meine Mindmaps -->
      {% if current_user.is_authenticated %}
      <div class="p-5 rounded-lg overflow-hidden border transition-colors duration-300"
           x-bind:class="darkMode ? 'bg-slate-800/40 border-slate-700/50' : 'bg-white border-slate-200'">
        <h3 class="text-xl font-semibold mb-3"
            x-bind:class="darkMode ? 'text-white' : 'text-gray-800'">
          <i class="fa-solid fa-map text-purple-400 mr-2"></i>Meine Mindmaps
        </h3>
        <div class="mb-3">
          <a href="{{ url_for('create_mindmap') }}" class="w-full inline-block py-2 px-4 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-center text-sm font-medium transition-colors">
            <i class="fa-solid fa-plus mr-1"></i> Neue Mindmap erstellen
          </a>
        </div>
        
        <div class="space-y-2 max-h-60 overflow-y-auto"
             x-bind:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
          {% if user_mindmaps %}
            {% for mindmap in user_mindmaps %}
            <a href="{{ url_for('user_mindmap', mindmap_id=mindmap.id) }}" class="block p-2 hover:bg-purple-500/20 rounded-lg transition-colors">
              <div class="text-sm font-medium">{{ mindmap.name }}</div>
              <div class="text-xs opacity-70">{{ mindmap.nodes|length }} Knoten</div>
            </a>
            {% endfor %}
          {% else %}
            <p class="text-sm italic">Sie haben noch keine eigenen Mindmaps erstellt.</p>
          {% endif %}
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Cytoscape.js laden -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.24.0/cytoscape.min.js" integrity="sha512-Ck7jF/eLOvDZ9TpQtO5N0I45/yGNpFKQnHMKVXPQDmQKo4HnWWfGDV0JIeG+kqoGA0TOYCpPNnGQ1gusYv4PA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- Mindmap-Initialisierer laden -->
<script src="/static/js/mindmap-init.js"></script>

<script>
  // Sobald die Seite und die Scripte geladen sind, initialisiere die Mindmap
  document.addEventListener('DOMContentLoaded', function() {
    // Die Initialisierung wird jetzt direkt in mindmap-init.js ausgeführt
    console.log('Mindmap-Seite geladen');
  });
</script>
{% endblock %}