<template>
  <div>
    <div
      v-if="naechsteTermine.length > 0"
      class="space-y-2 mb-6"
    >
      <div
        v-for="(termin, index) in naechsteTermine"
        :key="index"
        class="bg-gray-50 rounded-lg p-3 hover:bg-gray-100 transition-colors"
      >
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <div class="w-16 h-16 bg-primary-600 rounded-lg flex flex-col items-center justify-center text-white text-[10px] font-bold leading-tight py-1.5 px-1.5">
              <span class="text-lg leading-none">{{ formatDay(termin.datum) }}</span>
              <span class="leading-none mt-0.5">{{ formatMonth(termin.datum) }}</span>
              <span class="text-[10px] leading-none opacity-95 mt-0.5">{{ formatYear(termin.datum) }}</span>
              <span
                v-if="termin.uhrzeit"
                class="text-[10px] leading-none mt-1 px-2 py-0.5 rounded-md bg-white/40 ring-1 ring-white/50 backdrop-blur-[1.5px] whitespace-nowrap"
              >
                {{ formatOnlyTime(termin.uhrzeit) }} Uhr
              </span>
            </div>
            <div>
              <h3 class="font-semibold text-gray-900">
                {{ termin.titel }}
              </h3>
              <p class="text-sm text-gray-600">
                {{ termin.beschreibung }}
              </p>
            </div>
          </div>
          <span
            :class="[
              'px-2 py-1 text-xs font-medium rounded-full',
              termin.kategorie === 'Turnier' ? 'bg-yellow-100 text-yellow-800' : 'bg-blue-100 text-blue-800'
            ]"
          >
            {{ termin.kategorie }}
          </span>
        </div>
      </div>
    </div>

    <div
      v-else
      class="text-center py-8 bg-gray-50 rounded-lg"
    >
      <Calendar
        :size="32"
        class="text-gray-400 mx-auto mb-2"
      />
      <p class="text-gray-600 text-sm">
        Keine kommenden Termine
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Calendar } from 'lucide-vue-next'

const termine = ref([])

const naechsteTermine = computed(() => {
  const heute = new Date()
  
  const kommende = termine.value
    .filter(t => {
      // Datum + optionale Uhrzeit kombinieren
      let terminDatum
      if (t.uhrzeit && /^\d{2}:\d{2}$/.test(t.uhrzeit)) {
        const iso = `${t.datum}T${t.uhrzeit}:00`
        terminDatum = new Date(iso)
      } else {
        terminDatum = new Date(t.datum)
      }
      return terminDatum >= heute
    })
    .sort((a, b) => {
      const da = new Date(`${a.datum}${a.uhrzeit ? 'T' + a.uhrzeit + ':00' : ''}`)
      const db = new Date(`${b.datum}${b.uhrzeit ? 'T' + b.uhrzeit + ':00' : ''}`)
      return da - db
    })
  
  return kommende
})

const formatDay = (dateString) => {
  const date = new Date(dateString)
  return date.getDate()
}

const formatMonth = (dateString) => {
  const date = new Date(dateString)
  const monate = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
  return monate[date.getMonth()]
}

const formatOnlyTime = (uhrzeit) => {
  if (!uhrzeit) return ''
  return /^\d{2}:\d{2}$/.test(uhrzeit) ? uhrzeit : ''
}

const formatYear = (dateString) => {
  const date = new Date(dateString)
  return date.getFullYear()
}

const loadTermine = async () => {
  try {
    const response = await $fetch('/api/termine')
    termine.value = response.termine || []
  } catch (error) {
    console.error('Fehler beim Laden der Termine:', error)
    termine.value = []
  }
}

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

