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

const authStore = useAuthStore()
const router = useRouter()

const isPaused = authStore.subscription?.status === 'paused'

async function logout() {
  await authStore.logout()
  router.push('/login')
}
</script>

<template>
  <div class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
    <div class="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 text-center">
      <div class="text-6xl mb-6">{{ isPaused ? '⏸️' : '⏰' }}</div>
      
      <h1 class="text-2xl font-bold text-gray-900 mb-4">
        {{ isPaused ? 'Account pausiert' : 'Testphase beendet' }}
      </h1>
      
      <p class="text-gray-600 mb-6">
        <template v-if="isPaused">
          Ihr Account wurde vorübergehend pausiert. Dies kann an einer ausstehenden Zahlung liegen.
          Bitte kontaktieren Sie unseren Support.
        </template>
        <template v-else>
          Ihre 14-tägige Testphase ist leider abgelaufen. 
          Um SeCu weiter zu nutzen, wählen Sie bitte ein passendes Abonnement.
        </template>
      </p>

      <div class="space-y-3">
        <a 
          href="https://secu.kronos-soulution.de/#preise"
          target="_blank"
          class="block w-full bg-purple-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-purple-700 transition"
        >
          {{ isPaused ? '📞 Support kontaktieren' : '💳 Abonnement wählen' }}
        </a>
        
        <button
          @click="logout"
          class="block w-full bg-gray-200 text-gray-700 py-3 px-6 rounded-lg font-semibold hover:bg-gray-300 transition"
        >
          🚪 Ausloggen
        </button>
      </div>

      <div class="mt-8 pt-6 border-t border-gray-200">
        <p class="text-sm text-gray-500">
          Fragen? Kontaktieren Sie uns:
        </p>
        <a href="mailto:support@kronos-soulution.de" class="text-purple-600 font-medium hover:underline">
          support@kronos-soulution.de
        </a>
      </div>
    </div>
  </div>
</template>
