<template>
  <main class="public-page">
    <PublicServiceHeader />
    <section class="verify-page">
      <header class="verify-title">
        <p>VERIFICATION RESULT</p>
        <h1>证书核验结果</h1>
      </header>
      <el-alert :title="message" :type="messageType" :closable="false" />
      <el-descriptions v-if="certificate" :column="1" border class="details">
        <el-descriptions-item label="核验结果">{{ certificate.status === "valid" ? "该证书真实有效" : "该证书已作废" }}</el-descriptions-item>
        <el-descriptions-item label="证书状态">{{ certificate.status === "valid" ? "有效" : "已作废" }}</el-descriptions-item>
        <el-descriptions-item label="证书编号">{{ certificate.certificate_no }}</el-descriptions-item>
        <el-descriptions-item label="学员姓名">{{ certificate.learner_name }}</el-descriptions-item>
        <el-descriptions-item label="证书名称">{{ certificate.certificate_name }}</el-descriptions-item>
        <el-descriptions-item label="课程时间">{{ coursePeriodText }}</el-descriptions-item>
        <el-descriptions-item label="发证日期">{{ certificate.issue_date }}</el-descriptions-item>
      </el-descriptions>
    </section>
    <footer class="page-foot">慧遇书院电子证书服务</footer>
  </main>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";

import { http, type PublicCertificate } from "../api";
import PublicServiceHeader from "../components/PublicServiceHeader.vue";

const route = useRoute();
const token = String(route.params.token);
const certificate = ref<PublicCertificate | null>(null);
const message = ref("正在核验证书信息");
const messageType = ref<"success" | "warning" | "error" | "info">("info");
const coursePeriodText = computed(() => {
  if (!certificate.value) return "";
  const start = certificate.value.course_start_date || certificate.value.issue_date;
  const end = certificate.value.course_end_date || certificate.value.issue_date;
  return `${start} 至 ${end}`;
});

async function loadCertificate() {
  try {
    const { data } = await http.get<PublicCertificate>(`/public/certificates/token/${token}`);
    certificate.value = data;
    message.value = data.status === "valid" ? "该证书真实有效。" : "该证书已作废，请联系证书管理方核实。";
    messageType.value = data.status === "valid" ? "success" : "warning";
  } catch (error: any) {
    message.value = error?.response?.data?.detail || "链接无效或已失效";
    messageType.value = "error";
  }
}

onMounted(loadCertificate);
</script>

<style scoped>
.public-page {
  min-height: 100vh;
  background: #f4f6f7;
}

.verify-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 54px 20px 36px;
}

.verify-title {
  margin-bottom: 22px;
  text-align: center;
}

.verify-title p {
  margin: 0 0 8px;
  color: #9a7637;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 700;
}

.verify-title h1 {
  margin: 0;
  font-size: 32px;
}

.verify-page > .el-alert,
.details {
  background: #ffffff;
}

.verify-page > .el-alert {
  border: 1px solid #dce3e6;
}

.details {
  margin-top: 14px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(31, 47, 57, 0.06);
}

.page-foot {
  padding: 22px 20px 30px;
  color: #8a949b;
  font-size: 12px;
  text-align: center;
}
</style>
