<template>
  <div>
    <div class="flex justify-between items-center mb-6">
      <div>
        <h2 class="text-2xl sm:text-3xl font-display font-bold text-gray-900 mb-2">
          Termine verwalten
        </h2>
        <div class="w-24 h-1 bg-primary-600" />
      </div>
      <button
        class="flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"
        @click="openAddModal"
      >
        <Plus
          :size="20"
          class="mr-2"
        />
        Termin hinzufügen
      </button>
    </div>

    <!-- Loading State -->
    <div
      v-if="isLoading"
      class="flex items-center justify-center py-12"
    >
      <Loader2
        :size="40"
        class="animate-spin text-primary-600"
      />
    </div>

    <!-- Termine Table -->
    <div
      v-else
      class="bg-white rounded-xl shadow-lg overflow-hidden"
    >
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Datum
              </th>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Uhrzeit
              </th>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Titel
              </th>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Beschreibung
              </th>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Kategorie
              </th>
              <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                Aktionen
              </th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr
              v-for="termin in termine"
              :key="`${termin.datum}-${termin.uhrzeit || ''}-${termin.titel}`"
              class="hover:bg-gray-50"
            >
              <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
                {{ formatDate(termin.datum) }}
              </td>
              <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
                {{ termin.uhrzeit || '-' }}
              </td>
              <td class="px-4 py-3 text-sm font-medium text-gray-900">
                {{ termin.titel }}
              </td>
              <td class="px-4 py-3 text-sm text-gray-600">
                {{ termin.beschreibung || '-' }}
              </td>
              <td class="px-4 py-3 whitespace-nowrap">
                <span
                  :class="{
                    'bg-blue-100 text-blue-800': termin.kategorie === 'Training',
                    'bg-green-100 text-green-800': termin.kategorie === 'Punktspiel',
                    'bg-purple-100 text-purple-800': termin.kategorie === 'Turnier',
                    'bg-yellow-100 text-yellow-800': termin.kategorie === 'Veranstaltung',
                    'bg-gray-100 text-gray-800': termin.kategorie === 'Sonstiges'
                  }"
                  class="px-2 py-1 text-xs font-medium rounded-full"
                >{{ termin.kategorie }}</span>
              </td>
              <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium space-x-3">
                <button
                  class="text-gray-600 hover:text-gray-900"
                  title="Bearbeiten"
                  @click="openEditModal(termin)"
                >
                  <Pencil :size="18" />
                </button>
                <button
                  class="text-red-600 hover:text-red-900"
                  title="Löschen"
                  @click="confirmDelete(termin)"
                >
                  <Trash2 :size="18" />
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div
        v-if="termine.length === 0"
        class="text-center py-12 text-gray-500"
      >
        Keine Termine vorhanden.
      </div>
    </div>

    <!-- Add/Edit Modal -->
    <div
      v-if="showModal"
      class="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4"
      @click.self="closeModal"
    >
      <div class="bg-white rounded-xl shadow-2xl max-w-2xl w-full p-8">
        <h2 class="text-2xl font-display font-bold text-gray-900 mb-6">
          {{ isEditing ? 'Termin bearbeiten' : 'Termin hinzufügen' }}
        </h2>
        <form
          class="space-y-4"
          @submit.prevent="saveTermin"
        >
          <div class="grid grid-cols-3 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Datum *</label>
              <input
                v-model="formData.datum"
                type="date"
                required
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
                :disabled="isSaving"
              >
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Uhrzeit</label>
              <input
                v-model="formData.uhrzeit"
                type="time"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
                :disabled="isSaving"
              >
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Kategorie *</label>
              <select
                v-model="formData.kategorie"
                required
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
                :disabled="isSaving"
              >
                <option value="Training">
                  Training
                </option>
                <option value="Punktspiel">
                  Punktspiel
                </option>
                <option value="Turnier">
                  Turnier
                </option>
                <option value="Veranstaltung">
                  Veranstaltung
                </option>
                <option value="Sonstiges">
                  Sonstiges
                </option>
              </select>
            </div>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Titel *</label>
            <input
              v-model="formData.titel"
              type="text"
              required
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
              :disabled="isSaving"
            >
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Beschreibung</label>
            <textarea
              v-model="formData.beschreibung"
              rows="3"
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
              :disabled="isSaving"
            />
          </div>
          <div
            v-if="errorMessage"
            class="flex items-center p-3 rounded-md bg-red-50 text-red-700 text-sm"
          >
            <AlertCircle
              :size="20"
              class="mr-2"
            /> {{ errorMessage }}
          </div>
          <div class="flex justify-end space-x-4 pt-4">
            <button
              type="button"
              class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
              :disabled="isSaving"
              @click="closeModal"
            >
              Abbrechen
            </button>
            <button
              type="submit"
              class="px-6 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors flex items-center"
              :disabled="isSaving"
            >
              <Loader2
                v-if="isSaving"
                :size="20"
                class="animate-spin mr-2"
              />
              <span>{{ isSaving ? 'Speichert...' : 'Speichern' }}</span>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Plus, Trash2, Loader2, AlertCircle, Pencil } from 'lucide-vue-next'

