<script setup lang="ts">
import { computed } from 'vue'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()

const bannerType = computed(() => {
  if (authStore.isSubscriptionExpired) return 'expired'
  if (authStore.showTrialWarning) return 'trial-warning'
  if (authStore.isTrialActive) return 'trial'
  return null
})

const bannerClass = computed(() => {
  switch (bannerType.value) {
    case 'expired': return 'bg-red-600 text-white'
    case 'trial-warning': return 'bg-yellow-500 text-yellow-900'
    case 'trial': return 'bg-blue-500 text-white'
    default: return ''
  }
})

const message = computed(() => {
  const days = authStore.trialDaysRemaining
  
  switch (bannerType.value) {
    case 'expired':
      return authStore.subscription?.status === 'paused' 
        ? '⚠️ Ihr Account wurde pausiert. Bitte kontaktieren Sie den Support.'
        : '⚠️ Ihre Testphase ist abgelaufen. Bitte wählen Sie ein Abonnement.'
    case 'trial-warning':
      return `⏰ Nur noch ${days} Tag${days === 1 ? '' : 'e'} in der Testphase! Jetzt Abo wählen.`
    case 'trial':
      return `🎉 Testphase: Noch ${days} Tag${days === 1 ? '' : 'e'} kostenlos testen`
    default:
      return ''
  }
})

const showBanner = computed(() => bannerType.value !== null)
</script>

<template>
  <div 
    v-if="showBanner" 
    :class="['px-4 py-2 text-center text-sm font-medium', bannerClass]"
  >
    {{ message }}
    <a 
      v-if="bannerType === 'expired' || bannerType === 'trial-warning'"
      href="https://secu.kronos-soulution.de/#preise" 
      target="_blank"
      class="ml-2 underline font-bold hover:no-underline"
    >
      Preise ansehen →
    </a>
  </div>
</template>
