<template>
  <div class="trophy-cabinet">
    <div class="mb-6">
      <h2 class="text-2xl font-bold text-amber-800 mb-2">🏆 Trophy Cabinet</h2>
      <p class="text-gray-600">Your earned achievements shine here! Collect more to fill your shelf.</p>
      <div class="mt-4 flex items-center">
        <div class="w-full bg-gray-200 rounded-full h-3">
          <div 
            class="bg-gradient-to-r from-amber-400 to-amber-600 h-3 rounded-full transition-all duration-500" 
            :style="{ width: `${progressPercentage}%` }"
          ></div>
        </div>
        <span class="ml-4 text-sm font-semibold text-amber-700">{{ earnedCount }}/{{ totalAchievements }} ({{ progressPercentage }}%)</span>
      </div>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
      <div 
        v-for="achievement in achievements" 
        :key="achievement.id"
        class="relative group"
      >
        <div 
          class="trophy-card p-5 rounded-2xl border-2 transition-all duration-300 transform"
          :class="[
            achievement.isEarned 
              ? 'border-amber-300 bg-gradient-to-br from-amber-50 to-amber-100 shadow-lg hover:shadow-2xl hover:scale-105' 
              : 'border-gray-300 bg-gray-100 opacity-60 grayscale'
          ]"
        >
          <!-- Trophy Icon -->
          <div class="text-5xl mb-4 text-center">
            {{ achievement.icon }}
          </div>
          
          <!-- Lock overlay for unearned -->
          <div 
            v-if="!achievement.isEarned"
            class="absolute inset-0 bg-gray-800 bg-opacity-70 rounded-2xl flex items-center justify-center"
          >
            <div class="text-white text-center">
              <div class="text-3xl mb-2">🔒</div>
              <div class="text-sm font-semibold">Locked</div>
            </div>
          </div>

          <!-- Content -->
          <h3 class="text-lg font-bold mb-2" :class="achievement.isEarned ? 'text-gray-900' : 'text-gray-500'">
            {{ achievement.title }}
          </h3>
          <p class="text-sm mb-3" :class="achievement.isEarned ? 'text-gray-700' : 'text-gray-400'">
            {{ achievement.description }}
          </p>
          
          <!-- Category badge -->
          <div class="inline-block px-3 py-1 text-xs rounded-full" 
               :class="achievement.isEarned ? 'bg-amber-200 text-amber-800' : 'bg-gray-300 text-gray-500'">
            {{ achievement.category }}
          </div>

          <!-- Earned date -->
          <div v-if="achievement.isEarned" class="mt-4 pt-3 border-t border-amber-200">
            <div class="text-xs text-amber-600 font-medium">
              🎉 Earned on {{ achievement.earnedDate }}
            </div>
          </div>
        </div>

        <!-- Glow effect for earned trophies on hover -->
        <div
          v-if="achievement.isEarned"
          class="absolute -inset-1 bg-gradient-to-r from-blue-400 to-blue-600 rounded-2xl blur opacity-0 group-hover:opacity-30 transition-opacity duration-300 -z-10"
        ></div>
      </div>
    </div>

    <!-- Empty state message -->
    <div v-if="earnedCount === 0" class="text-center py-12">
      <div class="text-6xl mb-4">📭</div>
      <h3 class="text-xl font-semibold text-gray-700 mb-2">No trophies yet!</h3>
      <p class="text-gray-500">Start using the app to earn your first achievements.</p>
    </div>
  </div>
</template>

<script setup>
import { useGamificationStore } from '@/stores/gamificationStore'
import { storeToRefs } from 'pinia'

const gamificationStore = useGamificationStore()
const { 
  achievements, 
  earnedCount, 
  totalAchievements, 
  progressPercentage 
} = storeToRefs(gamificationStore)
</script>

<style scoped>
.trophy-card {
  position: relative;
  z-index: 1;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>