<template>
  <div class="register-container">
    <div class="register-card">
      <div class="register-header">
        <h1>创建账户</h1>
        <p>加入我们开始免费试用</p>
      </div>

      <a-alert
        v-if="error"
        type="error"
        :title="error"
        closable
        @close="authStore.clearError"
        style="margin-bottom: 16px"
      />

      <a-form layout="vertical" @submit="handleRegister" :model="formData">
        <a-form-item field="username" label="用户名" :rules="[
          { required: true, message: '用户名不能为空' },
          { minLength: 3, message: '用户名至少3个字符' },
          { maxLength: 20, message: '用户名最多20个字符' }
        ]">
          <a-input
            v-model="formData.username"
            placeholder="请输入用户名（3-20个字符）"
            allow-clear
          />
        </a-form-item>

        <a-form-item field="email" label="手机号" :rules="[
          { required: true, message: '手机号不能为空' },
          { match: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' }
        ]">
          <a-input
            v-model="formData.email"
            placeholder="请输入手机号"
            allow-clear
            :max-length="11"
          />
        </a-form-item>

        <a-form-item field="password" label="密码" :rules="[
          { required: true, message: '密码不能为空' },
          { minLength: 6, message: '密码至少6个字符' }
        ]">
          <a-input-password
            v-model="formData.password"
            placeholder="请输入密码（至少6个字符）"
            allow-clear
          />
        </a-form-item>

        <a-form-item field="confirmPassword" label="确认密码" :rules="[
          { required: true, message: '确认密码不能为空' },
          { validator: validatePasswordMatch }
        ]">
          <a-input-password
            v-model="formData.confirmPassword"
            placeholder="请再次输入密码"
            allow-clear
          />
        </a-form-item>

        <a-form-item field="inviteCode" label="邀请码">
          <a-input
            v-model="formData.inviteCode"
            placeholder="请输入邀请码（可选）"
            allow-clear
          />
        </a-form-item>

        <a-button
          type="primary"
          long
          html-type="submit"
          :loading="authStore.isLoading"
          :disabled="authStore.isLoading"
        >
          {{ authStore.isLoading ? '注册中...' : '注册' }}
        </a-button>
      </a-form>

      <div class="register-footer">
        <p>
          已有账户？
          <router-link to="/login">立即登录</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/store/modules/auth'

const router = useRouter()
const authStore = useAuthStore()

const formData = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  inviteCode: ''
})

const error = computed(() => authStore.error)

const validatePasswordMatch = (value: string, cb: any) => {
  if (value && value !== formData.password) {
    cb('两次输入的密码不一致')
  } else {
    cb()
  }
}

const handleRegister = async () => {
  try {
    authStore.clearError()

    if (!formData.username || formData.username.length < 3) {
      authStore.error = '用户名至少3个字符'
      return
    }

    if (!formData.email || !/^1[3-9]\d{9}$/.test(formData.email)) {
      authStore.error = '请输入有效的手机号'
      return
    }

    if (!formData.password || formData.password.length < 6) {
      authStore.error = '密码至少6个字符'
      return
    }

    if (formData.password !== formData.confirmPassword) {
      authStore.error = '两次输入的密码不一致'
      return
    }

    const result = await authStore.register(
      formData.username,
      formData.email,
      formData.password,
      formData.inviteCode.trim()
    )

    if (result.success) {
      router.push('/')
    }
  } catch (error: any) {
    authStore.error = error.message || '注册失败'
  }
}
</script>

<style scoped lang="less">
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;

  .register-card {
    width: 100%;
    max-width: 400px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 32px;

    .register-header {
      text-align: center;
      margin-bottom: 24px;

      h1 {
        font-size: 24px;
        font-weight: 600;
        margin: 0 0 8px 0;
        color: #333;
      }

      p {
        font-size: 14px;
        color: #999;
        margin: 0;
      }
    }

    .register-footer {
      text-align: center;
      margin-top: 16px;

      p {
        margin: 0;
        font-size: 14px;
        color: #666;

        a {
          color: #667eea;
          text-decoration: none;
          font-weight: 600;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }

    .register-info {
      margin-top: 16px;
    }
  }

  :deep(.arco-form-item-label),
  :deep(.arco-form-item-label-col),
  :deep(.arco-form-item-label-col > label),
  :deep(.arco-form-item-label-col label),
  :deep(.arco-form-item-label-col label span) {
    color: #2d3748 !important;
    font-weight: 600 !important;
  }

  :deep(.arco-form-item-label-col > label::before) {
    color: #f53f3f !important;
  }

  :deep(.arco-input-wrapper),
  :deep(.arco-input-wrapper .arco-input),
  :deep(.arco-input-wrapper input) {
    color: #1f2937 !important;
  }

  :deep(.arco-input::placeholder),
  :deep(.arco-input-wrapper input::placeholder) {
    color: #718096 !important;
    opacity: 1 !important;
  }

  :deep(.arco-form-item-message) {
    color: #c53030 !important;
  }
}
</style>