const isLoading = ref(true)
const isSaving = ref(false)
const termine = ref([])
const showModal = ref(false)
const errorMessage = ref('')
const isEditing = ref(false)
const originalTermin = ref(null)

const formData = ref({ datum: '', titel: '', beschreibung: '', kategorie: 'Sonstiges', uhrzeit: '' })

const loadTermine = async () => {
  isLoading.value = true
  try {
    const response = await $fetch('/api/termine-manage')
    termine.value = response.termine
  } catch (error) {
    console.error('Fehler beim Laden der Termine:', error)
  } finally {
    isLoading.value = false
  }
}

const openAddModal = () => {
  formData.value = { datum: '', titel: '', beschreibung: '', kategorie: 'Sonstiges', uhrzeit: '' }
  showModal.value = true; errorMessage.value = ''; isEditing.value = false; originalTermin.value = null
}

const closeModal = () => { showModal.value = false; errorMessage.value = ''; isEditing.value = false; originalTermin.value = null }

const saveTermin = async () => {
  isSaving.value = true; errorMessage.value = ''
  try {
    if (isEditing.value && originalTermin.value) {
      const params = new URLSearchParams({ datum: originalTermin.value.datum, uhrzeit: originalTermin.value.uhrzeit || '', titel: originalTermin.value.titel, beschreibung: originalTermin.value.beschreibung || '', kategorie: originalTermin.value.kategorie || 'Sonstiges' })
      await $fetch(`/api/termine-manage?${params.toString()}`, { method: 'DELETE' })
    }
    await $fetch('/api/termine-manage', { method: 'POST', body: formData.value })
    closeModal(); await loadTermine()
  } catch (error) {
    errorMessage.value = error.data?.message || 'Fehler beim Speichern des Termins.'
  } finally {
    isSaving.value = false
  }
}

const openEditModal = (termin) => {
  formData.value = { datum: termin.datum || '', uhrzeit: termin.uhrzeit || '', titel: termin.titel || '', beschreibung: termin.beschreibung || '', kategorie: termin.kategorie || 'Sonstiges' }
  originalTermin.value = { ...termin }; isEditing.value = true; showModal.value = true; errorMessage.value = ''
}

const confirmDelete = async (termin) => {
  window.showConfirmModal('Termin löschen', `Möchten Sie den Termin "${termin.titel}" wirklich löschen?`, async () => {
    try {
      const params = new URLSearchParams({ datum: termin.datum, uhrzeit: termin.uhrzeit || '', titel: termin.titel, beschreibung: termin.beschreibung || '', kategorie: termin.kategorie || 'Sonstiges' })
      await $fetch(`/api/termine-manage?${params.toString()}`, { method: 'DELETE' })
      await loadTermine(); window.showSuccessModal('Erfolg', 'Termin wurde erfolgreich gelöscht')
    } catch (error) {
      console.error('Fehler beim Löschen:', error); window.showErrorModal('Fehler', 'Fehler beim Löschen des Termins')
    }
  })
}

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

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