<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useUserStore } from '@/stores/user'
import GlassCard from '@/components/ui/GlassCard.vue'
import AchievementBadge from '@/components/ui/AchievementBadge.vue'
import EmptyState from '@/components/ui/EmptyState.vue'

const userStore = useUserStore()
const auth = useAuthStore()
const unlocked = computed(() => userStore.achievements.filter(a => a.unlocked))
const locked = computed(() => userStore.achievements.filter(a => !a.unlocked))

const rewards = [
  { id: 'r1', title: 'Стикерпак UniVerse', price: 80, available: true },
  { id: 'r2', title: 'Термокружка ЮФУ', price: 150, available: true },
  { id: 'r3', title: 'Доп. консультация преподавателя', price: 220, available: false },
  { id: 'r4', title: 'Цифровой бейдж «Research Explorer»', price: 60, available: true },
]

onMounted(() => {
  if (auth.user) void userStore.fetchStudentData(auth.user.id)
})
</script>

<template>
  <div class="achievements page-content">
    <h1 class="page-title">Достижения и магазин наград</h1>

    <section>
      <h2 class="section-title">Полученные достижения</h2>
      <EmptyState
        v-if="!unlocked.length"
        title="Полученных достижений пока нет"
        subtitle="Они появятся после участия в лекциях и отзывах."
      />
      <div v-else class="list">
        <AchievementBadge
          v-for="a in unlocked"
          :key="a.id"
          :icon="a.icon"
          :title="a.title"
          :description="a.description"
          :unlocked="a.unlocked"
          :unlockedAt="a.unlockedAt"
          :coins="a.coins"
        />
      </div>
    </section>

    <section>
      <h2 class="section-title">Заблокированные</h2>
      <EmptyState
        v-if="!locked.length"
        title="Нет заблокированных достижений"
        subtitle="Backend пока не вернул список будущих достижений."
      />
      <div v-else class="list">
        <AchievementBadge
          v-for="a in locked"
          :key="a.id"
          :icon="a.icon"
          :title="a.title"
          :description="a.description"
          :unlocked="a.unlocked"
        />
      </div>
    </section>

    <section>
      <h2 class="section-title">Магазин наград</h2>
      <div class="rewards">
        <GlassCard v-for="r in rewards" :key="r.id" class="reward-card">
          <div class="reward-title">{{ r.title }}</div>
          <div class="reward-price">{{ r.price }} монет</div>
          <button class="btn-primary" :disabled="!r.available">
            {{ r.available ? 'Купить' : 'Недоступно' }}
          </button>
        </GlassCard>
      </div>
    </section>
  </div>
</template>

<style scoped>
.achievements { display: flex; flex-direction: column; gap: 20px; }
.list { display: flex; flex-direction: column; gap: 12px; }
.rewards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.reward-card { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.reward-title { font-weight: 700; }
.reward-price { color: var(--color-text-secondary); font-size: 13px; }
</style>
