<template>
  <view class="page">
    <view class="header" v-if="!loading && report">
      <text class="report-title">面试报告</text>
      <text class="report-position">{{ report.position }}</text>
    </view>

    <view v-if="loading" class="loading-box"><text>加载中...</text></view>

    <view v-else-if="report" class="body">
      <view class="score-card">
        <view class="score-circle" :class="scoreLevel(report.totalScore)">
          <text class="score-num">{{ report.totalScore }}</text>
          <text class="score-label">总分</text>
        </view>
      </view>

      <view class="info-row">
        <text class="info-label">面试岗位</text>
        <text class="info-value">{{ report.position }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">面试题数</text>
        <text class="info-value">{{ report.questionCount }} 题</text>
      </view>

      <view class="section" v-if="report.summary">
        <view class="section-title">📝 评估总结</view>
        <text class="summary-text">{{ report.summary }}</text>
      </view>

      <view class="section">
        <view class="section-title">💬 完整对话</view>
        <view class="msg-list">
          <view v-for="(msg, idx) in report.messages" :key="idx" class="msg-item" :class="msg.role">
            <view class="msg-label">{{ msg.role === 'ai' ? '面试官' : '你' }}</view>
            <text class="msg-content">{{ msg.content }}</text>
          </view>
        </view>
      </view>

      <view class="actions">
        <button class="btn-primary" @click="retryInterview">再面一次</button>
        <button class="btn-outline" @click="goHistory">返回记录</button>
      </view>
    </view>

    <view v-else class="empty-box"><text>暂无报告数据</text></view>
  </view>
</template>

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

const loading = ref(true)
const report = ref(null)

onLoad(async (options) => {
  const interviewId = options?.interviewId || ''
  if (!interviewId) { loading.value = false; return }

  try {
    const token = uni.getStorageSync('token') || ''
    if (!token) { loading.value = false; return }

    // Get interview details
    const res = await uni.request({
      url: api(`/interview/${interviewId}`),
      method: 'GET',
      header: { 'Authorization': `Bearer ${token}` },
    })
    if (res.statusCode === 200) {
      const data = res.data
      report.value = {
        position: data.position || '通用岗位',
        totalScore: data.totalScore || 0,
        questionCount: data.questionCount || 0,
        summary: data.summary || '',
        messages: data.messages || [],
      }
      // Auto-complete if in progress
      if (data.status === 'in_progress') {
        uni.request({
          url: api(`/interview/${interviewId}/complete`),
          method: 'POST',
          header: { 'Authorization': `Bearer ${token}` },
        }).then(c => {
          if (c.statusCode === 200 && c.data) {
            report.value.totalScore = c.data.totalScore || report.value.totalScore
            report.value.summary = c.data.summary || report.value.summary
          }
        }).catch(() => {})
      }
    }
  } catch(e) { console.error(e) }
  finally { loading.value = false }
})

const scoreLevel = (s) => { if (s >= 80) return 'good'; if (s >= 60) return 'medium'; return 'poor' }
const retryInterview = () => uni.switchTab({ url: '/pages/index/index' })
const goHistory = () => uni.switchTab({ url: '/pages/history/history' })
</script>

<style scoped>
.page {  background: #F3F4F6; }
.header {
  background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-mid) 50%, var(--color-gradient-end) 100%);
  padding: 48rpx 32rpx 72rpx; border-radius: 0 0 48rpx 48rpx; min-height: 90rpx;
}
.report-title { font-size: 36rpx; font-weight: 700; color: #FFFFFF; display: block; }
.report-position { font-size: 24rpx; color: rgba(255,255,255,0.8); margin-top: 8rpx; display: block; }
.loading-box { padding: 200rpx 0; text-align: center; color: #9CA3AF; font-size: 28rpx; }
.body { padding: 0 32rpx 48rpx; }
.score-card { display: flex; justify-content: center; margin: -40rpx 0 30rpx; }
.score-circle {
  width: 180rpx; height: 180rpx; border-radius: 50%;
  background: #FFFFFF; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  box-shadow: 0 8rpx 30rpx rgba(79,70,229,0.2);
}
.score-circle.good { box-shadow: 0 8rpx 30rpx rgba(5,150,105,0.2); }
.score-circle.medium { box-shadow: 0 8rpx 30rpx rgba(217,119,6,0.2); }
.score-circle.poor { box-shadow: 0 8rpx 30rpx rgba(220,38,38,0.2); }
.score-num { font-size: 56rpx; font-weight: 700; color: #4F46E5; line-height: 1.2; }
.good .score-num { color: #059669; }
.medium .score-num { color: #D97706; }
.poor .score-num { color: #DC2626; }
.score-label { font-size: 20rpx; color: #9CA3AF; margin-top: 4rpx; }
.info-row { display: flex; justify-content: space-between; padding: 20rpx 0; border-bottom: 1rpx solid #E5E7EB; }
.info-label { font-size: 24rpx; color: #6B7280; }
.info-value { font-size: 24rpx; color: #111827; font-weight: 500; }
.section { background: #FFFFFF; border-radius: 20rpx; padding: 28rpx; margin-top: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04); }
.section-title { font-size: 28rpx; font-weight: 600; color: #111827; margin-bottom: 16rpx; }
.summary-text { font-size: 24rpx; color: #374151; line-height: 1.8; white-space: pre-wrap; }
.msg-list { display: flex; flex-direction: column; gap: 16rpx; }
.msg-item { padding: 16rpx; border-radius: 12rpx; }
.msg-item.ai { background: #F9FAFB; border-left: 4rpx solid #4F46E5; }
.msg-item.user { background: #EEF2FF; border-left: 4rpx solid #818CF8; }
.msg-label { font-size: 20rpx; font-weight: 600; color: #4F46E5; margin-bottom: 8rpx; }
.msg-content { font-size: 24rpx; color: #111827; line-height: 1.7; white-space: pre-wrap; }
.actions { display: flex; gap: 20rpx; margin-top: 32rpx; }
.btn-primary { flex: 1; background: linear-gradient(135deg,#4F46E5,#7C3AED); color: #FFFFFF; border-radius: 16rpx; height: 88rpx; line-height: 88rpx; font-size: 28rpx; font-weight: 600; }
.btn-outline { flex: 1; background: #FFFFFF; color: #4F46E5; border-radius: 16rpx; height: 88rpx; line-height: 88rpx; font-size: 28rpx; border: 2rpx solid #4F46E5; }
.empty-box { padding: 200rpx 0; text-align: center; color: #9CA3AF; font-size: 28rpx; }
</style>
