<template>
  <div class="auth-page">
    <el-card class="auth-card">
      <h2>求职者注册</h2>
      <el-form :model="form" @submit.prevent="handleRegister">
        <!-- 邮箱 -->
        <el-form-item>
          <el-input
            v-model="form.email"
            type="email"
            placeholder="请输入邮箱"
          />
        </el-form-item>

        <!-- 用户名 -->
        <el-form-item>
          <el-input
            v-model="form.username"
            placeholder="请输入用户名"
          />
        </el-form-item>

        <!-- 手机号 -->
        <el-form-item>
          <el-input
            v-model="form.phone"
            placeholder="请输入手机号"
          />
        </el-form-item>

        <!-- 密码 -->
        <el-form-item>
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码（至少6位）"
            show-password
          />
        </el-form-item>

        <!-- 确认密码 -->
        <el-form-item>
          <el-input
            v-model="form.passwordConfirm"
            type="password"
            placeholder="请确认密码"
            show-password
          />
        </el-form-item>

        <!-- 注册按钮 -->
        <el-button
          type="primary"
          native-type="submit"
          :loading="loading"
          style="width: 100%"
        >
          注册
        </el-button>
      </el-form>

      <div style="margin-top: 12px; text-align: center; font-size: 12px;">
        已有账号？<router-link to="/login" style="color: var(--brand-red); text-decoration: none;">立即登录</router-link>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { ElMessage } from 'element-plus'

const form = reactive({
  email: '',
  username: '',
  phone: '',
  password: '',
  passwordConfirm: '',
})
const loading = ref(false)

const router = useRouter()
const auth = useAuthStore()

async function handleRegister() {
  // 验证字段
  if (!form.email) {
    ElMessage.warning('请输入邮箱')
    return
  }
  if (!form.username) {
    ElMessage.warning('请输入用户名')
    return
  }
  if (!form.phone) {
    ElMessage.warning('请输入手机号')
    return
  }
  if (!form.password || form.password.length < 6) {
    ElMessage.warning('请输入至少6位密码')
    return
  }
  if (form.password !== form.passwordConfirm) {
    ElMessage.warning('两次输入的密码不一致')
    return
  }

  loading.value = true
  try {
    const response = await fetch('/api/auth/register/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: form.email,
        username: form.username,
        phone: form.phone,
        password: form.password,
      }),
    })

    if (!response.ok) {
      const data = await response.json()
      const errorMsg = data.username?.[0] || data.email?.[0] || data.phone?.[0] || data.password?.[0] || '注册失败'
      ElMessage.error(errorMsg)
      return
    }

    const data = await response.json()

    // 自动登入用户
    localStorage.setItem('access_token', data.access)
    localStorage.setItem('refresh_token', data.refresh)
    await auth.fetchMe()

    ElMessage.success('注册成功')
    router.push('/home')
  } catch (err) {
    ElMessage.error('注册失败，请稍后重试')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.auth-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

.auth-card {
  width: 380px;
}

h2 {
  text-align: center;
  margin-bottom: 24px;
  color: #333;
  font-weight: 600;
}
</style>
