<template>
  <Card class="flex h-[520px] flex-col overflow-hidden xl:h-[684px]">
    <div class="flex items-center justify-between gap-3 border-b border-violet-100 bg-gradient-to-br from-white via-violet-50/70 to-[#f7eef8] px-5 py-4">
      <div>
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Award-Jahre</p>
        <p class="mt-1 text-sm text-slate-500">{{ seasons.length }} Jahre im Setup</p>
      </div>
      <Button variant="ghost" size="sm" class="gap-2 border border-violet-100 text-violet-700 hover:bg-violet-50" @click="openCreateModal">
        <PlusCircle class="h-4 w-4" />
        Neu
      </Button>
    </div>

    <div class="min-h-0 flex-1 space-y-4 overflow-y-auto p-5">
      <template v-if="selectedSeason">
        <div class="rounded-[24px] border border-violet-100 bg-white p-5">
          <div class="flex items-start justify-between gap-3">
            <div>
              <p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Ausgewählt</p>
              <strong class="mt-2 block text-5xl leading-none text-slate-950">{{ selectedSeason.year }}</strong>
            </div>
            <span class="shrink-0 rounded-full border px-2.5 py-1 text-[11px] font-bold" :class="selectedSeason.isCurrent ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-slate-200 bg-slate-50 text-slate-500'">
              {{ selectedSeason.isCurrent ? 'Public' : 'Intern' }}
            </span>
          </div>
          <p class="mt-5 line-clamp-2 text-lg font-bold leading-6 text-slate-900">{{ selectedSeason.name }}</p>
          <div class="mt-5 grid gap-3 border-t border-violet-100 pt-4">
            <div class="flex items-center justify-between gap-3 rounded-2xl bg-violet-50/70 px-4 py-3">
              <span class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Phase</span>
              <strong class="truncate text-sm text-violet-800">{{ selectedSeason.currentPhase }}</strong>
            </div>
            <div class="flex items-center justify-between gap-3 rounded-2xl bg-violet-50/70 px-4 py-3">
              <span class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Kategorien</span>
              <strong class="text-sm text-slate-900">{{ selectedSeason.categoryCount }}</strong>
            </div>
            <div class="flex items-center justify-between gap-3 rounded-2xl bg-violet-50/70 px-4 py-3">
              <span class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Sichtbarkeit</span>
              <strong class="text-sm text-slate-900">{{ selectedSeason.isCurrent ? 'Public aktiv' : 'Intern' }}</strong>
            </div>
          </div>
          <div class="mt-4 flex items-center justify-end text-xs text-slate-500">
            <span v-if="switchingSeasonId === selectedSeason.id" class="inline-flex items-center gap-1 font-bold text-violet-600">
              <LoaderCircle class="h-3.5 w-3.5 animate-spin" />
              lädt
            </span>
          </div>
        </div>

        <label class="block space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Jahr wechseln</span>
          <NativeSelect v-model="selectedSeasonSelectValue" :options="seasonOptions" />
        </label>
      </template>

      <div v-else class="px-5 py-8 text-center">
        <CalendarPlus class="mx-auto h-7 w-7 text-violet-300" />
        <p class="mt-3 text-sm text-slate-500">Noch keine Award-Jahre aus der API geladen.</p>
        <Button class="mt-5 gap-2" size="sm" @click="openCreateModal">
          <PlusCircle class="h-4 w-4" />
          Erstes Jahr anlegen
        </Button>
      </div>
    </div>
  </Card>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { CalendarPlus, LoaderCircle, PlusCircle } from '@lucide/vue'

import type { AdminSeasonListItem } from '../../types/awards'
import Button from '../ui/Button.vue'
import Card from '../ui/Card.vue'
import NativeSelect from '../ui/NativeSelect.vue'

const props = defineProps<{
  seasons: AdminSeasonListItem[]
  selectedSeasonId: number | null
  openCreateModal: () => void
  loadSeasonDetail: (seasonId: number) => Promise<void>
}>()

const switchingSeasonId = ref<number | null>(null)
const selectedSeason = computed(() =>
  props.seasons.find((season) => season.id === props.selectedSeasonId) ?? props.seasons[0] ?? null,
)
const seasonOptions = computed(() =>
  props.seasons.map((season) => ({
    label: `${season.year} · ${season.name}`,
    value: season.id,
  })),
)
const selectedSeasonSelectValue = computed({
  get: () => props.selectedSeasonId,
  set: (value) => {
    if (typeof value === 'number') {
      void selectSeason(value)
    }
  },
})

async function selectSeason(seasonId: number) {
  if (seasonId === props.selectedSeasonId || switchingSeasonId.value) {
    return
  }

  switchingSeasonId.value = seasonId
  try {
    await props.loadSeasonDetail(seasonId)
  } finally {
    switchingSeasonId.value = null
  }
}
</script>
