<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Crown, Star, Trophy } from '@lucide/vue'

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

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

const winnerGradients = [
  'from-violet-200 to-fuchsia-100',
  'from-indigo-200 to-violet-100',
  'from-sky-200 to-violet-100',
  'from-rose-200 to-amber-100',
  'from-violet-200 to-amber-100',
  'from-fuchsia-200 to-rose-100',
]

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-12 pb-16">
    <PageHero
      eyebrow="Gewinner Archiv"
      title="Jahre, Gewinner und Show-Historie"
      description="Das Archiv macht Awards dauerhaft sichtbar und verlinkbar. Kategorien, Gewinner und Banner bleiben pro Jahr nachvollziehbar."
      :icon="Trophy"
    />

    <!-- Year tabs -->
    <div class="flex flex-wrap gap-2">
      <button
        v-for="year in years"
        :key="year"
        :class="[
          'rounded-full px-5 py-2 text-sm font-semibold transition',
          activeYear === year
            ? 'bg-violet-600 text-white shadow-lg shadow-violet-500/20'
            : 'border border-violet-200 bg-white text-violet-600 hover:bg-violet-50',
        ]"
        @click="selectYear(year)"
      >
        {{ year }}
      </button>
    </div>

    <!-- Winner grid -->
    <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
      <Card
        v-for="(item, index) in store.archive.items"
        :key="`${store.archive.year}-${item.category}`"
        class="overflow-hidden p-0"
      >
        <div :class="['relative h-[220px] bg-gradient-to-br', winnerGradients[index % winnerGradients.length]]">
          <div class="absolute inset-0 grid place-items-center text-white/70">
            <Star class="h-12 w-12" />
          </div>
          <span class="absolute left-3 top-3 inline-flex items-center gap-1 rounded-full bg-[linear-gradient(135deg,#ffd97a,#f6b938)] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.2em] text-amber-950">
            <Crown class="h-3 w-3" /> Winner {{ store.archive.year }}
          </span>
        </div>
        <div class="p-5">
          <p class="text-[10px] uppercase tracking-[0.2em] text-violet-400">{{ item.category }}</p>
          <p class="mt-1 font-[Cormorant_Garamond] text-2xl text-violet-800">{{ item.winnerName }}</p>
          <p class="text-sm text-slate-500">{{ item.winnerSlug }}</p>
        </div>
      </Card>
    </div>

    <p class="text-xs text-slate-400">Bilder sind Platzhalter – echte Banner werden pro Jahr im Admin gepflegt.</p>
  </div>
</template>
