/**
 * MYP Platform - CSS Cache Manager
 * Integration und Management des CSS-Caching Service Workers
 */

class CSSCacheManager {
  constructor() {
    this.serviceWorker = null;
    this.registration = null;
    this.isSupported = 'serviceWorker' in navigator;
    this.cacheStats = null;
    
    this.init();
  }

  async init() {
    if (!this.isSupported) {
      console.warn('[CSS-Cache] Service Worker wird nicht unterstützt');
      return;
    }

    try {
      this.registration = await navigator.serviceWorker.register(
        '/static/js/css-cache-service-worker.js',
        { scope: '/static/css/' }
      );

      console.log('[CSS-Cache] Service Worker registriert');

      if (this.registration.active) {
        this.serviceWorker = this.registration.active;
      }

      this.startPerformanceMonitoring();

    } catch (error) {
      console.error('[CSS-Cache] Fehler bei Service Worker Registrierung:', error);
    }
  }

  async clearCache() {
    if (!this.serviceWorker) return false;

    try {
      const messageChannel = new MessageChannel();
      
      return new Promise((resolve) => {
        messageChannel.port1.onmessage = (event) => {
          resolve(event.data.success);
        };
        
        this.serviceWorker.postMessage(
          { type: 'CLEAR_CSS_CACHE' },
          [messageChannel.port2]
        );
      });
    } catch (error) {
      console.error('[CSS-Cache] Fehler beim Cache leeren:', error);
      return false;
    }
  }

  async getCacheStats() {
    if (!this.serviceWorker) return null;

    try {
      const messageChannel = new MessageChannel();
      
      return new Promise((resolve) => {
        messageChannel.port1.onmessage = (event) => {
          this.cacheStats = event.data;
          resolve(event.data);
        };
        
        this.serviceWorker.postMessage(
          { type: 'GET_CACHE_STATS' },
          [messageChannel.port2]
        );
      });
    } catch (error) {
      console.error('[CSS-Cache] Fehler beim Abrufen der Stats:', error);
      return null;
    }
  }

  startPerformanceMonitoring() {
    setInterval(async () => {
      const stats = await this.getCacheStats();
      if (stats) {
        console.log('[CSS-Cache] Performance-Stats:', stats);
      }
    }, 5 * 60 * 1000);

    setTimeout(async () => {
      await this.getCacheStats();
    }, 10000);
  }

  debug() {
    console.group('[CSS-Cache] Debug-Informationen');
    console.log('Service Worker unterstützt:', this.isSupported);
    console.log('Service Worker aktiv:', !!this.serviceWorker);
    console.log('Registration:', this.registration);
    console.log('Cache-Stats:', this.cacheStats);
    console.groupEnd();
  }
}

// Globale Instanz erstellen
window.cssCache = new CSSCacheManager();

// Entwicklungs-Hilfsfunktionen
if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
  window.clearCSSCache = () => window.cssCache.clearCache();
  window.getCSSStats = () => window.cssCache.getCacheStats();
  
  console.log('[CSS-Cache] Entwicklungsmodus: Debug-Funktionen verfügbar');
  console.log('- cssCache.debug() - Debug-Informationen anzeigen');
  console.log('- clearCSSCache() - CSS-Cache leeren');
  console.log('- getCSSStats() - Cache-Statistiken abrufen');
}

export default CSSCacheManager;