<?php
ob_start();
$user_id = $_SESSION['user_id'];
$user = currentUser();

$error = '';
$success = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $old_password = $_POST['old_password'] ?? '';
    $new_password = $_POST['new_password'] ?? '';
    $confirm_password = $_POST['confirm_password'] ?? '';
    
    if (empty($old_password) || empty($new_password) || empty($confirm_password)) {
        $error = '请填写完整信息';
    } elseif (strlen($new_password) < 6) {
        $error = '新密码至少需要6位';
    } elseif ($new_password !== $confirm_password) {
        $error = '两次输入的新密码不一致';
    } elseif (!password_verify($old_password, $user['password'])) {
        $error = '原密码错误';
    } else {
        $hashed = password_hash($new_password, PASSWORD_DEFAULT);
        $db->query("UPDATE users SET password = '$hashed' WHERE id = $user_id");
        $success = '密码修改成功，请重新登录';
        // 清除会话，要求重新登录
        session_destroy();
        echo '<script>setTimeout(function(){ window.location.href = "/modules/home/login.php"; }, 2000);</script>';
    }
}
?>

<div class="changepwd-container">
    <!-- 页面头部 -->
    <div class="page-header">
        <h2>
            <img src="https://api.iconify.design/mdi:lock.svg?color=%23667eea" width="26" height="26" style="vertical-align: middle; margin-right: 10px;" alt="">
            修改密码
        </h2>
        <p class="page-desc">为了账户安全，请定期更换密码</p>
    </div>
    
    <?php if ($success): ?>
        <div class="alert alert-success">
            <img src="https://api.iconify.design/mdi:check-circle.svg?color=%2310b981" width="20" height="20" style="margin-right: 8px;" alt="">
            <?php echo $success; ?>
        </div>
    <?php endif; ?>
    <?php if ($error): ?>
        <div class="alert alert-error">
            <img src="https://api.iconify.design/mdi:alert-circle.svg?color=%23ef4444" width="20" height="20" style="margin-right: 8px;" alt="">
            <?php echo $error; ?>
        </div>
    <?php endif; ?>
    
    <div class="password-card">
        <!-- 安全提示 -->
        <div class="security-tip">
            <img src="https://api.iconify.design/mdi:shield-lock.svg?color=%23667eea" width="20" height="20" style="margin-right: 8px;" alt="">
            <span>建议使用大小写字母、数字和特殊符号组合，提高密码强度</span>
        </div>
        
        <form method="POST" class="password-form">
            <!-- 原密码 -->
            <div class="form-group">
                <label>
                    <img src="https://api.iconify.design/mdi:lock-outline.svg?color=%23667eea" width="16" height="16" style="margin-right: 6px;" alt="">
                    原密码
                </label>
                <div class="password-input-wrapper">
                    <input type="password" name="old_password" id="old_password" required autofocus placeholder="请输入原密码">
                    <button type="button" class="toggle-password" data-target="old_password">
                        <img src="https://api.iconify.design/mdi:eye-off.svg?color=%239ca3af" width="18" height="18" alt="">
                    </button>
                </div>
            </div>
            
            <!-- 新密码 -->
            <div class="form-group">
                <label>
                    <img src="https://api.iconify.design/mdi:lock-plus.svg?color=%23667eea" width="16" height="16" style="margin-right: 6px;" alt="">
                    新密码
                </label>
                <div class="password-input-wrapper">
                    <input type="password" name="new_password" id="new_password" required placeholder="请输入新密码">
                    <button type="button" class="toggle-password" data-target="new_password">
                        <img src="https://api.iconify.design/mdi:eye-off.svg?color=%239ca3af" width="18" height="18" alt="">
                    </button>
                </div>
                <small>密码长度至少6位</small>
                
                <!-- 密码强度指示器 -->
                <div class="password-strength" id="passwordStrength" style="display: none;">
                    <div class="strength-bar">
                        <div class="strength-fill" id="strengthFill"></div>
                    </div>
                    <span class="strength-text" id="strengthText"></span>
                </div>
            </div>
            
            <!-- 确认新密码 -->
            <div class="form-group">
                <label>
                    <img src="https://api.iconify.design/mdi:lock-check.svg?color=%23667eea" width="16" height="16" style="margin-right: 6px;" alt="">
                    确认新密码
                </label>
                <div class="password-input-wrapper">
                    <input type="password" name="confirm_password" id="confirm_password" required placeholder="请再次输入新密码">
                    <button type="button" class="toggle-password" data-target="confirm_password">
                        <img src="https://api.iconify.design/mdi:eye-off.svg?color=%239ca3af" width="18" height="18" alt="">
                    </button>
                </div>
                <div class="password-match" id="passwordMatch" style="display: none;">
                    <span id="matchText"></span>
                </div>
            </div>
            
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">
                    <img src="https://api.iconify.design/mdi:check.svg?color=white" width="18" height="18" style="margin-right: 6px;" alt="">
                    确认修改
                </button>
                <a href="?page=profile" class="btn btn-secondary">
                    <img src="https://api.iconify.design/mdi:arrow-left.svg?color=currentColor" width="18" height="18" style="margin-right: 6px;" alt="">
                    返回
                </a>
            </div>
        </form>
    </div>
</div>

