{% extends "base.html" %}

{% block title %}Wissensnetzwerk{% 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;
  }
  
  /* Entferne den Gradient-Hintergrund vollständig */
  .hero-gradient, .bg-fade {
    background: none !important;
    clip-path: none !important;
  }
  
  .tech-line {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(100, 100, 100, 0.1), transparent);
  }
  
  .tech-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: rgba(100, 100, 100, 0.2);
    position: absolute;
  }
  
  .dark .tech-line {
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
  }
  
  .dark .tech-dot {
    background-color: rgba(255, 255, 255, 0.3);
  }
  
  @keyframes pulse {
    0% { r: 10; opacity: 0.7; }
    50% { r: 12; opacity: 1; }
    100% { r: 10; opacity: 0.7; }
  }
  
  .animate-pulse {
    animation: pulse 3s ease-in-out infinite;
  }
  
  @keyframes iconPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }
  
  .icon-pulse {
    animation: iconPulse 3s ease-in-out infinite;
    display: inline-block;
  }
  
  /* Volle Seitenbreite für Container */
  #app-container, .container, main, .mx-auto, .py-12 {
    width: 100%;
  }
  
  /* Sicherstellen dass der Hintergrund die ganze Seite abdeckt */
  .full-page-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
  }
  
  /* Chat-Animationen */
  .typing-dots span {
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
  }
  
  /* Chat-Nachrichten-Animation */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 10px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  #embedded-chat-messages > div {
    animation: fadeInUp 0.3s ease-out forwards;
  }
  
  /* Sanftes Scrollen im Chat */
  #embedded-chat-messages {
    scroll-behavior: smooth;
  }
  
  /* Benutzerdefinierter Scrollbar für den Chat */
  #embedded-chat-messages::-webkit-scrollbar {
    width: 6px;
  }
  
  #embedded-chat-messages::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
  }
  
  #embedded-chat-messages::-webkit-scrollbar-thumb {
    background-color: rgba(139, 92, 246, 0.3);
    border-radius: 10px;
  }
  
  .dark #embedded-chat-messages::-webkit-scrollbar-thumb {
    background-color: rgba(139, 92, 246, 0.5);
  }
  
  /* Hover-Effekt für Quick-Query-Buttons */
  .quick-query-btn:hover {
    cursor: pointer;
    background: linear-gradient(to right, rgba(139, 92, 246, 0.1), rgba(96, 165, 250, 0.1));
  }
  
  .dark .quick-query-btn:hover {
    background: linear-gradient(to right, rgba(139, 92, 246, 0.2), rgba(96, 165, 250, 0.2));
  }
</style>
{% endblock %}

{% block content %}
<!-- Hintergrund für die gesamte Seite -->
<div class="full-page-bg gradient-background"></div>

