---
// src/components/AIQueryInterface.astro

import { getToolsData } from '../utils/dataService.js';

const data = await getToolsData();
const tools = data.tools;
const phases = data.phases;
const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
---

<section id="ai-interface" class="ai-interface hidden">
  <div class="ai-query-section">
    <div class="content-center-lg">
      <h2 class="mb-4 text-primary">
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-3 align-middle">
          <path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
          <path d="M9 11V7a3 3 0 0 1 6 0v4"/>
        </svg>
        Forensic AI
      </h2>
      <p id="ai-description" class="text-muted mx-auto leading-relaxed max-w-lg">
        Beschreiben Sie Ihr forensisches Szenario und erhalten Sie maßgeschneiderte Workflow-Empfehlungen 
        basierend auf bewährten DFIR-Workflows und der verfügbaren Software-Datenbank.
      </p>
    </div>

    <div class="ai-input-container mx-auto max-w-6xl">
      <!-- Mode Toggle -->
      <div class="ai-mode-toggle">
        <span id="workflow-label" class="toggle-label active">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2 align-middle">
            <polyline points="9,11 12,14 22,4"/>
            <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
          </svg>
          Workflow-Empfehlung
        </span>
        
        <div class="toggle-switch">
          <div class="toggle-slider"></div>
        </div>
        
        <span id="tool-label" class="toggle-label">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2 align-middle">
            <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
          </svg>
          Spezifische Software oder Methode
        </span>
      </div>

      <!-- Input Layout -->
      <div class="ai-input-layout">
        <div class="ai-textarea-section">
          <textarea 
            id="ai-query-input" 
            placeholder="Beschreiben Sie Ihr forensisches Szenario..."
            maxlength="2000"
          ></textarea>
          <div id="ai-char-counter" class="text-xs text-secondary text-right mt-1">0/2000</div>
        </div>
        
        <div class="ai-suggestions-section">
          <div id="smart-prompting-hint" class="smart-prompting-hint">
            <div class="hint-card">
              <div class="hint-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2">
                  <circle cx="12" cy="12" r="10"/>
                  <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
                  <line x1="12" y1="17" x2="12.01" y2="17"/>
                </svg>
              </div>
              <div class="hint-content">
                <h4 class="hint-title">Intelligente Hilfe</h4>
                <p class="hint-description">
                  Während Sie tippen, analysiert die KI Ihre Eingabe und schlägt gezielten Fragen vor.
                </p>
                <div class="hint-trigger">
                  <span class="hint-label">Aktiviert ab:</span>
                  <span class="hint-value">40+ Zeichen</span>
                </div>
              </div>
            </div>
          </div>

          <div id="smart-prompting-container" class="smart-prompting-container hidden">
            <div class="prompting-card">
              <div id="prompting-status" class="prompting-status">
                <div class="status-icon">💡</div>
                <span class="status-text">Analysiere Eingabe...</span>
                <div id="prompting-spinner" class="prompting-spinner hidden">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2">
                    <path d="M21 12a9 9 0 11-6.219-8.56"/>
                  </svg>
                </div>
              </div>
              
              <div id="suggested-questions" class="suggested-questions hidden">
                <div class="suggestions-header">
                  <span class="suggestions-label">Zur besseren Analyse:</span>
                </div>
                <div id="questions-list" class="questions-list"></div>
                <button id="dismiss-suggestions" class="dismiss-button">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="18" y1="6" x2="6" y2="18"/>
                    <line x1="6" y1="6" x2="18" y2="18"/>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Privacy Notice -->
      <div class="mt-2 mb-4">
        <p class="text-xs text-secondary text-center leading-normal">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-1 align-middle">
            <circle cx="12" cy="12" r="10"/>
            <line x1="12" y1="8" x2="12" y2="12"/>
            <line x1="12" y1="16" x2="12.01" y2="16"/>
          </svg>
          Ihre Anfrage wird über die API von mistral.ai übertragen.
          <a href="https://mistral.ai/privacy-policy/" target="_blank" rel="noopener noreferrer" class="text-primary">Datenschutzrichtlinien</a>
        </p>
      </div>

      <div class="ai-restore-section">
        <div class="flex items-center justify-center gap-4 p-3 bg-secondary border rounded-lg">
          <div class="flex items-center gap-2 text-secondary text-sm">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
              <polyline points="17 8 12 3 7 8"/>
              <line x1="12" y1="3" x2="12" y2="15"/>
            </svg>
            Vorherige Analyse wiederherstellen:
          </div>
          
          <label for="upload-previous-analysis" class="btn btn-secondary btn-sm">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
              <polyline points="14 2 14 8 20 8"/>
              <path d="M16 13H8"/>
              <path d="M16 17H8"/>
              <path d="M10 9H8"/>
            </svg>
            JSON-Datei hochladen
            <input type="file" id="upload-previous-analysis" accept=".json" class="hidden" />
          </label>
        </div>
        
        <div class="mt-2 text-xs text-secondary text-center">
          Laden Sie eine zuvor heruntergeladene Analyse-Datei, um Ergebnisse und Audit-Trail anzuzeigen
        </div>
      </div>
      
      <!-- Submit Button -->
      <div class="flex justify-center gap-4 mt-4">
        <button id="ai-submit-btn" class="btn btn-accent btn-lg">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2">
            <path d="M14.828 14.828a4 4 0 0 1-5.656 0"/>
            <path d="M9 9a3 3 0 1 1 6 0c0 .749-.269 1.433-.73 1.96L11 14v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1l-3.27-3.04A3 3 0 0 1 5 9a3 3 0 0 1 6 0"/>
          </svg>
          <span id="submit-btn-text">Empfehlungen generieren</span>
        </button>
      </div>

    <!-- Loading State -->
    <div id="ai-loading" class="ai-loading hidden">
      <div class="text-center p-8">
        <div class="mb-4">
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" stroke-width="2" class="ai-pulse-icon">
            <path d="M14.828 14.828a4 4 0 0 1-5.656 0"/>
            <path d="M9 9a3 3 0 1 1 6 0c0 .749-.269 1.433-.73 1.96L11 14v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1l-3.27-3.04A3 3 0 0 1 5 9a3 3 0 0 1 6 0"/>
          </svg>
        </div>
        <p id="loading-text" class="text-secondary">Analysiere Szenario und generiere Empfehlungen...</p>
        
        <!-- Queue Status -->
        <div id="queue-status" class="queue-status-card hidden">
          <div class="queue-header">
            <div class="queue-position-display">
              <div id="queue-position-badge" class="position-badge">1</div>
              <span class="position-label">Position in Warteschlange</span>
            </div>
          </div>
          
          <div class="queue-details">
            <div class="queue-stat">
              <span class="stat-label">Warteschlange:</span>
              <span id="queue-length" class="stat-value">0</span>
            </div>
            <div class="queue-stat">
              <span class="stat-label">Geschätzte Zeit:</span>
              <span id="estimated-time" class="stat-value">--</span>
            </div>
          </div>
          
          <!-- Micro-task Progress -->
          <div id="micro-task-progress" class="micro-task-progress hidden">
            <div class="micro-task-header">
              <span class="micro-task-label">🔬 micro-Agent-Analysis</span>
              <span id="micro-task-counter" class="micro-task-counter">1/6</span>
            </div>
            <div class="micro-task-steps">
              <div class="micro-step" data-step="scenario">📋 Problemanalyse</div>
              <div class="micro-step" data-step="approach">🎯 Ermittlungsansatz</div>
              <div class="micro-step" data-step="considerations">⚠️ Herausforderungen</div>
              <div class="micro-step" data-step="tools">🔧 Methoden</div>
              <div class="micro-step" data-step="knowledge">📚 Evaluation</div>
              <div class="micro-step" data-step="final">✅ Audit-Trail</div>
            </div>
          </div>
          
          <div class="queue-progress-container">
            <div class="queue-progress-track">
              <div id="queue-progress" class="queue-progress-fill"></div>
            </div>
            <div class="task-id-display">
              <span class="task-label">Task:</span>
              <code id="current-task-id" class="task-id">--</code>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Error State -->
    <div id="ai-error" class="ai-error hidden">
      <div class="text-center p-8">
        <div class="bg-error text-white p-4 rounded-lg max-w-6xl mx-auto">
          <h3 class="mb-2">Fehler bei der KI-Anfrage</h3>
          <p id="ai-error-message" class="mb-0">Ein unerwarteter Fehler ist aufgetreten.</p>
        </div>
      </div>
    </div>

    <!-- Results -->
    <div id="ai-results" class="ai-results hidden">     
      <div id="audit-trail-container"></div>
    </div>
  </div>
</section>

<script type="module" define:vars={{ tools, phases, domainAgnosticSoftware }}>

function showElement(element) {
  if (element) {
    element.style.display = 'block';
    element.classList.remove('hidden');
  }
}

function hideElement(element) {
  if (element) {
    element.style.display = 'none';
    element.classList.add('hidden');
  }
}

