<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.dimensions">
        <view class="section-title">📊 四维能力评估</view>
        <view class="dim-grid">
          <view class="dim-item" v-for="dim in dimList" :key="dim.key">
            <view class="dim-header">
              <text class="dim-name">{{ dim.label }}</text>
              <text class="dim-score">{{ dim.value }}分</text>
            </view>
            <view class="dim-bar-bg">
              <view class="dim-bar-fill" :style="{ width: dim.value + '%', background: dim.color }"></view>
            </view>
          </view>
        </view>
      </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="generateCard">📸 生成分享卡片</button>
        <button class="btn-outline" @click="retryInterview">再面一次</button>
        <button class="btn-ghost" @click="goHistory">返回记录</button>
      </view>
    </view>

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

    <!-- Share card canvas (hidden) -->
    <canvas canvas-id="shareCard" class="hidden-canvas" :style="{ width: cardWidth + 'px', height: cardHeight + 'px' }"></canvas>
  </view>
</template>

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

const loading = ref(true)
const report = ref(null)
const dimList = ref([])
const cardWidth = 600
const cardHeight = 900

const dimDefs = [
  { key: 'logic', label: '逻辑思维', color: '#6366F1' },
  { key: 'expression', label: '表达能力', color: '#10B981' },
  { key: 'professionalism', label: '专业度', color: '#F59E0B' },
  { key: 'stability', label: '稳定性', color: '#EF4444' },
]

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 }

    const res = await uni.request({
      url: api(`/interview/${interviewId}`),
      method: 'GET',
      header: { 'Authorization': `Bearer ${token}` },
    })
    if (res.statusCode === 200) {
      const data = res.data
      const rawSummary = data.summary || ''

      // Try to parse summary JSON for structured display
      let summaryText = rawSummary
      let dimensions = null
      try {
        const parsed = JSON.parse(rawSummary)
        dimensions = {
          logic: parsed['逻辑思维'] || 0,
          expression: parsed['表达能力'] || 0,
          professionalism: parsed['专业度'] || 0,
          stability: parsed['稳定性'] || 0,
        }
        const parts = []
        if (parsed['优点']) parts.push('✅ 优点：' + parsed['优点'].join('、'))
        if (parsed['不足']) parts.push('⚠️ 不足：' + parsed['不足'].join('、'))
        if (parsed['建议']) parts.push('💡 建议：' + parsed['建议'].join('、'))
        summaryText = parts.join('\n')
      } catch {}

      // Use backend dimensions if available, else parsed
      const dims = data.dimensions || dimensions
      if (dims) {
        dimList.value = dimDefs.map(d => ({
          ...d,
          value: Math.min(100, Math.max(0, Math.round(dims[d.key] || 0))),
        }))
      }

      report.value = {
        position: data.position || '通用岗位',
        totalScore: data.totalScore || 0,
        questionCount: data.questionCount || 0,
        summary: summaryText,
        messages: data.messages || [],
        dimensions: dims,
        interviewId,
      }

      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
            if (c.data.dimensions) {
              dimList.value = dimDefs.map(d => ({
                ...d,
                value: Math.min(100, Math.max(0, Math.round(c.data.dimensions[d.key] || 0))),
              }))
            }
          }
        }).catch(e => {
          console.error('[report] auto-complete failed:', e)
        })
      }
    }
  } 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' })

