{% extends "base.html" %}

{% block title %}Meine Merkliste{% endblock %}

{% block extra_css %}
<style>
  /* Hintergrund über die gesamte Seite erstrecken */
  html, body {
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  
  .personal-mindmap-container {
    width: 100%;
    height: 400px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
  }
  
  .dark .personal-mindmap-container {
    background-color: rgba(255, 255, 255, 0.05);
  }
  
  .bookmark-item {
    transition: all 0.3s ease;
  }
  
  .bookmark-item:hover {
    transform: translateY(-3px);
  }
  
  .empty-state {
    padding: 2rem;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 1rem;
  }
  
  .dark .empty-state {
    background-color: rgba(255, 255, 255, 0.03);
  }
</style>
{% endblock %}

{% block content %}
<!-- Hauptbereich -->
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 pb-12">
  <!-- Header -->
  <div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
      <span class="gradient-text">Meine Merkliste</span>
    </h1>
    <p class="text-lg text-gray-700 dark:text-gray-300">
      Deine persönliche Sammlung gemerkter Wissensbereiche und Beiträge
    </p>
  </div>
  
  <!-- Persönliche Mindmap -->
  <div class="mb-12">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4 flex items-center">
      <i class="fas fa-project-diagram mr-3 text-purple-500"></i>
      Meine Mindmap
    </h2>
    
    <div id="personal-mindmap" class="personal-mindmap-container glass-morphism">
      <div id="empty-mindmap-message" class="absolute inset-0 flex items-center justify-center">
        <div class="text-center p-6">
          <div class="text-6xl mb-4 opacity-20">
            <i class="fas fa-bookmark"></i>
          </div>
          <h3 class="text-xl font-semibold mb-2 text-gray-700 dark:text-gray-300">Deine persönliche Mindmap ist leer</h3>
          <p class="text-gray-600 dark:text-gray-400 max-w-md mx-auto">
            Merke dir Wissensbereiche und Gedanken in der Hauptmindmap, um deine persönliche Mindmap zu erstellen.
          </p>
          <a href="{{ url_for('mindmap') }}" class="mt-4 inline-block px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors">
            Zur Mindmap
          </a>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Gemerkte Inhalte -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
    <!-- Wissensbereiche -->
    <div>
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4 flex items-center">
        <i class="fas fa-folder-open mr-3 text-blue-500"></i>
        Gemerkte Wissensbereiche
      </h2>
      
      <div id="bookmarked-areas-container" class="space-y-4">
        <!-- Ladezustand -->
        <div class="animate-pulse space-y-4">
          <div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
          <div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
          <div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
        </div>
      </div>
    </div>
    
    <!-- Gedanken -->
    <div>
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4 flex items-center">
        <i class="fas fa-lightbulb mr-3 text-amber-500"></i>
        Gemerkte Gedanken
      </h2>
      
      <div id="bookmarked-thoughts-container" class="space-y-4">
        <!-- Ladezustand -->
        <div class="animate-pulse space-y-4">
          <div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
          <div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
          <div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript für persönliche Mindmap -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Lade gespeicherte Bookmarks aus dem LocalStorage
    function loadBookmarkedNodes() {
      try {
        const bookmarked = localStorage.getItem('bookmarkedNodes');
        return bookmarked ? JSON.parse(bookmarked) : [];
      } catch (error) {
        console.error('Fehler beim Laden der gemerkten Knoten:', error);
        return [];
      }
    }
    
    const bookmarkedNodeIds = loadBookmarkedNodes();
    
    // Prüfe, ob es gemerkte Knoten gibt
    if (bookmarkedNodeIds && bookmarkedNodeIds.length > 0) {
      // Verstecke die Leer-Nachricht
      document.getElementById('empty-mindmap-message').style.display = 'none';
      
      // Initialisiere die persönliche Mindmap
      const personalMindmap = new MindMapVisualization('#personal-mindmap', {
        width: document.getElementById('personal-mindmap').clientWidth,
        height: 400,
        nodeRadius: 18,
        selectedNodeRadius: 22,
        linkDistance: 120,
        chargeStrength: -800,
        centerForce: 0.1,
        tooltipEnabled: true
      });
      
      // Lade Daten für die Mindmap - hier müssten wir normalerweise die API nutzen,
      // aber als Fallback laden wir die Standarddaten und filtern sie
      window.setTimeout(() => {
        // Wenn die Hauptmindmap geladen ist, können wir deren Daten verwenden
        if (window.mindmapInstance) {
          // Filtere nur gemerkte Knoten und ihre Verbindungen
          const nodes = window.mindmapInstance.nodes.filter(node => 
            bookmarkedNodeIds.includes(node.id)
          );
          
          // Finde Verbindungen zwischen den gemerkten Knoten
          const links = window.mindmapInstance.links.filter(link => 
            bookmarkedNodeIds.includes(link.source.id || link.source) && 
            bookmarkedNodeIds.includes(link.target.id || link.target)
          );
          
          // Setze Daten und aktualisiere die Visualisierung
          personalMindmap.nodes = nodes;
          personalMindmap.links = links;
          personalMindmap.isLoading = false;
          personalMindmap.updateVisualization();
        } else {
          // Fallback: Leere Mindmap anzeigen
          document.getElementById('empty-mindmap-message').style.display = 'flex';
        }
      }, 800);
      
      // Lade die gemerkten Inhalte
      loadBookmarkedContent(bookmarkedNodeIds);
    } else {
      // Zeige Leerzustand an
      const areasContainer = document.getElementById('bookmarked-areas-container');
      const thoughtsContainer = document.getElementById('bookmarked-thoughts-container');
      
      areasContainer.innerHTML = `
        <div class="empty-state">
          <div class="text-4xl mb-2 opacity-20">
            <i class="fas fa-folder-open"></i>
          </div>
          <p class="text-gray-600 dark:text-gray-400">Keine gemerkten Wissensbereiche</p>
        </div>
      `;
      
      thoughtsContainer.innerHTML = `
        <div class="empty-state">
          <div class="text-4xl mb-2 opacity-20">
            <i class="fas fa-lightbulb"></i>
          </div>
          <p class="text-gray-600 dark:text-gray-400">Keine gemerkten Gedanken</p>
        </div>
      `;
    }
  });
  
  // Funktion zum Laden der gemerkten Inhalte
  function loadBookmarkedContent(nodeIds) {
    if (!nodeIds || nodeIds.length === 0) return;
    
    // In einer vollständigen Implementierung würden wir hier einen API-Aufruf machen
    // Für diese Demo erstellen wir Beispielinhalte
    
    const areasContainer = document.getElementById('bookmarked-areas-container');
    const thoughtsContainer = document.getElementById('bookmarked-thoughts-container');
    
    // Verschiedene Beispiel-Farben
    const colors = ['purple', 'blue', 'green', 'indigo', 'amber'];
    
    // Leere die Container
    areasContainer.innerHTML = '';
    thoughtsContainer.innerHTML = '';
    
    // Beispielinhalte für Wissensbereiche
    const areaTemplates = [
      { name: 'Philosophie', description: 'Grundlagen philosophischen Denkens', count: 24 },
      { name: 'Wissenschaft', description: 'Wissenschaftliche Methoden und Erkenntnisse', count: 42 },
      { name: 'Technologie', description: 'Zukunftsweisende Technologien', count: 36 },
      { name: 'Kunst', description: 'Künstlerische Ausdrucksformen', count: 18 },
      { name: 'Psychologie', description: 'Menschliches Verhalten verstehen', count: 30 }
    ];
    
    // Beispielinhalte für Gedanken
    const thoughtTemplates = [
      { title: 'Quantenphysik und Bewusstsein', author: 'Maria Schmidt', date: '12.04.2023' },
      { title: 'Ethik in der künstlichen Intelligenz', author: 'Thomas Weber', date: '23.02.2023' },
      { title: 'Die Rolle der Kunst in der Gesellschaft', author: 'Lena Müller', date: '05.06.2023' },
      { title: 'Nachhaltige Entwicklung im 21. Jahrhundert', author: 'Michael Bauer', date: '18.08.2023' },
      { title: 'Kognitive Verzerrungen im Alltag', author: 'Sophie Klein', date: '30.09.2023' }
    ];
    
    // Zeige nur so viele Elemente wie wir Knoten haben (bis zu 5)
    const areaCount = Math.min(nodeIds.length, 5);
    
    if (areaCount > 0) {
      // Wissensbereiche hinzufügen
      for (let i = 0; i < areaCount; i++) {
        const area = areaTemplates[i];
        const colorClass = colors[i % colors.length];
        
        areasContainer.innerHTML += `
          <a href="{{ url_for('mindmap') }}" class="bookmark-item block p-4 rounded-xl bg-white/80 dark:bg-gray-800/80 shadow-sm hover:shadow-md transition-all">
            <div class="flex items-center">
              <div class="w-10 h-10 rounded-lg bg-${colorClass}-100 dark:bg-${colorClass}-900/30 flex items-center justify-center mr-3">
                <i class="fas fa-bookmark text-${colorClass}-500"></i>
              </div>
              <div class="flex-grow">
                <h3 class="font-semibold text-gray-900 dark:text-white">${area.name}</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">${area.description}</p>
              </div>
              <div class="text-xs text-gray-500 dark:text-gray-400">
                ${area.count} Einträge
              </div>
            </div>
          </a>
        `;
      }
    } else {
      areasContainer.innerHTML = `
        <div class="empty-state">
          <div class="text-4xl mb-2 opacity-20">
            <i class="fas fa-folder-open"></i>
          </div>
          <p class="text-gray-600 dark:text-gray-400">Keine gemerkten Wissensbereiche</p>
        </div>
      `;
    }
    
    // Zeige bis zu 5 Gedanken an (oder weniger, falls weniger gemerkt wurden)
    const thoughtCount = Math.min(nodeIds.length, 5);
    
    if (thoughtCount > 0) {
      // Gedanken hinzufügen
      for (let i = 0; i < thoughtCount; i++) {
        const thought = thoughtTemplates[i];
        const colorClass = colors[(i + 2) % colors.length]; // Andere Farben als für Bereiche
        
        thoughtsContainer.innerHTML += `
          <a href="{{ url_for('mindmap') }}" class="bookmark-item block p-4 rounded-xl bg-white/80 dark:bg-gray-800/80 shadow-sm hover:shadow-md transition-all">
            <div class="flex items-center">
              <div class="w-10 h-10 rounded-lg bg-${colorClass}-100 dark:bg-${colorClass}-900/30 flex items-center justify-center mr-3">
                <i class="fas fa-lightbulb text-${colorClass}-500"></i>
              </div>
              <div class="flex-grow">
                <h3 class="font-semibold text-gray-900 dark:text-white">${thought.title}</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">Von ${thought.author} • ${thought.date}</p>
              </div>
            </div>
          </a>
        `;
      }
    } else {
      thoughtsContainer.innerHTML = `
        <div class="empty-state">
          <div class="text-4xl mb-2 opacity-20">
            <i class="fas fa-lightbulb"></i>
          </div>
          <p class="text-gray-600 dark:text-gray-400">Keine gemerkten Gedanken</p>
        </div>
      `;
    }
  }
</script>
{% endblock %}