// src/js/auditTrailRenderer.js

import { auditService } from '../../src/utils/auditService.js';

export class AuditTrailRenderer {
  constructor(containerId, options = {}) {
    this.containerId = containerId;
    this.options = {
      title: options.title || 'KI-Entscheidungspfad',
      collapsible: options.collapsible !== false,
      defaultExpanded: options.defaultExpanded || false,
      ...options
    };
    this.componentId = `audit-trail-${Date.now()}-${Math.random().toString(36).substr(2, 6)}`;
  }

  /**
   * Render audit trail from raw audit data
   * FIXED: Proper Promise handling
   */
  render(rawAuditTrail) {
    const container = document.getElementById(this.containerId);
    if (!container) {
      console.error(`[AUDIT RENDERER] Container ${this.containerId} not found`);
      return;
    }

    if (!rawAuditTrail || !Array.isArray(rawAuditTrail) || rawAuditTrail.length === 0) {
      this.renderEmpty();
      return;
    }

    try {
      console.log('[AUDIT RENDERER] Processing audit trail...', rawAuditTrail.length, 'entries');
      
      // Process audit trail using the centralized service (synchronous)
      const processedAudit = auditService.processAuditTrail(rawAuditTrail);
      
      console.log('[AUDIT RENDERER] Processed audit:', processedAudit);
      
      if (processedAudit && processedAudit.phases && processedAudit.phases.length > 0) {
        this.renderProcessed(processedAudit);
        // Attach event handlers after DOM is updated
        setTimeout(() => this.attachEventHandlers(), 0);
      } else {
        console.warn('[AUDIT RENDERER] No processed audit data');
        this.renderEmpty();
      }
    } catch (error) {
      console.error('[AUDIT RENDERER] Failed to render audit trail:', error);
      this.renderError(error);
    }
  }
  /**
   * Render processed audit trail
   */
  renderProcessed(processedAudit) {
    const container = document.getElementById(this.containerId);
    if (!container) return;

    const detailsId = `${this.componentId}-details`;
    
    console.log('[AUDIT RENDERER] Rendering processed audit with', processedAudit.phases.length, 'phases');
    
    container.innerHTML = `
      <div class="audit-trail-container">
        <div class="audit-trail-header ${this.options.collapsible ? 'clickable' : ''}" 
             ${this.options.collapsible ? `data-target="${detailsId}"` : ''}>
          <div class="audit-trail-title">
            <div class="audit-icon">
              <div class="audit-icon-gradient">✓</div>
              <h4>${this.options.title}</h4>
            </div>
            
            <div class="audit-stats">
              <div class="stat-item">
                <div class="stat-dot stat-time"></div>
                <span>${auditService.formatDuration(processedAudit.totalTime)}</span>
              </div>
              <div class="stat-item">
                <div class="stat-dot" style="background-color: ${auditService.getConfidenceColor(processedAudit.avgConfidence)}"></div>
                <span>${processedAudit.avgConfidence}% Vertrauen</span>
              </div>
              <div class="stat-item">
                <span>${processedAudit.stepCount} Schritte</span>
              </div>
            </div>
          </div>
          
          ${this.options.collapsible ? `
            <div class="toggle-icon">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="6 9 12 15 18 9"/>
              </svg>
            </div>
          ` : ''}
        </div>
        
        <div id="${detailsId}" class="audit-trail-details ${this.options.collapsible && !this.options.defaultExpanded ? 'collapsed' : ''}">
          ${this.renderSummary(processedAudit)}
          ${this.renderProcessFlow(processedAudit)}
          ${this.renderTechnicalDetails(processedAudit)}
        </div>
      </div>
    `;

    console.log('[AUDIT RENDERER] HTML rendered successfully');
  }

