<script setup lang="ts">
import { computed } from 'vue'
import Select from 'primevue/select'

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)
</script>

<template>
  <div class="flex flex-col gap-3 rounded-lg border border-violet-100 bg-white/80 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
    <div class="flex flex-wrap items-center gap-2">
      <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">Jahr</p>
      <span class="rounded-full border border-violet-100 bg-violet-50/70 px-3 py-1.5 text-xs font-semibold text-slate-600">
          {{ currentSeason.currentPhase || 'Kein Status' }}
      </span>
      <span class="rounded-full border border-violet-100 bg-white px-3 py-1.5 text-xs font-semibold text-slate-600">
          {{ currentSeason.isCurrent ? 'Oeffentliches Jahr' : 'Nicht aktiv' }}
      </span>
    </div>

    <div class="lg:min-w-[330px]">
      <Select
        v-model="selectedSeasonId"
        :options="seasonOptions"
        option-label="label"
        option-value="value"
        class="w-full"
      />
    </div>
  </div>
</template>
