<?php
$pageTitle = '用户注册';
require_once 'config.php';
require_once 'includes/nickname_validator.php';

if (isLoggedIn()) {
    header('Location: /user/profile.php');
    exit;
}

$errors = [];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $email            = trim($_POST['email'] ?? '');
    $nickname         = trim($_POST['nickname'] ?? '');
    $password         = $_POST['password'] ?? '';
    $confirm_password = $_POST['confirm_password'] ?? '';

    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = '请输入有效的邮箱地址';
    }

    if ($nickname === '') {
        $errors[] = '请填写昵称';
    } else {
        $nick_len = mb_strlen($nickname);
        if ($nick_len < 2 || $nick_len > 20) {
            $errors[] = '昵称长度为 2~20 个字符';
        } else {
            $pdo_pre  = getDB();
            $nick_err = validateNickname($nickname, $pdo_pre, null);
            if ($nick_err !== '' && $nick_err !== '该昵称已被使用，请换一个') {
                $errors[] = $nick_err;
            }
        }
    }

    if (strlen($password) < 6) {
        $errors[] = '密码至少需要6位';
    }
    if ($password !== $confirm_password) {
        $errors[] = '两次输入的密码不一致';
    }

    if (empty($errors)) {
        $pdo  = getDB();
        $stmt = $pdo->prepare("SELECT id FROM users WHERE email = ?");
        $stmt->execute([$email]);
        if ($stmt->fetch()) {
            $errors[] = '该邮箱已被注册';
        } else {
            $nick_final_err = validateNickname($nickname, $pdo, null);
            if ($nick_final_err !== '') {
                $errors[] = $nick_final_err;
            } else {
                $hashed = password_hash($password, PASSWORD_DEFAULT);
                $stmt   = $pdo->prepare("INSERT INTO users (email, nickname, password) VALUES (?, ?, ?)");
                $stmt->execute([$email, $nickname, $hashed]);
                $_SESSION['user_id']       = $pdo->lastInsertId();
                $_SESSION['user_email']    = $email;
                $_SESSION['user_nickname'] = $nickname;
                $_SESSION['flash_message'] = '注册成功，欢迎加入VmShell INC！';
                $_SESSION['flash_type']    = 'success';
                header('Location: /user/profile.php');
                exit;
            }
        }
    }
}

require_once 'includes/header.php';
?>

<style>
/* ── 外层背景区 ── */
.reg-wrapper {
    background: #f4f5fb;
    padding: 40px 0 56px;
}

/* ── 与页脚等宽的容器：使用 Bootstrap container 宽度 ── */
.reg-outer {
    width: 100%;
    max-width: 1320px;   /* Bootstrap 5 默认 container-xxl，与页脚一致 */
    margin: 0 auto;
    padding: 0 16px;     /* 与页脚左右 padding 对齐 */
    box-sizing: border-box;
}

/* ── 两栏主体 ── */
.reg-inner {
    display: flex;
    align-items: stretch;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(80,60,180,.12);
    min-height: 580px;
}

