<template>
	<div class="auth-container">
		<div class="tech-decoration">
			<div class="tech-circle"></div>
			<div class="tech-circle"></div>
			<div class="tech-circle"></div>
		</div>

		<div class="auth-card">
			<div class="auth-header">
				<h1 class="auth-title">创建账户</h1>
				<p class="auth-subtitle">加入我们，开启科技之旅</p>
			</div>

			<a-form ref="registerFormRef" :model="registerForm" :rules="registerRules" class="auth-form" @finish="handleRegister" layout="vertical">
				<a-form-item name="username">
					<a-input v-model:value="registerForm.username" placeholder="请输入用户名" size="large">
						<template #prefix>
							<UserOutlined />
						</template>
					</a-input>
				</a-form-item>

				<a-form-item name="email">
					<a-input v-model:value="registerForm.email" placeholder="请输入邮箱地址" size="large">
						<template #prefix>
							<MailOutlined />
						</template>
					</a-input>
				</a-form-item>

				<a-form-item name="password">
					<a-input-password v-model:value="registerForm.password" placeholder="请输入密码（至少6位）" size="large">
						<template #prefix>
							<LockOutlined />
						</template>
					</a-input-password>
				</a-form-item>

				<a-form-item name="confirmPassword">
					<a-input-password v-model:value="registerForm.confirmPassword" placeholder="请再次输入密码" size="large" @pressEnter="handleRegister">
						<template #prefix>
							<LockOutlined />
						</template>
					</a-input-password>
				</a-form-item>

				<a-form-item name="agreeTerms">
					<a-checkbox v-model:checked="registerForm.agreeTerms" class="remember-me">
						我已阅读并同意
						<a href="#" class="auth-link">服务条款</a>
						和
						<a href="#" class="auth-link">隐私政策</a>
					</a-checkbox>
				</a-form-item>

				<a-form-item>
					<a-button type="primary" :loading="loading" size="large" html-type="submit" block>
						{{ loading ? '注册中...' : '注册' }}
					</a-button>
				</a-form-item>
			</a-form>

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

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { UserOutlined, MailOutlined, LockOutlined } from '@ant-design/icons-vue'
import '@/assets/style/auth.scss'

defineOptions({
	name: 'RegisterPage',
})

const router = useRouter()
const registerFormRef = ref(null)
const loading = ref(false)

// Register form data
const registerForm = reactive({
	username: '',
	email: '',
	password: '',
	confirmPassword: '',
	agreeTerms: false,
})

// Form validation rules
const registerRules = {
	username: [
		{ required: true, message: '请输入用户名' },
		{ min: 3, max: 20, message: '长度在 3 到 20 个字符' },
	],
	email: [
		{ required: true, message: '请输入邮箱地址' },
		{ type: 'email', message: '请输入正确的邮箱地址' },
	],
	password: [
		{ required: true, message: '请输入密码' },
		{ min: 6, message: '密码长度不能少于 6 位' },
	],
	confirmPassword: [
		{ required: true, message: '请再次输入密码' },
		{
			validator: (rule, value) => {
				if (value !== registerForm.password) {
					return Promise.reject('两次输入的密码不一致')
				}
				return Promise.resolve()
			},
		},
	],
	agreeTerms: [
		{
			type: 'enum',
			enum: [true],
			message: '请阅读并同意服务条款和隐私政策',
			transform: (value) => value || false,
		},
	],
}

// Handle register
const handleRegister = async () => {
	if (!registerFormRef.value) return

	try {
		await registerFormRef.value.validate()
		loading.value = true

		// Simulate API call - Replace with actual API call
		// Example: const response = await registerApi(registerForm)

		// Simulated delay
		await new Promise((resolve) => setTimeout(resolve, 1500))

		// Success message
		message.success('注册成功！正在跳转到登录页面...')

		// Redirect to login page
		setTimeout(() => {
			router.push('/login')
		}, 1500)
	} catch (error) {
		console.error('Register failed:', error)
		message.error('注册失败，请稍后重试')
	} finally {
		loading.value = false
	}
}
</script>
