<template>
  <!-- 简历分析报告抽屉 — 从右侧滑入，占满屏幕高度 -->
  <Teleport to="body">
    <!-- 遮罩层 -->
    <Transition name="report-drawer-overlay">
      <div
        v-if="modelValue"
        class="report-drawer-overlay"
        @click="handleClose"
      />
    </Transition>

    <!-- 抽屉主体 -->
    <Transition name="report-drawer-slide">
      <div v-if="modelValue" class="report-drawer" @click.stop>
        <!-- 顶部栏：折叠按钮 + 标题 + 更新时间 -->
        <div class="report-drawer__header">
          <div class="report-drawer__header-left">
            <button class="report-drawer__close-btn" @click="handleClose" aria-label="收起">
              <svg viewBox="0 0 16 16" fill="none" class="report-drawer__close-icon">
                <path d="M10 3l-5 5 5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
            <h3 class="report-drawer__title">简历分析报告</h3>
          </div>
          <span class="report-drawer__update-time">{{ updateTimeText }}</span>
        </div>

        <!-- 可滚动内容区 -->
        <div class="report-drawer__body">
          <!-- 评分概览区域 -->
          <div class="report-drawer__score-section">
            <div class="report-drawer__score-left">
              <!-- 评级字母 -->
              <span class="report-drawer__grade-avatar">{{ report.grade }}</span>
              <!-- 评级标签（带 hover 提示） -->
              <el-tooltip :content="gradeTooltip" placement="bottom" effect="dark">
                <span class="report-drawer__grade-badge">{{ gradeLabel }} <span class="report-drawer__grade-dot">●</span></span>
              </el-tooltip>
            </div>
            <!-- 右侧三项计数 -->
            <div class="report-drawer__score-right">
              <div class="report-drawer__score-item">
                <span class="report-drawer__score-num">{{ report.urgentTotal || 0 }}</span>
                <span class="report-drawer__score-label">紧急修复项</span>
              </div>
              <div class="report-drawer__score-item">
                <span class="report-drawer__score-num">{{ report.importantTotal || 0 }}</span>
                <span class="report-drawer__score-label">严重问题</span>
              </div>
              <div class="report-drawer__score-item">
                <span class="report-drawer__score-num">{{ report.expressionTotal || 0 }}</span>
                <span class="report-drawer__score-label">可选修复项</span>
              </div>
            </div>
          </div>

          <!-- 评级提示语 -->
<!--          <p class="report-drawer__grade-hint">{{ gradeHintText }}</p>-->

          <!-- 结论 -->
          <div class="report-drawer__conclusion">
            <h4 class="report-drawer__section-title">结论</h4>
            <p class="report-drawer__conclusion-text">{{ report.summary || '暂无结论' }}</p>
          </div>

          <!-- 核心问题 -->
          <div class="report-drawer__issues">
            <h4 class="report-drawer__section-title">核心问题</h4>
            <div
              v-for="(issue, index) in issues"
              :key="issue.id || index"
              class="report-drawer__issue-card"
            >
              <!-- 问题标题：序号 -->
              <p class="report-drawer__issue-title">问题{{ index + 1 }}</p>
              <!-- 问题内容：finding -->
              <p class="report-drawer__issue-detail">{{ issue.finding }}</p>
              <!-- 为什么需要优化 -->
              <p class="report-drawer__issue-why-label">为什么需要优化？</p>
              <p class="report-drawer__issue-importance">{{ issue.importance }}</p>
            </div>
          </div>
        </div>

        <!-- 底部按钮 -->
        <div class="report-drawer__footer">
          <button class="report-drawer__optimize-btn" @click="handleOptimize">去优化</button>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { DiagnosisReport, DiagnosisIssue } from '@/api/resume'

// ==================== Props ====================

const props = defineProps<{
  /** 控制抽屉显示/隐藏 */
  modelValue: boolean
  /** 诊断报告数据 */
  report: DiagnosisReport
  /** 诊断问题列表 */
  issues: DiagnosisIssue[]
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', val: boolean): void
  (e: 'optimize'): void
}>()

// ==================== 计算属性 ====================

/** 评级文字映射 */
const gradeLabel = computed(() => {
  const map: Record<string, string> = { A: '优秀', B: '良好', C: '一般', D: '待提升' }
  return map[props.report.grade || ''] || '未评级'
})

/** 评级 hover 提示文字 */
const gradeTooltip = computed(() => {
  const map: Record<string, string> = {
    D: '你的简历目前还有较大提升空间，建议尽快补充关键经历、完善内容表达，并优化整体结构，让简历更完整、更有竞争力',
    C: '你的简历还有打磨空间，多推敲细节、补充些具体内容，整体会更出彩。',
    B: '简历已经很棒了，但还有提升的潜力。再调整一下细节，会有更具有竞争力！',
    A: '你的简历相当出彩，在求职市场中格外抢眼，能清晰展现您的优势与经历，已经超越绝大多数候选人了。',
  }
  return map[props.report.grade || ''] || ''
})

/** 评级提示语（显示在评分区域下方） */
const gradeHintText = computed(() => {
  return gradeTooltip.value
})

/** 更新时间文字 */
const updateTimeText = computed(() => {
  if (!props.report.createTime) return ''
  try {
    const createDate = new Date(props.report.createTime)
    const now = new Date()
    const diffMs = now.getTime() - createDate.getTime()
    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
    if (diffDays === 0) return '今天更新'
    if (diffDays < 30) return `更新于${diffDays}天前`
    const diffMonths = Math.floor(diffDays / 30)
    return `更新于${diffMonths}个月前`
  } catch {
    return ''
  }
})

// ==================== 事件处理 ====================

/** 关闭抽屉 */
function handleClose() {
  emit('update:modelValue', false)
}

/** 点击去优化 */
function handleOptimize() {
  emit('optimize')
  emit('update:modelValue', false)
}
</script>
