<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - AIGC Demo</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 2rem 0;
        }
        
        .register-container {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            padding: 3rem;
            width: 100%;
            max-width: 500px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .register-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .register-header h2 {
            color: #333;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .register-header p {
            color: #666;
            font-size: 0.9rem;
        }
        
        .form-floating {
            margin-bottom: 1rem;
        }
        
        .form-control {
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 1rem 0.75rem;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        
        .form-control.is-invalid {
            border-color: #dc3545;
        }
        
        .form-control.is-valid {
            border-color: #198754;
        }
        
        .btn-register {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            border: none;
            border-radius: 10px;
            padding: 0.75rem 2rem;
            font-weight: 600;
            font-size: 1rem;
            color: white;
            width: 100%;
            transition: all 0.3s ease;
            margin-bottom: 1rem;
        }
        
        .btn-register:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(40, 167, 69, 0.3);
            color: white;
        }
        
        .btn-register:disabled {
            opacity: 0.6;
            transform: none;
            box-shadow: none;
        }
        
        .alert {
            border: none;
            border-radius: 10px;
            margin-bottom: 1rem;
        }
        
        .alert-danger {
            background: linear-gradient(135deg, #f8d7da, #f5c6cb);
            color: #721c24;
        }
        
        .invalid-feedback {
            display: block;
            font-size: 0.875rem;
            color: #dc3545;
            margin-top: 0.25rem;
        }
        
        .valid-feedback {
            display: block;
            font-size: 0.875rem;
            color: #198754;
            margin-top: 0.25rem;
        }
        
        .register-footer {
            text-align: center;
            margin-top: 2rem;
            padding-top: 1rem;
            border-top: 1px solid #e9ecef;
        }
        
        .register-footer a {
            color: #667eea;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        
        .register-footer a:hover {
            color: #764ba2;
        }
        
        .language-switcher {
            margin-top: 1rem;
        }
        
        .language-switcher a {
            color: #666;
            text-decoration: none;
            margin: 0 0.5rem;
            font-size: 0.9rem;
        }
        
        .language-switcher a:hover {
            color: #667eea;
        }
        
        .password-strength {
            margin-top: 0.5rem;
        }
        
        .strength-bar {
            height: 4px;
            background: #e9ecef;
            border-radius: 2px;
            overflow: hidden;
            margin-top: 0.25rem;
        }
        
        .strength-fill {
            height: 100%;
            transition: all 0.3s ease;
            border-radius: 2px;
        }
        
        .strength-weak { background: #dc3545; width: 25%; }
        .strength-fair { background: #ffc107; width: 50%; }
        .strength-good { background: #17a2b8; width: 75%; }
        .strength-strong { background: #28a745; width: 100%; }
        
        .loading {
            display: none;
        }
        
        .loading.show {
            display: inline-block;
        }
        
        .check-icon {
            color: #28a745;
            margin-left: 0.5rem;
        }
        
        .error-icon {
            color: #dc3545;
            margin-left: 0.5rem;
        }
    </style>
</head>
<body>
    <div class="register-container">
        <div class="register-header">
            <h2><i class="fas fa-user-plus me-2"></i>创建账户</h2>
            <p>加入我们，开始您的AIGC之旅</p>
        </div>
        
        <!-- Error Message -->
        <div th:if="${error}" class="alert alert-danger">
            <i class="fas fa-exclamation-triangle me-2"></i>
            <span th:text="${error}"></span>
        </div>
        
        <form th:action="@{/register}" method="post" th:object="${form}" id="registerForm">
            <div class="form-floating">
                <input type="text" class="form-control" id="username" th:field="*{username}" 
                       placeholder="用户名" required minlength="3" maxlength="50" autocomplete="username">
                <label for="username">
                    <i class="fas fa-user me-2"></i>用户名
                </label>
                <div class="invalid-feedback" th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></div>
                <div class="valid-feedback" th:if="${!#fields.hasErrors('username') and form.username != null}">
                    <i class="fas fa-check check-icon"></i>用户名可用
                </div>
            </div>
            
            <div class="form-floating">
                <input type="email" class="form-control" id="email" th:field="*{email}" 
                       placeholder="邮箱地址" required autocomplete="email">
                <label for="email">
                    <i class="fas fa-envelope me-2"></i>邮箱地址
                </label>
                <div class="invalid-feedback" th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></div>
                <div class="valid-feedback" th:if="${!#fields.hasErrors('email') and form.email != null}">
                    <i class="fas fa-check check-icon"></i>邮箱格式正确
                </div>
            </div>
            
            <div class="form-floating">
                <input type="password" class="form-control" id="password" th:field="*{password}" 
                       placeholder="密码" required minlength="6" maxlength="100" autocomplete="new-password">
                <label for="password">
                    <i class="fas fa-lock me-2"></i>密码
                </label>
                <div class="password-strength">
                    <div class="strength-bar">
                        <div class="strength-fill" id="strengthFill"></div>
                    </div>
                    <small class="text-muted" id="strengthText">密码强度</small>
                </div>
                <div class="invalid-feedback" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></div>
            </div>
            
            <div class="form-floating">
                <input type="password" class="form-control" id="confirmPassword" th:field="*{confirmPassword}" 
                       placeholder="确认密码" required minlength="6" maxlength="100" autocomplete="new-password">
                <label for="confirmPassword">
                    <i class="fas fa-lock me-2"></i>确认密码
                </label>
                <div class="invalid-feedback" th:if="${#fields.hasErrors('confirmPassword')}" th:errors="*{confirmPassword}"></div>
                <div class="valid-feedback" id="passwordMatch" style="display: none;">
                    <i class="fas fa-check check-icon"></i>密码匹配
                </div>
            </div>
            
            <button type="submit" class="btn btn-register" id="registerBtn">
                <span class="loading">
                    <i class="fas fa-spinner fa-spin me-2"></i>注册中...
                </span>
                <span class="register-text">
                    <i class="fas fa-user-plus me-2"></i>创建账户
                </span>
            </button>
        </form>
        
        <div class="register-footer">
            <p class="mb-2">
                <span th:text="#{hint.haveaccount}">已有账号？</span>
                <a th:href="@{/login}">立即登录</a>
            </p>
            
            <div class="language-switcher">
                <a th:href="@{|?lang=zh_CN|}">中文</a> | 
                <a th:href="@{|?lang=en|}">English</a>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // Password strength checker
        function checkPasswordStrength(password) {
            let strength = 0;
            let strengthText = '';
            let strengthClass = '';
            
            if (password.length >= 6) strength++;
            if (password.match(/[a-z]/)) strength++;
            if (password.match(/[A-Z]/)) strength++;
            if (password.match(/[0-9]/)) strength++;
            if (password.match(/[^a-zA-Z0-9]/)) strength++;
            
            switch (strength) {
                case 0:
                case 1:
                    strengthText = '密码强度：弱';
                    strengthClass = 'strength-weak';
                    break;
                case 2:
                    strengthText = '密码强度：一般';
                    strengthClass = 'strength-fair';
                    break;
                case 3:
                case 4:
                    strengthText = '密码强度：良好';
                    strengthClass = 'strength-good';
                    break;
                case 5:
                    strengthText = '密码强度：强';
                    strengthClass = 'strength-strong';
                    break;
            }
            
            return { strengthText, strengthClass };
        }
        
        // Password strength indicator
        document.getElementById('password').addEventListener('input', function() {
            const password = this.value;
            const strengthFill = document.getElementById('strengthFill');
            const strengthText = document.getElementById('strengthText');
            
            if (password.length > 0) {
                const { strengthText: text, strengthClass: className } = checkPasswordStrength(password);
                strengthFill.className = 'strength-fill ' + className;
                strengthText.textContent = text;
            } else {
                strengthFill.className = 'strength-fill';
                strengthText.textContent = '密码强度';
            }
        });
        
        // Password confirmation check
        document.getElementById('confirmPassword').addEventListener('input', function() {
            const password = document.getElementById('password').value;
            const confirmPassword = this.value;
            const passwordMatch = document.getElementById('passwordMatch');
            
            if (confirmPassword.length > 0) {
                if (password === confirmPassword) {
                    this.classList.remove('is-invalid');
                    this.classList.add('is-valid');
                    passwordMatch.style.display = 'block';
                } else {
                    this.classList.remove('is-valid');
                    this.classList.add('is-invalid');
                    passwordMatch.style.display = 'none';
                }
            } else {
                this.classList.remove('is-valid', 'is-invalid');
                passwordMatch.style.display = 'none';
            }
        });
        
        // Username uniqueness check
        async function checkUsernameUniqueness(username) {
            if (!username.trim()) return;
            
            try {
                const response = await fetch('/api/public/users/exists/username?value=' + encodeURIComponent(username));
                const data = await response.json();
                
                const usernameField = document.getElementById('username');
                if (data.exists) {
                    usernameField.classList.add('is-invalid');
                    usernameField.classList.remove('is-valid');
                } else {
                    usernameField.classList.remove('is-invalid');
                    usernameField.classList.add('is-valid');
                }
            } catch (error) {
                console.error('Username check failed:', error);
            }
        }
        
        // Email uniqueness check
        async function checkEmailUniqueness(email) {
            if (!email.trim()) return;
            
            try {
                const response = await fetch('/api/public/users/exists/email?value=' + encodeURIComponent(email));
                const data = await response.json();
                
                const emailField = document.getElementById('email');
                if (data.exists) {
                    emailField.classList.add('is-invalid');
                    emailField.classList.remove('is-valid');
                } else {
                    emailField.classList.remove('is-invalid');
                    emailField.classList.add('is-valid');
                }
            } catch (error) {
                console.error('Email check failed:', error);
            }
        }
        
        // Debounce function
        function debounce(func, wait) {
            let timeout;
            return function executedFunction(...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func(...args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        }
        
        // Add debounced event listeners
        const debouncedUsernameCheck = debounce(checkUsernameUniqueness, 500);
        const debouncedEmailCheck = debounce(checkEmailUniqueness, 500);
        
        document.getElementById('username').addEventListener('blur', function() {
            debouncedUsernameCheck(this.value);
        });
        
        document.getElementById('email').addEventListener('blur', function() {
            debouncedEmailCheck(this.value);
        });
        
        // Form submission with loading state
        document.getElementById('registerForm').addEventListener('submit', function(e) {
            const registerBtn = document.getElementById('registerBtn');
            const loading = registerBtn.querySelector('.loading');
            const registerText = registerBtn.querySelector('.register-text');
            
            // Show loading state
            loading.classList.add('show');
            registerText.style.display = 'none';
            registerBtn.disabled = true;
        });
        
        // Form validation
        document.getElementById('registerForm').addEventListener('submit', function(e) {
            const username = document.getElementById('username').value.trim();
            const email = document.getElementById('email').value.trim();
            const password = document.getElementById('password').value.trim();
            const confirmPassword = document.getElementById('confirmPassword').value.trim();
            
            if (!username || !email || !password || !confirmPassword) {
                e.preventDefault();
                alert('请填写所有必填字段');
                return false;
            }
            
            if (password !== confirmPassword) {
                e.preventDefault();
                alert('两次输入的密码不一致');
                return false;
            }
            
            if (password.length < 6) {
                e.preventDefault();
                alert('密码长度至少6位');
                return false;
            }
        });
    </script>
</body>
</html>




