<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import http, { apiErrorMessage } from '../api/http'

const router = useRouter()
const loading = ref(false)
const submitting = ref(false)
const colleges = ref<any[]>([])
const majors = ref<any[]>([])
const classes = ref<any[]>([])
const form = reactive({
  name: '',
  studentNumber: '',
  collegeId: '',
  majorId: '',
  grade: undefined as number | undefined,
  administrativeClassId: '',
  password: '',
  confirmPassword: '',
})

const availableMajors = computed(() =>
  majors.value.filter((item) => item.collegeId === form.collegeId),
)
const availableGrades = computed(() => {
  const values = classes.value
    .filter((item) => item.majorId === form.majorId)
    .map((item) => Number(item.grade))
  return [...new Set(values)].sort((a, b) => b - a)
})
const availableClasses = computed(() =>
  classes.value.filter((item) =>
    item.majorId === form.majorId && Number(item.grade) === form.grade,
  ),
)

watch(() => form.collegeId, () => {
  form.majorId = ''
  form.grade = undefined
  form.administrativeClassId = ''
})
watch(() => form.majorId, () => {
  form.grade = undefined
  form.administrativeClassId = ''
})
watch(() => form.grade, () => {
  form.administrativeClassId = ''
})

function validate() {
  if (
    !form.name.trim() ||
    !form.studentNumber.trim() ||
    !form.collegeId ||
    !form.majorId ||
    !form.grade ||
    !form.administrativeClassId
  ) {
    ElMessage.warning('请完整填写学生身份信息。')
    return false
  }
  if (
    form.password.length < 8 ||
    !/[a-z]/.test(form.password) ||
    !/[A-Z]/.test(form.password) ||
    !/\d/.test(form.password) ||
    !/[^A-Za-z0-9]/.test(form.password)
  ) {
    ElMessage.warning('密码至少 8 位，并同时包含大小写字母、数字和特殊字符。')
    return false
  }
  if (form.password !== form.confirmPassword) {
    ElMessage.warning('两次输入的密码不一致。')
    return false
  }
  return true
}

async function activate() {
  if (!validate()) return
  submitting.value = true
  try {
    const { data } = await http.post('/auth/activate-student', {
      name: form.name.trim(),
      studentNumber: form.studentNumber.trim(),
      collegeId: form.collegeId,
      majorId: form.majorId,
      grade: form.grade,
      administrativeClassId: form.administrativeClassId,
      password: form.password,
    })
    ElMessage.success('账号激活成功，请使用学号和新密码登录。')
    await router.replace({
      name: 'login',
      query: { userName: data.userName, activated: '1' },
    })
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  } finally {
    submitting.value = false
  }
}

onMounted(async () => {
  loading.value = true
  try {
    const { data } = await http.get('/auth/activation-options')
    colleges.value = data.colleges
    majors.value = data.majors
    classes.value = data.classes
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <main class="activation-page">
    <header class="activation-header">
      <router-link to="/login">明序教务</router-link>
      <router-link to="/timetable">班级课表查询</router-link>
    </header>

    <section class="activation-card" v-loading="loading">
      <div class="activation-intro">
        <span>STUDENT ACCOUNT ACTIVATION</span>
        <h1>学生账号自助激活</h1>
        <p>请按学籍档案如实填写。全部信息匹配后，学号将成为登录账号。</p>
      </div>

      <el-alert
        type="info"
        :closable="false"
        title="每个学号只能激活一次。已激活或忘记密码的账号，请联系教务管理员处理。"
      />

      <el-form label-position="top" class="activation-form" @submit.prevent="activate">
        <div class="activation-grid">
          <el-form-item label="姓名" required>
            <el-input v-model="form.name" autocomplete="name" placeholder="与学籍档案一致" />
          </el-form-item>
          <el-form-item label="学号" required>
            <el-input v-model="form.studentNumber" autocomplete="username" placeholder="完整学号" />
          </el-form-item>
        </div>
        <div class="activation-grid">
          <el-form-item label="学院" required>
            <el-select v-model="form.collegeId" filterable placeholder="选择学院">
              <el-option
                v-for="item in colleges"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="专业" required>
            <el-select
              v-model="form.majorId"
              filterable
              :disabled="!form.collegeId"
              placeholder="选择专业"
            >
              <el-option
                v-for="item in availableMajors"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="activation-grid">
          <el-form-item label="年级" required>
            <el-select
              v-model="form.grade"
              :disabled="!form.majorId"
              placeholder="选择年级"
            >
              <el-option
                v-for="grade in availableGrades"
                :key="grade"
                :label="`${grade} 级`"
                :value="grade"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="行政班" required>
            <el-select
              v-model="form.administrativeClassId"
              filterable
              :disabled="!form.grade"
              placeholder="选择行政班"
            >
              <el-option
                v-for="item in availableClasses"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="activation-grid">
          <el-form-item label="设置密码" required>
            <el-input
              v-model="form.password"
              type="password"
              show-password
              autocomplete="new-password"
            />
          </el-form-item>
          <el-form-item label="确认密码" required>
            <el-input
              v-model="form.confirmPassword"
              type="password"
              show-password
              autocomplete="new-password"
              @keyup.enter="activate"
            />
          </el-form-item>
        </div>
        <p class="password-rule">至少 8 位，须包含大写字母、小写字母、数字和特殊字符。</p>
        <el-button
          class="activation-submit"
          type="primary"
          size="large"
          native-type="submit"
          :loading="submitting"
        >
          核验信息并激活
        </el-button>
      </el-form>

      <footer>
        已有账号？
        <router-link to="/login">返回登录</router-link>
      </footer>
    </section>
  </main>
</template>

<style scoped>
.activation-page { min-height: 100vh; padding: 0 24px 48px; background: #eef3f6; color: #17324d; }
.activation-header { max-width: 920px; height: 68px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d7e0e7; }
.activation-header a { color: #17324d; font-weight: 700; text-decoration: none; }
.activation-header a:last-child { color: #176b87; font-size: 13px; }
.activation-card { max-width: 760px; margin: 44px auto 0; padding: 36px 42px; background: #fff; border: 1px solid #d7e0e7; box-shadow: 0 14px 32px rgba(23, 50, 77, .08); }
.activation-intro { margin-bottom: 22px; }
.activation-intro span { color: #176b87; font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.activation-intro h1 { margin: 8px 0; font-size: 28px; }
.activation-intro p { margin: 0; color: #687b8c; }
.activation-form { margin-top: 24px; }
.activation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.activation-form :deep(.el-select) { width: 100%; }
.password-rule { margin: -4px 0 18px; color: #738596; font-size: 12px; }
.activation-submit { width: 100%; }
footer { margin-top: 22px; color: #718191; font-size: 13px; text-align: center; }
footer a { color: #176b87; font-weight: 700; text-decoration: none; }
@media (max-width: 640px) {
  .activation-page { padding: 0 14px 28px; }
  .activation-card { margin-top: 22px; padding: 26px 20px; }
  .activation-grid { grid-template-columns: 1fr; gap: 0; }
}
</style>
