{% extends "base_auth.html" %}
{% load static %}

{% block title %}注册 - AgomTradePro{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/account.css' %}">
{% endblock %}

{% block content %}
<div class="login-page">
    <div class="login-card register-card">
        <h1 class="login-title">注册 AgomTradePro</h1>
        <p class="login-subtitle">开启您的量化投资之旅</p>

        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }}">{{ message }}</div>
            {% endfor %}
        {% endif %}

        <form method="post" class="login-form" id="registerForm">
            {% csrf_token %}
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" class="form-control" required autofocus>
            </div>
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" id="email" name="email" class="form-control">
            </div>
            <div class="form-group">
                <label for="display_name">显示名称</label>
                <input type="text" id="display_name" name="display_name" class="form-control" placeholder="留空则使用用户名">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" class="form-control" required>
            </div>
            <div class="form-group">
                <label for="password_confirm">确认密码</label>
                <input type="password" id="password_confirm" name="password_confirm" class="form-control" required>
            </div>

            <!-- 用户协议和风险提示 -->
            <div class="agreement-section">
                <div class="agreement-box">
                    <div class="agreement-header">
                        <label class="checkbox-label">
                            <input type="checkbox" id="user_agreement" name="user_agreement" required>
                            <span>我已阅读并同意</span>
                        </label>
                        <a href="javascript:void(0)" onclick="showAgreementModal()" class="agreement-link">《用户服务协议》</a>
                    </div>
                </div>

                <div class="agreement-box">
                    <div class="agreement-header">
                        <label class="checkbox-label">
                            <input type="checkbox" id="risk_warning" name="risk_warning" required>
                            <span>我已阅读并确认</span>
                        </label>
                        <a href="javascript:void(0)" onclick="showRiskModal()" class="agreement-link">《投资风险提示书》</a>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary btn-block">注册</button>
        </form>

        <div class="login-footer">
            <p>已有账号？ <a href="/account/login/">立即登录</a></p>
        </div>
    </div>
</div>

<!-- 用户协议弹窗 -->
<div id="agreementModal" class="modal">
    <div class="modal-content modal-large">
        <div class="modal-header">
            <h2>用户服务协议</h2>
            <span class="close" onclick="closeAgreementModal()">&times;</span>
        </div>
        <div class="modal-body">
            {% if system_settings.user_agreement_content %}
                {{ system_settings.user_agreement_content|safe }}
            {% else %}
                <p>用户协议内容加载中...</p>
            {% endif %}
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeAgreementModal()">关闭</button>
            <button type="button" class="btn btn-primary" onclick="acceptAgreement()">我已阅读并同意</button>
        </div>
    </div>
</div>

<!-- 风险提示弹窗 -->
<div id="riskModal" class="modal">
    <div class="modal-content modal-large">
        <div class="modal-header">
            <h2>投资风险提示书</h2>
            <span class="close" onclick="closeRiskModal()">&times;</span>
        </div>
        <div class="modal-body">
            {% if system_settings.risk_warning_content %}
                {{ system_settings.risk_warning_content|safe }}
            {% else %}
                <p>风险提示内容加载中...</p>
            {% endif %}
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeRiskModal()">关闭</button>
            <button type="button" class="btn btn-primary" onclick="acceptRisk()">我已了解风险</button>
        </div>
    </div>
</div>

<style>
/* CSS 变量定义（兼容页面内样式） */
:root {
    --color-bg: #ffffff;
    --color-surface: #f8fafc;
    --color-border: #e2e8f0;
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-primary: #3366cc;
    --color-primary-hover: #2952b3;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.login-page {
    min-height: calc(100vh - 140px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 40px;
    box-shadow: var(--shadow-lg);
}

.register-card {
    max-width: 480px;
}

.login-title {
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
    color: var(--color-text-primary);
}

.login-subtitle {
    text-align: center;
    color: var(--color-text-secondary);
    margin-bottom: 32px;
}

.alert {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.alert-error {
    background: #FEE7E7;
    color: #D33;
    border: 1px solid #F8B4B4;
}

.alert-success {
    background: #D5FBDD;
    color: #14866D;
    border: 1px solid #9FE5B8;
}

.alert-info {
    background: #D5EDFB;
    color: #146698;
    border: 1px solid #9BC8F8;
}

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

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text-primary);
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    transition: border-color 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.1);
}

