<template>
  <div class="report-container">
    <div v-if="isLoading" class="loading-container">
      <el-skeleton :rows="10" animated/>
    </div>

    <div v-else-if="!reportData" class="empty-container">
      <el-empty description="无法加载面试报告，请返回重试。"/>
    </div>

    <div v-else class="report-main">
      <el-page-header @back="goBack" class="report-header">
        <template #content>
          <div class="header-content">
            <span class="title">{{ reportData.sessionDetails.candidateName }} 的面试复盘报告</span>
            <el-tag type="info" size="large">{{
                new Date(reportData.sessionDetails.createdTime).toLocaleString()
              }}
            </el-tag>
          </div>
        </template>
      </el-page-header>

      <el-card class="box-card report-summary" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-icon>
              <DataAnalysis/>
            </el-icon>
            <span>AI 最终评估报告</span>
          </div>
        </template>
        <div v-if="finalReport" class="summary-content">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="综合得分">
              <el-tag size="medium">{{ finalReport.overallScore }} 分</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="录用建议">
              <el-tag :type="getRecommendationType(finalReport.hiringRecommendation)" size="medium" effect="dark">
                {{ finalReport.hiringRecommendation }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
          <el-divider/>
          <h4>综合评语</h4>
          <p class="feedback-paragraph">{{ finalReport.overallFeedback }}</p>
          <h4>技术能力评估</h4>
          <ul class="assessment-list">
            <li v-for="(value, key) in finalReport.technicalAssessment" :key="key">
              <strong>{{ key }}:</strong> {{ value }}
            </li>
          </ul>
          <h4>改进建议</h4>
          <ol class="suggestions-list">
            <li v-for="suggestion in finalReport.suggestions" :key="suggestion">{{ suggestion }}</li>
          </ol>
        </div>
        <div v-else>
          <el-empty description="AI最终报告正在生成中或生成失败。"/>
        </div>
      </el-card>

      <el-card class="box-card question-details" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-icon>
              <ChatDotRound/>
            </el-icon>
            <span>问答详情与逐题评估</span>
          </div>
        </template>
        <el-timeline>
          <el-timeline-item v-for="(item, index) in reportData.questionDetails" :key="item.questionId"
                            :timestamp="`第 ${index + 1} 题`" placement="top">
            <el-card class="question-card" shadow="never">
              <h4>{{ item.questionContent }}</h4>
              <p class="user-answer"><strong>您的回答:</strong> {{ item.userAnswer }}</p>
              <el-divider/>
              <div class="feedback-section">
                <p><strong>AI 评语:</strong> {{ item.aiFeedback }}</p>
                <p><strong>AI 建议:</strong> {{ item.suggestions }}</p>
                <div class="score-section">
                  <strong>本题得分:</strong>
                  <el-rate v-model="item.score" :max="5" disabled show-score text-color="#ff9900"
                           score-template="{value} 分"/>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, computed} from 'vue';
import {useRouter} from 'vue-router';
import {getInterviewReportDetail} from '@/api/interview.js';
import {DataAnalysis, ChatDotRound} from '@element-plus/icons-vue';

// --- Props & Router ---
const props = defineProps({sessionId: {type: String, required: true}});
const router = useRouter();

// --- 响应式状态定义 ---
const reportData = ref(null);
const isLoading = ref(false);

// --- 计算属性 ---
const finalReport = computed(() => {
  if (reportData.value && reportData.value.sessionDetails.finalReport) {
    try {
      // 检查 finalReport 是否是字符串，如果是则解析
      return typeof reportData.value.sessionDetails.finalReport === 'string'
          ? JSON.parse(reportData.value.sessionDetails.finalReport)
          : reportData.value.sessionDetails.finalReport;
    } catch (e) {
      console.error('解析最终报告JSON失败:', e);
      return null;
    }
  }
  return null;
});

// --- API交互方法 ---
const fetchReport = async () => {
  isLoading.value = true;
  try {
    const responseData = await getInterviewReportDetail(props.sessionId);
    if (responseData.code === 0 && responseData.data) {
      reportData.value = responseData.data;
    } else {
      reportData.value = null;
      console.error('获取面试报告失败:', responseData.message);
    }
  } catch (error) {
    reportData.value = null;
    console.error('获取面试报告失败:', error);
  } finally {
    isLoading.value = false;
  }
};

// --- 事件处理 ---
const goBack = () => router.push('/history');

const getRecommendationType = (rec) => {
  if (rec === '强烈推荐' || rec === '推荐') return 'success';
  if (rec === '待考虑') return 'warning';
  if (rec === '不推荐') return 'danger';
  return 'info';
};

// --- 生命周期钩子 ---
onMounted(() => {
  fetchReport();
});
</script>

<style scoped>
.report-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.report-header {
  margin-bottom: 20px;
  background-color: #ffffff;
  padding: 15px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #ebeef5;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.header-content .title {
  font-size: 1.5em;
  font-weight: bold;
  color: #303133;
}

.box-card {
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.card-header {
  font-size: 1.2em;
  font-weight: bold;
  display: flex;
  align-items: center;
  color: #303133;
}

.card-header .el-icon {
  margin-right: 10px;
  color: #409eff;
}

.summary-content {
  padding: 10px 0;
}

.el-descriptions {
  margin-bottom: 20px;
}

.report-summary h4 {
  margin: 25px 0 10px 0;
  font-size: 1.1em;
  color: #303133;
  border-left: 4px solid #409eff;
  padding-left: 10px;
}

.feedback-paragraph {
  text-indent: 2em;
  color: #606266;
  line-height: 1.8;
  margin-bottom: 20px;
}

.assessment-list, .suggestions-list {
  padding-left: 20px;
  list-style: disc;
  color: #606266;
}

.assessment-list li, .suggestions-list li {
  line-height: 1.8;
}

.question-card {
  margin-top: 10px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
}

.user-answer {
  color: #606266;
  font-style: italic;
  background-color: #f5f7fa;
  padding: 10px;
  border-radius: 4px;
}

.feedback-section {
  background-color: #fafbfd;
  padding: 15px;
  border-radius: 8px;
  margin-top: 15px;
}

.score-section {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.el-rate {
  margin-left: 10px;
}
</style>