<template>
  <div class="match-report-dialog">
    <!-- nuscore Analyzer für lokale Kopie -->
    <NuscoreAnalyzer v-if="showAnalyzer" @close="showAnalyzer = false" />
    
    <!-- Toggle für Analyzer -->
    <div class="analyzer-toggle">
      <button @click="showAnalyzer = !showAnalyzer" class="toggle-btn">
        {{ showAnalyzer ? '🔼 ' + $t('matchReport.hideAnalyzer') : '🔍 ' + $t('matchReport.analyzeNuscore') }}
      </button>
      <button @click="createLocalCopy" class="toggle-btn toggle-btn-secondary">
        💾 {{ $t('matchReport.createLocalCopy') }}
      </button>
    </div>
    
    <div class="report-content">
      <iframe
        ref="reportIframe"
        :src="reportUrl"
        width="100%"
        height="100%"
        frameborder="0"
        class="report-iframe"
        @load="onIframeLoad"
      ></iframe>
    </div>
  </div>
</template>

<script>
import NuscoreAnalyzer from './NuscoreAnalyzer.vue';
import { generateSimpleNuscoreHTML } from '../utils/simpleNuscoreHTMLGenerator.js';

export default {
  name: 'MatchReportDialog',
  components: {
    NuscoreAnalyzer
  },
  props: {
    match: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      showAnalyzer: false
    };
  },
  computed: {
    reportUrl() {
      // Verwende die neue API-basierte Lösung
      return `http://localhost:3000/api/nuscore/meetinginfo/${this.match.code}`;
    }
  },
  mounted() {
    // Event-Listener für PostMessage-Antworten
    window.addEventListener('message', this.handlePostMessage);
  },
  beforeUnmount() {
    // Event-Listener entfernen
    window.removeEventListener('message', this.handlePostMessage);
    
    // URL-Überwachung stoppen
    if (this.urlCheckInterval) {
      clearInterval(this.urlCheckInterval);
    }
  },
  methods: {
    formatDate(dateString) {
      if (!dateString) return 'N/A';
      const date = new Date(dateString);
      return date.toLocaleDateString('de-DE', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      });
    },
    
    onIframeLoad() {
      console.log('🔄 Iframe geladen, URL:', this.$refs.reportIframe?.src);
      console.log('📊 Iframe-Inhalt:', this.$refs.reportIframe?.contentDocument?.title || 'Kein Titel');
      
      // Sende den Code an das iframe über PostMessage
      this.tryPostMessage();

      // Überwache URL-Änderungen im iframe (nur Logging, da kein direkter Zugriff möglich)
      this.startUrlMonitoring();
    },
    
    tryPostMessage() {
      try {
        const iframe = this.$refs.reportIframe;
        if (iframe && iframe.contentWindow) {
          // Sende Nachricht an das iframe (jetzt localhost:3000)
          iframe.contentWindow.postMessage({
            action: 'fillGameCode',
            code: this.match.code
          }, 'http://localhost:3000');
          
          console.log('PostMessage gesendet mit Code:', this.match.code);
        }
      } catch (error) {
      }
    },
    
    startUrlMonitoring() {
      // Einfache Überwachung ohne Cross-Origin-Zugriff
      this.urlCheckInterval = setInterval(() => {
        const iframe = this.$refs.reportIframe;
        if (iframe) {
          // Iframe aktiv
        }
      }, 10000); // Alle 10 Sekunden
      
      // Stoppe Überwachung nach 60 Sekunden
      setTimeout(() => {
        if (this.urlCheckInterval) {
          clearInterval(this.urlCheckInterval);
        }
      }, 60000);
    },
    
    extractMeetingId(url) {
      const match = url.match(/\/meeting\/([a-f0-9-]+)\//);
      return match ? match[1] : null;
    },
    
    attemptPinInsertionAfterRedirect() {
      const iframe = this.$refs.reportIframe;
      if (!iframe || !this.match.homePin) {
        return;
      }
      
      // Kein DOM-Zugriff mehr; ausschließlich postMessage senden
      const message = {
        action: 'fillPin',
        pin: this.match.homePin,
        timestamp: Date.now(),
        source: 'trainingstagebuch'
      };
      console.log('📤 Sende PostMessage:', message);
      try {
        iframe.contentWindow.postMessage(message, 'http://localhost:3000');
      } catch (e) {
        console.log('PostMessage Fehler (nicht kritisch):', e.message);
        // Fallback: Versuche mit wildcard origin
        try {
          iframe.contentWindow.postMessage(message, '*');
        } catch (e2) {
          console.log('PostMessage Fallback fehlgeschlagen:', e2.message);
        }
      }
    },
    
    // Methode, die vom DialogManager aufgerufen werden kann
    insertPinManually() {
      this.attemptPinInsertionAfterRedirect();
    },
    
    async createLocalCopy() {
      console.log('🏗️ Erstelle lokale Kopie mit PIN...');
      
      // Erstelle eine einfache HTML-Datei, die die ursprüngliche nuscore-Seite in einem iframe lädt
      const html = generateSimpleNuscoreHTML(this.match);

      const blob = new Blob([html], { type: 'text/html' });
      const url = URL.createObjectURL(blob);

      const link = document.createElement('a');
      link.href = url;
      link.download = 'nuscore-local.html';
      link.click();

      URL.revokeObjectURL(url);

      console.log('✅ Lokale Kopie erstellt (iframe-basiert)');
    },
    
    handlePostMessage(event) {
      // Nur Nachrichten von unserem Proxy verarbeiten
      if (event.origin !== 'http://localhost:3000') {
        return;
      }
      
      // Hier können wir auf Antworten von nuscore reagieren
      if (event.data.action === 'codeFilled') {
        // Code erfolgreich eingefügt
      }
    }
  }
};
</script>

<style scoped>
.match-report-dialog {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
}

.analyzer-toggle {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  padding: 10px;
  background: var(--background-soft);
  border-bottom: 1px solid var(--border-color);
}

.toggle-btn {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  color: var(--text-on-primary);
  border: none;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.toggle-btn:hover {
  transform: translateY(-1px);
}

.toggle-btn-secondary {
  background: var(--surface-color, white);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.match-info {
  background: var(--background-soft);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.match-info h4 {
  margin: 0 0 12px 0;
  color: var(--primary-dark);
  font-size: 1.1rem;
}

.match-info p {
  margin: 4px 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.code-display {
  font-family: 'Courier New', monospace;
  background: var(--primary-soft);
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 8px;
}

.copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.copy-btn:hover {
  background: var(--background-soft);
}

.instructions {
  background: var(--background-soft);
  padding: 12px;
  border-radius: 6px;
  margin-top: 12px;
  border-left: 4px solid var(--primary-color);
}

.instructions p {
  margin: 0 0 8px 0;
  font-weight: 600;
  color: var(--primary-dark);
}

.instructions ol {
  margin: 0;
  padding-left: 20px;
}

.instructions li {
  margin: 4px 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.report-content {
  flex: 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.report-iframe {
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
}
</style>
