<template>
  <Teleport to="body">
    <Transition name="reward-toast">
      <div
        v-if="activityStore.showRewardAnimation"
        class="fixed inset-0 z-9999 flex items-center justify-center pointer-events-none"
      >
        <div class="relative flex flex-col items-center gap-4">
          <!-- 光晕背景 -->
          <div class="absolute inset--20 rounded-full bg-amber-400/10 blur-3xl animate-pulse" />
          <!-- 碎片 +1 -->
          <div class="reward-item reward-item-1">
            <div
              class="flex items-center gap-2.5 px-6 py-3 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500 shadow-[0_4px_24px_rgba(99,102,241,0.5)]"
            >
              <span class="text-2xl">🧩</span>
              <span class="text-white text-lg font-bold tracking-wide"
                >碎片 +{{ activityStore.rewardText.fragment }}</span
              >
            </div>
          </div>

          <!-- 亚币 +2 -->
          <div class="reward-item reward-item-2">
            <div
              class="flex items-center gap-2.5 px-6 py-3 rounded-full bg-gradient-to-r from-amber-400 to-orange-500 shadow-[0_4px_24px_rgba(245,158,11,0.5)]"
            >
              <span class="text-2xl">💰</span>
              <span class="text-white text-lg font-bold tracking-wide"
                >亚币 +{{ activityStore.rewardText.yabi }}</span
              >
            </div>
          </div>

          <!-- 星星粒子效果 -->
          <div class="absolute inset--10">
            <span v-for="i in 8" :key="i" class="particle" :style="getParticleStyle(i)" />
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { useActivityStore } from '@/stores'

const activityStore = useActivityStore()

const getParticleStyle = (index: number) => {
  const angle = (index / 8) * 360
  const delay = index * 0.1
  return {
    '--angle': `${angle}deg`,
    '--delay': `${delay}s`,
  }
}
</script>

<style scoped>
.reward-toast-enter-active {
  transition: opacity 0.3s ease;
}
.reward-toast-leave-active {
  transition: opacity 0.5s ease 1.8s;
}
.reward-toast-enter-from,
.reward-toast-leave-to {
  opacity: 0;
}

.reward-item {
  opacity: 0;
  animation: rewardSlideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.reward-item-1 {
  animation-delay: 0.1s;
}
.reward-item-2 {
  animation-delay: 0.35s;
}

@keyframes rewardSlideUp {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.7);
  }
  60% {
    opacity: 1;
    transform: translateY(-8px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #a78bfa);
  opacity: 0;
  animation: particleBurst 1.2s ease-out var(--delay) forwards;
}

@keyframes particleBurst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1);
  }
  70% {
    opacity: 0.8;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(80px) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(120px) scale(0);
  }
}
</style>
