{% extends "base.html" %}
{# 个人账户设置页，路由: GET /account #}
{% block title %}账户设置{% endblock %}
{% block breadcrumb_title %}账户设置{% endblock %}

{% block head_extra %}
<style>
    .account-page { max-width: 1040px; margin: 0 auto; }
    .account-header { margin-bottom: 24px; }
    .account-header h2 { margin: 0; font-size: 28px; font-weight: 700; color: #111827; }
    .account-header p { margin: 7px 0 0; color: #6b7280; font-size: 14px; }
    .account-grid { display: grid; grid-template-columns: minmax(260px, 0.78fr) minmax(360px, 1.22fr); gap: 20px; align-items: start; }
    .account-card { margin: 0; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
    .account-profile { overflow: hidden; padding: 0; }
    .account-profile-banner { height: 82px; background: linear-gradient(135deg, #991b1b 0%, #dc3023 58%, #f97316 100%); }
    .account-profile-body { padding: 0 24px 24px; }
    .account-avatar { display: flex; width: 72px; height: 72px; margin-top: -36px; align-items: center; justify-content: center; border: 4px solid #fff; border-radius: 18px; background: #fff7ed; color: #b91c1c; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12); font-size: 26px; font-weight: 700; }
    .account-profile-name { margin: 16px 0 3px; color: #111827; font-size: 20px; font-weight: 700; }
    .account-profile-username { margin: 0; color: #6b7280; font-size: 13px; }
    .account-role { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 5px 9px; border-radius: 999px; background: #f3f4f6; color: #4b5563; font-size: 12px; font-weight: 600; }
    .account-role::before { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; content: ""; }
    .account-role.is-admin { background: #fef2f2; color: #b91c1c; }
    .account-role.is-admin::before { background: #dc3023; }
    .account-profile-note { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid #e5e7eb; color: #6b7280; font-size: 13px; line-height: 1.65; }
    .account-card-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
    .account-card-icon { display: flex; width: 38px; height: 38px; flex: none; align-items: center; justify-content: center; border-radius: 9px; background: #fef2f2; color: #dc3023; }
    .account-card-icon svg { width: 20px; height: 20px; }
    .account-card-header h3 { margin: 0 0 4px; color: #111827; font-size: 18px; font-weight: 700; }
    .account-card-header p { margin: 0; color: #6b7280; font-size: 13px; line-height: 1.55; }
    .account-form .form-group { margin: 0 0 16px; padding: 0; }
    .account-form input { min-height: 42px; box-sizing: border-box; }
    .account-form-actions { display: flex; justify-content: flex-end; padding-top: 4px; }
    .account-admin-link { display: flex; margin-top: 20px; padding: 14px 16px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #fecaca; border-radius: 8px; background: #fff7f7; color: #991b1b; text-decoration: none; transition: border-color 0.16s, background 0.16s; }
    .account-admin-link:hover { border-color: #f87171; background: #fef2f2; }
    .account-admin-link strong { display: block; font-size: 13px; }
    .account-admin-link span { display: block; margin-top: 2px; color: #7f1d1d; font-size: 12px; }
    .account-admin-link svg { width: 18px; height: 18px; flex: none; }
    @media (max-width: 820px) {
        .account-grid { grid-template-columns: 1fr; }
        .account-profile { order: 1; }
        .account-security { order: 2; }
    }
    @media (max-width: 520px) {
        .account-profile-body, .account-security { padding-left: 18px; padding-right: 18px; }
        .account-form-actions .btn { width: 100%; }
    }
</style>
{% endblock %}

{% block content %}
<div class="account-page">
    <header class="account-header">
        <h2>账户设置</h2>
        <p>查看当前登录身份并维护个人账户安全。</p>
    </header>

    <div class="account-grid">
        <section class="card account-card account-profile" aria-labelledby="profile-title">
            <div class="account-profile-banner" aria-hidden="true"></div>
            <div class="account-profile-body">
                <div class="account-avatar" aria-hidden="true">{{ user.get('username', '?')[0] | upper }}</div>
                <h3 id="profile-title" class="account-profile-name">{{ user.get('cn', user.get('username', 'Unknown')) }}</h3>
                <p class="account-profile-username">@{{ user.get('username', 'unknown') }}</p>
                <span class="account-role{% if user.get('is_admin') %} is-admin{% endif %}">
                    {{ '系统管理员' if user.get('is_admin') else '普通用户' }}
                </span>
                <p class="account-profile-note">账户资料由 LDAP 统一维护。如需修改姓名或其他身份信息，请联系系统管理员。</p>

                {% if user.get('is_admin') %}
                <a class="account-admin-link" href="/settings">
                    <div>
                        <strong>系统设置</strong>
                        <span>配置终端 AI 与全局公告</span>
                    </div>
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </a>
                {% endif %}
            </div>
        </section>

        <section class="card account-card account-security" aria-labelledby="password-title">
            <div class="account-card-header">
                <span class="account-card-icon" aria-hidden="true">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <rect x="5" y="10" width="14" height="11" rx="2" stroke-width="2" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10V7a4 4 0 018 0v3m-4 5v2" />
                    </svg>
                </span>
                <div>
                    <h3 id="password-title">修改密码</h3>
                    <p>更新 LDAP 登录密码，保存后将用于后续登录及关联服务认证。</p>
                </div>
            </div>
            <form id="changePasswordForm" class="account-form" onsubmit="handleChangePassword(event)">
                <div class="form-group">
                    <label for="current_password">当前密码</label>
                    <input type="password" id="current_password" name="current_password" required autocomplete="current-password" placeholder="输入当前登录密码" />
                </div>
                <div class="form-group">
                    <label for="new_password">新密码</label>
                    <input type="password" id="new_password" name="new_password" required autocomplete="new-password" placeholder="输入新的登录密码" />
                </div>
                <div class="form-group">
                    <label for="confirm_password">确认新密码</label>
                    <input type="password" id="confirm_password" name="confirm_password" required autocomplete="new-password" placeholder="再次输入新密码" />
                </div>
                <div class="account-form-actions">
                    <button class="btn btn-primary" type="submit">更新密码</button>
                </div>
            </form>
        </section>
    </div>
</div>
{% endblock %}

{% block page_scripts %}
<script>
    async function handleChangePassword(event) {
        event.preventDefault();
        const button = event.submitter;
        const currentPassword = document.getElementById("current_password").value;
        const newPassword = document.getElementById("new_password").value;
        const confirmPassword = document.getElementById("confirm_password").value;

        if (newPassword !== confirmPassword) {
            showToast("两次输入的新密码不一致", "error");
            return;
        }
        if (currentPassword === newPassword) {
            showToast("新密码不能与当前密码相同", "error");
            return;
        }

        if (button) button.disabled = true;
        try {
            const res = await fetch("/api/auth/change-password", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ current_password: currentPassword, new_password: newPassword }),
            });
            const data = await res.json();
            if (!res.ok) throw new Error(data.detail || "密码修改失败");
            showToast("密码修改成功", "success");
            document.getElementById("changePasswordForm").reset();
        } catch (error) {
            console.error("修改密码失败:", error);
            showToast(error.message || "密码修改失败", "error");
        } finally {
            if (button) button.disabled = false;
        }
    }
</script>
{% endblock %}