<!-- Hero Section -->
<section class="relative pt-20 pb-32">
  <!-- Hero Content -->
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="text-center mb-16">
      <h1 class="hero-heading mb-8 text-gray-900 dark:text-white">
        <span class="gradient-text inline-block transform transition-all duration-700 hover:scale-105">Wissen</span> neu
        <div class="mt-2 relative">
          <span class="relative inline-block">vernetzen
            <div class="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-purple-500/0 via-purple-500/70 to-purple-500/0 rounded-full"></div>
          </span>
        </div>
      </h1>
      <p class="text-xl md:text-2xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto mb-12">
        Erkunde komplexe Ideen visuell, schaffe Verbindungen und teile deine Gedanken
        in einem interaktiven Wissensnetzwerk.
      </p>
      <div class="flex flex-col sm:flex-row gap-5 justify-center">
        <a href="{{ url_for('mindmap') }}" class="group transition-all duration-300 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-medium text-lg px-8 py-4 rounded-2xl shadow-lg hover:shadow-xl hover:shadow-purple-500/20 transform hover:-translate-y-1">
          <span class="flex items-center justify-center">
            <i class="fa-solid fa-diagram-project mr-3 text-purple-200 group-hover:text-white transition-all duration-300 animate-pulse"></i> 
            <span class="relative">
              Mindmap erkunden
              <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300"></span>
            </span>
          </span>
        </a>
        {% if not current_user.is_authenticated %}
        <a href="{{ url_for('register') }}" class="group transition-all duration-300 bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white font-medium text-lg px-8 py-4 rounded-2xl shadow-lg hover:shadow-xl hover:shadow-blue-500/20 transform hover:-translate-y-1">
          <span class="flex items-center justify-center">
            <i class="fa-solid fa-user-plus mr-3 text-blue-200 group-hover:text-white transition-all duration-300 icon-pulse"></i>
            <span class="relative">
              Konto erstellen
              <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300"></span>
            </span>
          </span>
        </a>
        {% endif %}
      </div>
    </div>
    
    <!-- Tech illustration -->
    <div class="relative w-full max-w-4xl mx-auto h-80 sm:h-96">
      <div class="absolute inset-0 flex items-center justify-center">
        <div class="hidden md:block text-center">
          <div class="text-3xl font-bold gradient-text mb-2 animate-float">Systades</div>
          <div class="text-lg text-gray-700 dark:text-gray-300">WISSEN VERNETZEN</div>
        </div>
        
        <!-- Network Visualization with SVG -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
          <!-- Glossy Nodes and Lines -->
          <defs>
            <radialGradient id="nodeGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
              <stop offset="0%" stop-color="rgba(139, 92, 246, 0.9)" />
              <stop offset="100%" stop-color="rgba(79, 70, 229, 0.5)" />
            </radialGradient>
            <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
              <feGaussianBlur stdDeviation="5" result="blur" />
              <feComposite in="SourceGraphic" in2="blur" operator="over" />
            </filter>
          </defs>
          
          <!-- Network Lines -->
          <g class="lines">
            <!-- Connection network -->
            <line x1="200" y1="250" x2="400" y2="150" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
            <line x1="400" y1="150" x2="600" y2="250" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
            <line x1="600" y1="250" x2="400" y2="350" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
            <line x1="400" y1="350" x2="200" y2="250" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
            <line x1="400" y1="150" x2="400" y2="350" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
            <line x1="200" y1="250" x2="600" y2="250" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
            
            <!-- Dark mode connections -->
            <line x1="200" y1="250" x2="400" y2="150" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
            <line x1="400" y1="150" x2="600" y2="250" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
            <line x1="600" y1="250" x2="400" y2="350" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
            <line x1="400" y1="350" x2="200" y2="250" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
            <line x1="400" y1="150" x2="400" y2="350" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
            <line x1="200" y1="250" x2="600" y2="250" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
            
            <!-- Pulse animation for some lines -->
            <line class="animate-pulse" x1="400" y1="150" x2="300" y2="200" stroke="rgba(139, 92, 246, 0.5)" stroke-width="2" />
            <line class="animate-pulse" x1="400" y1="350" x2="500" y2="300" stroke="rgba(168, 85, 247, 0.5)" stroke-width="2" />
          </g>
          
          <!-- Network Nodes -->
          <g class="nodes">
            <circle cx="400" cy="150" r="15" fill="url(#nodeGradient)" filter="url(#glow)" class="animate-pulse float-animation" />
            <circle cx="200" cy="250" r="10" fill="url(#nodeGradient)" class="float-animation" />
            <circle cx="600" cy="250" r="10" fill="url(#nodeGradient)" class="float-animation" />
            <circle cx="400" cy="350" r="15" fill="url(#nodeGradient)" filter="url(#glow)" class="animate-pulse float-animation" />
            <circle cx="300" cy="200" r="8" fill="url(#nodeGradient)" class="float-animation" />
            <circle cx="500" cy="300" r="8" fill="url(#nodeGradient)" class="float-animation" />
          </g>
        </svg>
      </div>
    </div>
  </div>
</section>

