{{template "header" .}}
<main id="main" class="relative min-h-screen bg-[#0D0D0D] text-white pb-16" data-bj-member-page>
    <div class="relative z-10 vi-container py-8 lg:py-12">
        <header class="mb-6 lg:mb-8">
            <h1 class="text-2xl lg:text-3xl font-bold bg-gradient-to-b from-white to-gray-400 bg-clip-text text-transparent">个人中心</h1>
            <p class="text-sm text-gray-500 mt-2">管理您的影视会员账号</p>
        </header>

        <div class="flex flex-col lg:flex-row gap-6 lg:gap-8 max-w-5xl">
            <aside class="lg:w-56 shrink-0">
                <div class="rounded-md border border-white/10 bg-zinc-900/60 p-4 lg:p-5 lg:sticky lg:top-24">
                    <div class="mb-4 px-3 py-2.5 pb-4 border-b border-white/10 min-w-0">
                        <div class="flex items-center gap-2.5 min-w-0">
                            <p data-bj-member-nickname class="text-sm font-semibold text-white truncate min-w-0 mr-2">{{with current_member}}{{.nickname}}{{end}}</p>
                            <button type="button" data-bj-member-logout
                                class="shrink-0 px-2 py-0.5 rounded text-[11px] leading-4 text-gray-400 border border-white/10 hover:text-white hover:bg-white/5 transition-colors whitespace-nowrap">
                                退出
                            </button>
                        </div>
                        <p data-bj-member-email class="text-xs text-gray-500 truncate mt-1">{{with current_member}}{{.email}}{{end}}</p>
                    </div>
                    <nav class="flex lg:flex-col gap-1 overflow-x-auto lg:overflow-visible pb-1 lg:pb-0 -mx-1 px-1" role="tablist" aria-label="个人中心导航">
                        <button type="button" role="tab" data-bj-member-tab="profile" aria-selected="true"
                            class="bj-member-tab shrink-0 lg:w-full text-left px-3 py-2.5 rounded-md text-sm font-medium transition-colors border border-transparent">
                            账号资料
                        </button>
                        <button type="button" role="tab" data-bj-member-tab="vip" aria-selected="false"
                            class="bj-member-tab shrink-0 lg:w-full text-left px-3 py-2.5 rounded-md text-sm font-medium transition-colors border border-transparent">
                            影视会员
                        </button>
                        <button type="button" role="tab" data-bj-member-tab="password" aria-selected="false"
                            class="bj-member-tab shrink-0 lg:w-full text-left px-3 py-2.5 rounded-md text-sm font-medium transition-colors border border-transparent">
                            修改密码
                        </button>
                    </nav>
                </div>
            </aside>

            <div class="flex-1 min-w-0">
                <section data-bj-member-panel="profile" role="tabpanel" class="rounded-md border border-white/10 bg-zinc-900/60 p-6">
                    <h2 class="text-lg font-semibold text-white mb-4">账号资料</h2>
                    <form data-bj-member-profile-form class="space-y-4 max-w-lg">
                        <div class="flex items-center gap-4">
                            <div class="w-14 h-14 rounded-full bg-zinc-800 overflow-hidden shrink-0 flex items-center justify-center text-lg text-gray-400" data-bj-member-avatar-preview-side aria-hidden="true">
                                {{with current_member}}{{if .avatar_url}}<img src="{{.avatar_url}}" alt="" class="w-full h-full object-cover">{{else}}?{{end}}{{end}}
                            </div>
                            <div class="flex-1 min-w-0">
                                <label class="block text-xs text-gray-500 mb-1" for="member-avatar">头像 URL</label>
                                <input id="member-avatar" name="avatar_url" type="url" maxlength="255"
                                    value="{{with current_member}}{{.avatar_url}}{{end}}"
                                    placeholder="https://example.com/avatar.jpg"
                                    class="w-full px-3 py-2 rounded-md bg-black/40 border border-white/10 text-white text-sm placeholder-gray-500 outline-none focus:border-gold-500/50">
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-1" for="member-nickname">昵称</label>
                            <input id="member-nickname" name="nickname" type="text" maxlength="32"
                                value="{{with current_member}}{{.nickname}}{{end}}"
                                class="w-full px-3 py-2 rounded-md bg-black/40 border border-white/10 text-white text-sm outline-none focus:border-gold-500/50">
                        </div>
                        <div class="text-xs text-gray-500">
                            邮箱：<span>{{with current_member}}{{.email}}{{end}}</span>（本阶段不可修改）
                        </div>
                        <p data-bj-member-profile-error class="hidden text-sm text-red-400"></p>
                        <button type="submit" data-bj-member-profile-submit
                            class="w-full sm:w-auto px-8 py-2.5 rounded-md bg-white/5 border border-white/10 text-white text-sm hover:bg-white/10 transition-colors">
                            保存资料
                        </button>
                    </form>
                </section>

                <section data-bj-member-panel="vip" role="tabpanel" class="hidden rounded-md border border-gold-500/20 bg-gradient-to-br from-zinc-900 to-zinc-800 p-6">
                    <div class="flex items-center justify-between gap-3 mb-4">
                        <h2 class="text-lg font-semibold text-white">影视会员</h2>
                        <span data-bj-member-vip-badge class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold {{with current_member}}{{if .is_vip}}bg-gradient-to-r from-gold-400 to-gold-600 text-black{{else}}bg-white/10 text-gray-400{{end}}{{end}}">
                            {{with current_member}}{{if .is_vip}}VIP{{else}}普通{{end}}{{end}}
                        </span>
                    </div>
                    <p data-bj-member-vip-expires class="text-sm text-gray-400 mb-3">
                        {{with current_member}}{{if .is_vip}}{{if .vip_expires_at}}到期：{{.vip_expires_at}}{{else}}永久有效{{end}}{{else}}开通 VIP 享更多权益（本阶段仅展示）{{end}}{{end}}
                    </p>
                    <ul class="text-sm text-gray-400 space-y-2 mb-6">
                        <li>· 高清画质</li>
                        <li>· 多端同步观影记录</li>
                        <li>· 评论 VIP 标识</li>
                    </ul>
                    <p data-bj-member-history-count class="text-xs text-gray-500 mb-4">正在同步观影记录…</p>
                    <a href="{{or (get_option `history_url`) `/history/`}}"
                        class="inline-flex items-center justify-center px-5 py-2 rounded-md bg-gold-500/20 text-gold-300 border border-gold-500/30 text-sm font-medium hover:bg-gold-500/30 transition-colors">
                        观看历史
                    </a>
                </section>

                <section data-bj-member-panel="password" role="tabpanel" class="hidden rounded-md border border-white/10 bg-zinc-900/60 p-6">
                    <h2 class="text-lg font-semibold text-white mb-4">修改密码</h2>
                    <form data-bj-member-password-form class="space-y-3 max-w-lg">
                        <input name="old_password" type="password" autocomplete="current-password" required
                            placeholder="当前密码"
                            class="w-full px-3 py-2 rounded-md bg-black/40 border border-white/10 text-white text-sm placeholder-gray-500 outline-none focus:border-gold-500/50">
                        <input name="new_password" type="password" autocomplete="new-password" required
                            placeholder="新密码（至少 8 位）"
                            class="w-full px-3 py-2 rounded-md bg-black/40 border border-white/10 text-white text-sm placeholder-gray-500 outline-none focus:border-gold-500/50">
                        <p data-bj-member-password-error class="hidden text-sm text-red-400"></p>
                        <button type="submit" data-bj-member-password-submit
                            class="w-full sm:w-auto px-8 py-2.5 rounded-md bg-gradient-to-r from-gold-400 to-gold-600 text-black text-sm font-bold hover:from-gold-300 hover:to-gold-500 transition-all shadow-sm shadow-gold-500/20">
                            更新密码
                        </button>
                    </form>
                </section>
            </div>
        </div>
    </div>
</main>
<style>
    .bj-member-tab {
        color: #9ca3af;
    }
    .bj-member-tab:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.05);
    }
    .bj-member-tab.is-active {
        color: #e6c384;
        background: rgba(201, 162, 39, 0.12);
        border-color: rgba(201, 162, 39, 0.25);
    }
</style>
{{template "footer" .}}