<template>
  <section class="card">
    <h2>跟练打卡</h2>
    <p class="muted">{{ planGoal || '加载训练计划…' }}</p>
    <div v-if="exercise" class="list-item">
      <strong>{{ exercise.name }}</strong>
      <p class="muted">目标 {{ durationMinutes }} 分钟 · 得分 {{ score }}</p>
    </div>
    <div class="progress"><span :style="{ width: progress + '%' }"></span></div>
    <p class="muted">{{ statusText }}</p>
    <button class="btn" :disabled="running || !planId" @click="startPractice">开始跟练</button>
    <button v-if="planId" class="btn secondary" style="margin-top: 8px" :disabled="running" @click="submitRecord">
      提交打卡
    </button>
  </section>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { apiFetch, listChildren, listTrainingPlans } from '../api'

const planId = ref<number | null>(null)
const planGoal = ref('')
const exercise = ref<{ name: string } | null>(null)
const durationMinutes = ref(5)
const progress = ref(0)
const score = ref(80)
const statusText = ref('准备就绪')
const running = ref(false)

onMounted(async () => {
  try {
    const { list } = await listChildren()
    const child = list[0]
    if (!child) return
    const plans = await listTrainingPlans(child.id)
    const plan = plans.list[0]
    if (!plan) return
    planId.value = plan.id
    planGoal.value = plan.detail.goal
    exercise.value = plan.detail.exercises[0] || null
    durationMinutes.value = plan.detail.exercises[0]?.durationMinutes || 5
  } catch {
    statusText.value = '暂无训练计划'
  }
})

async function startPractice() {
  running.value = true
  progress.value = 0
  statusText.value = '跟练中…'
  for (let step = 1; step <= 5; step += 1) {
    await new Promise((resolve) => setTimeout(resolve, 400))
    progress.value = step * 20
  }
  score.value = 78 + Math.floor(Math.random() * 15)
  statusText.value = '跟练完成，可提交打卡'
  running.value = false
}

async function submitRecord() {
  if (!planId.value || !exercise.value) return
  running.value = true
  try {
    await apiFetch(`/api/training/plans/${planId.value}/records`, {
      method: 'POST',
      body: JSON.stringify({
        exerciseId: 1,
        completed: true,
        score: score.value,
        durationSeconds: durationMinutes.value * 60,
        note: 'H5 跟练打卡',
      }),
    })
    statusText.value = '打卡成功 ✓'
  } catch (err) {
    statusText.value = err instanceof Error ? err.message : '打卡失败'
  } finally {
    running.value = false
  }
}
</script>
