<script setup lang="ts">
// P21 404 错误页
// 不含 Header / Footer，全屏居中
// 倒计时 3s 后自动跳转首页
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const countdown = ref(3)
let timer: ReturnType<typeof setInterval> | null = null

onMounted(() => {
  timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer!)
      router.replace('/')
    }
  }, 1000)
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
})
</script>

<template>
  <div class="not-found">
    <div class="not-found__content">
      <p class="not-found__code">404</p>
      <h1 class="not-found__title">页面不存在</h1>
      <p class="not-found__desc">您访问的页面已移除或不存在</p>
      <RouterLink to="/" class="not-found__btn">返回首页</RouterLink>
      <p class="not-found__countdown">{{ countdown }}s 后自动跳转首页</p>
    </div>
  </div>
</template>

<style scoped>
.not-found {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-primary);
  text-align: center;
}

.not-found__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.not-found__code {
  font-size: 96px;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: 1;
  font-family: var(--font-family-num);
}

.not-found__title {
  font-size: var(--text-h2);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.not-found__desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

.not-found__btn {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-8);
  background: var(--color-primary);
  color: #000;
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  font-size: var(--text-body);
  transition: background var(--transition);
}
.not-found__btn:hover { background: var(--color-primary-hover); }

.not-found__countdown {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}
</style>
