<template>
  <div class="badge-board">
    <div class="mb-8">
      <h2 class="text-2xl font-bold text-slate-800 mb-2">🏅 Efficiency Badges</h2>
      <p class="text-gray-600">Professional recognition for fleet optimization and cost management.</p>
      <div class="mt-6 flex items-center justify-between">
        <div class="flex items-center space-x-4">
          <div class="flex items-center">
            <div class="w-3 h-3 rounded-full bg-emerald-500 mr-2"></div>
            <span class="text-sm text-gray-700">Earned: {{ earnedCount }}</span>
          </div>
          <div class="flex items-center">
            <div class="w-3 h-3 rounded-full bg-gray-300 mr-2"></div>
            <span class="text-sm text-gray-700">Available: {{ totalAchievements - earnedCount }}</span>
          </div>
        </div>
        <div class="text-right">
          <div class="text-sm text-gray-500">Fleet Score</div>
          <div class="text-2xl font-bold text-slate-800">{{ fleetScore }}/100</div>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div 
        v-for="achievement in achievements" 
        :key="achievement.id"
        class="badge-card p-6 rounded-xl border transition-all duration-300"
        :class="[
          achievement.isEarned 
            ? 'border-emerald-200 bg-white shadow-md hover:shadow-lg' 
            : 'border-gray-200 bg-gray-50'
        ]"
      >
        <!-- Badge header -->
        <div class="flex items-start justify-between mb-4">
          <div class="flex items-center">
            <div 
              class="w-12 h-12 rounded-full flex items-center justify-center text-2xl"
              :class="achievement.isEarned ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-200 text-gray-400'"
            >
              {{ achievement.icon }}
            </div>
            <div class="ml-4">
              <h3 class="font-bold text-lg" :class="achievement.isEarned ? 'text-slate-900' : 'text-gray-500'">
                {{ achievement.title }}
              </h3>
              <div class="text-xs font-medium px-2 py-1 rounded-full inline-block mt-1"
                   :class="achievement.isEarned ? 'bg-blue-100 text-blue-700' : 'bg-gray-200 text-gray-500'">
                {{ achievement.category.toUpperCase() }}
              </div>
            </div>
          </div>
          
          <!-- Status indicator -->
          <div v-if="achievement.isEarned" class="text-emerald-600">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </div>
          <div v-else class="text-gray-400">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
            </svg>
          </div>
        </div>

        <!-- Description -->
        <p class="text-gray-600 mb-5" :class="{ 'opacity-70': !achievement.isEarned }">
          {{ achievement.description }}
        </p>

        <!-- Progress bar for unearned badges -->
        <div v-if="!achievement.isEarned" class="mt-4">
          <div class="flex justify-between text-xs text-gray-500 mb-1">
            <span>Progress</span>
            <span>0%</span>
          </div>
          <div class="w-full bg-gray-200 rounded-full h-2">
            <div class="bg-gray-400 h-2 rounded-full" style="width: 0%"></div>
          </div>
        </div>

        <!-- Earned details -->
        <div v-if="achievement.isEarned" class="mt-4 pt-4 border-t border-gray-100">
          <div class="flex justify-between items-center">
            <div class="text-sm text-gray-500">
              <span class="font-medium">Awarded:</span> {{ achievement.earnedDate }}
            </div>
            <div class="text-sm font-semibold text-emerald-700">
              +{{ badgePoints(achievement.category) }} pts
            </div>
          </div>
        </div>

        <!-- Action button -->
        <div class="mt-6">
          <button 
            v-if="!achievement.isEarned"
            class="w-full py-2 text-sm font-medium rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors"
            disabled
          >
            Not Yet Achieved
          </button>
          <button 
            v-else
            class="w-full py-2 text-sm font-medium rounded-lg bg-emerald-50 text-emerald-700 border border-emerald-200 hover:bg-emerald-100 transition-colors"
          >
            View Details
          </button>
        </div>
      </div>
    </div>

    <!-- Summary stats -->
    <div class="mt-10 p-6 bg-slate-50 rounded-xl border border-slate-200">
      <h3 class="font-bold text-lg text-slate-800 mb-4">Fleet Performance Summary</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
        <div class="text-center">
          <div class="text-3xl font-bold text-slate-800">{{ earnedCount }}</div>
          <div class="text-sm text-gray-600">Badges Earned</div>
        </div>
        <div class="text-center">
          <div class="text-3xl font-bold text-slate-800">{{ fleetScore }}</div>
          <div class="text-sm text-gray-600">Fleet Score</div>
        </div>
        <div class="text-center">
          <div class="text-3xl font-bold text-slate-800">{{ efficiencyBadgesCount }}</div>
          <div class="text-sm text-gray-600">Efficiency Badges</div>
        </div>
        <div class="text-center">
          <div class="text-3xl font-bold text-slate-800">{{ corporateBadgesCount }}</div>
          <div class="text-sm text-gray-600">Corporate Badges</div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const gamificationStore = useGamificationStore()
const {
  achievements,
  earnedCount,
  totalAchievements
} = storeToRefs(gamificationStore)

// Computed
const fleetScore = computed(() => {
  const base = earnedCount.value * 12
  return Math.min(base, 100)
})

const efficiencyBadgesCount = computed(() => {
  return achievements.value.filter(a => 
    a.category === 'efficiency' && a.isEarned
  ).length
})

const corporateBadgesCount = computed(() => {
  return achievements.value.filter(a => 
    a.category === 'corporate' && a.isEarned
  ).length
})

const badgePoints = (category) => {
  const points = {
    efficiency: 25,
    corporate: 30,
    finance: 20,
    service: 15,
    onboarding: 10,
    knowledge: 15,
    consistency: 10,
    social: 5
  }
  return points[category] || 10
}
</script>

<style scoped>
.badge-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.badge-card:hover {
  transform: translateY(-2px);
}
</style>