<!-- Features Section -->
<section class="py-20 relative">
  <div class="tech-line absolute top-0 left-1/2 transform -translate-x-1/2 w-1/3"></div>
  
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <h2 class="section-heading mb-4 text-gray-900 dark:text-white">Was ist <span class="gradient-text">Systades?</span></h2>
      <p class="text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
        Ein modernes Werkzeug zum Visualisieren, Erforschen und Teilen von Wissen
        in einer intuitiven, interaktiven Umgebung.
      </p>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Feature Card 1 -->
      <div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
        <div class="icon mb-6 rounded-2xl shadow-lg">
          <i class="fa-solid fa-brain"></i>
        </div>
        <h3 class="text-xl font-semibold mb-3">Visualisiere Wissen</h3>
        <p>
          Sieh Wissen als vernetztes System, entdecke Zusammenhänge und erkenne überraschende
          Verbindungen zwischen verschiedenen Themengebieten.
        </p>
      </div>
      
      <!-- Feature Card 2 -->
      <div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
        <div class="icon mb-6 rounded-2xl shadow-lg">
          <i class="fa-solid fa-lightbulb"></i>
        </div>
        <h3 class="text-xl font-semibold mb-3">Teile Gedanken</h3>
        <p>
          Füge deine eigenen Ideen und Perspektiven hinzu. Erstelle Verbindungen zu
          vorhandenen Gedanken und bereichere die wachsende Wissensbasis.
        </p>
      </div>
      
      <!-- Feature Card 3 -->
      <div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
        <div class="icon mb-6 rounded-2xl shadow-lg">
          <i class="fa-solid fa-users"></i>
        </div>
        <h3 class="text-xl font-semibold mb-3">Community</h3>
        <p>
          Sei Teil einer Gemeinschaft, die gemeinsam ein verteiltes Wissensarchiv aufbaut
          und sich in thematisch fokussierten Bereichen austauscht.
        </p>
      </div>
      
      <!-- Feature Card 4 -->
      <div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
        <div class="icon mb-6 rounded-2xl shadow-lg">
          <i class="fa-solid fa-robot"></i>
        </div>
        <h3 class="text-xl font-semibold mb-3">KI-Assistenz</h3>
        <p>
          Lass dir von künstlicher Intelligenz helfen, neue Zusammenhänge zu entdecken,
          Inhalte zusammenzufassen und Fragen zu beantworten.
        </p>
      </div>
      
      <!-- Feature Card 5 -->
      <div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
        <div class="icon mb-6 rounded-2xl shadow-lg">
          <i class="fa-solid fa-search"></i>
        </div>
        <h3 class="text-xl font-semibold mb-3">Intelligente Suche</h3>
        <p>
          Finde genau die Informationen, die du suchst, mit fortschrittlichen Such- und
          Filterfunktionen für eine präzise Navigation durch das Wissen.
        </p>
      </div>
      
      <!-- Feature Card 6 -->
      <div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
        <div class="icon mb-6 rounded-2xl shadow-lg">
          <i class="fa-solid fa-route"></i>
        </div>
        <h3 class="text-xl font-semibold mb-3">Geführte Pfade</h3>
        <p>
          Folge kuratierten Lernpfaden durch komplexe Themen oder erschaffe selbst
          Routen für andere, die deinen Gedankengängen folgen möchten.
        </p>
      </div>
    </div>
  </div>
</section>