/* ══ 左侧：社区规则 ══ */
.reg-rules {
    flex: 1 1 0;          /* 左侧自适应，占剩余空间 */
    background: linear-gradient(145deg, #1a1040 0%, #2d1b6e 55%, #3b2a8a 100%);
    color: #e8e4ff;
    padding: 52px 48px 52px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.reg-rules::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: rgba(130,100,255,.13);
    pointer-events: none;
}
.reg-rules::after {
    content: '';
    position: absolute;
    bottom: -40px; left: -40px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(100,160,255,.10);
    pointer-events: none;
}
.reg-rules-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}
.reg-rules-logo .logo-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    background: linear-gradient(135deg,#7c5cfc,#4f8ef7);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff;
}
.reg-rules-logo span {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
}
.reg-rules h2 {
    font-size: 1.45rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.reg-rules .subtitle {
    font-size: .85rem;
    color: #b8aef5;
    margin-bottom: 30px;
    line-height: 1.65;
}
.rule-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}
.rule-item:last-child { margin-bottom: 0; }
.rule-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.rule-icon.purple { background: rgba(124,92,252,.25); color: #c4b0ff; }
.rule-icon.blue   { background: rgba(79,142,247,.22); color: #93c5fd; }
.rule-icon.green  { background: rgba(52,211,153,.20); color: #6ee7b7; }
.rule-icon.orange { background: rgba(251,146,60,.20);  color: #fcd34d; }
.rule-icon.red    { background: rgba(248,113,113,.20); color: #fca5a5; }
.rule-icon.teal   { background: rgba(45,212,191,.20);  color: #5eead4; }
.rule-text strong {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}
.rule-text span {
    font-size: .78rem;
    color: #b0a8e0;
    line-height: 1.5;
}
.reg-rules-footer {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.10);
    font-size: .75rem;
    color: #8880b8;
    line-height: 1.65;
}
.reg-rules-footer a { color: #a89ee0; }

/* ══ 右侧：注册表单 ══ */
.reg-form-side {
    flex: 0 0 460px;      /* 右侧固定宽度，比之前略宽 */
    background: #fff;
    padding: 52px 52px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.reg-form-side h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1a1040;
    margin-bottom: 4px;
}
.reg-form-side .reg-desc {
    font-size: .85rem;
    color: #888;
    margin-bottom: 28px;
}
.reg-form-side .form-label {
    font-size: .82rem;
    font-weight: 600;
    color: #3d3560;
    margin-bottom: 5px;
}
.reg-form-side .form-control {
    border-radius: 9px;
    border: 1.5px solid #e2dff5;
    font-size: .9rem;
    padding: 10px 14px 10px 38px;
    transition: border-color .2s, box-shadow .2s;
    background: #faf9ff;
}
.reg-form-side .form-control:focus {
    border-color: #7c5cfc;
    box-shadow: 0 0 0 3px rgba(124,92,252,.12);
    background: #fff;
}
.input-icon-wrap {
    position: relative;
}
.input-icon-wrap .fi {
    position: absolute;
    left: 13px; top: 50%;
    transform: translateY(-50%);
    color: #a89ee0;
    font-size: 13px;
    pointer-events: none;
    z-index: 1;
}
.btn-reg {
    background: linear-gradient(90deg, #7c5cfc 0%, #4f8ef7 100%);
    border: none;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 700;
    padding: 12px;
    color: #fff;
    letter-spacing: .5px;
    transition: opacity .2s, transform .15s;
    width: 100%;
    margin-top: 6px;
}
.btn-reg:hover { opacity: .92; transform: translateY(-1px); color: #fff; }
.reg-login-link {
    text-align: center;
    font-size: .83rem;
    color: #888;
    margin-top: 18px;
}
.reg-login-link a {
    color: #7c5cfc;
    font-weight: 600;
    text-decoration: none;
}
.reg-login-link a:hover { text-decoration: underline; }
.alert-danger {
    border-radius: 9px;
    font-size: .83rem;
    padding: 10px 14px;
    margin-bottom: 18px;
}

/* ── 响应式 ── */
@media (max-width: 960px) {
    .reg-inner { flex-direction: column; }
    .reg-rules  { padding: 40px 32px; }
    .reg-form-side { flex: none; width: 100%; padding: 40px 32px; }
}
@media (max-width: 600px) {
    .reg-wrapper { padding: 20px 0 36px; }
    .reg-outer   { padding: 0 10px; }
    .reg-rules   { padding: 30px 22px; }
    .reg-form-side { padding: 30px 22px; }
}
</style>

<div class="reg-wrapper">
    <div class="reg-outer">
        <div class="reg-inner">

            <!-- ══ 左侧：社区规则 ══ -->
            <div class="reg-rules">
                <div class="reg-rules-logo">
                    <div class="logo-icon"><i class="fas fa-sim-card"></i></div>
                    <span>我们是一家全球云计算/互联网金融/通讯的美国企业</span>
                </div>
                <h2>加入我们的社区</h2>
                <p class="subtitle">注册即代表您已阅读并同意遵守以下社区规则，<br>共同维护健康的交流环境。</p>

                <div class="rule-item">
                    <div class="rule-icon purple"><i class="fas fa-user-check"></i></div>
                    <div class="rule-text">
                        <strong>真实身份原则</strong>
                        <span>每人仅限注册一个账号，禁止使用虚假信息注册，账号不可转让或出售。</span>
                    </div>
                </div>
                <div class="rule-item">
                    <div class="rule-icon blue"><i class="fas fa-comments"></i></div>
                    <div class="rule-text">
                        <strong>文明友善交流</strong>
                        <span>尊重每一位社区成员，禁止发布侮辱、歧视、骚扰或攻击性内容。</span>
                    </div>
                </div>
                <div class="rule-item">
                    <div class="rule-icon green"><i class="fas fa-shield-alt"></i></div>
                    <div class="rule-text">
                        <strong>保护个人隐私</strong>
                        <span>禁止未经许可公开他人个人信息，妥善保管自己的账号密码。</span>
                    </div>
                </div>
                <div class="rule-item">
                    <div class="rule-icon orange"><i class="fas fa-ban"></i></div>
                    <div class="rule-text">
                        <strong>禁止违法内容</strong>
                        <span>严禁发布违反法律法规、色情、赌博、诈骗或任何违规内容。</span>
                    </div>
                </div>
                <div class="rule-item">
                    <div class="rule-icon teal"><i class="fas fa-bullhorn"></i></div>
                    <div class="rule-text">
                        <strong>禁止恶意营销</strong>
                        <span>禁止发布未经授权的广告、垃圾信息或恶意引流内容。</span>
                    </div>
                </div>
                <div class="rule-item">
                    <div class="rule-icon red"><i class="fas fa-gavel"></i></div>
                    <div class="rule-text">
                        <strong>违规处理机制</strong>
                        <span>违反规则的账号将视情节轻重给予警告、封禁或永久注销处理。</span>
                    </div>
                </div>

                <div class="reg-rules-footer">
                    注册即表示您同意 VmShell INC 的
                    <a href="/terms.php">服务条款</a> 与
                    <a href="/privacy.php">隐私政策</a>。<br>
                    如有疑问，请通过客服工单联系我们。
                </div>
            </div>

            <!-- ══ 右侧：注册表单 ══ -->
            <div class="reg-form-side">
                <h3>创建账号</h3>
                <p class="reg-desc">注册！立即开始畅享 VmShell 全球通讯网络服务</p>

                <?php if (!empty($errors)): ?>
                <div class="alert alert-danger">
                    <?php foreach ($errors as $e): ?>
                    <div><i class="fas fa-exclamation-circle me-1"></i><?php echo htmlspecialchars($e); ?></div>
                    <?php endforeach; ?>
                </div>
                <?php endif; ?>

                <form method="POST" autocomplete="off">
                    <div class="mb-3">
                        <label class="form-label">邮箱地址 <span class="text-danger">*</span></label>
                        <div class="input-icon-wrap">
                            <i class="fas fa-envelope fi"></i>
                            <input type="email" name="email" class="form-control"
                                   value="<?php echo htmlspecialchars($_POST['email'] ?? ''); ?>"
                                   placeholder="请输入您的邮箱" required autofocus>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">昵称 <span class="text-danger">*</span></label>
                        <div class="input-icon-wrap">
                            <i class="fas fa-user fi"></i>
                            <input type="text" name="nickname" class="form-control"
                                   value="<?php echo htmlspecialchars($_POST['nickname'] ?? ''); ?>"
                                   placeholder="请设置您的昵称（2~20字符）"
                                   required minlength="2" maxlength="20">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">密码 <span class="text-danger">*</span></label>
                        <div class="input-icon-wrap">
                            <i class="fas fa-lock fi"></i>
                            <input type="password" name="password" class="form-control"
                                   placeholder="至少6位字符" required minlength="6">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">确认密码 <span class="text-danger">*</span></label>
                        <div class="input-icon-wrap">
                            <i class="fas fa-lock fi"></i>
                            <input type="password" name="confirm_password" class="form-control"
                                   placeholder="再次输入密码" required>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-reg">
                        <i class="fas fa-user-plus me-2"></i>立即注册
                    </button>
                </form>
                <p class="reg-login-link">已有账号？<a href="/login.php">立即登录</a></p>
            </div>

        </div>
    </div>
</div>

<?php require_once 'includes/footer.php'; ?>
