<template>
  <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/20 shadow-2xl">
    <form @submit.prevent="handleRegister" class="space-y-6">
      <!-- 用户名输入框 -->
      <div>
        <label for="regUsername" class="block text-sm font-medium text-slate-200 mb-2">
          用户名
        </label>
        <input
          id="regUsername"
          v-model="registerForm.username"
          type="text"
          required
          class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
          placeholder="请输入用户名"
        />
      </div>

      <!-- 密码输入框 -->
      <div>
        <label for="regPassword" class="block text-sm font-medium text-slate-200 mb-2">
          密码
        </label>
        <input
          id="regPassword"
          v-model="registerForm.password"
          type="password"
          required
          class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
          placeholder="请输入密码"
        />
      </div>

      <!-- 确认密码输入框 -->
      <div>
        <label for="confirmPassword" class="block text-sm font-medium text-slate-200 mb-2">
          确认密码
        </label>
        <input
          id="confirmPassword"
          v-model="registerForm.confirmPassword"
          type="password"
          required
          class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
          placeholder="请再次输入密码"
        />
      </div>

      <!-- 注册按钮 -->
      <button
        type="submit"
        :disabled="authStore.loading"
        class="w-full bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
      >
        <span v-if="authStore.loading" class="flex items-center justify-center">
          <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          注册中...
        </span>
        <span v-else>注册</span>
      </button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { reactive, defineEmits } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useToast } from 'vue-toastification'

const authStore = useAuthStore()
const toast = useToast()
const emit = defineEmits(['registered'])

// 注册表单数据
const registerForm = reactive({
  username: '',
  password: '',
  confirmPassword: ''
})

// 注册处理函数
const handleRegister = async () => {
  if (!registerForm.username || !registerForm.password || !registerForm.confirmPassword) {
    toast.error('请填写完整的注册信息')
    return
  }
  // 验证用户名格式
  if (!/^[a-zA-Z0-9_]+$/.test(registerForm.username)) {
    toast.error('用户名只能包含字母、数字和下划线')
    return
  }
  // 验证用户名长度
  if (registerForm.username.length < 3 || registerForm.username.length > 30) {
    toast.error('用户名长度必须在3-30个字符之间')
    return
  }
  // 验证密码长度
  if (registerForm.password.length < 8) {
    toast.error('密码长度至少8个字符')
    return
  }
  if (registerForm.password !== registerForm.confirmPassword) {
    toast.error('两次输入的密码不一致')
    return
  }
  try {
    await authStore.register({
      username: registerForm.username,
      password: registerForm.password,
      confirmPassword: registerForm.confirmPassword
    })
    
    toast.success('注册成功！请等待管理员激活您的账户。')
    
    // 注册成功时清空注册表单
    registerForm.username = ''
    registerForm.password = ''
    registerForm.confirmPassword = ''
    
    emit('registered')

  } catch (error: any) {
    console.error('注册错误详情:', error)
    console.error('错误响应:', error.response.data.error)
    
    // 根据不同的错误类型显示不同的错误信息
    if (error.response?.status === 400) {
      const details = error.response?.data?.error
      if (details) {
        // 显示具体的验证错误信息
        const errorMessages = details
        toast.error(`注册失败: ${errorMessages}`)
      }
    } else if (error.response?.status === 409) {
      toast.error('用户名已存在，请使用其他信息')
    } else if (error.response?.status === 500) {
      toast.error('服务器内部错误，请稍后重试')
    } else if (error.code === 'NETWORK_ERROR') {
      toast.error('网络连接失败，请检查网络连接')
    } else {
      toast.error(error.response?.data?.message || '注册失败，请稍后重试')
    }
  }
}
</script> 