<!-- Call to Action Section -->
<section class="py-16 sm:py-20 md:py-24 relative overflow-hidden">
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="glass-effect p-6 sm:p-8 md:p-12 rounded-3xl transform transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl bg-gradient-to-br from-purple-500/15 to-blue-500/15 backdrop-blur-xl border border-white/10 shadow-lg">
      <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
        <div class="md:w-2/3">
          <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-3 text-gray-900 dark:text-white leading-tight">
            Bereit, <span class="gradient-text bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-blue-500">Wissen</span> neu zu entdecken?
          </h2>
          <p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg mb-6 md:mb-0 max-w-2xl">
            Starte jetzt deine Reise durch das Wissensnetzwerk und erschließe neue Perspektiven.
          </p>
        </div>
        <div class="md:w-1/3 text-center md:text-right">
          <a href="{{ url_for('mindmap') }}" class="inline-flex items-center justify-center w-full md:w-auto btn-primary font-bold py-3 sm:py-3.5 px-6 sm:px-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 bg-gradient-to-r from-purple-600 to-blue-600 text-white">
            <span class="flex items-center justify-center">
              <i class="fa-solid fa-arrow-right mr-2"></i>
              <span>Zur Mindmap</span>
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Quick Access Section -->
<section class="py-16 sm:py-20">
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
      <!-- Themen-Übersicht -->
      <div class="glass-morphism p-6 sm:p-8 rounded-3xl transition-all duration-500 hover:-translate-y-3 hover:shadow-xl border border-white/10 backdrop-blur-md">
        <h3 class="text-xl font-bold mb-4 flex items-center text-gray-800 dark:text-white">
          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-2xl bg-gradient-to-r from-violet-500 to-fuchsia-500 flex items-center justify-center mr-3 sm:mr-4 shadow-md transform transition-transform duration-300 hover:scale-110">
            <i class="fa-solid fa-fire text-white text-base sm:text-lg"></i>
          </div>
          <span class="text-lg sm:text-xl md:text-2xl">Themen-Übersicht</span>
        </h3>
        <div class="space-y-3 sm:space-y-4 mb-6">
          <a href="{{ url_for('mindmap') }}" class="flex items-center p-3 sm:p-3.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 transition-all duration-200 group">
            <div class="w-3 h-3 rounded-full bg-purple-400 mr-3 group-hover:scale-125 transition-transform"></div>
            <div class="flex-grow">
              <p class="font-medium text-gray-800 dark:text-gray-200">Wissensbereiche <span class="text-xs text-gray-500">(12)</span></p>
              <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Überblick über Themenbereiche</p>
            </div>
            <i class="fa-solid fa-chevron-right text-gray-500 group-hover:translate-x-1 transition-transform"></i>
          </a>
          <a href="{{ url_for('search_thoughts_page') }}" class="flex items-center p-3 sm:p-3.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 transition-all duration-200 group">
            <div class="w-3 h-3 rounded-full bg-blue-400 mr-3 group-hover:scale-125 transition-transform"></div>
            <div class="flex-grow">
              <p class="font-medium text-gray-800 dark:text-gray-200">Gedanken <span class="text-xs text-gray-500">(87)</span></p>
              <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Konkrete Einträge durchsuchen</p>
            </div>
            <i class="fa-solid fa-chevron-right text-gray-500 group-hover:translate-x-1 transition-transform"></i>
          </a>
          <a href="#" class="flex items-center p-3 sm:p-3.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 transition-all duration-200 group">
            <div class="w-3 h-3 rounded-full bg-green-400 mr-3 group-hover:scale-125 transition-transform"></div>
            <div class="flex-grow">
              <p class="font-medium text-gray-800 dark:text-gray-200">Verbindungen <span class="text-xs text-gray-500">(34)</span></p>
              <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Beziehungen zwischen Gedanken</p>
            </div>
            <i class="fa-solid fa-chevron-right text-gray-500 group-hover:translate-x-1 transition-transform"></i>
          </a>
        </div>
        <a href="{{ url_for('search_thoughts_page') }}" class="btn-primary w-full text-center rounded-xl py-3 sm:py-3.5 transform transition-all duration-300 hover:-translate-y-1 hover:shadow-lg flex items-center justify-center">
          <span>Alle Themen entdecken</span>
          <i class="fa-solid fa-arrow-right ml-2"></i>
        </a>
      </div>
      
      <!-- KI-Assistent mit eingebettetem Chat -->
      <div class="glass-morphism p-6 sm:p-8 rounded-3xl transition-all duration-500 hover:-translate-y-1 hover:shadow-xl backdrop-blur-md border border-white/10">
        <h3 class="text-xl md:text-2xl font-bold mb-4 flex flex-wrap sm:flex-nowrap items-center text-gray-800 dark:text-white">
          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-2xl bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center mr-3 sm:mr-4 shadow-lg transform transition-transform duration-300 hover:scale-110">
            <i class="fa-solid fa-robot text-white text-base sm:text-lg"></i>
          </div>
          <span class="mt-1 sm:mt-0">KI-Assistent</span>
        </h3>
        
        <!-- Eingebettetes Chat-Interface -->
        <div id="embedded-assistant" class="rounded-xl border border-gray-200/50 dark:border-gray-700/50 overflow-hidden flex flex-col h-[300px]">
          <!-- Chat Verlauf -->
          <div id="embedded-chat-messages" class="flex-grow p-4 overflow-y-auto space-y-3 bg-white/70 dark:bg-gray-800/70">
            <!-- Begrüßungsnachricht -->
            <div class="flex items-start space-x-2">
              <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center flex-shrink-0">
                <i class="fa-solid fa-robot text-white text-xs"></i>
              </div>
              <div class="max-w-[85%] bg-purple-100 dark:bg-gray-700 p-3 rounded-xl rounded-tl-none shadow-sm">
                <p class="text-sm text-gray-700 dark:text-gray-200">Hallo! Ich bin dein KI-Assistent. Wie kann ich dir helfen?</p>
              </div>
            </div>
          </div>
          
          <!-- Chat Eingabe -->
          <div class="p-3 border-t border-gray-200/70 dark:border-gray-700/70 bg-gray-50/90 dark:bg-gray-800/90">
            <form id="embedded-chat-form" class="flex items-center space-x-2">
              <input type="text" id="embedded-chat-input" 
                     placeholder="Stelle eine Frage..." 
                     class="flex-grow px-4 py-2 rounded-xl border bg-white/90 dark:bg-gray-700/90 border-gray-300 dark:border-gray-600 shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500 text-gray-700 dark:text-gray-200">
              <button type="submit" 
                      class="p-2 rounded-xl bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5">
                <i class="fa-solid fa-paper-plane"></i>
              </button>
            </form>
          </div>
        </div>
        
        <!-- Schnelllinks unter dem Chat -->
        <div class="mt-4 flex flex-wrap gap-2">
          <button class="quick-query-btn px-2 sm:px-3 py-1 sm:py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800/70 dark:hover:bg-gray-700/80 rounded-lg sm:rounded-xl text-xs text-gray-700 dark:text-gray-300 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow">
            Was ist Systades?
          </button>
          <button class="quick-query-btn px-2 sm:px-3 py-1 sm:py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800/70 dark:hover:bg-gray-700/80 rounded-lg sm:rounded-xl text-xs text-gray-700 dark:text-gray-300 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow">
            Wie erstelle ich eine Mindmap?
          </button>
          <button class="quick-query-btn px-2 sm:px-3 py-1 sm:py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800/70 dark:hover:bg-gray-700/80 rounded-lg sm:rounded-xl text-xs text-gray-700 dark:text-gray-300 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow">
            Zeige neueste Gedanken
          </button>
        </div>
        
        <!-- Vollständigen KI-Chat öffnen -->
        <button onclick="window.MindMap.assistant.toggleAssistant(true)" class="mt-4 btn-primary w-full text-center rounded-xl py-2 sm:py-2.5 shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 flex items-center justify-center">
          <i class="fa-solid fa-expand mr-2"></i>
          <span>Chat in Vollansicht öffnen</span>
        </button>
      </div>
    </div>
  </div>
