<template>
  <section class="card">
    <h2>训练计划</h2>
    <p v-if="loading" class="muted">加载中…</p>
    <p v-else-if="error" class="error">{{ error }}</p>
    <template v-else>
      <div v-for="plan in plans" :key="plan.id" class="list-item">
        <strong>{{ plan.detail.goal }}</strong>
        <p class="muted">
          第 {{ plan.detail.currentDay }} / {{ plan.detail.cycleDays }} 天 · 状态 {{ plan.status }}
        </p>
        <div v-for="ex in plan.detail.exercises" :key="ex.name" class="metric-row">
          <span>{{ ex.name }}</span>
        </div>
      </div>
      <p v-if="!plans.length" class="muted">暂无训练计划，可在 Demo 或 API 中基于报告创建</p>
    </template>
  </section>
</template>

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

const plans = ref<Awaited<ReturnType<typeof listTrainingPlans>>['list']>([])
const loading = ref(true)
const error = ref('')

onMounted(async () => {
  try {
    const { list } = await listChildren()
    const child = list[0]
    if (!child) {
      plans.value = []
      return
    }
    const data = await listTrainingPlans(child.id)
    plans.value = data.list
  } catch (err) {
    error.value = err instanceof Error ? err.message : '加载失败'
  } finally {
    loading.value = false
  }
})
</script>
