<script setup lang="ts">
import { ref, onMounted } from 'vue'

const candidateName = ref('')

onMounted(() => {
  candidateName.value = sessionStorage.getItem('candidateName') || '候选人'

  // 清除 session 数据
  sessionStorage.removeItem('sessionId')
  sessionStorage.removeItem('fileId')
  sessionStorage.removeItem('candidateName')
})
</script>

<template>
  <div class="complete-page w-full max-w-lg text-center">
    <!-- 成功图标 -->
    <div class="mb-8">
      <div class="w-24 h-24 mx-auto bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center shadow-lg">
        <el-icon :size="48" class="text-white"><CircleCheck /></el-icon>
      </div>
    </div>

    <!-- 标题 -->
    <h1 class="text-3xl font-bold text-gray-800 mb-4">
      面试完成！
    </h1>

    <!-- 感谢语 -->
    <p class="text-gray-600 mb-8 leading-relaxed">
      感谢您参加本次 AI 面试，{{ candidateName }}！<br />
      我们将尽快审核您的面试结果，<br />
      HR 会在 3 个工作日内与您联系。
    </p>

    <!-- 后续说明 -->
    <div class="bg-white rounded-xl p-6 mb-8 shadow-sm text-left">
      <h3 class="text-lg font-semibold text-gray-800 mb-4">后续流程</h3>
      <ul class="space-y-3 text-gray-600">
        <li class="flex items-start gap-3">
          <span class="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm font-medium">1</span>
          <span>系统将自动生成您的面试报告</span>
        </li>
        <li class="flex items-start gap-3">
          <span class="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm font-medium">2</span>
          <span>HR 将审核您的面试表现</span>
        </li>
        <li class="flex items-start gap-3">
          <span class="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm font-medium">3</span>
          <span>如果通过初试，我们将安排后续面试</span>
        </li>
        <li class="flex items-start gap-3">
          <span class="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm font-medium">4</span>
          <span>请保持电话畅通，等待 HR 联系</span>
        </li>
      </ul>
    </div>

    <!-- 提示 -->
    <p class="text-sm text-gray-400">
      如有问题，请联系 HR：hr@example.com
    </p>
  </div>
</template>

<style scoped>
.complete-page {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