</section>

{% endblock %}

<!-- JavaScript für eingebetteten Chat -->
{% block scripts %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Warten bis MindMap und der Assistent initialisiert sind
    const waitForAssistant = setInterval(() => {
      if (window.MindMap && window.MindMap.assistant) {
        clearInterval(waitForAssistant);
        initEmbeddedChat();
      }
    }, 200);
    
    function initEmbeddedChat() {
      const chatForm = document.getElementById('embedded-chat-form');
      const chatInput = document.getElementById('embedded-chat-input');
      const messagesContainer = document.getElementById('embedded-chat-messages');
      const quickQueryBtns = document.querySelectorAll('.quick-query-btn');
      
      // Event-Listener für das Chat-Formular
      chatForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const userMessage = chatInput.value.trim();
        if (!userMessage) return;
        
        // Nachricht des Benutzers anzeigen
        appendMessage('user', userMessage);
        chatInput.value = '';
        
        // Anzeigen, dass der Assistent antwortet
        const typingIndicator = appendTypingIndicator();
        
        // API-Anfrage an den Assistenten senden
        sendToAssistant(userMessage)
          .then(response => {
            // Entferne Tipp-Indikator
            typingIndicator.remove();
            // Zeige Antwort des Assistenten an
            appendMessage('assistant', response);
          })
          .catch(error => {
            typingIndicator.remove();
            appendMessage('assistant', 'Es tut mir leid, ich konnte deine Nachricht nicht verarbeiten. Bitte versuche es später noch einmal.');
            console.error('Fehler bei der Kommunikation mit dem Assistenten:', error);
          });
      });
      
      // Schnellabfragen-Buttons
      quickQueryBtns.forEach(btn => {
        btn.addEventListener('click', function() {
          const query = this.textContent.trim();
          chatInput.value = query;
          chatForm.dispatchEvent(new Event('submit'));
        });
      });
      
      // Funktion zum Hinzufügen einer Nachricht zum Chat
      function appendMessage(sender, message) {
        const messageElement = document.createElement('div');
        messageElement.className = 'flex items-start space-x-2';
        
        if (sender === 'user') {
          messageElement.innerHTML = `
            <div class="flex-grow"></div>
            <div class="max-w-[85%] bg-blue-100 dark:bg-blue-900/40 p-3 rounded-xl rounded-tr-none shadow-sm">
              <p class="text-sm text-gray-700 dark:text-gray-200">${message}</p>
            </div>
            <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-indigo-500 flex items-center justify-center flex-shrink-0">
              <i class="fa-solid fa-user text-white text-xs"></i>
            </div>
          `;
        } else {
          messageElement.innerHTML = `
            <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center flex-shrink-0">
              <i class="fa-solid fa-robot text-white text-xs"></i>
            </div>
            <div class="max-w-[85%] bg-purple-100 dark:bg-gray-700 p-3 rounded-xl rounded-tl-none shadow-sm">
              <p class="text-sm text-gray-700 dark:text-gray-200">${message}</p>
            </div>
          `;
        }
        
        messagesContainer.appendChild(messageElement);
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
      }
      
      // Tipp-Indikator für "Assistent schreibt..."
      function appendTypingIndicator() {
        const indicatorElement = document.createElement('div');
        indicatorElement.className = 'flex items-start space-x-2 typing-indicator';
        indicatorElement.innerHTML = `
          <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center flex-shrink-0">
            <i class="fa-solid fa-robot text-white text-xs"></i>
          </div>
          <div class="max-w-[85%] bg-purple-100 dark:bg-gray-700 p-3 rounded-xl rounded-tl-none shadow-sm">
            <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center">
              <span class="mr-1">Tipp</span>
              <span class="typing-dots flex space-x-1">
                <span class="w-1.5 h-1.5 bg-gray-500 dark:bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0ms;"></span>
                <span class="w-1.5 h-1.5 bg-gray-500 dark:bg-gray-400 rounded-full animate-bounce" style="animation-delay: 150ms;"></span>
                <span class="w-1.5 h-1.5 bg-gray-500 dark:bg-gray-400 rounded-full animate-bounce" style="animation-delay: 300ms;"></span>
              </span>
            </p>
          </div>
        `;
        messagesContainer.appendChild(indicatorElement);
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
        return indicatorElement;
      }
      
      // Sende Nachricht an den Assistenten und erhalte Antwort
      async function sendToAssistant(message) {
        try {
          const response = await fetch('/api/assistant', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              messages: [
                { role: "system", content: "Du bist ein hilfreicher Assistent für das Wissensnetzwerk Systades." },
                { role: "user", content: message }
              ]
            })
          });
          
          const data = await response.json();
          if (!response.ok) {
            throw new Error(data.error || 'Unbekannter Fehler');
          }
          
          return data.response || data.answer || 'Ich habe keine Antwort erhalten.';
        } catch (error) {
          console.error('Fehler bei der API-Anfrage:', error);
          throw error;
        }
      }
    }
  });
</script>
{% endblock %}