<template>
  <div class="generating-page">
    <div class="generating-card">
      <div v-if="status === 'generating'" class="generating-content">
        <div class="spinner"></div>
        <h2>正在生成你的绘本...</h2>
        <p>AI 正在根据你的画作和故事构思创作绘本，请稍候</p>
        <div class="progress-dots">
          <span class="dot" :class="{ active: dotIndex >= 0 }"></span>
          <span class="dot" :class="{ active: dotIndex >= 1 }"></span>
          <span class="dot" :class="{ active: dotIndex >= 2 }"></span>
        </div>
        <p class="progress-text">{{ progressTexts[dotIndex] }}</p>
      </div>

      <div v-else-if="status === 'completed'" class="completed-content">
        <check-circle-outlined class="success-icon" />
        <h2>绘本生成完成！</h2>
        <p>你的绘本「{{ title }}」已保存到作品库</p>
        <a-space>
          <a-button type="primary" size="large" shape="round" @click="router.push(`/p/works/${workId}`)">
            查看绘本
          </a-button>
          <a-button size="large" shape="round" @click="router.push('/p/create')">
            继续创作
          </a-button>
        </a-space>
      </div>

      <div v-else-if="status === 'failed'" class="failed-content">
        <close-circle-outlined class="fail-icon" />
        <h2>生成失败</h2>
        <p>抱歉，绘本生成遇到了问题，请重试</p>
        <a-button type="primary" size="large" shape="round" @click="router.push('/p/create')">
          重新创作
        </a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'
import { publicCreationApi } from '@/api/public'

const route = useRoute()
const router = useRouter()
const workId = Number(route.params.id)

const status = ref<'generating' | 'completed' | 'failed'>('generating')
const title = ref('')
const dotIndex = ref(0)

const progressTexts = ['正在分析你的画作...', '正在构思故事情节...', '正在绘制绘本插图...']

let pollTimer: ReturnType<typeof setInterval> | null = null
let dotTimer: ReturnType<typeof setInterval> | null = null

const pollStatus = async () => {
  try {
    const result = await publicCreationApi.getStatus(workId)
    if (result.status === 'completed' || result.status === 'draft') {
      status.value = 'completed'
      title.value = result.title
      if (pollTimer) clearInterval(pollTimer)
    } else if (result.status === 'failed') {
      status.value = 'failed'
      if (pollTimer) clearInterval(pollTimer)
    }
  } catch {
    // 静默重试
  }
}

onMounted(() => {
  // 轮询生成状态
  pollStatus()
  pollTimer = setInterval(pollStatus, 3000)

  // 动画
  dotTimer = setInterval(() => {
    dotIndex.value = (dotIndex.value + 1) % 3
  }, 2000)

  // P0 阶段：模拟 5 秒后完成（后续对接真实 AI 后移除）
  setTimeout(() => {
    if (status.value === 'generating') {
      status.value = 'completed'
      title.value = '我的第一本绘本'
      if (pollTimer) clearInterval(pollTimer)
    }
  }, 5000)
})

onUnmounted(() => {
  if (pollTimer) clearInterval(pollTimer)
  if (dotTimer) clearInterval(dotTimer)
})
</script>

<style scoped lang="scss">
$primary: #6366f1;

.generating-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

.generating-card {
  text-align: center;
  max-width: 400px;
  padding: 40px 24px;

  h2 { font-size: 20px; font-weight: 700; color: #1e1b4b; margin: 16px 0 8px; }
  p { font-size: 13px; color: #9ca3af; margin: 0 0 24px; }
}

.spinner {
  width: 64px;
  height: 64px;
  border: 4px solid rgba($primary, 0.1);
  border-top-color: $primary;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.progress-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;

  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e5e7eb;
    transition: all 0.3s;

    &.active {
      background: $primary;
      transform: scale(1.2);
    }
  }
}

.progress-text {
  font-size: 12px;
  color: #6b7280;
  min-height: 18px;
}

.success-icon { font-size: 64px; color: #10b981; }
.fail-icon { font-size: 64px; color: #ef4444; }
</style>