.agreement-section {
    margin: 20px 0;
    padding: 16px;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.agreement-box {
    margin-bottom: 12px;
}

.agreement-box:last-child {
    margin-bottom: 0;
}

.agreement-header {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.agreement-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 14px;
}

.agreement-link:hover {
    text-decoration: underline;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-bg);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
}

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

.btn-secondary:hover {
    background: #5a6268;
}

.btn-block {
    width: 100%;
}

.login-footer {
    margin-top: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.login-footer a {
    color: var(--color-primary);
    text-decoration: none;
}

.login-footer a:hover {
    text-decoration: underline;
}

/* Modal 样式 */
#agreementModal,
#riskModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
}

#agreementModal .modal-content,
#riskModal .modal-content {
    background-color: var(--color-bg);
    margin: 2% auto;
    border-radius: var(--radius-md);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

#agreementModal .modal-large,
#riskModal .modal-large {
    max-width: 800px;
}

#agreementModal .modal-header,
#riskModal .modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#agreementModal .modal-header h2,
#riskModal .modal-header h2 {
    margin: 0;
    font-size: 20px;
}

#agreementModal .close,
#riskModal .close {
    font-size: 28px;
    font-weight: bold;
    color: var(--color-text-secondary);
    cursor: pointer;
}

#agreementModal .close:hover,
#riskModal .close:hover {
    color: var(--color-text-primary);
}

#agreementModal .modal-body,
#riskModal .modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

#agreementModal .modal-body h2,
#riskModal .modal-body h2 {
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 10px;
}

#agreementModal .modal-body h3,
#riskModal .modal-body h3 {
    font-size: 16px;
    margin-top: 16px;
    margin-bottom: 8px;
}

#agreementModal .modal-body p,
#riskModal .modal-body p {
    line-height: 1.6;
    margin-bottom: 10px;
}

#agreementModal .modal-body ul,
#riskModal .modal-body ul {
    margin-left: 20px;
    margin-bottom: 10px;
}

#agreementModal .modal-body li,
#riskModal .modal-body li {
    margin-bottom: 6px;
    line-height: 1.6;
}

#agreementModal .modal-body strong,
#riskModal .modal-body strong {
    font-weight: 600;
}

#agreementModal .modal-footer,
#riskModal .modal-footer {
    padding: 20px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
</style>

<script>
function showAgreementModal() {
    document.getElementById('agreementModal').style.display = 'block';
    document.body.style.overflow = 'hidden';
}

function closeAgreementModal() {
    document.getElementById('agreementModal').style.display = 'none';
    document.body.style.overflow = 'auto';
}

function acceptAgreement() {
    document.getElementById('user_agreement').checked = true;
    closeAgreementModal();
}

function showRiskModal() {
    document.getElementById('riskModal').style.display = 'block';
    document.body.style.overflow = 'hidden';
}

function closeRiskModal() {
    document.getElementById('riskModal').style.display = 'none';
    document.body.style.overflow = 'auto';
}

function acceptRisk() {
    document.getElementById('risk_warning').checked = true;
    closeRiskModal();
}

// 点击模态框外部关闭
window.onclick = function(event) {
    const agreementModal = document.getElementById('agreementModal');
    const riskModal = document.getElementById('riskModal');
    if (event.target == agreementModal) {
        closeAgreementModal();
    }
    if (event.target == riskModal) {
        closeRiskModal();
    }
}

// 表单验证
document.getElementById('registerForm').addEventListener('submit', function(e) {
    const userAgreement = document.getElementById('user_agreement').checked;
    const riskWarning = document.getElementById('risk_warning').checked;

    if (!userAgreement) {
        e.preventDefault();
        alert('请阅读并同意用户服务协议');
        return false;
    }

    if (!riskWarning) {
        e.preventDefault();
        alert('请阅读并确认投资风险提示书');
        return false;
    }
});
</script>
{% endblock %}