<template>
  <div class="achievement-showcase">
    <!-- Mode indicator -->
    <div class="mode-indicator mb-8 p-4 rounded-xl bg-gradient-to-r from-slate-50 to-gray-100 border border-gray-200">
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <div 
            class="w-10 h-10 rounded-full flex items-center justify-center mr-4"
            :class="isPrivateGarage ? 'bg-amber-100 text-amber-700' : 'bg-emerald-100 text-emerald-700'"
          >
            {{ isPrivateGarage ? '🏆' : '🏅' }}
          </div>
          <div>
            <h3 class="font-bold text-lg">
              {{ isPrivateGarage ? 'Private Garage Trophy Showcase' : 'Corporate Fleet Badge Board' }}
            </h3>
            <p class="text-sm text-gray-600">
              {{ isPrivateGarage 
                ? 'Playful trophies for personal achievements' 
                : 'Professional badges for fleet optimization' 
              }}
            </p>
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <div class="text-sm text-gray-500">
            Current mode: 
            <span class="font-semibold" :class="isPrivateGarage ? 'text-amber-700' : 'text-emerald-700'">
              {{ isPrivateGarage ? 'Private Garage' : 'Corporate Fleet' }}
            </span>
          </div>
          <button 
            @click="toggleMode"
            class="px-4 py-2 text-sm font-medium rounded-lg border transition-colors"
            :class="isPrivateGarage 
              ? 'border-amber-300 text-amber-700 bg-amber-50 hover:bg-amber-100' 
              : 'border-emerald-300 text-emerald-700 bg-emerald-50 hover:bg-emerald-100'"
          >
            Switch to {{ isPrivateGarage ? 'Corporate' : 'Private' }}
          </button>
        </div>
      </div>
    </div>

    <!-- Dynamic component rendering -->
    <div class="component-container">
      <TrophyCabinet v-if="isPrivateGarage" />
      <BadgeBoard v-else />
    </div>

    <!-- Gamification stats -->
    <div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="p-5 rounded-xl bg-white border border-gray-200 shadow-sm">
        <div class="flex items-center">
          <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-xl mr-4">
            📈
          </div>
          <div>
            <div class="text-2xl font-bold text-gray-900">{{ earnedCount }}</div>
            <div class="text-sm text-gray-600">Achievements Earned</div>
          </div>
        </div>
      </div>
      <div class="p-5 rounded-xl bg-white border border-gray-200 shadow-sm">
        <div class="flex items-center">
          <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 text-xl mr-4">
            🎯
          </div>
          <div>
            <div class="text-2xl font-bold text-gray-900">{{ progressPercentage }}%</div>
            <div class="text-sm text-gray-600">Overall Progress</div>
          </div>
        </div>
      </div>
      <div class="p-5 rounded-xl bg-white border border-gray-200 shadow-sm">
        <div class="flex items-center">
          <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 text-xl mr-4">
            ⭐
          </div>
          <div>
            <div class="text-2xl font-bold text-gray-900">{{ nextAchievement }}</div>
            <div class="text-sm text-gray-600">Next Achievement</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Help text -->
    <div class="mt-8 p-4 bg-gray-50 rounded-lg border border-gray-200">
      <div class="flex items-start">
        <div class="text-gray-500 mr-3">💡</div>
        <div class="text-sm text-gray-600">
          <span class="font-semibold">How to earn more:</span> 
          {{ isPrivateGarage 
            ? 'Add vehicles, log expenses, complete daily quizzes, and find services to unlock trophies.' 
            : 'Optimize fleet efficiency, reduce costs, manage multiple vehicles, and maintain service records to earn badges.' 
          }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useAppModeStore } from '@/stores/appModeStore'
import { useGamificationStore } from '@/stores/gamificationStore'
import { storeToRefs } from 'pinia'
import TrophyCabinet from './TrophyCabinet.vue'
import BadgeBoard from './BadgeBoard.vue'

const appModeStore = useAppModeStore()
const gamificationStore = useGamificationStore()

const { isPrivateGarage, isCorporateFleet, toggleMode } = appModeStore
const { earnedCount, progressPercentage, lockedAchievements } = storeToRefs(gamificationStore)

const nextAchievement = computed(() => {
  if (lockedAchievements.value.length > 0) {
    return lockedAchievements.value[0].title
  }
  return 'All earned!'
})
</script>

<style scoped>
.achievement-showcase {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>