<template>
  <div class="match-report-header-actions">
    <button @click="insertPin" class="header-action-btn" :title="$t('matchReportHeaderActions.insertPinTitle')">
      📌 {{ $t('matchReportHeaderActions.insertPin') }}
    </button>
    <button @click="copyPin($event)" class="header-action-btn copy-button" :title="$t('matchReportHeaderActions.copyPinTitle')">
      📋 {{ $t('matchReportHeaderActions.copyPin') }}
    </button>
  </div>
</template>

<script>
export default {
  name: 'MatchReportHeaderActions',
  props: {
    dialogId: {
      type: Number,
      required: true
    },
    match: {
      type: Object,
      required: true
    }
  },
  methods: {
    insertPin() {
      this.$emit('action', {
        type: 'insertPin',
        dialogId: this.dialogId,
        match: this.match
      });
    },
    
    async copyPin(event) {
      const button = event?.target;
      const pin = this.match.homePin || this.match.guestPin;
      if (!pin) {
        if (button) {
          this.showCopyFeedback(button, this.$t('matchReportHeaderActions.noPinAvailable'), '#dc3545');
        }
        return;
      }
      
      try {
        await navigator.clipboard.writeText(pin);
        console.log('✅ PIN erfolgreich kopiert:', pin);
        if (button) {
          this.showCopyFeedback(button, '✅ ' + this.$t('matchReportHeaderActions.copied'), '#28a745');
        }
      } catch (error) {
        console.error('❌ ' + this.$t('matchReportHeaderActions.copyError') + ':', error);
        
        // Fallback: Text-Auswahl
        const textArea = document.createElement('textarea');
        textArea.value = pin;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        
        if (button) {
          this.showCopyFeedback(button, '✅ ' + this.$t('matchReportHeaderActions.copied'), '#28a745');
        }
      }
    },
    
    showCopyFeedback(button, text, backgroundColor) {
      const originalText = button.textContent;
      const originalColor = button.style.backgroundColor;
      button.textContent = text;
      button.style.backgroundColor = backgroundColor;
      
      setTimeout(() => {
        button.textContent = originalText;
        button.style.backgroundColor = originalColor;
      }, 2000);
    }
  }
};
</script>

<style scoped>
.match-report-header-actions {
  display: flex;
  gap: 8px;
  margin-right: 16px;
}

.header-action-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background-color 0.2s ease;
  white-space: nowrap;
  margin-right: 8px;
}

.header-action-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.copy-button {
  background: rgba(0, 123, 255, 0.2);
  border-color: rgba(0, 123, 255, 0.3);
}

.copy-button:hover {
  background: rgba(0, 123, 255, 0.3);
}
</style>

