<template>
  <div class="min-h-full py-16 bg-gray-50">
    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="bg-white rounded-xl shadow-lg p-8">
        <h1 class="text-3xl font-display font-bold text-gray-900 mb-6">
          Newsletter abmelden
        </h1>
        <div class="w-24 h-1 bg-primary-600 mb-8" />

        <div
          v-if="loadingGroups"
          class="text-center py-8"
        >
          <p class="text-gray-600">
            Lade verfügbare Newsletter...
          </p>
        </div>

        <form
          v-else
          class="space-y-6"
          @submit.prevent="unsubscribe"
        >
          <div>
            <label
              for="groupId"
              class="block text-sm font-medium text-gray-700 mb-2"
            >
              Newsletter auswählen *
            </label>
            <select
              id="groupId"
              v-model="form.groupId"
              required
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
            >
              <option value="">
                Bitte wählen Sie einen Newsletter
              </option>
              <option
                v-for="group in groups"
                :key="group.id"
                :value="group.id"
              >
                {{ group.name }}
              </option>
            </select>
            <p
              v-if="selectedGroup?.description"
              class="mt-2 text-sm text-gray-600"
            >
              {{ selectedGroup.description }}
            </p>
          </div>

          <div>
            <label
              for="email"
              class="block text-sm font-medium text-gray-700 mb-2"
            >
              E-Mail-Adresse *
            </label>
            <input
              id="email"
              v-model="form.email"
              type="email"
              required
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
              placeholder="ihre.email@example.com"
            >
          </div>

          <div
            v-if="error"
            class="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700"
          >
            {{ error }}
          </div>

          <div
            v-if="success"
            class="p-4 bg-green-50 border border-green-200 rounded-lg text-green-700"
          >
            {{ success }}
          </div>

          <button
            type="submit"
            :disabled="loading || !form.groupId"
            class="w-full px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            {{ loading ? 'Wird verarbeitet...' : 'Newsletter abmelden' }}
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

useHead({
  title: 'Newsletter abmelden - Harheimer TC',
})

const groups = ref([])
const loadingGroups = ref(true)
const form = ref({
  groupId: '',
  email: ''
})

const loading = ref(false)
const error = ref('')
const success = ref('')

const selectedGroup = computed(() => {
  return groups.value.find(g => g.id === form.value.groupId)
})

async function loadGroups() {
  try {
    const response = await $fetch('/api/newsletter/groups/public-list')
    groups.value = response.groups || []
  } catch (err) {
    console.error('Fehler beim Laden der Newsletter-Gruppen:', err)
    error.value = 'Fehler beim Laden der verfügbaren Newsletter. Bitte versuchen Sie es später erneut.'
  } finally {
    loadingGroups.value = false
  }
}

async function unsubscribe() {
  loading.value = true
  error.value = ''
  success.value = ''

  try {
    const response = await $fetch('/api/newsletter/unsubscribe-by-email', {
      method: 'POST',
      body: form.value
    })

    success.value = response.message || 'Sie wurden erfolgreich vom Newsletter abgemeldet.'
    form.value = { groupId: '', email: '' }
  } catch (err) {
    error.value = err.data?.statusMessage || err.message || 'Fehler bei der Abmeldung. Bitte versuchen Sie es später erneut.'
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadGroups()
})
</script>

