<template>
  <div class="min-h-full py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-6">
        Mitgliederbereich
      </h1>
      <div class="w-24 h-1 bg-primary-600 mb-8" />

      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        <!-- Mein Profil -->
        <NuxtLink
          to="/mitgliederbereich/profil"
          class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
        >
          <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center group-hover:bg-primary-600 transition-colors">
              <User
                :size="24"
                class="text-primary-600 group-hover:text-white"
              />
            </div>
            <h2 class="ml-4 text-xl font-semibold text-gray-900">
              Mein Profil
            </h2>
          </div>
          <p class="text-gray-600">
            Persönliche Daten und Passwort verwalten
          </p>
        </NuxtLink>

        <!-- Mitgliederliste -->
        <NuxtLink
          to="/mitgliederbereich/mitglieder"
          class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
        >
          <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center group-hover:bg-primary-600 transition-colors">
              <Users
                :size="24"
                class="text-primary-600 group-hover:text-white"
              />
            </div>
            <h2 class="ml-4 text-xl font-semibold text-gray-900">
              Mitglieder
            </h2>
          </div>
          <p class="text-gray-600">
            Kontaktdaten der Vereinsmitglieder
          </p>
        </NuxtLink>

        <!-- News -->
        <NuxtLink
          to="/mitgliederbereich/news"
          class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
        >
          <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center group-hover:bg-primary-600 transition-colors">
              <Newspaper
                :size="24"
                class="text-primary-600 group-hover:text-white"
              />
            </div>
            <h2 class="ml-4 text-xl font-semibold text-gray-900">
              News
            </h2>
          </div>
          <p class="text-gray-600">
            Neuigkeiten und Ankündigungen
          </p>
        </NuxtLink>
      </div>

      <!-- Geburtstage Widget (statt Willkommens-Kachel) -->
      <div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center">
            <Calendar
              :size="20"
              class="text-pink-600"
            />
          </div>
          <h2 class="ml-4 text-xl font-semibold text-gray-900">
            Geburtstage (nächste 4 Wochen)
          </h2>
        </div>
        <div
          v-if="loadingBirthdays"
          class="text-sm text-gray-500"
        >
          Lade...
        </div>
        <ul
          v-else
          class="space-y-2"
        >
          <li
            v-for="b in birthdays"
            :key="b.name + b.dayMonth"
            class="flex items-center justify-between p-3 border border-gray-100 rounded-lg"
          >
            <div class="min-w-0">
              <div class="font-medium text-gray-900 truncate">
                {{ b.name }}
              </div>
              <div class="text-xs text-gray-600">
                {{ b.dayMonth }}
              </div>
            </div>
            <div class="text-sm text-gray-500">
              {{ b.inDays === 0 ? 'Heute' : (b.inDays === 1 ? 'Morgen' : 'in ' + b.inDays + ' Tagen') }}
            </div>
          </li>
          <li
            v-if="birthdays.length === 0"
            class="text-sm text-gray-600"
          >
            Keine Geburtstage in den nächsten 4 Wochen.
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { User, Users, Newspaper, Check, Calendar } from 'lucide-vue-next'
import { ref, onMounted } from 'vue'

const authStore = useAuthStore()

const birthdays = ref([])
const loadingBirthdays = ref(true)

const loadBirthdays = async () => {
  loadingBirthdays.value = true
  try {
    const res = await $fetch('/api/birthdays')
    birthdays.value = res.birthdays || []
  } catch (e) {
    console.error('Fehler beim Laden der Geburtstage', e)
    birthdays.value = []
  } finally {
    loadingBirthdays.value = false
  }
}

onMounted(() => {
  loadBirthdays()
})

definePageMeta({
  middleware: 'auth',
  layout: 'default'
})

useHead({
  title: 'Mitgliederbereich - Harheimer TC',
})
</script>
