{% extends 'base_new.html' %}

{% block title %}修改密码 - ZJPB{% endblock %}

{% block extra_css %}
<style>
    .change-password-container {
        max-width: 500px;
        margin: 48px auto;
        padding: 0 20px;
    }

    .password-card {
        background: var(--bg-white);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: 32px;
    }

    .card-title {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 8px;
        color: var(--text-primary);
    }

    .card-subtitle {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 32px;
    }

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

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

    .password-input-wrapper {
        position: relative;
    }

    .form-input {
        width: 100%;
        padding: 12px 40px 12px 16px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        font-size: 14px;
        transition: all 0.2s;
    }

    .form-input:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
    }

    .toggle-password {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-secondary);
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .toggle-password:hover {
        color: var(--primary-color);
    }

    .btn-primary {
        width: 100%;
        padding: 12px;
        background: var(--primary-color);
        color: white;
        border: none;
        border-radius: var(--radius-md);
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-primary:hover {
        background: var(--primary-hover);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
    }

    .btn-primary:disabled {
        background: var(--border-color);
        cursor: not-allowed;
        transform: none;
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 14px;
        margin-bottom: 24px;
        transition: color 0.2s;
    }

    .back-link:hover {
        color: var(--primary-color);
    }

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

    .alert-success {
        background: #d1fae5;
        color: #065f46;
        border: 1px solid #6ee7b7;
    }

    .alert-error {
        background: #fee2e2;
        color: #991b1b;
        border: 1px solid #fca5a5;
    }
</style>
{% endblock %}

{% block content %}
<div class="change-password-container">
    <a href="{{ url_for('user_profile') }}" class="back-link">
        <span class="material-symbols-outlined" style="font-size: 18px;">arrow_back</span>
        返回个人中心
    </a>

    <div class="password-card">
        <h1 class="card-title">修改密码</h1>
        <p class="card-subtitle">为了您的账户安全，请定期修改密码</p>

        <div id="alert" class="alert"></div>

        <form id="changePasswordForm">
            <div class="form-group">
                <label class="form-label" for="old_password">旧密码</label>
                <div class="password-input-wrapper">
                    <input type="password" id="old_password" name="old_password" class="form-input" required>
                    <button type="button" class="toggle-password" onclick="togglePassword('old_password')">
                        <span class="material-symbols-outlined" style="font-size: 20px;">visibility</span>
                    </button>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label" for="new_password">新密码</label>
                <div class="password-input-wrapper">
                    <input type="password" id="new_password" name="new_password" class="form-input" required minlength="6">
                    <button type="button" class="toggle-password" onclick="togglePassword('new_password')">
                        <span class="material-symbols-outlined" style="font-size: 20px;">visibility</span>
                    </button>
                </div>
                <small style="color: var(--text-secondary); font-size: 12px; margin-top: 4px; display: block;">至少6个字符</small>
            </div>

            <div class="form-group">
                <label class="form-label" for="confirm_password">确认新密码</label>
                <div class="password-input-wrapper">
                    <input type="password" id="confirm_password" name="confirm_password" class="form-input" required minlength="6">
                    <button type="button" class="toggle-password" onclick="togglePassword('confirm_password')">
                        <span class="material-symbols-outlined" style="font-size: 20px;">visibility</span>
                    </button>
                </div>
            </div>

            <button type="submit" class="btn-primary" id="submitBtn">
                修改密码
            </button>
        </form>
    </div>
</div>

<script>
// 密码可见性切换
function togglePassword(inputId) {
    const input = document.getElementById(inputId);
    const button = input.nextElementSibling;
    const icon = button.querySelector('.material-symbols-outlined');

    if (input.type === 'password') {
        input.type = 'text';
        icon.textContent = 'visibility_off';
    } else {
        input.type = 'password';
        icon.textContent = 'visibility';
    }
}

// 显示提示消息
function showAlert(message, type) {
    const alert = document.getElementById('alert');
    alert.textContent = message;
    alert.className = `alert alert-${type}`;
    alert.style.display = 'block';

    // 3秒后自动隐藏
    setTimeout(() => {
        alert.style.display = 'none';
    }, 3000);
}

// 表单提交
document.getElementById('changePasswordForm').addEventListener('submit', async (e) => {
    e.preventDefault();

    const submitBtn = document.getElementById('submitBtn');
    const oldPassword = document.getElementById('old_password').value;
    const newPassword = document.getElementById('new_password').value;
    const confirmPassword = document.getElementById('confirm_password').value;

    // 前端验证
    if (newPassword !== confirmPassword) {
        showAlert('两次输入的新密码不一致', 'error');
        return;
    }

    if (newPassword.length < 6) {
        showAlert('新密码长度至少6位', 'error');
        return;
    }

    if (oldPassword === newPassword) {
        showAlert('新密码不能与旧密码相同', 'error');
        return;
    }

    // 禁用按钮
    submitBtn.disabled = true;
    submitBtn.textContent = '修改中...';

    try {
        const response = await fetch('/api/user/change-password', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                old_password: oldPassword,
                new_password: newPassword,
                confirm_password: confirmPassword
            })
        });

        const data = await response.json();

        if (data.success) {
            showAlert(data.message, 'success');
            // 清空表单
            document.getElementById('changePasswordForm').reset();
            // 2秒后跳转到个人中心
            setTimeout(() => {
                window.location.href = '{{ url_for("user_profile") }}';
            }, 2000);
        } else {
            showAlert(data.message, 'error');
            submitBtn.disabled = false;
            submitBtn.textContent = '修改密码';
        }
    } catch (error) {
        showAlert('网络错误，请稍后重试', 'error');
        submitBtn.disabled = false;
        submitBtn.textContent = '修改密码';
    }
});
</script>
{% endblock %}