<template>
  <section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-12">
        <h2 class="text-3xl font-bold text-gray-900 mb-4">Nächste Spiele</h2>
        <p class="text-lg text-gray-600">Aktuelle Termine und Spiele des Vereins</p>
      </div>

      <!-- Loading State -->
      <div v-if="isLoading" class="text-center py-8">
        <svg class="w-8 h-8 text-gray-400 mx-auto mb-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
        </svg>
        <p class="text-gray-600">Spielplan wird geladen...</p>
      </div>

      <!-- Error State -->
      <div v-else-if="error" class="text-center py-8">
        <svg class="w-12 h-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
        </svg>
        <p class="text-gray-600 mb-4">{{ error }}</p>
        <NuxtLink to="/spielplan" class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
          Zum Spielplan
        </NuxtLink>
      </div>

      <!-- Empty State -->
      <div v-else-if="!upcomingGames || upcomingGames.length === 0" class="text-center py-8">
        <svg class="w-12 h-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
        </svg>
        <h3 class="text-lg font-medium text-gray-900 mb-2">Keine kommenden Spiele</h3>
        <p class="text-gray-600 mb-4">Derzeit sind keine Spiele geplant.</p>
        <NuxtLink to="/spielplan" class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
          Zum Spielplan
        </NuxtLink>
      </div>

      <!-- Games Grid -->
      <div v-else class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        <div v-for="game in upcomingGames" :key="`${game.Datum}-${game.Mannschaft}`" 
             class="bg-white rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition-shadow">
          <div class="p-6">
            <!-- Date -->
            <div class="flex items-center mb-4">
              <svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
              <span class="text-sm font-medium text-gray-900">{{ formatDate(game.Datum) }}</span>
            </div>

            <!-- Teams -->
            <div class="mb-4">
              <div class="flex items-center justify-between">
                <div class="flex-1">
                  <p class="text-sm text-gray-600 mb-1">Mannschaft</p>
                  <p class="font-semibold text-gray-900">{{ game.Mannschaft || 'Nicht angegeben' }}</p>
                </div>
                <div class="text-center mx-4">
                  <div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
                    <span class="text-primary-600 font-bold text-sm">vs</span>
                  </div>
                </div>
                <div class="flex-1 text-right">
                  <p class="text-sm text-gray-600 mb-1">Gegner</p>
                  <p class="font-semibold text-gray-900">{{ game.Gegner || 'Nicht angegeben' }}</p>
                </div>
              </div>
            </div>

            <!-- Details -->
            <div class="space-y-2">
              <div v-if="game.Ort" class="flex items-center text-sm text-gray-600">
                <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                {{ game.Ort }}
              </div>
              
              <div v-if="game.Uhrzeit" class="flex items-center text-sm text-gray-600">
                <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                {{ formatTime(game.Uhrzeit) }}
              </div>

              <div v-if="game.Status" class="flex items-center text-sm">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                      :class="getStatusClass(game.Status)">
                  {{ game.Status }}
                </span>
              </div>
            </div>

            <!-- Result (if available) -->
            <div v-if="game.Ergebnis" class="mt-4 pt-4 border-t border-gray-200">
              <div class="text-center">
                <p class="text-sm text-gray-600 mb-1">Ergebnis</p>
                <p class="text-lg font-bold text-primary-600">{{ game.Ergebnis }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- View All Button -->
      <div v-if="upcomingGames && upcomingGames.length > 0" class="text-center mt-8">
        <NuxtLink to="/spielplan" 
                  class="inline-flex items-center px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
          Alle Spiele anzeigen
          <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </NuxtLink>
      </div>
    </div>
  </section>
</template>

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

const spielplanData = ref([])
const isLoading = ref(false)
const error = ref(null)

const loadData = async () => {
  isLoading.value = true
  error.value = null
  
  try {
    const response = await fetch('/api/spielplan')
    const result = await response.json()
    
    if (result.success) {
      spielplanData.value = result.data
    } else {
      error.value = result.message
    }
  } catch (err) {
    console.error('Fehler beim Laden des Spielplans:', err)
    error.value = 'Fehler beim Laden der Daten'
  } finally {
    isLoading.value = false
  }
}

const upcomingGames = computed(() => {
  if (!spielplanData.value || spielplanData.value.length === 0) return []
  
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  
  return spielplanData.value
    .filter(game => {
      if (!game.Datum) return false
      
      const gameDate = new Date(game.Datum)
      if (isNaN(gameDate.getTime())) return false
      
      return gameDate >= today
    })
    .sort((a, b) => {
      const dateA = new Date(a.Datum)
      const dateB = new Date(b.Datum)
      return dateA - dateB
    })
    .slice(0, 6) // Zeige nur die nächsten 6 Spiele
})

const formatDate = (dateString) => {
  if (!dateString) return '-'
  
  try {
    const date = new Date(dateString)
    if (isNaN(date.getTime())) {
      return dateString
    }
    
    return date.toLocaleDateString('de-DE', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric'
    })
  } catch {
    return dateString
  }
}

const formatTime = (timeString) => {
  if (!timeString) return '-'
  
  // Einfache Zeitformatierung (HH:MM)
  if (timeString.match(/^\d{1,2}:\d{2}$/)) {
    return timeString
  }
  
  return timeString
}

const getStatusClass = (status) => {
  const statusMap = {
    'Geplant': 'bg-blue-100 text-blue-800',
    'Abgesagt': 'bg-red-100 text-red-800',
    'Verschoben': 'bg-yellow-100 text-yellow-800',
    'Beendet': 'bg-green-100 text-green-800',
    'Läuft': 'bg-purple-100 text-purple-800'
  }
  
  return statusMap[status] || 'bg-gray-100 text-gray-800'
}

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