function sanitizeText(text) {
  if (typeof text !== 'string') return '';
  
  return text
    .replace(/^#{1,6}\s+/gm, '')
    .replace(/^\s*[-*+]\s+/gm, '')
    .replace(/^\s*\d+\.\s+/gm, '')
    .replace(/\*\*(.+?)\*\*/g, '$1')
    .replace(/\*(.+?)\*/g, '$1')
    .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
    .replace(/```[\s\S]*?```/g, '[CODE BLOCK]')
    .replace(/`([^`]+)`/g, '$1')
    .replace(/<[^>]+>/g, '')
    .replace(/\n\s*\n\s*\n/g, '\n\n')
    .trim();
}

function escapeHtml(text) {
  if (typeof text !== 'string') return String(text);
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

function truncateText(text, maxLength) {
  if (!text || text.length <= maxLength) return text;
  return text.slice(0, maxLength) + '...';
}

function formatDuration(ms) {
  if (ms < 1000) return '< 1s';
  if (ms < 60000) return `${Math.ceil(ms / 1000)}s`;
  const minutes = Math.floor(ms / 60000);
  const seconds = Math.ceil((ms % 60000) / 1000);
  return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
}

function getConfidenceColor(confidence) {
  if (confidence >= 80) return 'var(--color-accent)';
  if (confidence >= 60) return 'var(--color-warning)';
  return 'var(--color-error)';
}

function isToolHosted(tool) {
  return tool.projectUrl !== undefined && 
         tool.projectUrl !== null && 
         tool.projectUrl !== "" && 
         tool.projectUrl.trim() !== "";
}

function summarizeData(data) {
  if (data === null || data === undefined) return 'null';
  if (typeof data === 'string') {
    return data.length > 100 ? data.slice(0, 100) + '...' : data;
  }
  if (typeof data === 'number' || typeof data === 'boolean') {
    return data.toString();
  }
  if (Array.isArray(data)) {
    if (data.length === 0) return '[]';
    if (data.length <= 3) return JSON.stringify(data);
    return `[${data.slice(0, 3).map(i => typeof i === 'string' ? i : JSON.stringify(i)).join(', ')}, ...+${data.length - 3}]`;
  }
  if (typeof data === 'object') {
    const keys = Object.keys(data);
    if (keys.length === 0) return '{}';
    if (keys.length <= 3) {
      return '{' + keys.map(k => `${k}: ${typeof data[k] === 'string' ? data[k].slice(0, 20) + (data[k].length > 20 ? '...' : '') : JSON.stringify(data[k])}`).join(', ') + '}';
    }
    return `{${keys.slice(0, 3).join(', ')}, ...+${keys.length - 3} keys}`;
  }
  return String(data);
}

const Utils = {
  phaseConfig: {
    'initialization': { icon: '🚀', displayName: 'Initialisierung' },
    'retrieval': { icon: '🔍', displayName: 'Datensuche' },
    'selection': { icon: '🎯', displayName: 'Tool-Auswahl' },
    'micro-task': { icon: '⚡', displayName: 'Detail-Analyse' },
    'validation': { icon: '✓', displayName: 'Validierung' },
    'completion': { icon: '✅', displayName: 'Finalisierung' }
  },

  actionTranslations: {
    'pipeline-start': 'Analyse gestartet',
    'embeddings-search': 'Ähnliche Tools gesucht', 
    'ai-tool-selection': 'Tools automatisch ausgewählt',
    'ai-analysis': 'KI-Analyse durchgeführt',
    'phase-tool-selection': 'Phasen-Tools evaluiert',
    'tool-evaluation': 'Tool-Bewertung erstellt',
    'background-knowledge-selection': 'Hintergrundwissen ausgewählt',
    'confidence-scoring': 'Vertrauenswertung berechnet',
    'pipeline-end': 'Analyse abgeschlossen'
  },

  getActionDisplayName(action) {
    return this.actionTranslations[action] || action;
  }
};

class AIQueryInterface {
  constructor() {
    this.currentMode = 'workflow';
    this.currentRecommendation = null;
    this.enhancementTimeout = null;
    this.enhancementAbortController = null;
    this.statusInterval = null;
    this.microTaskInterval = null;
    this.currentMicroTaskStep = 0;
    this.lastApiResponse = null;
    
    console.log('[AI Interface] Initializing...');
    this.initializeElements();
    this.setupEventListeners();
    this.setupUnifiedUploadSystem();
    this.updateModeUI();
    console.log('[AI Interface] Initialized successfully');
  }

  initializeElements() {
    this.elements = {
      input: document.getElementById('ai-query-input'),
      submitBtn: document.getElementById('ai-submit-btn'),
      submitBtnText: document.getElementById('submit-btn-text'),
      description: document.getElementById('ai-description'),
      loading: document.getElementById('ai-loading'),
      loadingText: document.getElementById('loading-text'),
      error: document.getElementById('ai-error'),
      errorMessage: document.getElementById('ai-error-message'),
      results: document.getElementById('ai-results'),
      charCounter: document.getElementById('ai-char-counter'),
      
      toggleSwitch: document.querySelector('.toggle-switch'),
      toggleSlider: document.querySelector('.toggle-slider'),
      workflowLabel: document.getElementById('workflow-label'),
      toolLabel: document.getElementById('tool-label'),
      
      promptingContainer: document.getElementById('smart-prompting-container'),
      promptingStatus: document.getElementById('prompting-status'),
      promptingSpinner: document.getElementById('prompting-spinner'),
      suggestedQuestions: document.getElementById('suggested-questions'),
      questionsList: document.getElementById('questions-list'),
      dismissSuggestions: document.getElementById('dismiss-suggestions'),
      smartHint: document.getElementById('smart-prompting-hint'),
      
      queueStatus: document.getElementById('queue-status'),
      queueLength: document.getElementById('queue-length'),
      estimatedTime: document.getElementById('estimated-time'),
      positionBadge: document.getElementById('queue-position-badge'),
      progressBar: document.getElementById('queue-progress'),
      taskIdDisplay: document.getElementById('current-task-id'),
      microTaskProgress: document.getElementById('micro-task-progress'),
      microTaskCounter: document.getElementById('micro-task-counter')
    };

    console.log('[AI Interface] Elements initialized:', {
      submitBtn: !!this.elements.submitBtn,
      input: !!this.elements.input,
      results: !!this.elements.results
    });

    return Object.values(this.elements).some(el => el !== null);
  }

  setupEventListeners() {   
    this.elements.toggleSwitch?.addEventListener('click', () => this.toggleMode());
    this.elements.workflowLabel?.addEventListener('click', () => this.setMode('workflow'));
    this.elements.toolLabel?.addEventListener('click', () => this.setMode('tool'));

    this.elements.input?.addEventListener('input', () => this.handleInputChange());
    this.elements.input?.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
        e.preventDefault();
        this.handleSubmit();
      }
    });

    if (this.elements.submitBtn) {
      this.elements.submitBtn.addEventListener('click', () => {
        this.handleSubmit();
      });
    } else {
    }

    this.elements.dismissSuggestions?.addEventListener('click', () => this.hideSmartPrompting());
    
    this.setupPreviousAnalysisUpload();
    
    console.log('[AI Interface] Event listeners setup complete');
  }

  getModeConfig() {
    return {
      workflow: {
        placeholder: "Beschreiben Sie Ihr forensisches Szenario... z.B. 'Verdacht auf Ransomware-Angriff auf Windows-Domänencontroller'",
        description: "Beschreiben Sie Ihre Untersuchungssituation und erhalten Empfehlungen für alle Phasen der Untersuchung.",
        submitText: "Empfehlungen generieren",
        loadingText: "Analysiere Szenario und generiere Empfehlungen..."
      },
      tool: {
        placeholder: "Beschreiben Sie Ihr Problem... z.B. 'Analyse von Android-Backups mit WhatsApp-Nachrichten'",
        description: "Beschreiben Sie Ihre Untersuchungssituation und erhalten Empfehlungen für eine spezifische Aufgabenstellung.",
        submitText: "Empfehlungen finden",
        loadingText: "Analysiere Anforderungen und suche passende Methode..."
      }
    };
  }

  toggleMode() {
    this.setMode(this.currentMode === 'workflow' ? 'tool' : 'workflow');
  }

  setMode(mode) {
    if (this.currentMode === mode) return;
    
    this.currentMode = mode;
    this.hideSmartPrompting();
    this.hideResults();
    this.updateModeUI();
  }

  updateModeUI() {
    const config = this.getModeConfig()[this.currentMode];
    
    if (this.elements.input) this.elements.input.placeholder = config.placeholder;
    if (this.elements.description) this.elements.description.textContent = config.description;
    if (this.elements.submitBtnText) this.elements.submitBtnText.textContent = config.submitText;
    if (this.elements.loadingText) this.elements.loadingText.textContent = config.loadingText;
    
    const isWorkflow = this.currentMode === 'workflow';
    const primaryColor = isWorkflow ? 'var(--color-primary)' : 'var(--color-accent)';
    const secondaryColor = 'var(--color-text-secondary)';
    
    if (this.elements.toggleSlider) {
      this.elements.toggleSlider.style.transform = isWorkflow ? 'translateX(0)' : 'translateX(26px)';
    }
    if (this.elements.toggleSwitch) {
      this.elements.toggleSwitch.style.backgroundColor = primaryColor;
    }
    
    if (this.elements.workflowLabel) {
      this.elements.workflowLabel.style.color = isWorkflow ? primaryColor : secondaryColor;
      this.elements.workflowLabel.classList.toggle('active', isWorkflow);
    }
    if (this.elements.toolLabel) {
      this.elements.toolLabel.style.color = isWorkflow ? secondaryColor : primaryColor;
      this.elements.toolLabel.classList.toggle('active', !isWorkflow);
    }
  }

  handleInputChange() {
    this.updateCharacterCount();
    
    clearTimeout(this.enhancementTimeout);
    if (this.enhancementAbortController) {
      this.enhancementAbortController.abort();
    }
    
    const inputLength = this.elements.input.value.trim().length;
    
    if (inputLength < 40) {
      this.hideSmartPrompting();
      return;
    }
    
    this.enhancementTimeout = setTimeout(() => {
      if (this.elements.input.value.trim().length >= 50) {
        this.triggerSmartPrompting();
      }
    }, 1000);
  }

  updateCharacterCount() {
    if (!this.elements.input || !this.elements.charCounter) return;
    
    const length = this.elements.input.value.length;
    const maxLength = 2000;
    
    this.elements.charCounter.textContent = `${length}/${maxLength}`;
    this.elements.charCounter.style.color = length > maxLength * 0.9 ? 
      'var(--color-warning)' : 'var(--color-text-secondary)';
  }

  async triggerSmartPrompting() {
    const inputText = this.elements.input.value.trim();
    
    if (inputText.length < 50) {
      this.hideSmartPrompting();
      return;
    }
    
    this.enhancementAbortController = new AbortController();
    
    try {
      this.showPromptingStatus('analyzing');
      
      const response = await fetch('/api/ai/enhance-input', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ input: inputText }),
        signal: this.enhancementAbortController.signal
      });
      
      if (!response.ok) {
        this.showPromptingStatus(response.status === 429 ? 'rate-limited' : 'error');
        return;
      }
      
      const data = await response.json();
      
      if (data.success && data.questions?.length > 0) {
        this.displaySuggestions(data.questions);
      } else {
        this.hideSmartPrompting();
      }
      
    } catch (error) {
      if (error.name !== 'AbortError') {
        console.warn('[AI Interface] Smart prompting failed:', error);
        this.showPromptingStatus('error');
      }
    }
  }

  showPromptingStatus(state) {
    if (!this.elements.promptingContainer || !this.elements.promptingStatus) return;
    
    const statusText = this.elements.promptingStatus.querySelector('.status-text');
    if (!statusText) return;
    
    const statusMap = {
      analyzing: {
        text: 'Analysiere Eingabe...',
        showSpinner: true,
        showSuggestions: false,
        showContainer: true,
        hideHint: true
      },
      suggestions: {
        text: 'Verbesserungsvorschläge verfügbar',
        showSpinner: false,
        showSuggestions: true,
        showContainer: true,
        hideHint: true
      },
      'rate-limited': {
        text: 'Nach Hauptabfrage verfügbar',
        showSpinner: false,
        showSuggestions: false,
        showContainer: true,
        hideHint: true
      },
      error: {
        showContainer: false,
        hideHint: false
      }
    };

    const config = statusMap[state];
    if (!config) return;

    statusText.textContent = config.text || '';
    
    if (config.showContainer) showElement(this.elements.promptingContainer);
    else hideElement(this.elements.promptingContainer);
    
    if (config.hideHint) hideElement(this.elements.smartHint);
    else showElement(this.elements.smartHint);
    
    if (config.showSpinner) showElement(this.elements.promptingSpinner);
    else hideElement(this.elements.promptingSpinner);
    
    if (config.showSuggestions) showElement(this.elements.suggestedQuestions);
    else hideElement(this.elements.suggestedQuestions);
  }

  displaySuggestions(suggestions) {
    if (!this.elements.questionsList || !suggestions?.length) return;
    
    this.elements.questionsList.innerHTML = suggestions.map(question => 
      `<div class="suggestion-item">${escapeHtml(question)}</div>`
    ).join('');
    
    this.showPromptingStatus('suggestions');
  }

  hideSmartPrompting() {
    if (this.elements.promptingContainer) hideElement(this.elements.promptingContainer);
    if (this.elements.smartHint) showElement(this.elements.smartHint);
  }

  async handleSubmit() {   
    const query = this.elements.input.value.trim();
    
    if (!query) {
      alert('Bitte geben Sie eine Beschreibung ein.');
      return;
    }
    
    if (query.length < 10) {
      alert('Bitte geben Sie eine detailliertere Beschreibung ein (mindestens 10 Zeichen).');
      return;
    }

    const taskId = `ai_${Date.now()}_${Math.random().toString(36).substr(2, 6)}`;
    
    console.log('[AI Interface] Starting AI query with taskId:', taskId);
    
    this.hideSmartPrompting();
    this.hideResults();
    this.hideError();
    this.showLoading();
    this.startQueueMonitoring(taskId);
    
    this.elements.submitBtn.disabled = true;
    this.elements.submitBtnText.textContent = this.currentMode === 'workflow' ? 
      'Generiere Empfehlungen...' : 'Suche passende Methode...';

    try {
      console.log('[AI Interface] Sending request to /api/ai/query');
      
      const response = await fetch('/api/ai/query', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          query,
          mode: this.currentMode,
          taskId
        })
      });
      
      const data = await response.json();
      this.lastApiResponse = data;
      this.currentRecommendation = data.recommendation;
      
      console.log('[AI Interface] Received response:', { 
        ok: response.ok, 
        status: response.status, 
        success: data.success 
      });
      
      if (!response.ok) {
        throw new Error(data.error || `HTTP ${response.status}`);
      }
      
      if (!data.success) {
        throw new Error(data.error || 'Unknown error');
      }

      this.currentRecommendation = data.recommendation;
      await this.displayResults(data.recommendation, query);
      
    } catch (error) {
      console.error('[AI Interface] Request failed:', error);
      this.showError(this.getErrorMessage(error));
    } finally {
      this.stopQueueMonitoring();
      this.hideLoading();
      this.resetSubmitButton();
    }
  }

  getErrorMessage(error) {
    const errorMap = {
      '429': 'Zu viele Anfragen. Bitte warten Sie einen Moment.',
      '401': 'Authentifizierung erforderlich. Bitte melden Sie sich an.',
      '503': 'KI-Service vorübergehend nicht verfügbar.'
    };
    
    for (const [code, message] of Object.entries(errorMap)) {
      if (error.message.includes(code)) return message;
    }
    
    return `Fehler: ${error.message}`;
  }

  resetSubmitButton() {
    if (this.elements.submitBtn) this.elements.submitBtn.disabled = false;
    if (this.elements.submitBtnText) {
      const config = this.getModeConfig()[this.currentMode];
      this.elements.submitBtnText.textContent = config.submitText;
    }
  }

  startQueueMonitoring(taskId) {
    if (this.elements.queueStatus) showElement(this.elements.queueStatus);
    if (this.elements.taskIdDisplay) {
      this.elements.taskIdDisplay.textContent = taskId.slice(-8);
    }
    
    this.startMicroTaskProgress();
    
    setTimeout(() => {
      this.updateQueueStatus(taskId);
      this.statusInterval = setInterval(() => this.updateQueueStatus(taskId), 1000);
    }, 500);
  }

  async updateQueueStatus(taskId) {
    try {
      const response = await fetch(`/api/ai/queue-status?taskId=${taskId}`);
      if (!response.ok) return;
      
      const data = await response.json();
      
      if (this.elements.queueLength) this.elements.queueLength.textContent = data.queueLength || 0;
      if (this.elements.estimatedTime) {
        this.elements.estimatedTime.textContent = data.estimatedWaitTime > 0 ? 
          formatDuration(data.estimatedWaitTime) : 'Verarbeitung läuft...';
      }
      
      if (this.elements.positionBadge) {
        if (data.currentPosition) {
          this.elements.positionBadge.textContent = data.currentPosition;
          if (this.elements.progressBar && data.queueLength > 0) {
            const progress = Math.max(0, ((data.queueLength - data.currentPosition + 1) / data.queueLength) * 100);
            this.elements.progressBar.style.width = `${progress}%`;
          }
        } else {
          const stateIcons = { processing: '⚡', completed: '✅', failed: '❌' };
          this.elements.positionBadge.textContent = stateIcons[data.taskStatus] || '?';
          if (this.elements.progressBar) {
            this.elements.progressBar.style.width = data.taskStatus === 'processing' ? '100%' : '0%';
          }
        }
      }
      
    } catch (error) {
      console.error('[AI Interface] Queue status update failed:', error);
    }
  }

  stopQueueMonitoring() {
    if (this.statusInterval) {
      clearInterval(this.statusInterval);
      this.statusInterval = null;
    }
    
    if (this.microTaskInterval) {
      clearInterval(this.microTaskInterval);
      this.microTaskInterval = null;
    }
    
    if (this.elements.queueStatus) hideElement(this.elements.queueStatus);
    if (this.elements.microTaskProgress) hideElement(this.elements.microTaskProgress);
  }

  startMicroTaskProgress() {
    if (!this.elements.microTaskProgress) return;
    
    showElement(this.elements.microTaskProgress);
    this.currentMicroTaskStep = 0;
    
    const steps = ['scenario', 'approach', 'considerations', 'tools', 'knowledge', 'final'];
    const stepElements = this.elements.microTaskProgress.querySelectorAll('.micro-step');
    
    stepElements.forEach(step => {
      step.classList.remove('active', 'completed', 'failed');
    });
    
    this.microTaskInterval = setInterval(() => {
      if (this.currentMicroTaskStep < steps.length) {
        if (this.currentMicroTaskStep > 0) {
          const prevStep = this.elements.microTaskProgress.querySelector(`[data-step="${steps[this.currentMicroTaskStep - 1]}"]`);
          if (prevStep) {
            prevStep.classList.remove('active');
            prevStep.classList.add('completed');
          }
        }
        
        const currentStep = this.elements.microTaskProgress.querySelector(`[data-step="${steps[this.currentMicroTaskStep]}"]`);
        if (currentStep) {
          currentStep.classList.add('active');
        }
        
        if (this.elements.microTaskCounter) {
          this.elements.microTaskCounter.textContent = `${this.currentMicroTaskStep + 1}/${steps.length}`;
        }
        
        this.currentMicroTaskStep++;
      } else {
        const lastStep = this.elements.microTaskProgress.querySelector(`[data-step="${steps[steps.length - 1]}"]`);
        if (lastStep) {
          lastStep.classList.remove('active');
          lastStep.classList.add('completed');
        }
        
        if (this.elements.microTaskCounter) {
          this.elements.microTaskCounter.textContent = `${steps.length}/${steps.length}`;
        }
        
        clearInterval(this.microTaskInterval);
        this.microTaskInterval = null;
      }
    }, 2000);
  }

  async displayResults(recommendation, originalQuery) {
    console.log('[AI Interface] Displaying results for mode:', this.currentMode);
    
    if (this.currentMode === 'workflow') {
      await this.displayWorkflowResults(recommendation, originalQuery);
    } else {
      await this.displayToolResults(recommendation, originalQuery);
    }
    
    this.showResults();
    
    setTimeout(() => {
      try {
        this.renderAuditTrail(recommendation.auditTrail);
      } catch (error) {
        console.error('[AI Interface] Failed to render audit trail:', error);
      }
    }, 100);
  }

  async displayWorkflowResults(recommendation, originalQuery) {
    const toolsByPhase = {};
    const phaseOrder = phases.map(phase => phase.id);
    const phaseNames = phases.reduce((acc, phase) => {
      acc[phase.id] = phase.name;
      return acc;
    }, {});

    phaseOrder.forEach(phase => {
      toolsByPhase[phase] = [];
    });

    recommendation.recommended_tools?.forEach(recTool => {
      if (toolsByPhase[recTool.phase]) {
        const fullTool = tools.find(t => t.name === recTool.name);
        if (fullTool) {
          toolsByPhase[recTool.phase].push({
            ...fullTool,
            recommendation: recTool,
            confidence: recTool.confidence, 
            justification: recTool.justification,
            priority: recTool.priority
          });
        }
      }
    });

    const html = `
      <div class="workflow-container">
        ${this.renderHeader('Untersuchungsansatz', originalQuery)}
        ${this.renderContextualAnalysis(recommendation, 'workflow')}
        ${this.renderBackgroundKnowledge(recommendation.background_knowledge)}
        ${this.renderWorkflowPhases(toolsByPhase, phaseOrder, phaseNames)}
        ${this.renderWorkflowSuggestion(recommendation.workflow_suggestion)}
      </div>
      <div id="audit-trail-container"></div>
    `;
    
    this.elements.results.innerHTML = html;
  }

  async displayToolResults(recommendation, originalQuery) {
    const html = `
      <div class="workflow-container">
        ${this.renderHeader('Handlungsempfehlung', originalQuery)}
        ${this.renderContextualAnalysis(recommendation, 'tool')}
        ${this.renderBackgroundKnowledge(recommendation.background_knowledge)}
        ${this.renderToolRecommendations(recommendation.recommended_tools)}
        ${this.renderAdditionalConsiderations(recommendation.additional_considerations)}
      </div>
      <div id="audit-trail-container"></div>
    `;
    
    this.elements.results.innerHTML = html;
  }

  renderAuditTrail(rawAuditTrail) {
    const container = document.getElementById('audit-trail-container');
    if (!container || !rawAuditTrail || !Array.isArray(rawAuditTrail)) {
      console.warn('[AI Interface] Cannot render audit trail: invalid container or data');
      return;
    }
    
    console.log('[AI Interface] Rendering detailed audit trail with', rawAuditTrail.length, 'entries');
    
    try {
      const stats = this.calculateAuditStats(rawAuditTrail);
      
      container.innerHTML = `
        <div class="audit-trail-container">
          <div class="audit-trail-header clickable" onclick="this.parentElement.querySelector('.audit-trail-details').classList.toggle('collapsed'); this.querySelector('.toggle-icon').style.transform = this.parentElement.querySelector('.audit-trail-details').classList.contains('collapsed') ? 'rotate(0deg)' : 'rotate(90deg)';">
            <div class="audit-trail-title">
              <div class="audit-icon">
                <div class="audit-icon-gradient">🔍</div>
                <h4>KI-Entscheidungspfad</h4>
              </div>
              <div class="audit-stats">
                <div class="stat-item">
                  <div class="stat-dot stat-time"></div>
                  <span>${formatDuration(stats.totalTime)}</span>
                </div>
                <div class="stat-item">
                  <div class="stat-dot" style="background-color: ${getConfidenceColor(stats.avgConfidence)};"></div>
                  <span>${stats.avgConfidence}% Vertrauen</span>
                </div>
                <div class="stat-item">
                  <span>${rawAuditTrail.length} Schritte</span>
                </div>
              </div>
            </div>
            <svg class="toggle-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transform: rotate(90deg);">
              <polyline points="9 18 15 12 9 6"/>
            </svg>
          </div>

          <div style="margin: 0.5rem 0 1rem 0;">
            <button id="download-results-btn" class="btn btn-secondary">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <polyline points="7 10 12 15 17 10"/>
                <line x1="12" y1="15" x2="12" y2="3"/>
              </svg>
              Download Analyse (JSON)
            </button>
          </div>

          <div class="audit-trail-details">
            <!-- Audit Summary -->
            <div class="audit-summary">
              <div class="summary-header">📊 Analyse-Zusammenfassung</div>
              <div class="summary-grid">
                <div class="summary-stat">
                  <div class="summary-value success">${stats.aiDecisionCount}</div>
                  <div class="summary-label">KI-Entscheidungen</div>
                </div>
                <div class="summary-stat">
                  <div class="summary-value ${stats.embeddingsUsageCount > 0 ? 'success' : 'warning'}">${stats.embeddingsUsageCount}</div>
                  <div class="summary-label">Semantische Suchen</div>
                </div>
                <div class="summary-stat">
                  <div class="summary-value success">${stats.toolSelectionCount}</div>
                  <div class="summary-label">Tool-Auswahlen</div>
                </div>
              </div>
              
              <div class="insights-section">
                ${stats.keyInsights && stats.keyInsights.length > 0 ? `
                  <div class="insights-header success">✅ Erkenntnisse</div>
                  <ul class="insights-list">
                    ${stats.keyInsights.map(insight => `<li>${insight}</li>`).join('')}
                  </ul>
                ` : ''}
                
                ${stats.potentialIssues && stats.potentialIssues.length > 0 ? `
                  <div class="insights-header warning">⚠️ Hinweise</div>
                  <ul class="insights-list">
                    ${stats.potentialIssues.map(issue => `<li>${issue}</li>`).join('')}
                  </ul>
                ` : ''}
              </div>
            </div>

            <!-- Process Flow -->
            <div class="audit-process-flow">
              ${this.renderPhaseGroups(rawAuditTrail, stats)}
            </div>
          </div>
        </div>
      `;
      
    } catch (error) {
      console.error('[AI Interface] Error rendering audit trail:', error);
      container.innerHTML = `
        <div class="audit-trail-container">
          <div class="audit-trail-header">
            <div class="audit-trail-title">
              <div class="audit-icon">
                <div class="audit-icon-gradient">⚠️</div>
                <h4>Audit Trail Fehler</h4>
              </div>
            </div>
          </div>
          <div class="audit-trail-details">
            <p style="color: var(--color-error); padding: 1rem;">
              Fehler beim Rendern des Audit Trails. Details in der Konsole.
            </p>
          </div>
        </div>
      `;
    }
  }

  getQualityDisplayText(analysisQuality) {
    const qualityMap = {
      'excellent': 'Ausgezeichnet',
      'good': 'Gut', 
      'fair': 'Zufriedenstellend',
      'poor': 'Verbesserungswürdig',
      'unknown': 'Unbekannt'
    };
    return qualityMap[analysisQuality] || 'Unbekannt';
  }

  setupUnifiedUploadSystem() {
    const previousUploadInput = document.getElementById('upload-previous-analysis');
    if (previousUploadInput) {
      previousUploadInput.addEventListener('change', (event) => {
        const files = event.target.files;
        const file = files ? files[0] : null;
        if (file) {
          this.handlePreviousAnalysisUpload(file);
        }
        event.target.value = '';
      });
      console.log('[AI Interface] Previous analysis upload setup complete');
    }

    const setupDownloadBtn = () => {
      const downloadBtn = document.getElementById('download-results-btn');
      if (downloadBtn && !downloadBtn.hasAttribute('data-setup')) {
        downloadBtn.setAttribute('data-setup', 'true');
        downloadBtn.addEventListener('click', () => this.downloadResults());
      }
    };

    setupDownloadBtn();

    const observer = new MutationObserver(() => {
      setupDownloadBtn();
    });

    observer.observe(document.body, { 
      childList: true, 
      subtree: true 
    });

    this.uploadObserver = observer;

    console.log('[AI Interface] Unified upload system setup complete');
  }

  calculateAuditStats(auditTrail) {
    if (!auditTrail || auditTrail.length === 0) {
      return {
        totalTime: 0,
        avgConfidence: 0,
        stepCount: 0,
        highConfidenceSteps: 0,
        lowConfidenceSteps: 0,
        phaseBreakdown: {},
        aiDecisionCount: 0,
        embeddingsUsageCount: 0,
        toolSelectionCount: 0,
        qualityMetrics: {
          avgProcessingTime: 0,
          confidenceDistribution: { high: 0, medium: 0, low: 0 }
        },
        analysisQuality: 'excellent',
        keyInsights: [
          'Vollständige Dokumentation aller Analyseschritte',
          'Transparente KI-Entscheidungsfindung'
        ],
        potentialIssues: []
      };
    }

    const totalTime = auditTrail.reduce((sum, entry) => sum + (entry.processingTimeMs || 0), 0);
    const validConfidenceEntries = auditTrail.filter(entry => typeof entry.confidence === 'number');
    const avgConfidence = validConfidenceEntries.length > 0 
      ? Math.round(validConfidenceEntries.reduce((sum, entry) => sum + entry.confidence, 0) / validConfidenceEntries.length)
      : 0;
    
    const highConfidenceSteps = auditTrail.filter(entry => (entry.confidence || 0) >= 80).length;
    const lowConfidenceSteps = auditTrail.filter(entry => (entry.confidence || 0) < 60).length;
    const mediumConfidenceSteps = auditTrail.length - highConfidenceSteps - lowConfidenceSteps;

    // FIX 1: Count actual AI decision actions only
    const aiDecisionCount = auditTrail.filter(entry => entry.action === 'ai-decision').length;
    
    // FIX 2: Count actual similarity search actions, not metadata flags
    const embeddingsUsageCount = auditTrail.filter(entry => entry.action === 'similarity-search').length;
    
    // FIX 3: Maintain tool selection count (this was correct)
    const toolSelectionCount = auditTrail.filter(entry => entry.action === 'selection-decision').length;

    // Additional diagnostic counts for debugging
    const microTaskCount = auditTrail.filter(entry => 
      entry.action === 'ai-decision' && entry.metadata?.microTaskType
    ).length;
    
    const phaseToolSelectionCount = auditTrail.filter(entry => 
      entry.action === 'phase-tool-selection'
    ).length;
    
    const phaseEnhancementCount = auditTrail.filter(entry => 
      entry.action === 'phase-enhancement'
    ).length;

    // Enhanced insights with diagnostic information
    const keyInsights = [];
    const potentialIssues = [];
    
    if (embeddingsUsageCount > 0) {
      keyInsights.push(`Semantische Suche wurde ${embeddingsUsageCount}x erfolgreich eingesetzt`);
    } else {
      potentialIssues.push('Keine semantischen Suchen dokumentiert - möglicherweise fehlerhafte Auditierung');
    }

    if (aiDecisionCount >= 5) {
      keyInsights.push(`${aiDecisionCount} KI-Entscheidungen mit detaillierter Begründung`);
    } else {
      potentialIssues.push(`Nur ${aiDecisionCount} KI-Entscheidungen dokumentiert - erwartet mindestens 5 für Vollständigkeit`);
    }

    if (microTaskCount > 0) {
      keyInsights.push(`${microTaskCount} spezialisierte Micro-Task-Analysen durchgeführt`);
    }

    // Detect mode-specific patterns for validation
    if (phaseToolSelectionCount > 0 || phaseEnhancementCount > 0) {
      keyInsights.push('Workflow-Modus: Phasenspezifische Analyse durchgeführt');
    } else if (microTaskCount >= 3) {
      keyInsights.push('Tool-Modus: Detaillierte Einzelbewertungen durchgeführt');
    }

    const phaseBreakdown = {};
    auditTrail.forEach(entry => {
      const phase = entry.phase || 'unknown';
      if (!phaseBreakdown[phase]) {
        phaseBreakdown[phase] = { count: 0, avgConfidence: 0, totalTime: 0 };
      }
      
      phaseBreakdown[phase].count++;
      phaseBreakdown[phase].totalTime += entry.processingTimeMs || 0;
    });

    Object.keys(phaseBreakdown).forEach(phase => {
      const phaseEntries = auditTrail.filter(entry => entry.phase === phase);
      const validEntries = phaseEntries.filter(entry => typeof entry.confidence === 'number');
      
      if (validEntries.length > 0) {
        phaseBreakdown[phase].avgConfidence = Math.round(
          validEntries.reduce((sum, entry) => sum + entry.confidence, 0) / validEntries.length
        );
      }
    });

    let analysisQuality;
    if (avgConfidence >= 85 && lowConfidenceSteps === 0) {
      analysisQuality = 'excellent';
    } else if (avgConfidence >= 70 && lowConfidenceSteps <= 1) {
      analysisQuality = 'good';
    } else if (avgConfidence >= 60 && lowConfidenceSteps <= 3) {
      analysisQuality = 'fair';
    } else {
      analysisQuality = 'poor';
    }

    if (highConfidenceSteps > auditTrail.length * 0.7) {
      keyInsights.push('Mehrheit der Analyseschritte mit hoher Sicherheit');
    }

    // Validate expected counts based on mode detection
    const isWorkflowMode = phaseToolSelectionCount > 0 || phaseEnhancementCount > 0;
    const expectedMinAI = isWorkflowMode ? 11 : 8; // Workflow: 5 common + 6 phase selections, Tool: 5 common + 3 evaluations
    const expectedMinEmbeddings = 1; // Both modes should have initial search

    if (aiDecisionCount < expectedMinAI) {
      potentialIssues.push(`${expectedMinAI - aiDecisionCount} fehlende KI-Entscheidungen für ${isWorkflowMode ? 'Workflow' : 'Tool'}-Modus`);
    }

    if (embeddingsUsageCount < expectedMinEmbeddings) {
      potentialIssues.push(`${expectedMinEmbeddings - embeddingsUsageCount} fehlende semantische Suchen`);
    }

    return {
      totalTime,
      avgConfidence,
      stepCount: auditTrail.length,
      highConfidenceSteps,
      lowConfidenceSteps,
      phaseBreakdown,
      aiDecisionCount,
      embeddingsUsageCount,
      toolSelectionCount,
      qualityMetrics: {
        avgProcessingTime: auditTrail.length > 0 ? totalTime / auditTrail.length : 0,
        confidenceDistribution: { 
          high: highConfidenceSteps, 
          medium: mediumConfidenceSteps, 
          low: lowConfidenceSteps 
        }
      },
      analysisQuality,
      keyInsights,
      potentialIssues,
      // Debug information
      debugCounts: {
        microTaskCount,
        phaseToolSelectionCount, 
        phaseEnhancementCount,
        detectedMode: isWorkflowMode ? 'workflow' : 'tool'
      }
    };
  }

  renderPhaseGroups(auditTrail, stats) {
    const phaseGroups = new Map();
    
    auditTrail.forEach(entry => {
      const phase = entry.phase || 'unknown';
      if (!phaseGroups.has(phase)) {
        phaseGroups.set(phase, []);
      }
      const phaseEntries = phaseGroups.get(phase);
      if (phaseEntries) {
        phaseEntries.push(entry);
      }
    });

    let html = '';
    let groupIndex = 0;
    
    for (const [phaseName, entries] of phaseGroups) {
      const isLastPhase = groupIndex === phaseGroups.size - 1;
      const phaseAvgConfidence = entries.reduce((sum, e) => sum + (e.confidence || 0), 0) / entries.length;
      
      html += `
        <div class="phase-group ${isLastPhase ? 'last-phase' : ''}">
          <div class="phase-header" style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
            <div style="display: flex; align-items: center; gap: 0.75rem;">
              <div class="phase-icon">${this.getPhaseIcon(phaseName)}</div>
              <div class="phase-name">${this.getPhaseDisplayName(phaseName)}</div>
            </div>
            <div class="phase-divider"></div>
            <div class="phase-stats">
              <div class="confidence-bar">
                <div class="confidence-fill" style="width: ${phaseAvgConfidence}%; background-color: ${getConfidenceColor(phaseAvgConfidence)};"></div>
              </div>
              <span class="confidence-text">${Math.round(phaseAvgConfidence)}%</span>
            </div>
          </div>
          
          <div class="phase-entries">
            ${entries.map(entry => this.renderAuditEntry(entry)).join('')}
          </div>
        </div>
      `;
      
      groupIndex++;
    }
    
    return html;
  }

  renderAuditEntry(entry) {
    const confidenceColor = getConfidenceColor(entry.confidence || 0);
    const processingTime = formatDuration(entry.processingTimeMs || 0);
    const decisionBasis = entry.metadata?.decisionBasis || 'unknown';
    
    return `
      <div class="audit-entry">
        <div class="entry-main">
          <div class="entry-action">
            <div style="display: flex; align-items: center; gap: 0.5rem;">
              <span>${this.getDetailedActionName(entry)}</span>
              <span class="decision-basis-badge" style="background-color: ${this.getDecisionBasisColor(decisionBasis)}; color: white; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.625rem; font-weight: 500;">
                ${this.getDecisionBasisText(decisionBasis)}
              </span>
            </div>
          </div>
          <div class="entry-meta">
            <div class="confidence-indicator" style="background-color: ${confidenceColor};"></div>
            <span class="confidence-value">${entry.confidence || 0}%</span>
            <span class="processing-time">${processingTime}</span>
          </div>
        </div>
        
        ${this.renderDetailedEntryInfo(entry)}
      </div>
    `;
  }

  getDecisionBasisColor(basis) {
    const colors = {
      'ai-analysis': 'var(--color-primary)',
      'semantic-search': 'var(--color-accent)', 
      'hybrid': 'var(--color-warning)',
      'rule-based': 'var(--color-text-secondary)'
    };
    return colors[basis] || 'var(--color-text-secondary)';
  }

  getDecisionBasisText(basis) {
    const texts = {
      'ai-analysis': 'KI-Analyse',
      'semantic-search': 'Semantik',
      'hybrid': 'Hybrid',
      'rule-based': 'Regel-basiert'
    };
    return texts[basis] || 'Unbekannt';
  }

  renderDetailedEntryInfo(entry) {
    const details = [];
    const metadata = entry.metadata || {};
    
    if (metadata.inputSummary && metadata.inputSummary !== 'Leer') {
      details.push(`<div class="detail-item"><strong>Eingabe:</strong> ${escapeHtml(metadata.inputSummary)}</div>`);
    }
    
    if (metadata.outputSummary && metadata.outputSummary !== 'Leer') {
      details.push(`<div class="detail-item"><strong>Ausgabe:</strong> ${escapeHtml(metadata.outputSummary)}</div>`);
    }
    
    if (metadata.reasoning && !metadata.reasoning.includes('completed with')) {
      details.push(`<div class="detail-item"><strong>Begründung:</strong> ${escapeHtml(metadata.reasoning)}</div>`);
    }
    
    if (entry.action === 'similarity-search' && metadata.similarityScores) {
      const topScores = Object.entries(metadata.similarityScores)
        .sort(([,a], [,b]) => (b) - (a))
        .slice(0, 3)
        .map(([name, score]) => `${name} (${((score) * 100).toFixed(1)}%)`)
        .join(', ');
      if (topScores) {
        details.push(`<div class="detail-item"><strong>Top Treffer:</strong> ${topScores}</div>`);
      }
    }
    
    if (entry.action === 'ai-decision' && metadata.aiModel) {
      details.push(`<div class="detail-item"><strong>KI-Modell:</strong> ${metadata.aiModel}</div>`);
      if (metadata.promptTokens && metadata.completionTokens) {
        details.push(`<div class="detail-item"><strong>Token-Nutzung:</strong> ${metadata.promptTokens} + ${metadata.completionTokens} = ${metadata.promptTokens + metadata.completionTokens}</div>`);
      }
    }
    
    if (entry.action === 'selection-decision') {
      if (metadata.selectionMethod) {
        const methodDisplay = metadata.selectionMethod === 'embeddings_candidates' ? 'Semantische Filterung' : 'Vollständige Analyse';
        details.push(`<div class="detail-item"><strong>Methode:</strong> ${methodDisplay}</div>`);
      }
      if (metadata.reductionRatio) {
        details.push(`<div class="detail-item"><strong>Filterung:</strong> ${(metadata.reductionRatio * 100).toFixed(1)}% der verfügbaren Tools</div>`);
      }
    }
    
    if (entry.action === 'tool-confidence') {
      const confidence = entry.output || {};
      if (confidence.strengthIndicators && confidence.strengthIndicators.length > 0) {
        details.push(`<div class="detail-item"><strong>Stärken:</strong> ${confidence.strengthIndicators.slice(0, 2).join(', ')}</div>`);
      }
      if (confidence.uncertaintyFactors && confidence.uncertaintyFactors.length > 0) {
        details.push(`<div class="detail-item"><strong>Unsicherheiten:</strong> ${confidence.uncertaintyFactors.slice(0, 2).join(', ')}</div>`);
      }
    }
    
    if (entry.action === 'phase-tool-selection') {
      if (metadata.availableToolsCount && metadata.selectedToolsCount) {
        const ratio = (metadata.selectedToolsCount / metadata.availableToolsCount * 100).toFixed(1);
        details.push(`<div class="detail-item"><strong>Auswahlrate:</strong> ${ratio}% der verfügbaren Phase-Tools</div>`);
      }
    }
    
    if (entry.action === 'phase-enhancement') {
      if (metadata.semanticSimilarity) {
        details.push(`<div class="detail-item"><strong>Semantische Ähnlichkeit:</strong> ${(metadata.semanticSimilarity * 100).toFixed(1)}%</div>`);
      }
      if (metadata.aiReasoningUsed) {
        details.push(`<div class="detail-item"><strong>KI-Begründung:</strong> Verwendet für Auswahl</div>`);
      }
    }
    
    if (details.length === 0) return '';
    
    return `
      <div class="entry-details">
        ${details.join('')}
      </div>
    `;
  }

  getDetailedActionName(entry) {
    const action = entry.action;
    const metadata = entry.metadata || {};
    
    switch (action) {
      case 'selection-decision':
        return `Tool-Auswahl: ${metadata.selectedToolsCount || 0} von ${metadata.availableToolsCount || 0} Tools gewählt`;
      
      case 'ai-decision':
        if (metadata.microTaskType) {
          const taskTypes = {
            'scenario-analysis': 'Szenario-Analyse',
            'investigation-approach': 'Untersuchungsansatz',
            'critical-considerations': 'Kritische Überlegungen',
            'tool-evaluation': 'Tool-Bewertung',
            'background-knowledge': 'Hintergrundwissen-Auswahl',
            'final-recommendations': 'Abschließende Empfehlungen'
          };
          return `KI-Analyse: ${taskTypes[metadata.microTaskType] || metadata.microTaskType}`;
        }
        return 'KI-Entscheidung';
      
      case 'similarity-search':
        return `Semantische Suche: ${entry.output?.resultsCount || 0} ähnliche Items gefunden`;
      
      case 'phase-enhancement':
        const actualCount = entry.output?.toolsAddedCount || metadata.toolsAdded?.length || 0;
        const phaseName = entry.input?.phaseName || metadata.phaseId || 'unbekannte Phase';
        return `Phasen-Vervollständigung: ${actualCount} Tools für ${phaseName} hinzugefügt`;
      
      case 'tool-confidence':
        return `Vertrauenswertung: ${entry.input?.toolName || 'Tool'} bewertet`;
      
      case 'phase-tool-selection':
        const phaseId = metadata.phaseId || entry.input?.phaseId;
        const phasesToDisplay = {
          'preparation': 'Vorbereitung', 
          'acquisition': 'Datensammlung',
          'examination': 'Untersuchung', 
          'analysis': 'Analyse',
          'reporting': 'Dokumentation',
          'presentation': 'Präsentation'
        };
        const displayPhase = phasesToDisplay[phaseId] || phaseId || 'Phase';
        return `${displayPhase}: ${metadata.selectedToolsCount || 0} Tools ausgewählt`;
      
      case 'tool-added-to-phase':
        const toolName = entry.input?.toolName || 'Tool';
        const phase = entry.input?.phaseId || 'Phase';
        const priority = entry.input?.priority || metadata.priority || 'medium';
        return `${toolName} als ${priority}-Priorität für ${phase} ausgewählt`;
      
      case 'concept-selection':
        return `Hintergrundwissen: ${metadata.selectedConceptsCount || 0} Konzepte ausgewählt`;
      
      default:
        return this.getActionDisplayName(action);
    }
  }

  renderEntryDetails(entry) {
    const details = [];
    
    if (entry.action === 'ai-decision' && entry.metadata?.reasoning) {
      details.push(`<div class="detail-item"><strong>Begründung:</strong> ${truncateText(entry.metadata.reasoning, 200)}</div>`);
    }
    
    if (entry.action === 'selection-decision') {
      if (entry.metadata?.selectedToolsCount && entry.metadata?.availableToolsCount) {
        details.push(`<div class="detail-item"><strong>Auswahl:</strong> ${entry.metadata.selectedToolsCount} von ${entry.metadata.availableToolsCount} Tools</div>`);
      }
      if (entry.metadata?.selectionMethod) {
        details.push(`<div class="detail-item"><strong>Methode:</strong> ${entry.metadata.selectionMethod}</div>`);
      }
    }
    
    if (entry.metadata?.embeddingsUsed && entry.metadata?.totalMatches) {
      details.push(`<div class="detail-item"><strong>Semantische Treffer:</strong> ${entry.metadata.totalMatches}</div>`);
    }
    
    if (entry.metadata?.confidenceFactors?.length > 0) {
      const factors = entry.metadata.confidenceFactors.slice(0, 2).join(', ');
      details.push(`<div class="detail-item"><strong>Faktoren:</strong> ${factors}</div>`);
    }
    
    if (details.length === 0) return '';
    
    return `
      <div class="entry-details">
        ${details.join('')}
      </div>
    `;
  }

  getPhaseDisplayName(phase) {
    const names = {
      'tool-selection': 'Tool-Auswahl',
      'contextual-analysis': 'Kontext-Analyse', 
      'workflow-phase': 'Workflow-Phase',
      'tool-reasoning': 'Tool-Bewertung',
      'tool-evaluation': 'Tool-Bewertung',
      'knowledge-synthesis': 'Wissens-Synthese',
      'confidence-scoring': 'Vertrauenswertung',
      'phase-completion': 'Phasen-Vervollständigung',
      'embeddings': 'Semantische Suche',
      'synthesis': 'Empfehlungs-Synthese',
      'unknown': 'Unbekannt'
    };
    return names[phase] || phase;
  }

  getPhaseIcon(phase) {
    const icons = {
      'tool-selection': '🔧',
      'contextual-analysis': '🧠',
      'workflow-phase': '⚡',
      'tool-reasoning': '💭',
      'tool-evaluation': '💭',
      'knowledge-synthesis': '📚',
      'confidence-scoring': '📊',
      'phase-completion': '✅',
      'embeddings': '🔍',
      'synthesis': '🎯',
      'unknown': '❓'
    };
    return icons[phase] || icons['unknown'];
  }

  getActionDisplayName(action) {
    const actions = {
      'selection-decision': 'Tools ausgewählt',
      'ai-decision': 'KI-Entscheidung',
      'phase-tool-selection': 'Phasen-Tools evaluiert',
      'tool-added-to-phase': 'Tool zur Phase hinzugefügt',
      'concept-selection': 'Konzepte ausgewählt',
      'tool-confidence': 'Vertrauen berechnet',
      'phase-enhancement': 'Phase vervollständigt',
      'similarity-search': 'Ähnlichkeitssuche'
    };
    return actions[action] || action;
  }

  downloadResults() {
    if (!this.currentRecommendation) {
      alert('Keine Analyse zum Herunterladen verfügbar.');
      return;
    }
    
    const inputValue = this.elements.input ? this.elements.input.value : '';
    
    const processingStats = this.currentRecommendation.processingStats || {};
    const aiModel = processingStats.aiModel || 'unknown';
    const toolsDataHash = processingStats.toolsDataHash || 'unknown';
    
    const aiParameters = {
      maxTokens: processingStats.maxTokensUsed || 0,
      temperature: processingStats.temperature || 0.3,
      totalTokensUsed: processingStats.totalAITokensUsed || 0,
      microTasksCompleted: processingStats.microTasksCompleted || 0,
      microTasksFailed: processingStats.microTasksFailed || 0,
      embeddingsUsed: processingStats.embeddingsUsed || false
    };
    
    const rawContext = {
      selectedTools: this.currentRecommendation.recommended_tools?.map(tool => ({
        name: tool.name,
        type: tool.type,
        phase: tool.phase,
        priority: tool.priority,
        confidence: tool.confidence,
        justification: tool.justification
      })) || [],
      backgroundKnowledge: this.currentRecommendation.background_knowledge?.map(bg => ({
        concept_name: bg.concept_name,
        relevance: bg.relevance
      })) || [],
      contextHistory: [],
      embeddingsSimilarities: {}
    };
    
    const exportData = {
      metadata: {
        timestamp: new Date().toISOString(),
        version: '2.0',
        toolsDataHash: toolsDataHash,
        aiModel: aiModel,
        aiParameters: aiParameters,
        userQuery: inputValue,
        mode: this.currentMode,
        processingStats: processingStats,
        exportedBy: 'ForensicPathways',
      },
      recommendation: {
        ...this.currentRecommendation,
        auditTrail: undefined
      },
      auditTrail: this.currentRecommendation.auditTrail || [],
      rawContext: rawContext
    };
    
    const blob = new Blob([JSON.stringify(exportData, null, 2)], {
      type: 'application/json'
    });
    
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `forensic-ai-analysis-${Date.now()}.json`;
    a.click();
    URL.revokeObjectURL(url);
    
    console.log('[AI Interface] Analysis downloaded with verified hash structure:', {
      version: '2.0',
      aiModel,
      toolsDataHash: toolsDataHash.slice(0, 12) + '...',
      tokensUsed: aiParameters.totalTokensUsed,
      auditEntries: exportData.auditTrail.length,
      hashVerifiable: toolsDataHash !== 'unknown'
    });
  }

  validateUploadStructure(data) {
    try {
      const isValid = !!(
        data &&
        typeof data === 'object' &&
        data.metadata &&
        typeof data.metadata === 'object' &&
        typeof data.metadata.timestamp === 'string' &&
        data.recommendation &&
        typeof data.recommendation === 'object' &&
        Array.isArray(data.auditTrail)
      );
      
      if (!isValid) {
        return false;
      }
      
      if (data.auditTrail.length > 0) {
        const sampleEntry = data.auditTrail[0];
        const hasRequiredFields = !!(
          sampleEntry &&
          typeof sampleEntry === 'object' &&
          typeof sampleEntry.timestamp === 'number' &&
          typeof sampleEntry.phase === 'string' &&
          typeof sampleEntry.action === 'string' &&
          typeof sampleEntry.confidence === 'number'
        );
        
        if (!hasRequiredFields) {
          console.warn('[AI Interface] Audit trail entries missing required fields');
          return false;
        }
      }
      
      return true;
    } catch (error) {
      console.error('[AI Interface] Structure validation error:', error);
      return false;
    }
  }

  displayUploadedResults(data) {
    try {
      console.log('[AI Interface] Displaying uploaded results');
      
      this.showUploadedBanner(data.metadata);
      
      this.currentRecommendation = {
        ...data.recommendation,
        auditTrail: data.auditTrail
      };
      
      this.showResults();
      
      if (data.metadata.mode === 'workflow') {
        this.displayWorkflowResults(data.recommendation, data.metadata.userQuery);
      } else {
        this.displayToolResults(data.recommendation, data.metadata.userQuery);
      }
      
      setTimeout(() => {
        try {
          this.renderAuditTrail(data.auditTrail);
          console.log('[AI Interface] Audit trail from upload rendered successfully');
        } catch (error) {
          console.error('[AI Interface] Failed to render uploaded audit trail:', error);
        }
      }, 200);
      
      console.log('[AI Interface] Uploaded analysis displayed successfully');
    } catch (error) {
      console.error('[AI Interface] Error displaying uploaded results:', error);
      this.showError('Fehler beim Anzeigen der hochgeladenen Analyse: ' + error.message);
    }
  }

  showUploadedBanner(metadata) {
    const banner = `
      <div class="uploaded-results-banner" style="background: var(--color-bg-secondary); border: 1px solid var(--color-warning); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem;">
        <div style="font-size: 1.5rem;">📁</div>
        <div style="flex: 1;">
          <strong style="color: var(--color-warning);">Hochgeladene Analyse</strong>
          <div style="font-size: 0.875rem; color: var(--color-text-secondary); margin-top: 0.25rem;">
            Erstellt: ${new Date(metadata.timestamp).toLocaleString('de-DE')} | 
            Modus: ${metadata.mode} | 
            ${metadata.toolsDataHash ? `Hash: ${metadata.toolsDataHash.slice(0, 8)}...` : ''}
          </div>
        </div>
        <button onclick="this.parentElement.remove()" style="background: none; border: none; color: var(--color-text-secondary); cursor: pointer; font-size: 1.25rem;">&times;</button>
      </div>
    `;
    
    if (this.elements && this.elements.results) {
      this.elements.results.insertAdjacentHTML('afterbegin', banner);
    }
  }

  setupPreviousAnalysisUpload() {
    const uploadInput = document.getElementById('upload-previous-analysis');
    
    if (uploadInput) {
      uploadInput.addEventListener('change', (event) => {
        const files = event.target.files;
        const file = files ? files[0] : null;
        if (file) {
          this.handlePreviousAnalysisUpload(file);
        }
        event.target.value = '';
      });
      
      console.log('[AI Interface] Previous analysis upload setup complete');
    } else {
      console.warn('[AI Interface] Previous analysis upload input not found');
    }
  }

  async handlePreviousAnalysisUpload(file) {
    console.log('[AI Interface] Handling previous analysis upload:', file.name);
    
    try {
      if (file.size > 10 * 1024 * 1024) {
        throw new Error('Datei zu groß (max 10MB)');
      }
      
      if (!file.name.endsWith('.json')) {
        throw new Error('Ungültiger Dateityp - nur JSON-Dateien werden unterstützt');
      }
      
      const text = await file.text();
      let data;
      
      try {
        data = JSON.parse(text);
      } catch (error) {
        throw new Error('Ungültiges JSON-Format');
      }
      
      if (!this.validateUploadStructure(data)) {
        throw new Error('Ungültiges Analyse-Dateiformat');
      }
      
      this.uploadedAuditTrail = data.auditTrail;
      
      console.log('[AI Interface] Valid previous analysis file uploaded:', {
        version: data.metadata.version || '1.0',
        auditEntries: data.auditTrail?.length || 0,
        toolsCount: data.recommendation.recommended_tools?.length || 0,
        checksum: data.checksum?.slice(0, 8) + '...' || 'none',
        originalMode: data.metadata.mode,
        currentMode: this.currentMode
      });
      
      this.hideResults();
      this.hideError();
      this.hideLoading();
      
      if (data.metadata.mode && data.metadata.mode !== this.currentMode) {
        console.log(`[AI Interface] Switching from ${this.currentMode} to ${data.metadata.mode} mode for uploaded analysis`);
        this.setMode(data.metadata.mode);
      }
      
      this.displayUploadedResults(data);
      
      if (data.metadata.userQuery && this.elements.input) {
        this.elements.input.value = data.metadata.userQuery;
        this.updateCharacterCount();
      }
      
    } catch (error) {
      console.error('[AI Interface] Previous analysis upload failed:', error);
      this.showError(`Upload fehlgeschlagen: ${error.message}`);
    }
  }

  renderHeader(title, query) {
    return `
      <div class="header-center header-primary rounded-xl mb-8">
        <h3 class="text-2xl mb-3">${title}</h3>
        <p class="mb-0 leading-relaxed">
          Basierend auf Ihrer Anfrage: "<em>${truncateText(query, 100)}</em>"
        </p>
      </div>
    `;
  }

  renderContextualAnalysis(recommendation, mode) {
    let html = '';
    
    const analysisField = mode === 'workflow' ? recommendation.scenario_analysis : recommendation.problem_analysis;
    if (analysisField) {
      html += `
        <div class="card contextual-analysis-card scenario mb-6">
          <h4 class="mb-4 text-primary">
            ${mode === 'workflow' ? 'Szenario-Analyse' : 'Problem-Analyse'}
          </h4>
          <div class="leading-relaxed">${sanitizeText(analysisField)}</div>
        </div>
      `;
    }

    if (recommendation.investigation_approach) {
      html += `
        <div class="card contextual-analysis-card approach mb-6">
          <h4 class="mb-4 text-accent">
            ${mode === 'workflow' ? 'Untersuchungsansatz' : 'Lösungsansatz'}
          </h4>
          <div class="leading-relaxed">${sanitizeText(recommendation.investigation_approach)}</div>
        </div>
      `;
    }

    if (recommendation.critical_considerations) {
      html += `
        <div class="card contextual-analysis-card critical mb-6">
          <h4 class="mb-4 text-warning">
            ${mode === 'workflow' ? 'Kritische Überlegungen' : 'Wichtige Voraussetzungen'}
          </h4>
          <div class="leading-relaxed">${sanitizeText(recommendation.critical_considerations)}</div>
        </div>
      `;
    }

    return html;
  }

  renderBackgroundKnowledge(backgroundKnowledge) {
    if (!backgroundKnowledge?.length) return '';
    
    const conceptLinks = backgroundKnowledge.map(concept => `
      <div class="card-info-sm mb-3 border-l-4" style="border-left-color: var(--color-concept);">
        <div class="flex items-center gap-3 mb-2">
          <button onclick="window.showToolDetails('${concept.concept_name}', 'secondary')" 
                  class="btn-icon text-concept font-semibold">
            📚 ${concept.concept_name}
          </button>
          <span class="badge" style="background-color: var(--color-concept); color: white;">Hintergrundwissen</span>
        </div>
        <div class="text-sm leading-relaxed text-secondary">
          ${sanitizeText(concept.relevance)}
        </div>
      </div>
    `).join('');
    
    return `
      <div class="card mb-8 border-l-4" style="border-left-color: var(--color-concept);">
        <h4 class="mb-4 text-concept">Empfohlenes Hintergrundwissen</h4>
        ${conceptLinks}
      </div>
    `;
  }

  renderWorkflowTool(tool) {
    const priorityColors = {
      high: 'var(--color-error)',
      medium: 'var(--color-warning)', 
      low: 'var(--color-accent)'
    };

    const priority = tool.recommendation ? tool.recommendation.priority : tool.priority;
    const confidenceTooltip = tool.confidence ? this.renderConfidenceTooltip(tool.confidence) : '';
    const cardClass = this.getToolClass(tool, 'recommendation');
    
    return `
      <div class="tool-recommendation ${cardClass}" onclick="window.showToolDetails('${tool.name}')">
        <div class="tool-rec-header">
          <h4 class="tool-rec-name">
            ${tool.icon ? `<span class="mr-2 text-lg">${tool.icon}</span>` : ''}
            ${tool.name}
          </h4>
          <div class="flex items-center gap-1 flex-shrink-0">
            <span class="tool-rec-priority ${priority}" style="background-color: ${priorityColors[priority]};">
              ${priority}
              ${confidenceTooltip}
            </span>
          </div>
        </div>
        
        <div class="tool-rec-justification">
          "${sanitizeText(tool.justification || (tool.recommendation && tool.recommendation.justification) || `Empfohlen für ${tool.phase}`)}"
        </div>
        
        <div class="text-xs text-secondary mt-auto">
          <div class="flex flex-wrap gap-1 mb-2">
            ${this.renderToolBadges(tool)}
          </div>
          <div class="flex justify-between items-center">
            <span>${tool.type === 'method' ? 'Methode' : tool.platforms.slice(0, 2).join(', ')}</span>
            <span>${tool.skillLevel}</span>
          </div>
        </div>
      </div>
    `;
  }

  renderWorkflowPhases(toolsByPhase, phaseOrder, phaseNames) {
    const phaseColors = [
      'var(--color-primary)', 
      'var(--color-accent)', 
      'var(--color-warning)',
      'var(--color-method)',
      'var(--color-hosted)',
      'var(--color-concept)'
    ];

    return phaseOrder.map((phase, index) => {
      const phaseTools = toolsByPhase[phase];
      if (phaseTools.length === 0) return '';

      const phaseColor = phaseColors[index % phaseColors.length];

      return `
        <div class="workflow-phase mb-8">
          <div class="phase-header" style="--phase-color: ${phaseColor};">
            <div class="phase-number" style="background: ${phaseColor};">
              ${index + 1}
            </div>
            
            <div class="phase-info">
              <h3 class="phase-title">
                ${phaseNames[phase]}
              </h3>
              
              <div class="phase-tools">
                ${phaseTools.map(tool => this.renderWorkflowTool(tool)).join('')}
              </div>
            </div>
          </div>
          
          ${index < phaseOrder.length - 1 ? `
            <div class="workflow-arrow" style="color: ${phaseColor};">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="12" y1="5" x2="12" y2="19"/>
                <polyline points="19 12 12 19 5 12"/>
              </svg>
            </div>
          ` : ''}
        </div>
      `;
    }).join('');
  }

  renderToolRecommendations(recommendedTools) {
    if (!recommendedTools?.length) return '';
    
    return `
      <div class="tool-recommendations-grid" style="display: grid; gap: 1.5rem;">
        ${recommendedTools.map((toolRec, index) => {
          const fullTool = tools.find(t => t.name === toolRec.name);
          if (!fullTool) return '';
          
          return this.renderDetailedTool(fullTool, toolRec, index + 1);
        }).join('')}
      </div>
    `;
  }

  renderDetailedTool(tool, recommendation, rank) {
    const rankColors = { 1: 'var(--color-accent)', 2: 'var(--color-primary)', 3: 'var(--color-warning)' };
    const suitabilityColors = { high: 'var(--color-accent)', medium: 'var(--color-warning)', low: 'var(--color-text-secondary)' };
    
    const confidenceTooltip = recommendation.confidence ? this.renderConfidenceTooltip(recommendation.confidence) : '';
    
    return `
      <div class="card ${this.getToolClass(tool, 'card')} cursor-pointer relative" onclick="window.showToolDetails('${tool.name}')">
        <div class="absolute -top-2 -right-2 w-8 h-8 text-white rounded-xl flex items-center justify-center font-semibold text-lg" style="background-color: ${rankColors[rank]};">
          ${rank}
        </div>

        <div class="mb-4">
          <h3 class="mb-2">${tool.name}</h3>
          <div class="flex flex-wrap gap-2 items-center mb-3">
            <span class="badge text-white relative flex items-center gap-1" style="background-color: ${suitabilityColors[recommendation.suitability_score]};">
              ${this.getSuitabilityText(recommendation.suitability_score)}
              ${confidenceTooltip}
            </span>
            ${this.renderToolBadges(tool)}
          </div>
        </div>

        <div class="mb-6">
          <h4 class="mb-3 text-accent">Warum diese Methode?</h4>
          <div class="leading-relaxed">${sanitizeText(recommendation.detailed_explanation)}</div>
          
          ${recommendation.implementation_approach ? `
            <h4 class="mt-3 mb-3 text-primary">Anwendungsansatz</h4>
            <div class="leading-relaxed">${sanitizeText(recommendation.implementation_approach)}</div>
          ` : ''}
        </div>

        ${this.renderProsAndCons(recommendation.pros, recommendation.cons)}
        ${this.renderToolMetadata(tool)}
        ${recommendation.alternatives ? this.renderAlternatives(recommendation.alternatives) : ''}
      </div>
    `;
  }

  renderConfidenceTooltip(confidence) {
    if (!confidence || typeof confidence.overall !== 'number') return '';
    
    const confidenceColor = getConfidenceColor(confidence.overall);
    
    return `
      <span class="inline-flex items-center gap-1 cursor-pointer ml-1 relative"
            onmouseenter="this.querySelector('.confidence-tooltip').style.display = 'block'"
            onmouseleave="this.querySelector('.confidence-tooltip').style.display = 'none'"
            onclick="event.stopPropagation();">
        <div class="w-1.5 h-1.5 rounded-xl flex-shrink-0" style="background-color: ${confidenceColor};"></div>
        <span class="text-xs font-semibold text-white">${confidence.overall}%</span>
        
        <div class="confidence-tooltip hidden absolute top-full right-0 z-50 bg-primary text-white p-4 rounded-lg shadow-lg text-xs" style="min-width: 320px; max-width: 400px; margin-top: 0.5rem;">
          <div class="flex justify-between items-center mb-3">
            <strong class="text-sm">KI-Vertrauenswertung</strong>
            <span class="font-semibold px-2 py-1 rounded text-xs" style="background-color: ${confidenceColor};">${confidence.overall}%</span>
          </div>
          
          <div class="grid gap-2 mb-3">
            <div class="bg-secondary p-2 rounded border-l-4" style="border-left-color: var(--color-accent);">
              <div class="flex justify-between items-center mb-1">
                <span class="font-semibold text-xs">🔍 Semantische Relevanz</span>
                <strong class="text-accent">${confidence.semanticRelevance}%</strong>
              </div>
              <div class="text-xs text-secondary leading-tight">
                Wie gut die Tool-Beschreibung semantisch zu Ihrer Anfrage passt
              </div>
            </div>
            
            <div class="bg-secondary p-2 rounded border-l-4" style="border-left-color: var(--color-primary);">
              <div class="flex justify-between items-center mb-1">
                <span class="font-semibold text-xs">🎯 Aufgaben-Eignung</span>
                <strong class="text-primary">${confidence.taskSuitability}%</strong>
              </div>
              <div class="text-xs text-secondary leading-tight">
                KI-bewertete Eignung für Ihre spezifische Aufgabenstellung
              </div>
            </div>
          </div>
          
          ${confidence.strengthIndicators && confidence.strengthIndicators.length > 0 ? `
            <div class="mb-3 p-2 rounded border-l-4" style="background-color: var(--color-oss-bg); border-left-color: var(--color-accent);">
              <strong class="text-accent text-xs flex items-center gap-1 mb-1">
                <span>✓</span> Stärken dieser Empfehlung:
              </strong>
              <ul class="ml-4 text-xs leading-normal">
                ${confidence.strengthIndicators.slice(0, 3).map(s => `<li class="mb-1">${sanitizeText(s)}</li>`).join('')}
              </ul>
            </div>
          ` : ''}
          
          ${confidence.uncertaintyFactors && confidence.uncertaintyFactors.length > 0 ? `
            <div class="p-2 rounded border-l-4" style="background-color: var(--color-hosted-bg); border-left-color: var(--color-warning);">
              <strong class="text-warning text-xs flex items-center gap-1 mb-1">
                <span>⚠</span> Mögliche Einschränkungen:
              </strong>
              <ul class="ml-4 text-xs leading-normal">
                ${confidence.uncertaintyFactors.slice(0, 3).map(f => `<li class="mb-1">${sanitizeText(f)}</li>`).join('')}
              </ul>
            </div>
          ` : ''}
          
          <div class="mt-3 pt-3 border-t border-secondary text-xs text-secondary text-center">
            Forensisch fundierte KI-Analyse
          </div>
        </div>
      </span>
    `;
  }

  renderWorkflowSuggestion(suggestion) {
    if (!suggestion) return '';
    
    return `
      <div class="card mt-8 border-l-4" style="border-left-color: var(--color-accent);">
        <h4 class="mb-4 text-accent">Workflow-Empfehlung</h4>
        <div class="leading-relaxed">${sanitizeText(suggestion)}</div>
      </div>
    `;
  }

  renderAdditionalConsiderations(considerations) {
    if (!considerations) return '';
    
    return `
      <div class="card mt-8 bg-secondary border-l-4" style="border-left-color: var(--color-text-secondary);">
        <h4 class="mb-4 text-secondary">Zusätzliche Überlegungen</h4>
        <div class="leading-relaxed">${sanitizeText(considerations)}</div>
      </div>
    `;
  }

  renderProsAndCons(pros, cons) {
    if (!pros?.length && !cons?.length) return '';
    
    return `
      <div class="grid grid-cols-2 gap-4 mb-6">
        ${pros?.length ? `
          <div class="card-info-sm border-l-4" style="border-left-color: var(--color-accent); background-color: var(--color-oss-bg);">
            <h5 class="mb-2 text-accent text-sm">✓ Vorteile</h5>
            <ul class="ml-4">
              ${pros.map(pro => `<li class="mb-1">${sanitizeText(pro)}</li>`).join('')}
            </ul>
          </div>
        ` : ''}
        ${cons?.length ? `
          <div class="card-info-sm border-l-4" style="border-left-color: var(--color-warning); background-color: var(--color-hosted-bg);">
            <h5 class="mb-2 text-warning text-sm">✗ Nachteile</h5>
            <ul class="ml-4">
              ${cons.map(con => `<li class="mb-1">${sanitizeText(con)}</li>`).join('')}
            </ul>
          </div>
        ` : ''}
      </div>
    `;
  }

  renderToolMetadata(tool) {
    const isMethod = tool.type === 'method';
    
    return `
      <div class="grid grid-auto-fit gap-3 text-sm text-secondary mb-4 p-3 bg-secondary rounded">
        ${!isMethod ? `<div><strong>Plattformen:</strong> ${tool.platforms.join(', ')}</div>` : ''}
        <div><strong>Skill Level:</strong> ${tool.skillLevel}</div>
        ${!isMethod ? `<div><strong>Lizenz:</strong> ${tool.license}</div>` : ''}
        <div><strong>Typ:</strong> ${isMethod ? 'Methode' : tool.accessType}</div>
      </div>
    `;
  }

  renderAlternatives(alternatives) {
    return `
      <div class="bg-secondary p-4 rounded mb-4">
        <h5 class="mb-2 text-secondary text-sm">Alternative Ansätze</h5>
        <div class="leading-relaxed">${sanitizeText(alternatives)}</div>
      </div>
    `;
  }

  renderToolBadges(tool) {
    const isMethod = tool.type === 'method';
    const hasValidProjectUrl = isToolHosted(tool);
    
    let badges = '';
    if (isMethod) {
      badges += '<span class="badge" style="background-color: var(--color-method); color: white;">Methode</span>';
    } else if (hasValidProjectUrl) {
      badges += '<span class="badge badge-primary">CC24-Server</span>';
    } else if (tool.license !== 'Proprietary') {
      badges += '<span class="badge badge-success">Open Source</span>';
    }
    
    if (tool.knowledgebase === true) {
      badges += '<span class="badge badge-error">📖</span>';
    }
    
    return badges;
  }

  getToolClass(tool, context = 'card') {
    const isMethod = tool.type === 'method';
    const hasValidProjectUrl = isToolHosted(tool);
    
    if (context === 'recommendation') {
      if (isMethod) return 'method';
      if (hasValidProjectUrl) return 'hosted';
      if (tool.license !== 'Proprietary') return 'oss';
      return '';
    } else {
      if (isMethod) return 'card-method';
      if (hasValidProjectUrl) return 'card-hosted';
      if (tool.license !== 'Proprietary') return 'card-oss';
      return '';
    }
  }

  getSuitabilityText(score) {
    const texts = {
      high: 'GUT GEEIGNET',
      medium: 'GEEIGNET', 
      low: 'VIELLEICHT GEEIGNET'
    };
    return texts[score] || 'GEEIGNET';
  }

  showLoading() {
    showElement(this.elements.loading);
  }

  hideLoading() {
    hideElement(this.elements.loading);
  }

  showResults() {
    showElement(this.elements.results);
  }

  hideResults() {
    hideElement(this.elements.results);
    hideElement(this.elements.error);
  }

  showError(message) {
    if (this.elements.errorMessage) this.elements.errorMessage.textContent = message;
    showElement(this.elements.error);
  }

  hideError() {
    hideElement(this.elements.error);
  }

  restoreAIResults() {
    if (this.currentRecommendation && this.elements.results) {
      this.showResults();
      
      const auditTrail = this.currentRecommendation.auditTrail || this.uploadedAuditTrail;
      
      if (auditTrail && Array.isArray(auditTrail) && auditTrail.length > 0) {
        setTimeout(() => {
          try {
            this.renderAuditTrail(auditTrail);
            console.log('[AI Interface] Audit trail restored successfully:', auditTrail.length, 'entries');
          } catch (error) {
            console.error('[AI Interface] Audit trail restore failed:', error);
          }
        }, 100);
      } else {
        console.warn('[AI Interface] No audit trail available for restore');
      }
      
      this.hideLoading();
      this.hideError();
    }
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const aiInterface = new AIQueryInterface();
  
  window.restoreAIResults = () => aiInterface.restoreAIResults();
  window.isToolHosted = window.isToolHosted || isToolHosted;
  
  console.log('[AI Interface] Setup complete');
});

</script>