<template>
  <view class="page fade-in">
    <view class="hero">
      <text class="hero-title">进步轨迹</text>
      <text class="hero-sub">每次面试都在变强 💪</text>
    </view>

    <!-- 概览卡片 -->
    <view class="overview card">
      <view class="ov-row">
        <view class="ov-item">
          <text class="ov-num">{{ stats.completedInterviews || 0 }}</text>
          <text class="ov-label">完成面试</text>
        </view>
        <view class="ov-divider"></view>
        <view class="ov-item">
          <text class="ov-num accent">{{ stats.avgScore || 0 }}</text>
          <text class="ov-label">平均分</text>
        </view>
        <view class="ov-divider"></view>
        <view class="ov-item">
          <text class="ov-num streak">{{ stats.streak || 0 }}</text>
          <text class="ov-label">连击🔥</text>
        </view>
      </view>
    </view>

    <!-- 四维能力雷达图 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">能力维度</text>
      </view>
      <view class="radar-card card">
        <view class="radar-grid">
          <view class="dim-item" v-for="dim in dimensions" :key="dim.key">
            <view class="dim-bar-bg">
              <view
                class="dim-bar-fill"
                :style="{ width: dim.value + '%', background: dim.color }"
              ></view>
            </view>
            <view class="dim-info">
              <text class="dim-name">{{ dim.label }}</text>
              <text class="dim-score">{{ dim.value }}分</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 技能缺口分析 -->
    <view class="section" v-if="skillsGap">
      <view class="section-header">
        <text class="section-title">技能缺口</text>
        <text class="section-desc">{{ skillsGap.assessment }}</text>
      </view>
      <view class="gap-card card">
        <view class="gap-item" v-for="g in skillsGap.gaps" :key="g.dimension">
          <view class="gap-header">
            <text class="gap-name">{{ g.dimension }}</text>
            <text class="gap-badge" :class="g.level === '严重不足' ? 'badge-danger' : g.level === '需提升' ? 'badge-warn' : 'badge-ok'">{{ g.level }}</text>
          </view>
          <view class="gap-bar-bg">
            <view class="gap-bar-fill" :style="{ width: (g.currentScore / g.targetScore * 100) + '%' }"></view>
            <view class="gap-target" :style="{ left: '100%' }">▎</view>
          </view>
          <view class="gap-info">
            <text class="gap-score">当前 {{ g.currentScore }}分</text>
            <text class="gap-target-text">目标 {{ g.targetScore }}分</text>
            <text class="gap-diff" v-if="g.gap > 0">差 {{ g.gap }}分</text>
          </view>
        </view>
        <view class="gap-suggestions" v-if="skillsGap.suggestions.length">
          <text class="gap-suggest-title">提升建议</text>
          <view class="suggest-item" v-for="s in skillsGap.suggestions" :key="s.dimension">
            <text class="suggest-dim">{{ s.dimension }}：</text>
            <text class="suggest-tip">{{ s.tip }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 打卡日历 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">打卡记录</text>
        <text class="section-desc">连续 {{ stats.streak || 0 }} 天</text>
      </view>
      <view class="streak-card card">
        <view class="streak-grid">
          <view
            v-for="(day, idx) in weekDays"
            :key="idx"
            class="streak-day"
            :class="{ active: day.done, today: day.isToday }"
          >
            <view class="day-dot" v-if="day.done">✓</view>
            <view class="day-dot empty" v-else>·</view>
            <text class="day-label">{{ day.label }}</text>
          </view>
        </view>
        <view class="streak-motivation" v-if="stats.streak >= 3">
          <text>🔥 连续 {{ stats.streak }} 天模拟面试！继续保持！</text>
        </view>
      </view>
    </view>

    <!-- 最近面试 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">最近面试</text>
      </view>
      <view class="recent-list" v-if="progress.interviews && progress.interviews.length > 0">
        <view class="recent-item card" v-for="item in progress.interviews" :key="item.id" @click="viewReport(item.id)">
          <view class="recent-left">
            <text class="recent-pos">{{ item.position }}</text>
            <text class="recent-date">{{ formatDate(item.date) }}</text>
          </view>
          <view class="recent-right">
            <text class="recent-score" :class="scoreClass(item.totalScore)">{{ item.totalScore }}分</text>
            <text class="recent-arrow">›</text>
          </view>
        </view>
      </view>
      <view class="empty" v-else>
        <text class="empty-icon">🎯</text>
        <text class="empty-text">还没有面试记录，快去模拟一场吧</text>
      </view>
    </view>

    <view class="bottom-spacer"></view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { api } from '../../config'

const stats = ref({ completedInterviews: 0, avgScore: 0, streak: 0 })
const progress = ref({ dimensions: {}, interviews: [], recentScores: [] })
const skillsGap = ref(null)
const dimensions = ref([
  { key: 'logic', label: '逻辑思维', value: 0, color: 'linear-gradient(90deg, #6366F1, #818CF8)' },
  { key: 'expression', label: '表达能力', value: 0, color: 'linear-gradient(90deg, #10B981, #34D399)' },
  { key: 'professionalism', label: '专业度', value: 0, color: 'linear-gradient(90deg, #F59E0B, #FBBF24)' },
  { key: 'stability', label: '稳定性', value: 0, color: 'linear-gradient(90deg, #EF4444, #F87171)' },
])

// 最近7天打卡
const weekDays = ref([])

const token = () => uni.getStorageSync('token') || ''

onMounted(async () => {
  const t = token()
  if (!t) return

  await loadProgressData()
})

onShow(async () => {
  if (token()) await loadProgressData()
})

async function loadProgressData() {
  const t = token()
  if (!t) return
  try {
    // Load progress
    const res = await uni.request({
      url: api('/progress'), method: 'GET',
      header: { 'Authorization': `Bearer ${t}` }
    })
    if (res.statusCode === 200) {
      const d = res.data
      progress.value = d
      dimensions.value = dimensions.value.map(dim => ({
        ...dim,
        value: d.dimensions?.[dim.key] || 0,
      }))
    }
  } catch (e) { console.error(e) }

  try {
    const gapRes = await uni.request({
      url: api('/analyze/skills-gap'), method: 'POST',
      header: { 'Authorization': `Bearer ${t}`, 'Content-Type': 'application/json' },
      data: {},
    })
    if (gapRes.statusCode === 200) skillsGap.value = gapRes.data
  } catch (e) { /* skills gap not available */ }

  try {
    // Load stats
    const sres = await uni.request({
      url: api('/progress/stats'), method: 'GET',
      header: { 'Authorization': `Bearer ${t}` }
    })
    if (sres.statusCode === 200) {
      stats.value = sres.data
    }
  } catch (e) { console.error(e) }

  buildWeekDays()
}

function buildWeekDays() {
  const days = ['日', '一', '二', '三', '四', '五', '六']
  const today = new Date()
  const arr = []
  const checkinDates = (progress.value.checkins || []).map((c) => {
    const d = new Date(c.date || c.createdAt)
    return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
  })
  for (let i = 6; i >= 0; i--) {
    const d = new Date(today)
    d.setDate(d.getDate() - i)
    const key = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
    arr.push({
      label: days[d.getDay()],
      isToday: i === 0,
      done: checkinDates.includes(key),
    })
  }
  weekDays.value = arr
}

const formatDate = (d) => {
  if (!d) return ''
  const date = new Date(d)
  return `${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`
}
const scoreClass = (s) => s >= 80 ? 'score-high' : s >= 60 ? 'score-mid' : 'score-low'
const viewReport = (id) => uni.navigateTo({ url: `/pages/report/report?interviewId=${id}` })
</script>

<style scoped>
.page { min-height: 100vh; background: var(--color-bg); }
.hero {
  background: linear-gradient(135deg, #6366F1, #8B5CF6, #A78BFA);
  padding: 48rpx 32rpx 72rpx; border-radius: 0 0 48rpx 48rpx;
}
.hero-title { font-size: 40rpx; font-weight: 700; color: #FFF; display: block; }
.hero-sub { font-size: 22rpx; color: rgba(255,255,255,0.7); margin-top: 8rpx; display: block; }

.overview { margin: -40rpx 32rpx 0; border-radius: var(--radius-xl); padding: 32rpx; }
.ov-row { display: flex; align-items: center; justify-content: space-around; }
.ov-item { display: flex; flex-direction: column; align-items: center; }
.ov-num { font-size: 48rpx; font-weight: 800; color: var(--color-primary); }
.ov-num.accent { color: #10B981; }
.ov-num.streak { color: #F59E0B; }
.ov-label { font-size: 22rpx; color: var(--color-text-tertiary); margin-top: 4rpx; }
.ov-divider { width: 1rpx; height: 60rpx; background: var(--color-border); }

.section { padding: 32rpx 32rpx 0; }
.section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20rpx; }
.section-title { font-size: 30rpx; font-weight: 700; color: var(--color-text); }
.section-desc { font-size: 22rpx; color: var(--color-text-tertiary); }

.radar-card { padding: 32rpx; border-radius: var(--radius-xl); }
.radar-grid { display: flex; flex-direction: column; gap: 24rpx; }
.dim-item { display: flex; flex-direction: column; gap: 8rpx; }
.dim-info { display: flex; justify-content: space-between; }
.dim-name { font-size: 24rpx; font-weight: 600; color: var(--color-text); }
.dim-score { font-size: 24rpx; font-weight: 700; color: var(--color-primary); }
.dim-bar-bg { height: 16rpx; background: #F3F4F6; border-radius: 8rpx; overflow: hidden; }
.dim-bar-fill { height: 100%; border-radius: 8rpx; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }

.gap-card { padding: 32rpx; border-radius: var(--radius-xl); }
.gap-item { margin-bottom: 24rpx; }
.gap-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8rpx; }
.gap-name { font-size: 24rpx; font-weight: 600; color: var(--color-text); }
.gap-badge { font-size: 20rpx; font-weight: 600; padding: 2rpx 12rpx; border-radius: 20rpx; }
.badge-danger { background: #FEE2E2; color: #DC2626; }
.badge-warn { background: #FEF3C7; color: #D97706; }
.badge-ok { background: #D1FAE5; color: #059669; }
.gap-bar-bg { height: 20rpx; background: #F3F4F6; border-radius: 10rpx; position: relative; overflow: visible; }
.gap-bar-fill { height: 100%; border-radius: 10rpx; background: linear-gradient(90deg, #EF4444, #F59E0B, #10B981); transition: width 0.8s ease; }
.gap-target { position: absolute; top: -4rpx; font-size: 28rpx; color: #6366F1; }
.gap-info { display: flex; gap: 16rpx; margin-top: 6rpx; font-size: 20rpx; color: var(--color-text-tertiary); }
.gap-diff { color: #EF4444; font-weight: 600; }
.gap-suggestions { margin-top: 24rpx; padding-top: 20rpx; border-top: 1rpx solid var(--color-border); }
.gap-suggest-title { font-size: 24rpx; font-weight: 700; color: var(--color-text); margin-bottom: 12rpx; display: block; }
.suggest-item { font-size: 22rpx; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 8rpx; }
.suggest-dim { font-weight: 600; color: var(--color-primary); }

.streak-card { padding: 24rpx; border-radius: var(--radius-xl); }
.streak-grid { display: flex; justify-content: space-around; }
.streak-day { display: flex; flex-direction: column; align-items: center; gap: 6rpx; }
.streak-day.today .day-label { color: var(--color-primary); font-weight: 700; }
.day-dot {
  width: 48rpx; height: 48rpx; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24rpx; font-weight: 700;
}
.day-dot:not(.empty) { background: linear-gradient(135deg, #6366F1, #A78BFA); color: #FFF; }
.day-dot.empty { background: #F3F4F6; color: #D1D5DB; }
.day-label { font-size: 20rpx; color: var(--color-text-secondary); }
.streak-motivation { margin-top: 20rpx; text-align: center; padding: 16rpx; background: #FEF3C7; border-radius: var(--radius-md); }
.streak-motivation text { font-size: 24rpx; color: #92400E; font-weight: 600; }

.recent-list { display: flex; flex-direction: column; gap: 12rpx; }
.recent-item { padding: 24rpx; border-radius: var(--radius-lg); display: flex; justify-content: space-between; align-items: center; }
.recent-left { display: flex; flex-direction: column; gap: 4rpx; }
.recent-pos { font-size: 26rpx; font-weight: 600; color: var(--color-text); }
.recent-date { font-size: 20rpx; color: var(--color-text-tertiary); }
.recent-right { display: flex; align-items: center; gap: 4rpx; }
.recent-score { font-size: 28rpx; font-weight: 700; }
.score-high { color: #10B981; }
.score-mid { color: #F59E0B; }
.score-low { color: #EF4444; }
.recent-arrow { font-size: 32rpx; color: #D1D5DB; }

.empty { display: flex; flex-direction: column; align-items: center; padding: 80rpx 0; }
.empty-icon { font-size: 64rpx; }
.empty-text { font-size: 24rpx; color: var(--color-text-tertiary); margin-top: 16rpx; }
.bottom-spacer { height: 40rpx; }
</style>