<template>
  <div class="success-page">
    <!-- 撒花装饰 -->
    <div class="confetti c1">🎊</div>
    <div class="confetti c2">🌟</div>
    <div class="confetti c3">✨</div>
    <div class="confetti c4">🎉</div>
    <div class="confetti c5">⭐</div>
    <div class="confetti c6">🎊</div>

    <div class="success-content">
      <!-- 撒花大图标 -->
      <div class="celebration-icon">🎉</div>
      <div class="success-title">保存成功!</div>
      <div class="success-sub">太棒了，你的绘本已保存</div>

      <!-- 封面卡片 - 3D 微倾斜效果 -->
      <div class="cover-card-wrap" v-if="coverUrl">
        <div class="cover-card">
          <img :src="coverUrl" class="cover-img" />
          <div class="cover-info">
            <div class="cover-name">{{ title }}</div>
            <div v-if="author" class="cover-author">作者：{{ author }}</div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-group">
        <button class="btn-primary action-btn" @click="goDubbing">
          <span class="action-icon">🎙️</span>
          <div class="action-text">
            <div class="action-main">给绘本配音</div>
            <div class="action-desc">为每一页添加AI语音</div>
          </div>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getWorkDetail } from '@/api'
import { store } from '@/utils/store'

const router = useRouter()
const route = useRoute()
const workId = computed(() => route.params.workId || store.workId)

const coverUrl = ref('')
const title = ref('')
const author = ref('')

async function loadWork() {
  try {
    if (!store.workDetail || store.workDetail.workId !== workId.value) {
      store.workDetail = null
      const res = await getWorkDetail(workId.value)
      store.workDetail = res.data
    }
    const w = store.workDetail
    title.value = w.title || '我的绘本'
    author.value = w.author || ''
    coverUrl.value = w.pageList?.[0]?.imageUrl || ''
  } catch { /* show page without cover */ }
}

function goDubbing() {
  router.push(`/dubbing/${workId.value}`)
}



onMounted(loadWork)
</script>

<style lang="scss" scoped>
.success-page {
  min-height: 100vh;
  background: linear-gradient(160deg, #FFF8E1 0%, #FFECB3 40%, #FFE0B2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* 撒花动画 */
.confetti {
  position: absolute;
  font-size: 24px;
  opacity: 0;
  pointer-events: none;
  animation: confettiFall 3s ease-in-out infinite;
}
.c1 { left: 10%; top: -5%; animation-delay: 0s; font-size: 28px; }
.c2 { left: 30%; top: -8%; animation-delay: 0.5s; font-size: 20px; }
.c3 { left: 55%; top: -3%; animation-delay: 1s; font-size: 22px; }
.c4 { left: 75%; top: -6%; animation-delay: 1.5s; font-size: 26px; }
.c5 { left: 90%; top: -4%; animation-delay: 0.8s; font-size: 18px; }
.c6 { left: 45%; top: -7%; animation-delay: 2s; font-size: 24px; }
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.8; }
  80% { opacity: 0.6; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.success-content {
  width: 100%;
  max-width: 360px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.celebration-icon {
  font-size: 64px;
  animation: celebrationBounce 0.8s ease;
  margin-bottom: 12px;
}
@keyframes celebrationBounce {
  0% { transform: scale(0) rotate(-20deg); opacity: 0; }
  50% { transform: scale(1.3) rotate(10deg); }
  70% { transform: scale(0.9) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.success-title {
  font-size: 26px;
  font-weight: 900;
  color: #4A3728;
  letter-spacing: 1px;
}
.success-sub {
  font-size: 15px;
  color: #8D6E63;
  margin-top: 6px;
  margin-bottom: 28px;
}

/* 封面卡片 3D 效果 */
.cover-card-wrap {
  perspective: 600px;
  margin-bottom: 32px;
}
.cover-card {
  width: 260px;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  transform: rotateY(-3deg) rotateX(2deg);
  transition: transform 0.4s ease;
}
.cover-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.cover-info {
  padding: 14px 16px;
}
.cover-name {
  font-size: 16px;
  font-weight: 700;
  color: #4A3728;
}
.cover-author {
  font-size: 12px;
  color: #8D6E63;
  margin-top: 3px;
}

.action-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.action-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 16px 20px;
  border-radius: var(--radius);
}
.action-icon { font-size: 24px; flex-shrink: 0; }
.action-text { flex: 1; }
.action-main { font-size: 15px; font-weight: 700; }
.action-desc { font-size: 12px; opacity: 0.7; margin-top: 2px; }
</style>