  /**
   * Render audit summary section
   */
  renderSummary(audit) {
    return `
      <div class="audit-summary">
        <div class="summary-header">📊 Analyse-Qualität</div>
        <div class="summary-grid">
          <div class="summary-stat">
            <div class="summary-value success">${audit.highConfidenceSteps}</div>
            <div class="summary-label">Hohe Sicherheit</div>
          </div>
          <div class="summary-stat">
            <div class="summary-value ${audit.lowConfidenceSteps > 0 ? 'warning' : 'success'}">
              ${audit.lowConfidenceSteps}
            </div>
            <div class="summary-label">Unsichere Schritte</div>
          </div>
          <div class="summary-stat">
            <div class="summary-value">${auditService.formatDuration(audit.totalTime)}</div>
            <div class="summary-label">Verarbeitungszeit</div>
          </div>
        </div>
        
        ${audit.summary.keyInsights && audit.summary.keyInsights.length > 0 ? `
          <div class="insights-section">
            <div class="insights-header success">✓ Erkenntnisse:</div>
            <ul class="insights-list">
              ${audit.summary.keyInsights.map(insight => `<li>${this.escapeHtml(insight)}</li>`).join('')}
            </ul>
          </div>
        ` : ''}
        
        ${audit.summary.potentialIssues && audit.summary.potentialIssues.length > 0 ? `
          <div class="insights-section">
            <div class="insights-header warning">⚠ Hinweise:</div>
            <ul class="insights-list">
              ${audit.summary.potentialIssues.map(issue => `<li>${this.escapeHtml(issue)}</li>`).join('')}
            </ul>
          </div>
        ` : ''}
      </div>
    `;
  }

  /**
   * Render process flow section
   */
  renderProcessFlow(audit) {
    if (!audit.phases || audit.phases.length === 0) {
      return '<div class="audit-process-flow"><p>Keine Phasen verfügbar</p></div>';
    }

    return `
      <div class="audit-process-flow">
        ${audit.phases.map((phase, index) => `
          <div class="phase-group ${index === audit.phases.length - 1 ? 'last-phase' : ''}">
            <div class="phase-header">
              <div class="phase-info">
                <span class="phase-icon">${phase.icon || '📋'}</span>
                <span class="phase-name">${phase.displayName || phase.name}</span>
              </div>
              <div class="phase-divider"></div>
              <div class="phase-stats">
                <div class="confidence-bar">
                  <div class="confidence-fill" 
                      style="width: ${phase.avgConfidence || 0}%; background-color: ${auditService.getConfidenceColor(phase.avgConfidence || 0)}">
                  </div>
                </div>
                <span class="confidence-text">${phase.avgConfidence || 0}%</span>
              </div>
            </div>
            
            <div class="phase-entries">
              ${(phase.entries || []).map(entry => `
                <div class="audit-entry">
                  <div class="entry-main">
                    <span class="entry-action">${auditService.getActionDisplayName(entry.action)}</span>
                    <div class="entry-meta">
                      <div class="confidence-indicator" 
                          style="background-color: ${auditService.getConfidenceColor(entry.confidence || 0)}">
                      </div>
                      <span class="confidence-value">${entry.confidence || 0}%</span>
                      <span class="processing-time">${entry.processingTimeMs || 0}ms</span>
                    </div>
                  </div>
                  
                  ${(entry.inputSummary && entry.inputSummary !== 'null') || (entry.outputSummary && entry.outputSummary !== 'null') ? `
                    <div class="entry-details">
                      ${entry.inputSummary && entry.inputSummary !== 'null' ? `
                        <div class="detail-item"><strong>Input:</strong> ${this.escapeHtml(entry.inputSummary)}</div>
                      ` : ''}
                      ${entry.outputSummary && entry.outputSummary !== 'null' ? `
                        <div class="detail-item"><strong>Output:</strong> ${this.escapeHtml(entry.outputSummary)}</div>
                      ` : ''}
                    </div>
                  ` : ''}
                </div>
              `).join('')}
            </div>
          </div>
        `).join('')}
      </div>
    `;
  }

  /**
   * Render technical details section
   */
  renderTechnicalDetails(audit) {
    const technicalId = `${this.componentId}-technical`;
    
    return `
      <div class="technical-toggle">
        <button class="technical-toggle-btn" data-target="${technicalId}">
          🔧 Technische Details anzeigen
        </button>
        <div id="${technicalId}" class="technical-details collapsed">
          ${(audit.phases || []).map(phase => 
            (phase.entries || []).map(entry => `
              <div class="technical-entry">
                <div class="technical-header">
                  <span class="technical-phase">${entry.phase}/${entry.action}</span>
                  <span class="technical-time">
                    ${new Date(entry.timestamp).toLocaleTimeString('de-DE', { 
                      hour: '2-digit', 
                      minute: '2-digit', 
                      second: '2-digit' 
                    })} • ${entry.processingTimeMs || 0}ms
                  </span>
                </div>
                <div class="technical-content">
                  <div class="technical-row">
                    <strong>Confidence:</strong> ${entry.confidence || 0}%
                  </div>
                  ${entry.metadata && Object.keys(entry.metadata).length > 0 ? `
                    <div class="technical-row">
                      <strong>Metadata:</strong> ${this.escapeHtml(JSON.stringify(entry.metadata))}
                    </div>
                  ` : ''}
                </div>
              </div>
            `).join('')
          ).join('')}
        </div>
      </div>
    `;
  }

