<script setup lang="ts">
import { computed } from 'vue'
import Select from 'primevue/select'
import { CalendarCog, CheckCircle2, Clock3, Sparkles, Tags, Users } from '@lucide/vue'

import { useAwardsStore } from '../../stores/awards'

const store = useAwardsStore()

const seasons = computed(() => store.adminSeasons)
const selectedSeasonId = computed({
  get: () => store.adminSelectedSeasonId,
  set: async (value) => {
    if (!value) return
    await store.loadAdminSeasonDetail(value)
  },
})

const seasonOptions = computed(() =>
  seasons.value.map((season) => ({
    label: `${season.year} · ${season.name}`,
    value: season.id,
  })),
)

const currentSeason = computed(() => store.adminSeasonDetail)
const yearStats = computed(() => [
  { label: 'Kategorien', value: currentSeason.value.categories.length, icon: Tags },
  { label: 'Kandidaten', value: currentSeason.value.candidates.length, icon: Users },
  { label: 'Reviews', value: currentSeason.value.pendingNominations.length, icon: Sparkles },
])
</script>

<template>
  <div class="rounded-[26px] border border-violet-100 bg-white/85 p-4 shadow-[0_18px_46px_rgba(168,145,214,0.09)]">
    <div class="grid gap-4 xl:grid-cols-[minmax(0,1fr)_360px] xl:items-center">
      <div class="flex flex-col gap-4 lg:flex-row lg:items-center">
        <div class="flex min-w-0 items-center gap-3">
          <div class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-violet-100 text-violet-700">
            <CalendarCog class="h-5 w-5" />
          </div>
          <div class="min-w-0">
            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Aktuelles Award-Jahr</p>
            <h2 class="truncate text-xl font-semibold text-slate-900">
              {{ currentSeason.year || 'Kein Jahr' }} · {{ currentSeason.name || 'Bitte Jahr auswaehlen' }}
            </h2>
          </div>
        </div>

        <div class="flex flex-wrap gap-2 lg:ml-auto">
          <span class="inline-flex items-center gap-2 rounded-full border border-violet-100 bg-violet-50/70 px-3 py-1.5 text-xs font-semibold text-slate-700">
            <Clock3 class="h-3.5 w-3.5 text-violet-600" />
            {{ currentSeason.currentPhase || 'Kein Status' }}
          </span>
          <span class="inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold" :class="currentSeason.isCurrent ? 'border-emerald-100 bg-emerald-50 text-emerald-700' : 'border-slate-100 bg-slate-50 text-slate-500'">
            <CheckCircle2 class="h-3.5 w-3.5" />
            {{ currentSeason.isCurrent ? 'Oeffentlich sichtbar' : 'Nicht oeffentlich' }}
          </span>
        </div>
      </div>

      <div class="space-y-2">
        <label class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Jahr wechseln</label>
        <Select
          v-model="selectedSeasonId"
          :options="seasonOptions"
          option-label="label"
          option-value="value"
          class="w-full"
        />
      </div>
    </div>

    <div class="mt-4 grid gap-2 sm:grid-cols-3">
      <div
        v-for="item in yearStats"
        :key="item.label"
        class="flex items-center justify-between rounded-2xl border border-violet-50 bg-violet-50/40 px-3 py-2"
      >
        <span class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.14em] text-slate-500">
          <component :is="item.icon" class="h-3.5 w-3.5 text-violet-500" />
          {{ item.label }}
        </span>
        <strong class="text-violet-800">{{ item.value }}</strong>
      </div>
    </div>
  </div>
</template>
