<script setup lang="ts">
import { onMounted, ref } from 'vue'

import Button from '../components/ui/Button.vue'
import Card from '../components/ui/Card.vue'
import { useAwardsStore } from '../stores/awards'

const store = useAwardsStore()
const years = [2025, 2024, 2023, 2022]
const activeYear = ref(2025)

onMounted(async () => {
  await store.loadHomeData()
  await store.loadArchive(activeYear.value)
})

async function selectYear(year: number) {
  activeYear.value = year
  await store.loadArchive(year)
}
</script>

<template>
  <div class="space-y-10 pb-14">
    <div class="space-y-4">
      <p class="text-xs font-semibold uppercase tracking-[0.35em] text-amber-500">Gewinnerarchiv</p>
      <h1 class="max-w-[12ch] font-[Cormorant_Garamond] text-6xl leading-[0.92] text-violet-800">Jahre, Gewinner und Show-Historie</h1>
      <p class="max-w-3xl text-lg leading-8 text-slate-600">
        Das Archiv macht Awards dauerhaft sichtbar und verlinkbar. Kategorien und Banner bleiben pro Jahr nachvollziehbar.
      </p>
    </div>

    <div class="flex flex-wrap gap-3">
      <Button
        v-for="year in years"
        :key="year"
        :variant="activeYear === year ? 'default' : 'ghost'"
        @click="selectYear(year)"
      >
        {{ year }}
      </Button>
    </div>

    <div class="grid gap-5 lg:grid-cols-3">
      <Card
        v-for="item in store.archive.items"
        :key="`${store.archive.year}-${item.category}`"
        class="p-7"
      >
        <p class="text-xs font-semibold uppercase tracking-[0.25em] text-violet-500">{{ store.archive.year }}</p>
        <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">{{ item.category }}</h2>
        <p class="mt-4 text-lg font-semibold text-slate-800">{{ item.winnerName }}</p>
        <p class="mt-1 text-sm text-slate-500">{{ item.winnerSlug }}</p>
      </Card>
    </div>
  </div>
</template>