  /**
   * Attach event handlers for interactions
   */
  attachEventHandlers() {
    console.log('[AUDIT RENDERER] Attaching event handlers...');
    
    // Handle collapsible header
    if (this.options.collapsible) {
      const header = document.querySelector(`[data-target="${this.componentId}-details"]`);
      const details = document.getElementById(`${this.componentId}-details`);
      const toggleIcon = header?.querySelector('.toggle-icon svg');
      
      if (header && details && toggleIcon) {
        // Remove existing listeners
        header.replaceWith(header.cloneNode(true));
        const newHeader = document.querySelector(`[data-target="${this.componentId}-details"]`);
        const newToggleIcon = newHeader?.querySelector('.toggle-icon svg');
        
        if (newHeader && newToggleIcon) {
          newHeader.addEventListener('click', () => {
            const isCollapsed = details.classList.contains('collapsed');
            
            if (isCollapsed) {
              details.classList.remove('collapsed');
              newToggleIcon.style.transform = 'rotate(180deg)';
            } else {
              details.classList.add('collapsed');
              newToggleIcon.style.transform = 'rotate(0deg)';
            }
          });
          console.log('[AUDIT RENDERER] Collapsible header handler attached');
        }
      }
    }
    
    // Handle technical details toggle
    const technicalBtn = document.querySelector(`[data-target="${this.componentId}-technical"]`);
    const technicalDetails = document.getElementById(`${this.componentId}-technical`);
    
    if (technicalBtn && technicalDetails) {
      // Remove existing listener
      technicalBtn.replaceWith(technicalBtn.cloneNode(true));
      const newTechnicalBtn = document.querySelector(`[data-target="${this.componentId}-technical"]`);
      
      if (newTechnicalBtn) {
        newTechnicalBtn.addEventListener('click', () => {
          const isCollapsed = technicalDetails.classList.contains('collapsed');
          
          if (isCollapsed) {
            technicalDetails.classList.remove('collapsed');
            newTechnicalBtn.textContent = '🔧 Technische Details ausblenden';
          } else {
            technicalDetails.classList.add('collapsed');
            newTechnicalBtn.textContent = '🔧 Technische Details anzeigen';
          }
        });
        console.log('[AUDIT RENDERER] Technical details handler attached');
      }
    }
  }

  /**
   * Render empty state
   */
  renderEmpty() {
    const container = document.getElementById(this.containerId);
    if (container) {
      container.innerHTML = `
        <div class="audit-trail-container">
          <div class="audit-trail-header">
            <div class="audit-icon">
              <div class="audit-icon-gradient">ⓘ</div>
              <h4>Kein Audit-Trail verfügbar</h4>
            </div>
          </div>
        </div>
      `;
    }
  }

  /**
   * Render error state
   */
  renderError(error) {
    const container = document.getElementById(this.containerId);
    if (container) {
      container.innerHTML = `
        <div class="audit-trail-container">
          <div class="audit-trail-header">
            <div class="audit-icon">
              <div class="audit-icon-gradient" style="background: var(--color-error);">✗</div>
              <h4>Audit-Trail Fehler</h4>
            </div>
          </div>
          <div class="audit-summary">
            <p style="color: var(--color-error);">
              Fehler beim Laden der Audit-Informationen: ${this.escapeHtml(error.message)}
            </p>
          </div>
        </div>
      `;
    }
  }

  /**
   * Utility method to escape HTML
   */
  escapeHtml(text) {
    if (typeof text !== 'string') return String(text);
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }

  /**
   * Clear the audit trail display
   */
  clear() {
    const container = document.getElementById(this.containerId);
    if (container) {
      container.innerHTML = '';
    }
  }

  /**
   * Get container element
   */
  getContainer() {
    return document.getElementById(this.containerId);
  }
}