async function generateCard() {
  if (!report.value) return
  uni.showLoading({ title: '生成中...' })
  await nextTick()

  const ctx = uni.createCanvasContext('shareCard')
  const w = cardWidth
  const h = cardHeight
  const r = dimList.value
  const total = report.value.totalScore
  const pos = report.value.position
  const date = new Date().toLocaleDateString('zh-CN')

  // Background gradient
  const gradient = ctx.createLinearGradient(0, 0, 0, h)
  gradient.addColorStop(0, '#1E1B4B')
  gradient.addColorStop(0.5, '#312E81')
  gradient.addColorStop(1, '#1E1B4B')
  ctx.setFillStyle(gradient)
  ctx.fillRect(0, 0, w, h)

  // Border decoration
  ctx.setStrokeStyle('#4F46E5')
  ctx.setLineWidth(4)
  ctx.strokeRect(16, 16, w - 32, h - 32)

  // Title
  ctx.setFillStyle('#FFFFFF')
  ctx.setFontSize(36)
  ctx.setTextAlign('center')
  ctx.fillText('🎯 模拟面试报告', w / 2, 80)

  // Position
  ctx.setFontSize(24)
  ctx.setFillStyle('#A5B4FC')
  ctx.fillText(pos + ' | ' + date, w / 2, 120)

  // Total score circle
  const cx = w / 2
  const cy = 220
  const radius = 72

  // Glow effect
  ctx.setStrokeStyle('rgba(99,102,241,0.3)')
  ctx.setLineWidth(16)
  ctx.beginPath()
  ctx.arc(cx, cy, radius + 10, 0, Math.PI * 2)
  ctx.stroke()

  // Circle background
  ctx.setFillStyle('#2D2A6E')
  ctx.beginPath()
  ctx.arc(cx, cy, radius, 0, Math.PI * 2)
  ctx.fill()

  // Total score text
  ctx.setFillStyle(total >= 80 ? '#34D399' : total >= 60 ? '#FBBF24' : '#F87171')
  ctx.setFontSize(52)
  ctx.setTextAlign('center')
  ctx.fillText(String(total), cx, cy - 8)

  ctx.setFontSize(16)
  ctx.setFillStyle('#A5B4FC')
  ctx.fillText('总分', cx, cy + 34)

  // Dimension bars
  const barColors = ['#6366F1', '#10B981', '#F59E0B', '#EF4444']
  const barStartY = 330
  const barH = 36
  const barGap = 16
  const barMaxW = 380
  const barX = 130

  for (let i = 0; i < r.length; i++) {
    const d = r[i]
    const y = barStartY + i * (barH + barGap)
    const v = d.value

    // Label
    ctx.setFontSize(20)
    ctx.setFillStyle('#A5B4FC')
    ctx.setTextAlign('left')
    ctx.fillText(d.label, 40, y + 26)

    // Bar background
    ctx.setFillStyle('rgba(255,255,255,0.08)')
    ctx.beginPath()
    ctx.roundRect ? ctx.roundRect(barX, y, barMaxW, barH, barH / 2) : ctx.rect(barX, y, barMaxW, barH)
    ctx.fill()

    // Bar fill
    ctx.setFillStyle(barColors[i])
    ctx.beginPath()
    const fillW = Math.max(0, (v / 100) * barMaxW)
    ctx.roundRect ? ctx.roundRect(barX, y, fillW, barH, barH / 2) : ctx.rect(barX, y, fillW, barH)
    ctx.fill()

    // Score text
    ctx.setFontSize(20)
    ctx.setFillStyle('#FFFFFF')
    ctx.setTextAlign('right')
    ctx.fillText(v + '分', w - 40, y + 26)
  }

  // Divider line
  ctx.setStrokeStyle('rgba(165,180,252,0.3)')
  ctx.setLineWidth(1)
  ctx.beginPath()
  ctx.moveTo(40, 600)
  ctx.lineTo(w - 40, 600)
  ctx.stroke()

  // Bottom info
  ctx.setFontSize(20)
  ctx.setFillStyle('#A5B4FC')
  ctx.setTextAlign('center')
  ctx.fillText('「职引」- AI 模拟面试助手', w / 2, 650)
  ctx.setFontSize(16)
  ctx.setFillStyle('rgba(165,180,252,0.5)')
  ctx.fillText('扫码开始你的模拟面试 → 在微信搜索"职引"小程序', w / 2, 690)

  // QR text hint
  ctx.setFillStyle('#FFFFFF')
  ctx.setFontSize(16)
  ctx.setTextAlign('center')
  ctx.fillText('在微信搜索「职引」小程序', w / 2, 760)
  ctx.fillText('查看完整面试报告', w / 2, 790)

  ctx.draw(false, async () => {
    try {
      const tempRes = await uni.canvasToTempFilePath({ canvasId: 'shareCard' })
      uni.hideLoading()
      uni.showActionSheet({
        itemList: ['保存到相册', '分享给好友'],
        success: (res) => {
          if (res.tapIndex === 0) {
            uni.saveImageToPhotosAlbum({ filePath: tempRes.tempFilePath, success: () => uni.showToast({ title: '已保存到相册', icon: 'success' }) })
          } else if (res.tapIndex === 1) {
            uni.shareAppMessage ? uni.shareAppMessage({ title: '我的面试报告', imageUrl: tempRes.tempFilePath }) : uni.showToast({ title: '请截图后分享', icon: 'none' })
          }
        },
      })
    } catch (e) {
      uni.hideLoading()
      uni.showToast({ title: '卡片生成失败', icon: 'none' })
    }
  })
}
</script>

<style scoped>
.page { background: #F3F4F6; min-height: 100vh; }
.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; flex-direction: column; gap: 16rpx; margin-top: 32rpx; }
.btn-primary { background: linear-gradient(135deg,#4F46E5,#7C3AED); color: #FFFFFF; border-radius: 16rpx; height: 88rpx; line-height: 88rpx; font-size: 28rpx; font-weight: 600; }
.btn-outline { background: #FFFFFF; color: #4F46E5; border-radius: 16rpx; height: 88rpx; line-height: 88rpx; font-size: 28rpx; border: 2rpx solid #4F46E5; }
.btn-ghost { background: transparent; color: #6B7280; border-radius: 16rpx; height: 72rpx; line-height: 72rpx; font-size: 24rpx; }
.empty-box { padding: 200rpx 0; text-align: center; color: #9CA3AF; font-size: 28rpx; }
.hidden-canvas { position: fixed; left: -9999px; top: -9999px; pointer-events: none; }
.dim-grid { display: flex; flex-direction: column; gap: 20rpx; }
.dim-header { display: flex; justify-content: space-between; margin-bottom: 8rpx; }
.dim-name { font-size: 24rpx; color: #374151; }
.dim-score { font-size: 24rpx; color: #4F46E5; font-weight: 600; }
.dim-bar-bg { height: 20rpx; background: #F3F4F6; border-radius: 10rpx; overflow: hidden; }
.dim-bar-fill { height: 100%; border-radius: 10rpx; transition: width 0.6s ease; }
</style>