<style>
/* 基础变量 */
:root {
    --primary-color: #667eea;
    --primary-hover: #5a67d8;
    --danger-color: #ef4444;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border-color: #e5e7eb;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

.changepwd-container {
    max-width: 480px;
    margin: 0 auto;
    padding: 4px;
}

/* 页面头部 */
.page-header {
    margin-bottom: 24px;
}
.page-header h2 {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.page-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-left: 36px;
}

/* 提示消息 */
.alert {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
    font-size: 14px;
}
.alert-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* 密码卡片 */
.password-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 32px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

/* 安全提示 */
.security-tip {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(102, 126, 234, 0.02) 100%);
    border-radius: var(--radius-md);
    margin-bottom: 28px;
    font-size: 13px;
    color: var(--text-secondary);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

/* 表单 */
.password-form .form-group {
    margin-bottom: 24px;
}
.password-form label {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
}

/* 密码输入框 */
.password-input-wrapper {
    position: relative;
}
.password-input-wrapper input {
    width: 100%;
    padding: 14px 48px 14px 16px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 15px;
    background: var(--bg-primary);
    transition: all 0.2s;
}
.password-input-wrapper input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.toggle-password:hover {
    background: var(--bg-secondary);
}
.password-form small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

/* 密码强度 */
.password-strength {
    margin-top: 10px;
}
.strength-bar {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 6px;
}
.strength-fill {
    height: 100%;
    width: 0%;
    transition: all 0.3s;
    border-radius: 2px;
}
.strength-fill.weak {
    width: 25%;
    background: #ef4444;
}
.strength-fill.medium {
    width: 50%;
    background: #f59e0b;
}
.strength-fill.strong {
    width: 75%;
    background: #10b981;
}
.strength-fill.very-strong {
    width: 100%;
    background: #10b981;
}
.strength-text {
    font-size: 12px;
}
.strength-text.weak {
    color: #ef4444;
}
.strength-text.medium {
    color: #f59e0b;
}
.strength-text.strong, .strength-text.very-strong {
    color: #10b981;
}

/* 密码匹配 */
.password-match {
    margin-top: 8px;
    font-size: 12px;
}
.password-match .match-success {
    color: #10b981;
    display: flex;
    align-items: center;
    gap: 4px;
}
.password-match .match-error {
    color: #ef4444;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 按钮 */
.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    text-decoration: none;
    flex: 1;
}
.btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}
.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}
.btn-secondary {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.btn-secondary:hover {
    background: var(--bg-secondary);
}

/* 响应式 */
@media (max-width: 768px) {
    .password-card {
        padding: 24px;
    }
    .form-actions {
        flex-direction: column;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 密码显示/隐藏切换
    document.querySelectorAll('.toggle-password').forEach(btn => {
        btn.addEventListener('click', function() {
            const targetId = this.dataset.target;
            const input = document.getElementById(targetId);
            const icon = this.querySelector('img');
            
            if (input.type === 'password') {
                input.type = 'text';
                icon.src = 'https://api.iconify.design/mdi:eye.svg?color=%23667eea';
            } else {
                input.type = 'password';
                icon.src = 'https://api.iconify.design/mdi:eye-off.svg?color=%239ca3af';
            }
        });
    });
    
    // 密码强度检测
    const newPassword = document.getElementById('new_password');
    const strengthDiv = document.getElementById('passwordStrength');
    const strengthFill = document.getElementById('strengthFill');
    const strengthText = document.getElementById('strengthText');
    
    if (newPassword) {
        newPassword.addEventListener('input', function() {
            const password = this.value;
            if (password.length === 0) {
                strengthDiv.style.display = 'none';
                return;
            }
            
            strengthDiv.style.display = 'block';
            let strength = 0;
            
            if (password.length >= 6) strength += 1;
            if (password.length >= 10) strength += 1;
            if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength += 1;
            if (/[0-9]/.test(password)) strength += 1;
            if (/[^a-zA-Z0-9]/.test(password)) strength += 1;
            
            strengthFill.className = 'strength-fill';
            strengthText.className = 'strength-text';
            
            if (strength <= 1) {
                strengthFill.classList.add('weak');
                strengthText.classList.add('weak');
                strengthText.textContent = '密码强度：弱';
            } else if (strength === 2) {
                strengthFill.classList.add('medium');
                strengthText.classList.add('medium');
                strengthText.textContent = '密码强度：中';
            } else if (strength === 3) {
                strengthFill.classList.add('strong');
                strengthText.classList.add('strong');
                strengthText.textContent = '密码强度：强';
            } else {
                strengthFill.classList.add('very-strong');
                strengthText.classList.add('very-strong');
                strengthText.textContent = '密码强度：非常强';
            }
        });
    }
    
    // 密码匹配检测
    const confirmPassword = document.getElementById('confirm_password');
    const matchDiv = document.getElementById('passwordMatch');
    const matchText = document.getElementById('matchText');
    
    if (confirmPassword && newPassword) {
        confirmPassword.addEventListener('input', function() {
            const password = newPassword.value;
            const confirm = this.value;
            
            if (confirm.length === 0) {
                matchDiv.style.display = 'none';
                return;
            }
            
            matchDiv.style.display = 'block';
            matchText.className = '';
            
            if (password === confirm) {
                matchText.className = 'match-success';
                matchText.innerHTML = '<img src="https://api.iconify.design/mdi:check-circle.svg?color=%2310b981" width="14" height="14" alt=""> 密码一致';
            } else {
                matchText.className = 'match-error';
                matchText.innerHTML = '<img src="https://api.iconify.design/mdi:close-circle.svg?color=%23ef4444" width="14" height="14" alt=""> 两次输入的密码不一致';
            }
        });
    }
});
</script>