{% extends "base.html" %}

{% block title %}注册新用户{% endblock %}

{% block content %}
<div class="register-container">
    <div class="register-card">
        <div class="register-header">
            <h1>注册新用户</h1>
            <p>创建新的系统用户账户</p>
        </div>

        <form method="POST" class="register-form">
            <div class="form-group">
                <label for="username">
                    <i class="fas fa-user"></i>
                    用户名
                </label>
                <input type="text" 
                       id="username" 
                       name="username" 
                       required 
                       minlength="3"
                       maxlength="20"
                       placeholder="请输入用户名（3-20个字符）">
                <small class="form-text">用户名长度为3-20个字符，只能包含字母、数字和下划线</small>
            </div>

            <div class="form-group">
                <label for="password">
                    <i class="fas fa-lock"></i>
                    密码
                </label>
                <input type="password" 
                       id="password" 
                       name="password" 
                       required 
                       minlength="6"
                       placeholder="请输入密码（至少6位）">
                <small class="form-text">密码长度至少6位，建议包含字母和数字</small>
            </div>

            <div class="form-group">
                <label for="confirm_password">
                    <i class="fas fa-lock"></i>
                    确认密码
                </label>
                <input type="password" 
                       id="confirm_password" 
                       name="confirm_password" 
                       required 
                       minlength="6"
                       placeholder="请再次输入密码">
                <small class="form-text">请再次输入相同的密码进行确认</small>
            </div>

            <div class="form-group">
                <label for="permission">
                    <i class="fas fa-user-cog"></i>
                    权限级别
                </label>
                <select id="permission" name="permission" required>
                    <option value="">请选择权限级别</option>
                    <option value="1">普通用户 - 可以录入和查询数据</option>
                    <option value="0">管理员 - 拥有所有权限</option>
                </select>
                <small class="form-text">
                    <strong>普通用户：</strong>可以上传图片、录入数据、查询数据<br>
                    <strong>管理员：</strong>拥有所有权限，包括用户管理和数据管理
                </small>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-user-plus"></i>
                    创建用户
                </button>
                <a href="{{ url_for('user_management') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i>
                    返回用户管理
                </a>
            </div>
        </form>
    </div>
</div>

<style>
.register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 200px);
    padding: 20px;
}

.register-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    padding: 40px;
    width: 100%;
    max-width: 500px;
}

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

.register-header h1 {
    color: #333;
    margin-bottom: 10px;
    font-size: 28px;
}

.register-header p {
    color: #666;
    font-size: 16px;
    margin: 0;
}

.register-form {
    width: 100%;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.form-group label i {
    margin-right: 8px;
    color: #007bff;
    width: 16px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

.form-group input:invalid {
    border-color: #dc3545;
}

.form-group input:valid {
    border-color: #28a745;
}

.form-text {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    flex: 1;
}

.btn i {
    margin-right: 8px;
}

.btn-primary {
    background-color: #007bff;
    color: white;
}

.btn-primary:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,123,255,0.3);
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #545b62;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108,117,125,0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .register-container {
        padding: 10px;
    }
    
    .register-card {
        padding: 30px 20px;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
    }
}

/* 密码强度指示器 */
.password-strength {
    margin-top: 5px;
    height: 4px;
    background-color: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
}

.password-strength-bar {
    height: 100%;
    width: 0%;
    transition: all 0.3s ease;
}

.strength-weak {
    background-color: #dc3545;
    width: 33%;
}

.strength-medium {
    background-color: #ffc107;
    width: 66%;
}

.strength-strong {
    background-color: #28a745;
    width: 100%;
}

/* 表单验证样式 */
.form-group.error input,
.form-group.error select {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220,53,69,0.1);
}

.form-group.success input,
.form-group.success select {
    border-color: #28a745;
    box-shadow: 0 0 0 3px rgba(40,167,69,0.1);
}

.error-message {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    display: none;
}

.success-message {
    color: #28a745;
    font-size: 12px;
    margin-top: 5px;
    display: none;
}
</style>

<script>
// 表单验证
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('.register-form');
    const username = document.getElementById('username');
    const password = document.getElementById('password');
    const confirmPassword = document.getElementById('confirm_password');
    const permission = document.getElementById('permission');

    // 用户名验证
    username.addEventListener('input', function() {
        const value = this.value;
        const formGroup = this.closest('.form-group');
        
        if (value.length < 3) {
            setFieldError(formGroup, '用户名至少需要3个字符');
        } else if (value.length > 20) {
            setFieldError(formGroup, '用户名不能超过20个字符');
        } else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
            setFieldError(formGroup, '用户名只能包含字母、数字和下划线');
        } else {
            setFieldSuccess(formGroup, '用户名格式正确');
        }
    });

    // 密码验证
    password.addEventListener('input', function() {
        const value = this.value;
        const formGroup = this.closest('.form-group');
        
        if (value.length < 6) {
            setFieldError(formGroup, '密码至少需要6个字符');
        } else {
            setFieldSuccess(formGroup, '密码长度符合要求');
        }
        
        // 检查确认密码
        if (confirmPassword.value) {
            validateConfirmPassword();
        }
    });

    // 确认密码验证
    confirmPassword.addEventListener('input', validateConfirmPassword);

    function validateConfirmPassword() {
        const formGroup = confirmPassword.closest('.form-group');
        
        if (confirmPassword.value !== password.value) {
            setFieldError(formGroup, '两次输入的密码不一致');
        } else if (confirmPassword.value.length >= 6) {
            setFieldSuccess(formGroup, '密码确认正确');
        }
    }

    // 权限选择验证
    permission.addEventListener('change', function() {
        const formGroup = this.closest('.form-group');
        
        if (this.value === '') {
            setFieldError(formGroup, '请选择权限级别');
        } else {
            setFieldSuccess(formGroup, '权限级别已选择');
        }
    });

    // 表单提交验证
    form.addEventListener('submit', function(e) {
        let isValid = true;

        // 验证用户名
        if (username.value.length < 3 || username.value.length > 20 || !/^[a-zA-Z0-9_]+$/.test(username.value)) {
            isValid = false;
            setFieldError(username.closest('.form-group'), '用户名格式不正确');
        }

        // 验证密码
        if (password.value.length < 6) {
            isValid = false;
            setFieldError(password.closest('.form-group'), '密码长度至少6位');
        }

        // 验证确认密码
        if (password.value !== confirmPassword.value) {
            isValid = false;
            setFieldError(confirmPassword.closest('.form-group'), '两次输入的密码不一致');
        }

        // 验证权限选择
        if (permission.value === '') {
            isValid = false;
            setFieldError(permission.closest('.form-group'), '请选择权限级别');
        }

        if (!isValid) {
            e.preventDefault();
        }
    });

    function setFieldError(formGroup, message) {
        formGroup.classList.remove('success');
        formGroup.classList.add('error');
        
        let errorMsg = formGroup.querySelector('.error-message');
        if (!errorMsg) {
            errorMsg = document.createElement('div');
            errorMsg.className = 'error-message';
            formGroup.appendChild(errorMsg);
        }
        errorMsg.textContent = message;
        errorMsg.style.display = 'block';
        
        const successMsg = formGroup.querySelector('.success-message');
        if (successMsg) {
            successMsg.style.display = 'none';
        }
    }

    function setFieldSuccess(formGroup, message) {
        formGroup.classList.remove('error');
        formGroup.classList.add('success');
        
        let successMsg = formGroup.querySelector('.success-message');
        if (!successMsg) {
            successMsg = document.createElement('div');
            successMsg.className = 'success-message';
            formGroup.appendChild(successMsg);
        }
        successMsg.textContent = message;
        successMsg.style.display = 'block';
        
        const errorMsg = formGroup.querySelector('.error-message');
        if (errorMsg) {
            errorMsg.style.display = 'none';
        }
    }
});
</script>
{% endblock %}