{{--
    文件功能：聊天室竖向工具条（中间导航栏）+ 关联弹窗

    包含：
    1. 工具条按钮（管理、商店、存点、头像、设置等）
    2. 头像选择弹窗
    3. 个人设置弹窗（密码、资料、密保）
    4. 商店弹窗（从工具栏点击打开的全屏模态）
    5. 对应的 JS 操作函数

    依赖变量：$user, $superLevel, $room
    @author ChatRoom Laravel
    @version 1.0.0
--}}

{{-- ═══════════ 竖向工具条按钮 ═══════════ --}}
<div class="chat-toolbar" id="toolbar-strip">
    <div class="tool-btn" data-toolbar-action="shop" title="购买道具">商店</div>
    <div class="tool-btn" data-toolbar-action="vip" title="会员中心">会员</div>
    <div class="tool-btn" data-toolbar-action="save-exp" title="手动存经验点">存点</div>
    <div class="tool-btn" data-toolbar-action="game" title="娱乐游戏大厅">娱乐</div>
    <div class="tool-btn" data-toolbar-action="earn" title="看视频赚金币">赚钱</div>
    <div class="tool-btn" data-toolbar-action="bank" title="银行存取金币">银行</div>
    <div class="tool-btn" data-toolbar-action="marriage" title="婚姻状态">婚姻</div>
    <div class="tool-btn" data-toolbar-action="friend" title="好友列表">好友</div>
    <div class="tool-btn" data-toolbar-action="avatar" title="修改头像">头像</div>
    <div class="tool-btn" data-toolbar-action="settings" title="个人设置">设置
    </div>
    <div class="tool-btn" data-toolbar-url="{{ route('feedback.index') }}" title="反馈">反馈</div>
    <div class="tool-btn" data-toolbar-url="{{ route('guestbook.index') }}" title="留言板/私信">留言</div>
    <div class="tool-btn" data-toolbar-url="{{ route('guide') }}" title="规则/帮助">规则</div>

    @if ($user->id === 1 || $user->activePosition()->exists())
        <div class="tool-btn" style="color: #ffcc00;" data-toolbar-url="/admin" title="管理后台">管理</div>
        <div class="tool-btn" data-toolbar-url="{{ route('leaderboard.index') }}" title="排行榜">排行
        </div>
    @else
        <div class="tool-btn" data-toolbar-url="{{ route('leaderboard.index') }}" title="排行榜">排行
        </div>
    @endif
    <div class="tool-btn" style="color: #ffaaaa;" data-toolbar-action="leave" title="离开聊天室">
        离开
    </div>
</div>

{{-- ═══════════ 头像选择弹窗 ═══════════ --}}
<div id="avatar-picker-modal"
    style="display:none; position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.5); z-index:9999; justify-content:center; align-items:center;">
    <div
        style="background:#fff; width:600px; max-height:80vh; border-radius:6px; overflow:hidden;
        box-shadow:0 4px 20px rgba(0,0,0,0.3); display:flex; flex-direction:column;">
        {{-- 标题栏 --}}
        <div
            style="background:#336699; color:#fff; padding:10px 16px; font-size:14px; font-weight:bold;
            display:flex; justify-content:space-between; align-items:center;">
            <span>🖼 修改头像（原版风格）</span>
            <span style="cursor:pointer; font-size:18px;" data-avatar-picker-close>✕</span>
        </div>

        {{-- 预览区 --}}
        <div
            style="padding:10px 16px; background:#f0f6ff; border-bottom:1px solid #ddd; display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
            <span style="font-size:12px; color:#666;">当前选中：</span>
            <img id="avatar-preview" src="{{ str_starts_with($user->usersf, 'storage/') ? '/' . $user->usersf : '/images/headface/' . ($user->usersf ?: '1.gif') }}"
                style="width:40px; height:40px; border:2px solid #336699; border-radius:4px; object-fit: cover;">
            <span id="avatar-selected-name" style="font-size:12px; color:#333;">{{ $user->usersf ?: '未设置' }}</span>
            <button id="avatar-save-btn" disabled data-avatar-save
                style="margin-left:auto; padding:5px 16px; background:#336699; color:#fff; border:none;
                border-radius:3px; font-size:12px; cursor:pointer;">确定更换系统头像</button>
            <div style="width:100%; height:1px; background:#ddd; margin: 4px 0;"></div>
            <div style="display:flex; align-items:center; gap:8px; width:100%;">
                <span style="font-size:12px; color:#666; font-weight:bold;">自定义头像上传(112x112)：</span>
                <input type="file" id="avatar-upload-input" accept="image/jpeg,image/png,image/gif,image/webp" style="display:none;" data-avatar-upload-input>
                <button id="avatar-upload-btn" data-avatar-upload-trigger
                    style="padding:5px 16px; background:#16a34a; color:#fff; border:none;
                    border-radius:3px; font-size:12px; cursor:pointer;">选择本地图片上传</button>
            </div>
        </div>

        {{-- 头像网格 --}}
        <div id="avatar-grid"
            style="flex:1; overflow-y:auto; padding:10px; display:flex; flex-wrap:wrap;
            gap:4px; align-content:flex-start;">
        </div>
    </div>
</div>

{{-- ═══════════ 个人设置弹窗 ═══════════ --}}
<div id="settings-modal" data-settings-modal-overlay
    style="display:none; position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.5); z-index:10000; justify-content:center; align-items:center;">
    <div data-settings-modal-panel
        style="background:#fff; border-radius:8px; width:380px; max-height:90vh;
        box-shadow:0 8px 32px rgba(0,0,0,0.3); display:flex; flex-direction:column;">
        {{--  --}}
        <div
            style="background:linear-gradient(135deg,#336699,#5a8fc0); color:#fff;
            padding:12px 16px; border-radius:8px 8px 0 0; display:flex; justify-content:space-between; align-items:center; flex-shrink:0;">
            <span style="font-size:14px; font-weight:bold;">⚙️ 个人设置</span>
            <span data-settings-modal-close
                style="cursor:pointer; font-size:18px; opacity:0.8;">&times;</span>
        </div>

        {{-- 内容滚动区：把 overflow-y:auto 放到内层，避免外层 overflow 创建堆叠上下文论clip全局弹窗 --}}
        <div style="padding:16px; overflow-y:auto; flex:1;">
            {{-- 修改密码 --}}
            <div style="margin-bottom:16px; border:1px solid #e0e0e0; border-radius:6px; padding:12px;">
                <div style="font-size:12px; font-weight:bold; color:#336699; margin-bottom:8px;">🔒 修改密码</div>
                <div style="display:flex; flex-direction:column; gap:6px;">
                    <input id="set-old-pwd" type="password" placeholder="当前旧密码"
                        style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
                    <input id="set-new-pwd" type="password" placeholder="新密码（至少6位）"
                        style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
                    <input id="set-new-pwd2" type="password" placeholder="确认新密码"
                        style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
                    <div id="pwd-inline-msg"
                        style="display:none; border-radius:10px; padding:10px 14px;
                        text-align:center; margin-top:8px; font-size:12px; font-weight:bold;">
                    </div>
                    <button data-settings-save-password
                        style="padding:6px; background:#336699; color:#fff; border:none; border-radius:4px;
                        font-size:12px; cursor:pointer;">确定修改密码</button>
                </div>
            </div>

            {{-- 个人资料 --}}
            <div style="margin-bottom:16px; border:1px solid #e0e0e0; border-radius:6px; padding:12px;">
                <div style="font-size:12px; font-weight:bold; color:#336699; margin-bottom:8px;">👤 个人资料</div>
                <div style="display:flex; flex-direction:column; gap:6px;">
                    <div style="display:flex; align-items:center; gap:8px;">
                        <label style="font-size:12px; width:50px; text-align:right;">性别:</label>
                        <select id="set-sex"
                            style="flex:1; padding:5px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
                            <option value="1" {{ Auth::user()->sex == 1 ? 'selected' : '' }}>男</option>
                            <option value="2" {{ Auth::user()->sex == 2 ? 'selected' : '' }}>女</option>
                            <option value="0" {{ Auth::user()->sex == 0 ? 'selected' : '' }}>保密</option>
                        </select>
                    </div>
                    <div style="display:flex; align-items:center; gap:8px;">
                        <label style="font-size:12px; width:50px; text-align:right;">邮箱:</label>
                        <input id="set-email" type="email" value="{{ Auth::user()->email ?? '' }}"
                            placeholder="用来找回密码(必填)"
                            style="flex:1; padding:5px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
                    </div>
                    @if (\App\Models\SysParam::where('alias', 'smtp_enabled')->value('body') === '1')
                        <div style="display:flex; align-items:center; gap:8px; margin-top:6px;">
                            <label style="font-size:12px; width:50px; text-align:right;">验证码:</label>
                            <input id="set-email-code" type="text" placeholder="修改邮箱时必填" maxlength="6"
                                style="flex:1; padding:5px; border:1px solid #ccc; border-radius:4px; font-size:12px; max-width:100px;">
                            <button id="btn-send-code" type="button" data-settings-send-email-code
                                style="padding:5px 10px; border:1px solid #336699; background:#eef5ff; color:#336699; border-radius:4px; font-size:12px; cursor:pointer;">
                                获取验证码
                            </button>
                        </div>
                    @endif
                </div>
            </div>

            {{-- 密保设置 --}}
            <div style="margin-bottom:16px; border:1px solid #e0e0e0; border-radius:6px; padding:12px;">
                <div style="font-size:12px; font-weight:bold; color:#336699; margin-bottom:8px;">🛡️ 密码保护</div>
                <div style="display:flex; flex-direction:column; gap:6px;">
                    <input id="set-question" type="text" value="{{ Auth::user()->question ?? '' }}"
                        placeholder="密保问题（如：我的小学名字？）"
                        style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
                    <input id="set-answer" type="text" value="{{ Auth::user()->answer ?? '' }}"
                        placeholder="密保答案"
                        style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
                </div>
            </div>

            {{-- 微信绑定 --}}
            <div style="margin-bottom:16px; border:1px solid #e0e0e0; border-radius:6px; padding:12px;">
                <div style="font-size:12px; font-weight:bold; color:#336699; margin-bottom:8px;">💬 微信绑定</div>
                <div style="display:flex; flex-direction:column; gap:6px;" id="wechat-bind-container">
                    @if (empty(Auth::user()->wxid))
                        @php
                            $botConfigBody = \App\Models\SysParam::where('alias', 'wechat_bot_config')->value('body');
                            $botConfig = $botConfigBody ? json_decode($botConfigBody, true) : [];
                            $botWxid = $botConfig['kafka']['bot_wxid'] ?? '暂未配置';
                            $qrcodeImage = $botConfig['api']['qrcode_image'] ?? null;
                        @endphp
                        <div style="font-size:12px; color:#666;">
                            您尚未绑定微信。<br>
                            @if($qrcodeImage)
                                扫码添加机器人微信：<br>
                                <img src="{{ \Illuminate\Support\Facades\Storage::url($qrcodeImage) }}" alt="机器人二维码" style="max-height:100px; display:block; margin: 6px 0; border: 1px solid #ddd; border-radius: 4px;">
                            @else
                                请添加机器人微信：<strong style="color:#d97706">{{ $botWxid }}</strong><br>
                            @endif
                            并发送以下绑定代码完成绑定：
                        </div>
                        <div style="display:flex; align-items:center; gap:8px;">
                            <input id="wechat-bind-code" type="text" readonly value="点击生成"
                                style="flex:1; padding:6px 8px; border:1px dashed #336699; background:#f9fafb; border-radius:4px; font-size:13px; font-weight:bold; color:#336699; text-align:center; cursor:text;">
                            <button type="button" id="btn-copy-bind-code" data-settings-copy-wechat-code
                                style="display:none; padding:5px 10px; border:1px solid #10b981; background:#ecfdf5; color:#10b981; border-radius:4px; font-size:12px; cursor:pointer; white-space:nowrap;">
                                复制
                            </button>
                            <button type="button" id="btn-generate-bind-code" data-settings-generate-wechat-code
                                style="padding:5px 10px; border:1px solid #336699; background:#eef5ff; color:#336699; border-radius:4px; font-size:12px; cursor:pointer; white-space:nowrap;">
                                生成代码
                            </button>
                        </div>
                        <div id="bind-code-tip" style="font-size:11px; color:#888; display:none; text-align:center;">有效时间 5 分钟，绑定成功后请刷新页面。</div>
                    @else
                        <div style="font-size:12px; color:#16a34a; font-weight:bold; display:flex; justify-content:space-between; align-items:center;">
                            <span>已绑定微信，可接收提醒通知。</span>
                            <button type="button" data-settings-unbind-wechat style="padding:4px 8px; background:#fee2e2; color:#dc2626; border:1px solid #fecaca; border-radius:4px; font-size:11px; cursor:pointer;">解除绑定</button>
                        </div>
                    @endif
                </div>
            </div>

            {{-- 内联操作结果提示（仿百家乐已押注卡片风格） --}}
            <div id="settings-inline-msg"
                style="display:none; border-radius:10px; padding:10px 14px;
                text-align:center; margin-bottom:10px; font-size:13px; font-weight:bold;">
            </div>

            {{-- 保存按钮 --}}
            <button data-settings-save-profile
                style="width:100%; padding:8px; background:linear-gradient(135deg,#336699,#5a8fc0);
                color:#fff; border:none; border-radius:4px; font-size:13px; font-weight:bold; cursor:pointer;">
                💾 保存资料设置
            </button>
        </div>
    </div>
</div>

{{-- ═══════════ 好友面板（独立文件）═══════════ --}}
@include('chat.partials.friend-panel')

{{-- ═══════════ 娱乐游戏大厅弹窗（games/ 子目录）═══════════ --}}
@include('chat.partials.games.game-hall')

{{-- ═══════════ 工具条相关 JS 函数 ═══════════ --}}
<script>
    // ── 头像选择器（与上方 #avatar-picker-modal DOM 对应）──────────────
    let avatarPickerLoaded = false;

    /**
     * 打开头像选择弹窗
     */
    function openAvatarPicker() {
        const modal = document.getElementById('avatar-picker-modal');
        modal.style.display = 'flex';

        if (!avatarPickerLoaded) {
            loadHeadfaces();
            avatarPickerLoaded = true;
        }
    }

    /**
     * 关闭头像选择弹窗
     */
    function closeAvatarPicker() {
        document.getElementById('avatar-picker-modal').style.display = 'none';
    }

    /**
     * 打开个人设置弹窗。
     */
    function openSettingsModal() {
        document.getElementById('settings-modal').style.display = 'flex';
    }

    /**
     * 关闭个人设置弹窗。
     */
    function closeSettingsModal() {
        document.getElementById('settings-modal').style.display = 'none';
    }

    /**
     * 加载头像列表（懒加载，首次打开时请求）
     */
    async function loadHeadfaces() {
        const grid = document.getElementById('avatar-grid');
        grid.innerHTML = '<div style="text-align:center;padding:20px;color:#999;">加载中...</div>';

        try {
            const res = await fetch('/headface/list');
            const data = await res.json();
            grid.innerHTML = '';

            data.headfaces.forEach(file => {
                const img = document.createElement('img');
                img.src = '/images/headface/' + file;
                img.className = 'avatar-option';
                img.title = file;
                img.dataset.file = file;
                img.dataset.avatarFile = file;
                img.onerror = () => img.style.display = 'none';
                grid.appendChild(img);
            });
        } catch (e) {
            grid.innerHTML = '<div style="text-align:center;padding:20px;color:red;">加载失败</div>';
        }
    }

    /**
     * 选中一个头像（高亮选中状态）
     *
     * @param {string}     file  头像文件名
     * @param {HTMLElement} imgEl 被点击的 img 元素
     */
    function selectAvatar(file, imgEl) {
        document.querySelectorAll('.avatar-option.selected').forEach(el => el.classList.remove('selected'));
        imgEl.classList.add('selected');
        document.getElementById('avatar-preview').src = '/images/headface/' + file;
        document.getElementById('avatar-selected-name').textContent = file;
        document.getElementById('avatar-save-btn').disabled = false;
        document.getElementById('avatar-save-btn').dataset.file = file;
    }

    /**
     * 处理本地头像上传
     */
    async function handleAvatarUpload(input) {
        if (!input.files || !input.files[0]) return;
        
        const file = input.files[0];
        
        // 简单的前端校验
        if (file.size > 2 * 1024 * 1024) {
            window.chatDialog.alert('图片大小不可超过 2MB', '上传失败', '#cc4444');
            input.value = '';
            return;
        }

        const btn = document.getElementById('avatar-upload-btn');
        btn.disabled = true;
        btn.textContent = '上传中...';

        const formData = new FormData();
        formData.append('file', file);

        try {
            const res = await fetch('/headface/upload', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json'
                },
                body: formData
            });
            const data = await res.json();

            if (res.ok && data.status === 'success') {
                window.chatDialog.alert('自定义头像上传成功！', '提示', '#16a34a');
                
                // 更新预览图和显示名称
                const previewImg = document.getElementById('avatar-preview');
                const relativeUrl = '/' + data.headface;
                previewImg.src = relativeUrl; 
                document.getElementById('avatar-selected-name').textContent = data.headface;
                
                // 同步在线列表自己
                const myName = window.chatContext.username;
                if (typeof onlineUsers !== 'undefined' && onlineUsers[myName]) {
                    onlineUsers[myName].headface = data.headface;
                }
                if (typeof renderUserList === 'function') {
                    renderUserList();
                }
                
                // 清除系统头像选中状态
                document.querySelectorAll('.avatar-option.selected').forEach(el => el.classList.remove('selected'));
                document.getElementById('avatar-save-btn').disabled = true;
                
                closeAvatarPicker();
            } else {
                window.chatDialog.alert(data.message || '上传失败', '操作失败', '#cc4444');
            }
        } catch (e) {
            window.chatDialog.alert('网络错误，上传失败', '网络异常', '#cc4444');
        }

        btn.disabled = false;
        btn.textContent = '选择本地图片上传';
        input.value = ''; // 清空 file input，允许重复选中同一文件
    }

    /**
     * 保存选中的头像（调用 API 更新，成功后刷新用户列表）
     */
    async function saveAvatar() {
        const btn = document.getElementById('avatar-save-btn');
        const file = btn.dataset.file;
        if (!file) {
            return;
        }

        btn.disabled = true;
        btn.textContent = '保存中...';

        try {
            const res = await fetch('/headface/change', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    headface: file
                })
            });
            const data = await res.json();

            if (data.status === 'success') {
                window.chatDialog.alert('头像修改成功！', '提示', '#16a34a');
                // 同步更新内存中的在线用户头像，避免重新渲染前闪烁旧图
                const myName = window.chatContext.username;
                if (typeof onlineUsers !== 'undefined' && onlineUsers[myName]) {
                    onlineUsers[myName].headface = data.headface;
                }
                if (typeof renderUserList === 'function') {
                    renderUserList();
                }
                closeAvatarPicker();
            } else {
                window.chatDialog.alert(data.message || '修改失败', '操作失败', '#cc4444');
            }
        } catch (e) {
            window.chatDialog.alert('网络错误', '网络异常', '#cc4444');
        }

        btn.disabled = false;
        btn.textContent = '确定更换';
    }


    /**
     * 保存密码（调用修改密码 API）
     */
    /**
     * 显示内联操作结果提示（仿百家乐「已押注」卡片风格，3s 后自动消失）
     *
     * @param {string} elId     目标元素 ID
     * @param {string} message  提示内容
     * @param {boolean} success 是否成功（决定颜色）
     */
    function showInlineMsg(elId, message, success) {
        const el = document.getElementById(elId);
        if (!el) return;
        if (success) {
            el.style.background = '#f0fdf4';
            el.style.border = '1px solid #86efac';
            el.style.color = '#16a34a';
        } else {
            el.style.background = '#fff5f5';
            el.style.border = '1px solid #fecaca';
            el.style.color = '#dc2626';
        }
        el.textContent = message;
        el.style.display = 'block';
        el.style.opacity = '1';
        el.style.transition = 'opacity .4s';
        clearTimeout(el._hideTimer);
        el._hideTimer = setTimeout(() => {
            el.style.opacity = '0';
            setTimeout(() => {
                el.style.display = 'none';
            }, 420);
        }, 3000);
    }

    /**
     * 保存密码（调用修改密码 API）
     */
    async function savePassword() {
        const oldPwd = document.getElementById('set-old-pwd').value;
        const newPwd = document.getElementById('set-new-pwd').value;
        const newPwd2 = document.getElementById('set-new-pwd2').value;
        if (!oldPwd || !newPwd) {
            showInlineMsg('pwd-inline-msg', '⚠️ 请填写旧密码和新密码', false);
            return;
        }
        if (newPwd.length < 6) {
            showInlineMsg('pwd-inline-msg', '⚠️ 新密码最少6位！', false);
            return;
        }
        if (newPwd !== newPwd2) {
            showInlineMsg('pwd-inline-msg', '⚠️ 两次输入的新密码不一致！', false);
            return;
        }

        try {
            const res = await fetch('{{ route('user.update_password') }}', {
                method: 'PUT',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    old_password: oldPwd,
                    new_password: newPwd,
                    new_password_confirmation: newPwd2
                })
            });
            const data = await res.json();
            if (res.ok && data.status === 'success') {
                showInlineMsg('pwd-inline-msg', '🔒 密码修改成功！', true);
                document.getElementById('set-old-pwd').value = '';
                document.getElementById('set-new-pwd').value = '';
                document.getElementById('set-new-pwd2').value = '';
            } else {
                showInlineMsg('pwd-inline-msg', '❌ ' + (data.message || '请输入正确的旧密码'), false);
            }
        } catch (e) {
            showInlineMsg('pwd-inline-msg', '🌐 网络异常，请稍后重试', false);
        }
    }

    /**
     * 保存个人资料和密保设置
     */
    async function saveSettings() {
        const profileData = {
            sex: document.getElementById('set-sex').value,
            email: document.getElementById('set-email').value,
            email_code: document.getElementById('set-email-code') ? document.getElementById('set-email-code')
                .value : '',
            question: document.getElementById('set-question').value,
            answer: document.getElementById('set-answer').value,
            headface: @json(Auth::user()->usersf ?: '1.gif'),
            sign: @json(Auth::user()->sign ?? '')
        };

        try {
            const res = await fetch('{{ route('user.update_profile') }}', {
                method: 'PUT',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify(profileData)
            });
            const data = await res.json();
            if (res.ok && data.status === 'success') {
                showInlineMsg('settings-inline-msg', '✅ 资料保存成功！', true);
            } else {
                showInlineMsg('settings-inline-msg', '❌ ' + (data.message || '输入有误'), false);
            }
        } catch (e) {
            showInlineMsg('settings-inline-msg', '🌐 网络异常，请稍后重试', false);
        }
    }

    /**
     * 发送邮箱验证码 (带有 60s 倒计时机制防灌水)
     */
    async function sendEmailCode() {
        const emailInput = document.getElementById('set-email').value.trim();
        if (!emailInput) {
            window.chatDialog.alert('请先填写邮箱地址后再获取验证码！', '提示', '#d97706');
            return;
        }

        const btn = document.getElementById('btn-send-code');
        btn.disabled = true;
        btn.innerText = '正在发送...';
        btn.style.opacity = '0.6';
        btn.style.cursor = 'not-allowed';

        try {
            const res = await fetch('{{ route('user.send_email_code') }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    email: emailInput
                })
            });

            const data = await res.json();

            if (res.ok && data.status === 'success') {
                window.chatDialog.alert(data.message || '验证码发送成功，请前往邮箱查收！（有效期5分钟）', '发送成功', '#16a34a');

                // 开始 60 秒防暴力点击倒计时
                let count = 60;
                btn.innerText = count + 's 后重试';
                const timer = setInterval(() => {
                    count--;
                    if (count <= 0) {
                        clearInterval(timer);
                        btn.innerText = '获取验证码';
                        btn.disabled = false;
                        btn.style.opacity = '1';
                        btn.style.cursor = 'pointer';
                    } else {
                        btn.innerText = count + 's 后重试';
                    }
                }, 1000);

            } else {
                window.chatDialog.alert('发送失败：' + (data.message || '系统繁忙'), '发送失败', '#dc2626');
                // 失败了立刻解除禁用以重新尝试
                btn.innerText = '获取验证码';
                btn.disabled = false;
                btn.style.opacity = '1';
                btn.style.cursor = 'pointer';
            }
    } catch (e) {
        window.chatDialog.alert('网络异常，验证码发送失败，请稍后重试。', '错误', '#6b7280');
        btn.innerText = '获取验证码';
        btn.disabled = false;
        btn.style.opacity = '1';
        btn.style.cursor = 'pointer';
    }
}

/**
 * 生成微信绑定验证码
 */
async function generateWechatBindCode() {
        const btn = document.getElementById('btn-generate-bind-code');
        const input = document.getElementById('wechat-bind-code');
        const tip = document.getElementById('bind-code-tip');
        
        btn.disabled = true;
        btn.innerText = '生成中...';
        
        try {
            const res = await fetch('{{ route('user.generate_wechat_code') }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json'
                }
            });
            const data = await res.json();
            
            if (res.ok && data.status === 'success') {
                input.value = data.code;
                tip.style.display = 'block';
                document.getElementById('btn-copy-bind-code').style.display = 'inline-block';
                showInlineMsg('settings-inline-msg', '✅ 绑定代码生成成功，请在5分钟内发送给机器人', true);
            } else {
                showInlineMsg('settings-inline-msg', '❌ 生成失败：' + (data.message || '未知错误'), false);
            }
        } catch (e) {
            showInlineMsg('settings-inline-msg', '🌐 网络异常，请稍后重试', false);
        }
        
        btn.disabled = false;
        btn.innerText = '重新生成';
    }

    /**
     * 复制微信绑定验证码
     */
    function copyWechatBindCode() {
        const input = document.getElementById('wechat-bind-code');
        if (input.value && input.value !== '点击生成' && input.value !== '生成中...') {
            input.select();
            input.setSelectionRange(0, 99999);

            try {
                if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard.writeText(input.value);
                } else {
                    document.execCommand('copy');
                }
                const btn = document.getElementById('btn-copy-bind-code');
                const originalText = btn.innerText;
                btn.innerText = '已复制';
                setTimeout(() => {
                    btn.innerText = originalText;
                }, 2000);
            } catch (err) {
                showInlineMsg('settings-inline-msg', '❌ 复制失败，请手动复制', false);
            }
        }
    }

    /**
     * 解除微信绑定
     */
    async function unbindWechat() {
        if (!confirm('确定要解除微信绑定吗？解除后将无法接收任何机器人推送通知。')) {
            return;
        }
        try {
            const res = await fetch('{{ route('user.unbind_wechat') }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json'
                }
            });
            const data = await res.json();
            if (res.ok && data.status === 'success') {
                alert('✅ 解绑成功！请刷新页面获取最新状态。');
                location.reload();
            } else {
                alert('❌ 解绑失败：' + (data.message || '未知错误'));
            }
        } catch (e) {
            alert('网络异常，解绑失败');
        }
    }
</script>

{{-- ═══════════ 商店弹窗 ═══════════ --}}
<style>
    /* 商店弹窗遮罩 */
    #shop-modal {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 9999;
        justify-content: center;
        align-items: center;
    }

    /* 弹窗主体 — 与设置弹窗同风格 */
    #shop-modal-inner {
        background: #fff;
        border-radius: 8px;
        width: 800px;
        max-width: 95vw;
        max-height: 84vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
        overflow: hidden;
        position: relative;
    }

    /* 标题栏 — 与设置/头像弹窗一致 */
    #shop-modal-header {
        background: linear-gradient(135deg, #336699, #5a8fc0);
        color: #fff;
        padding: 10px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }

    #shop-modal-title {
        font-size: 14px;
        font-weight: bold;
        flex: 1;
    }

    #shop-modal-jjb {
        font-size: 12px;
        color: #d0e8ff;
        display: flex;
        align-items: center;
        gap: 3px;
        background: rgba(0, 0, 0, .2);
        padding: 2px 8px;
        border-radius: 10px;
    }

    #shop-modal-jjb strong {
        color: #ffe082;
        font-size: 13px;
    }

    #shop-week-badge {
        display: none;
        font-size: 10px;
        background: rgba(255, 255, 255, .2);
        padding: 2px 7px;
        border-radius: 10px;
        color: #fff;
    }

    #shop-modal-close {
        cursor: pointer;
        font-size: 18px;
        opacity: .8;
        transition: opacity .15s;
        line-height: 1;
    }

    #shop-modal-close:hover {
        opacity: 1;
    }

    /* Toast */
    #shop-toast {
        display: none;
        margin: 6px 12px 0;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: bold;
        flex-shrink: 0;
    }

    /* 商品列表区 */
    #shop-items-list {
        flex: 1;
        overflow-y: auto;
        padding: 10px 12px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        align-content: start;
        background: #f6faff;
    }

    /* 分组标题 — 独占一整行 */
    .shop-group-header {
        grid-column: 1 / -1;
        font-size: 11px;
        font-weight: bold;
        color: #336699;
        padding: 6px 4px 4px;
        border-bottom: 1px solid #cde;
        display: flex;
        align-items: baseline;
        gap: 6px;
    }

    .shop-group-header span {
        font-size: 10px;
        color: #888;
        font-weight: normal;
    }

    /* 商品卡 */
    .shop-card {
        background: #fff;
        border: 1px solid #d0e4f5;
        border-radius: 6px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        transition: border-color .2s, box-shadow .2s;
        cursor: default;
    }

    .shop-card:hover {
        border-color: #5a8fc0;
        box-shadow: 0 2px 8px rgba(51, 102, 153, .18);
    }

    .shop-card-top {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .shop-card-icon {
        font-size: 20px;
        flex-shrink: 0;
    }

    .shop-card-name {
        font-size: 12px;
        font-weight: bold;
        color: #225588;
        flex: 1;
        line-height: 1.3;
    }

    .shop-card-desc {
        font-size: 10px;
        color: #888;
        line-height: 1.4;
        flex: 1;
    }

    .shop-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: linear-gradient(135deg, #336699, #5a8fc0);
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 5px 8px;
        cursor: pointer;
        font-size: 11px;
        font-weight: bold;
        width: 100%;
        margin-top: auto;
        transition: opacity .15s;
    }

    .shop-btn:hover {
        opacity: .85;
    }

    .shop-btn-use {
        background: linear-gradient(135deg, #7c3aed, #9f67e8);
    }

    /* 改名内嵌遮罩 */
    #shop-rename-overlay {
        display: none;
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 10001;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
    }

    #shop-rename-box {
        background: #fff;
        border: 1px solid #5a8fc0;
        border-radius: 8px;
        padding: 16px 14px;
        width: 230px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
    }

    #shop-rename-box h4 {
        font-size: 13px;
        font-weight: bold;
        color: #336699;
        margin: 0 0 10px;
    }

    #rename-input {
        width: 100%;
        border: 1px solid #aac;
        border-radius: 4px;
        padding: 6px 8px;
        color: #333;
        font-size: 12px;
        box-sizing: border-box;
        margin-bottom: 8px;
        outline: none;
    }

    #rename-input:focus {
        border-color: #336699;
    }

    .rename-btn-row {
        display: flex;
        gap: 6px;
    }

    #rename-confirm {
        flex: 1;
        background: #336699;
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 6px;
        cursor: pointer;
        font-size: 12px;
        font-weight: bold;
    }

    #rename-cancel {
        flex: 1;
        background: #eee;
        color: #555;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 6px;
        cursor: pointer;
        font-size: 12px;
    }

    #rename-err {
        color: #c00;
        font-size: 10px;
        margin-top: 5px;
        min-height: 14px;
    }

    /* 送礼对话框 */
    #gift-dialog {
        display: none;
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .55);
        z-index: 10001;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
    }

    #gift-dialog-box {
        background: #fff;
        border: 1px solid #5a8fc0;
        border-radius: 8px;
        padding: 16px 14px;
        width: 250px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
    }

    #gift-dialog-box h4 {
        font-size: 12px;
        font-weight: bold;
        color: #336699;
        margin: 0 0 3px;
    }

    #gift-item-name {
        font-size: 11px;
        color: #555;
        display: block;
        border-bottom: 1px dashed #cde;
        padding-bottom: 6px;
        margin-bottom: 10px;
    }

    .gift-label {
        font-size: 11px;
        color: #555;
        margin-bottom: 3px;
        display: block;
    }

    .gift-input {
        width: 100%;
        border: 1px solid #aac;
        border-radius: 4px;
        padding: 5px 8px;
        font-size: 12px;
        box-sizing: border-box;
        margin-bottom: 8px;
        outline: none;
    }

    .gift-input:focus {
        border-color: #336699;
    }

    .gift-hint {
        font-size: 10px;
        color: #999;
        margin: -4px 0 8px;
        display: block;
    }

    #gift-err {
        color: #c00;
        font-size: 10px;
        margin-top: 4px;
        min-height: 14px;
    }
</style>

<div id="shop-modal">
    <div id="shop-modal-inner" style="position:relative;">

        {{-- 标题栏 --}}
        <div id="shop-modal-header">
            <div id="shop-modal-title">🛍 道具商店</div>
            <div id="shop-modal-jjb">💰 <strong id="shop-jjb">--</strong> 金币</div>
            <span id="shop-week-badge"></span>
            <span id="shop-modal-close" data-shop-modal-close>✕</span>
        </div>

        {{-- Toast --}}
        <div id="shop-toast"></div>

        {{-- 商品网格 --}}
        <div id="shop-items-list">
            <div style="grid-column:1/-1; text-align:center; color:#6366f1; padding:30px 0; font-size:13px;">加载中…</div>
        </div>

        {{-- 改名内嵌遮罩 --}}
        <div id="shop-rename-overlay">
            <div id="shop-rename-box">
                <h4>🎭 使用改名卡</h4>
                <input id="rename-input" type="text" maxlength="10" placeholder="输入新昵称（1-10字）">
                <div class="rename-btn-row">
                    <button id="rename-confirm" data-shop-rename-confirm>确认改名</button>
                    <button id="rename-cancel" data-shop-rename-cancel>取消</button>
                </div>
                <div id="rename-err"></div>
            </div>
        </div>

        {{-- 送礼对话框：填写接收人 + 赠言 --}}
        <div id="gift-dialog">
            <div id="gift-dialog-box">
                <h4>🎁 赠出单次特效卡</h4>
                <span id="gift-item-name"></span>
                <label class="gift-label">送给谁？</label>
                <input id="gift-recipient" class="gift-input" type="text" maxlength="20"
                    placeholder="用户名（留空 = 全场可见）">
                <span class="gift-hint">💡 留空表示所有人；购买者必定可见</span>
                <label class="gift-label">说一句话（公屏发送）</label>
                <input id="gift-message" class="gift-input" type="text" maxlength="50" placeholder="可不填，百字以内">
                <div id="gift-err"></div>
                <div class="rename-btn-row" style="margin-top:8px;">
                    <button data-shop-gift-confirm
                        style="flex:1;background:#336699;color:#fff;border:none;border-radius:4px;padding:7px;cursor:pointer;font-size:12px;font-weight:bold;">确认赠出</button>
                    <button data-shop-gift-cancel
                        style="flex:1;background:#eee;color:#555;border:1px solid #ccc;border-radius:4px;padding:7px;cursor:pointer;font-size:12px;">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    /**
     * 商店弹窗逻辑
     * 工具栏点击「商店」按钮触发，全屏模态展示
     */
    (function() {
        let shopLoaded = false;

        /** 打开商店弹窗 */
        window.openShopModal = function() {
            document.getElementById('shop-modal').style.display = 'flex';
            if (!shopLoaded) {
                shopLoaded = true;
                fetchShopData();
            }
        };

        /** 关闭商店弹窗 */
        window.closeShopModal = function() {
            document.getElementById('shop-modal').style.display = 'none';
        };

        // 点击遮罩层关闭弹窗
        document.getElementById('shop-modal').addEventListener('click', function(e) {
            if (e.target === this) closeShopModal();
        });

        /** 拉取商品数据 */
        function fetchShopData() {
            fetch('{{ route('shop.items') }}', {
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': _csrf()
                    }
                })
                .then(r => r.json())
                .then(data => renderShop(data))
                .catch(() => showShopToast('⚠ 加载失败，请重试', false));
        }

        /** 渲染商品列表（2列网格） */
        function renderShop(data) {
            // 更新余额
            document.getElementById('shop-jjb').textContent = Number(data.user_jjb).toLocaleString();

            // 周卡状态
            const badge = document.getElementById('shop-week-badge');
            if (data.active_week_effect) {
                const icons = {
                    fireworks: '🎆',
                    rain: '🌧',
                    lightning: '⚡',
                    snow: '❄️',
                    sakura: '🌸',
                    meteors: '🌠',
                    'gold-rain': '🪙',
                    hearts: '💖',
                    confetti: '🎊',
                    fireflies: '✨'
                };
                badge.textContent = (icons[data.active_week_effect] ?? '') + ' 周卡生效中';
                badge.style.display = 'inline-block';
            }

            const ringCounts = data.ring_counts || {};

            const groups = [{
                    label: '⚡ 单次特效卡',
                    desc: '立即播放一次',
                    type: 'instant'
                },
                {
                    label: '📅 周卡  7天登录自动播放',
                    desc: '同时只能激活一种，购新旧失效不退款',
                    type: 'duration'
                },
                {
                    label: '💍 求婚戒指',
                    desc: '存入背包，求婚时消耗（被拒则遗失）',
                    type: 'ring'
                },
                {
                    label: '🎣 自动钓鱼卡',
                    desc: '激活后自动收篼，无需手动点击浮漂',
                    type: 'auto_fishing'
                },
                {
                    label: '🎭 道具',
                    desc: '',
                    type: 'tools'
                },
            ];

            const list = document.getElementById('shop-items-list');
            list.innerHTML = '';

            groups.forEach(g => {
                const items = data.items.filter(i => g.type === 'tools' ? ['one_time', 'sign_repair'].includes(i.type) : i.type === g.type);
                if (!items.length) return;

                // 分组标题（独占一整行）
                const header = document.createElement('div');
                header.className = 'shop-group-header';

                // 分组标题徽章：
                // - auto_fishing：显示剩余时间（紫色）
                // - duration：显示当前已激活的周卡名称（绿色）
                let groupSuffix = '';
                if (g.type === 'auto_fishing' && (data.auto_fishing_minutes_left || 0) > 0) {
                    const left = data.auto_fishing_minutes_left;
                    const leftStr = left >= 60 ? Math.floor(left / 60) + ' 小时' : left + ' 分钟';
                    groupSuffix =
                        ` <span style="display:inline-block;margin-left:8px;padding:1px 8px;background:#7c3aed;color:#fff;border-radius:10px;font-size:10px;font-weight:bold;vertical-align:middle;">⏳ 剩余 ${leftStr}</span>`;
                } else if (g.type === 'duration' && data.active_week_effect) {
                    // active_week_effect 是 effectKey 字符串，从 items 列表反查对应商品名称
                    const effKey = data.active_week_effect;
                    const effItem = data.items.find(i => i.type === 'duration' && i.slug.includes(effKey));
                    const effName = effItem ? effItem.name : effKey;
                    groupSuffix =
                        ` <span style="display:inline-block;margin-left:8px;padding:1px 8px;background:#16a34a;color:#fff;border-radius:10px;font-size:10px;font-weight:bold;vertical-align:middle;">✅ 已激活：${effName}</span>`;
                } else if (g.type === 'tools' && (data.sign_repair_card_count || 0) > 0) {
                    groupSuffix =
                        ` <span style="display:inline-block;margin-left:8px;padding:1px 8px;background:#0f766e;color:#fff;border-radius:10px;font-size:10px;font-weight:bold;vertical-align:middle;">🎫 可用 ${data.sign_repair_card_count} 张</span>`;
                }
                header.innerHTML = `${g.label}${groupSuffix}${g.desc ? ` <span>${g.desc}</span>` : ''}`;
                list.appendChild(header);

                items.forEach(item => {
                    const isRename = item.slug === 'rename_card';
                    const canUse = isRename && data.has_rename_card;
                    const isRing = item.type === 'ring';
                    const ownedQty = isRing ? (ringCounts[item.id] || 0) : 0;

                    const card = document.createElement('div');
                    card.className = 'shop-card';

                    // 顶部：图标 + 名称（戒指加持有数徽章，其余正常显示）
                    const isAutoFishing = item.type === 'auto_fishing';

                    let iconHtml;
                    if (isRing && ownedQty > 0) {
                        iconHtml = `<span style="position:relative;display:inline-block;">
                                <span class="shop-card-icon">${item.icon}</span>
                                <span style="position:absolute;top:-4px;right:-6px;background:#f43f5e;color:#fff;font-size:9px;font-weight:800;min-width:15px;height:15px;border-radius:8px;text-align:center;line-height:15px;padding:0 2px;">${ownedQty}</span>
                           </span>`;
                    } else {
                        iconHtml = `<span class="shop-card-icon">${item.icon}</span>`;
                    }

                    const durationLabel = isAutoFishing && item.duration_minutes > 0 ?
                        `<div style="font-size:9px;margin-top:3px;color:#7c3aed;">⏱ 有效期 ${item.duration_minutes >= 60 ? Math.floor(item.duration_minutes / 60) + ' 小时' : item.duration_minutes + ' 分钟'}</div>` :
                        '';

                    card.innerHTML = `
                    <div class="shop-card-top">
                        ${iconHtml}
                        <span class="shop-card-name">${item.name}</span>
                    </div>
                    <div class="shop-card-desc">${item.description ?? ''}</div>
                    ${isRing && (item.intimacy_bonus > 0 || item.charm_bonus > 0) ? `
                    <div style="font-size:9px;margin-top:3px;display:flex;gap:8px;">
                        ${item.intimacy_bonus > 0 ? `<span style="color:#f43f5e;">💞 亲密 +${item.intimacy_bonus}</span>` : ''}
                        ${item.charm_bonus > 0 ? `<span style="color:#a855f7;">✨ 魅力 +${item.charm_bonus}</span>` : ''}
                    </div>` : ''}
                    ${durationLabel}
                `;

                    // 按钮
                    const btn = document.createElement('button');
                    if (canUse) {
                        btn.className = 'shop-btn shop-btn-use';
                        btn.textContent = '✦ 使用改名卡';
                        btn.onclick = openRenameModal;
                    } else if (item.type === 'instant') {
                        // 单次卡：打开送礼弹框
                        btn.className = 'shop-btn';
                        btn.innerHTML = `💰 ${Number(item.price).toLocaleString()}`;
                        btn.onclick = () => openGiftDialog(item);
                    } else {
                        // 周卡、道具、戒指、自动钓鱼卡：弹确认窗口再购买
                        btn.className = 'shop-btn';
                        btn.innerHTML = `💰 ${Number(item.price).toLocaleString()}`;
                        btn.onclick = async () => {
                            let quantity = 1;
                            if (item.type === 'sign_repair') {
                                quantity = await window.promptSignRepairQuantity?.(item);
                                if (quantity === null || quantity === undefined) return;
                            }
                            const confirmMsg =
                                `确认花费 💰 ${Number(item.price * quantity).toLocaleString()} 金币购买\n【${item.name}】${quantity > 1 ? ' × ' + quantity : ''} 吗？`;
                            const ok = await window.chatDialog.confirm(confirmMsg, '确认购买');
                            if (ok) buyItem(item.id, item.name, item.price, 'all', '', quantity);
                        };
                    }
                    card.appendChild(btn);
                    list.appendChild(card);
                });
            });
        }

        /**
         * 打开送礼弹框（仅单次特效卡）
         * 让用户填写：送给谁 + 说一句话
         */
        let _giftItem = null;
        window.openGiftDialog = function(item) {
            _giftItem = item;
            // 重置内容
            document.getElementById('gift-recipient').value = '';
            document.getElementById('gift-message').value = '';
            document.getElementById('gift-err').textContent = '';
            document.getElementById('gift-item-name').textContent =
                `${item.icon} ${item.name}（💰 ${Number(item.price).toLocaleString()}）`;
            document.getElementById('gift-dialog').style.display = 'flex';
        };

        window.closeGiftDialog = function() {
            document.getElementById('gift-dialog').style.display = 'none';
            _giftItem = null;
        };

        /** 送礼确认，提交购买 */
        window.confirmGift = function() {
            if (!_giftItem) return;
            const recipient = document.getElementById('gift-recipient').value.trim();
            const message = document.getElementById('gift-message').value.trim();
            document.getElementById('gift-err').textContent = '';
            // 先将商品数据保存到局部变量，再关闭弹框（closeGiftDialog 会把 _giftItem 设为 null）
            const item = _giftItem;
            closeGiftDialog();
            buyItem(item.id, item.name, item.price, recipient, message);
        };

        /** 购买商品（最终执行） */
        window.buyItem = function(itemId, name, price, recipient, message, quantity = 1) {
            const roomId = window.chatContext?.roomId ?? 0;
            fetch('{{ route('shop.buy') }}', {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': _csrf()
                    },
                    body: JSON.stringify({
                        item_id: itemId,
                        recipient: recipient || 'all',
                        message: message || '',
                        quantity: quantity || 1,
                        room_id: roomId,
                    }),
                })
                .then(r => r.json())
                .then(data => {
                    if (data.status === 'success') {
                        // 更新金币
                        if (data.jjb !== undefined)
                            document.getElementById('shop-jjb').textContent = Number(data.jjb)
                            .toLocaleString();
                        // 购买成功提示
                        showShopToast(`✅ ${name} 购买成功！`, true);
                        // 播放本地特效（购买者自己必须也能看到）
                        if (data.play_effect && window.EffectManager) {
                            window.EffectManager.play(data.play_effect);
                        }
                        // 延迟刷新商品数据（保持商店开着让用户看到状态更新）
                        shopLoaded = false;
                        setTimeout(() => {
                            fetchShopData();
                            shopLoaded = true;
                        }, 1000);
                    } else {
                        showShopToast(data.message, false);
                    }
                })
                .catch(() => showShopToast('⚠ 网络异常，请重试', false));
        };

        /** Toast 通知 */
        window.showShopToast = function(msg, ok) {
            const el = document.getElementById('shop-toast');
            el.textContent = msg;
            el.style.display = 'block';
            el.style.background = ok ? '#064e3b' : '#7f1d1d';
            el.style.color = ok ? '#6ee7b7' : '#fca5a5';
            clearTimeout(el._t);
            el._t = setTimeout(() => {
                el.style.display = 'none';
            }, 3500);
        };

        /** 打开改名框 */
        window.openRenameModal = function() {
            const m = document.getElementById('shop-rename-overlay');
            m.style.display = 'flex';
            document.getElementById('rename-input').focus();
            document.getElementById('rename-err').textContent = '';
        };

        /** 关闭改名框 */
        window.closeRenameModal = function() {
            document.getElementById('shop-rename-overlay').style.display = 'none';
        };

        /** 提交改名 */
        window.submitRename = function() {
            const newName = document.getElementById('rename-input').value.trim();
            if (!newName) {
                document.getElementById('rename-err').textContent = '请输入新昵称';
                return;
            }
            fetch('{{ route('shop.rename') }}', {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': _csrf()
                    },
                    body: JSON.stringify({
                        new_name: newName
                    }),
                })
                .then(r => r.json())
                .then(data => {
                    if (data.status === 'success') {
                        closeRenameModal();
                        showShopToast(data.message, true);
                        shopLoaded = false;
                        setTimeout(() => window.location.reload(), 2000);
                    } else {
                        document.getElementById('rename-err').textContent = data.message;
                    }
                })
                .catch(() => {
                    document.getElementById('rename-err').textContent = '网络异常，请重试';
                });
        };

        function _csrf() {
            return document.querySelector('meta[name="csrf-token"]')?.content ?? '';
        }
    })();
</script>

{{-- ═══════════ 会员中心弹窗 ═══════════ --}}
<style>
    #vip-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9999; justify-content:center; align-items:center; }
    #vip-modal-inner { width:760px; max-width:96vw; max-height:90vh; background:#fff; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,.4); font-family:'Microsoft YaHei',SimSun,sans-serif; }
    #vip-modal-header { background:linear-gradient(135deg,#1e293b,#334155); color:#fff; padding:12px 18px; display:flex; align-items:center; flex-shrink:0; }
    
    .vip-tab-btn { background:rgba(255,255,255,.1); border:none; color:#cbd5e1; border-radius:8px; padding:6px 16px; font-size:13px; cursor:pointer; font-weight:bold; transition:all .2s; }
    .vip-tab-btn.active { background:#f59e0b; color:#fff; box-shadow:0 2px 4px rgba(0,0,0,.1); }

    .vip-view-pane { display:none; flex-direction:column; flex:1; overflow-y:auto; background:#f8fafc; padding:20px; }
    .vip-view-pane.active { display:flex; }

    /* 会员卡片 */
    .vip-level-card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:10px; transition:all .2s; position:relative; overflow:hidden; }
    .vip-level-card.current { border-color:#f59e0b; background:#fffdf5; box-shadow:0 0 0 1px #f59e0b; }
    .vip-level-badge { position:absolute; top:10px; right:10px; background:#f59e0b; color:#fff; font-size:10px; font-weight:bold; padding:2px 8px; border-radius:10px; }

    /* 设置表单 */
    .vip-setting-group { margin-bottom:15px; }
    .vip-setting-label { display:block; font-size:13px; font-weight:bold; color:#475569; margin-bottom:6px; }
    .vip-setting-input { width:100%; border:1px solid #cbd5e1; border-radius:8px; padding:10px 12px; font-size:13px; outline:none; transition:border-color .2s; background:#fff; }
    .vip-setting-input:focus { border-color:#f59e0b; }
    .vip-setting-textarea { min-height:80px; resize:vertical; }

    .vip-btn-save { background:#1e293b; color:#fff; border:none; border-radius:8px; padding:10px 20px; font-size:13px; font-weight:bold; cursor:pointer; transition:opacity .2s; }
    .vip-btn-save:hover { opacity:.9; }

    /* 会员特权图标 */
    .vip-feature-item { display:flex; align-items:center; gap:8px; font-size:12px; color:#64748b; }
    .vip-feature-icon { color:#10b981; font-weight:bold; }
    .vip-modal-close { cursor:pointer; font-size:24px; opacity:.7; transition:opacity .15s; }
    .vip-modal-close:hover { opacity:1; }
</style>

<div id="vip-modal">
    <div id="vip-modal-inner">
        <div id="vip-modal-header">
            <div style="font-size:16px; font-weight:bold; margin-right:24px;">👑 会员中心</div>
            <div style="display:flex; gap:10px; flex:1;">
                <button id="vip-tabbtn-center" class="vip-tab-btn active" data-vip-tab="center">会员中心</button>
                <button id="vip-tabbtn-settings" class="vip-tab-btn" data-vip-tab="settings" style="display:none;">会员相关设置</button>
                <button id="vip-tabbtn-logs" class="vip-tab-btn" data-vip-tab="logs">购买记录</button>
            </div>
            <span class="vip-modal-close" data-vip-modal-close>&times;</span>
        </div>

        {{-- 会员中心面板 --}}
        <div id="vip-view-center" class="vip-view-pane active">
            <div id="vip-status-bar" style="background:#fff; border:1px solid #fef3c7; border-radius:12px; padding:16px; margin-bottom:20px; display:flex; justify-content:space-between; align-items:center;">
                <div>
                    <div style="font-size:12px; font-weight:bold; color:#b45309;">我的会员状态</div>
                    <div id="vip-current-name" style="font-size:18px; font-weight:900; color:#1e293b; margin-top:4px;">加载中...</div>
                    <div id="vip-expire-time" style="font-size:12px; color:#64748b; margin-top:4px;"></div>
                </div>
                <div style="text-align:right;">
                    <div style="font-size:12px; font-weight:bold; color:#059669;">累计已支付</div>
                    <div id="vip-total-amount" style="font-size:18px; font-weight:900; color:#064e3b; margin-top:4px;">¥0.00</div>
                </div>
            </div>

            <div style="font-size:14px; font-weight:bold; color:#1e293b; margin-bottom:12px;">会员等级列表</div>
            <div id="vip-levels-grid" style="display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:15px;">
                <!-- 动态渲染会员等级 -->
            </div>
        </div>

        {{-- 会员相关设置面板 --}}
        <div id="vip-view-settings" class="vip-view-pane">
            <div style="display:grid; grid-template-columns:1.2fr 0.8fr; gap:20px;">
                <div>
                    <div style="background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:18px; margin-bottom:15px;">
                        <div style="display:flex; align-items:center; gap:10px; margin-bottom:15px;">
                            <div id="vip-theme-icon" style="width:40px; height:40px; background:#1e293b; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff;">✨</div>
                            <div>
                                <div style="font-size:12px; color:#64748b;">当前主题预览</div>
                                <div id="vip-theme-name" style="font-size:15px; font-weight:bold; color:#1e293b;">普通用户</div>
                            </div>
                        </div>
                        <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
                            <div style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:12px;">
                                <div style="font-size:10px; font-weight:bold; color:#94a3b8; text-transform:uppercase;">入场特效</div>
                                <div id="vip-join-effect" style="font-size:14px; font-weight:bold; color:#1e293b; margin-top:4px;">无</div>
                                <div id="vip-join-banner" style="font-size:11px; color:#64748b; margin-top:4px;"></div>
                            </div>
                            <div style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:12px;">
                                <div style="font-size:10px; font-weight:bold; color:#94a3b8; text-transform:uppercase;">离场特效</div>
                                <div id="vip-leave-effect" style="font-size:14px; font-weight:bold; color:#1e293b; margin-top:4px;">无</div>
                                <div id="vip-leave-banner" style="font-size:11px; color:#64748b; margin-top:4px;"></div>
                            </div>
                        </div>
                    </div>

                    <div style="background:#fffdf5; border:1px solid #fef3c7; border-radius:12px; padding:18px;">
                        <div style="font-size:13px; font-weight:bold; color:#b45309; margin-bottom:12px;">等级默认语句</div>
                        <div style="display:grid; gap:10px;">
                            <div style="background:#fff; border:1px solid #fef3c7; border-radius:10px; padding:12px;">
                                <div style="font-size:11px; font-weight:bold; color:#f59e0b;">默认欢迎语</div>
                                <div id="vip-default-join" style="font-size:12px; color:#475569; margin-top:6px; line-height:1.6;"></div>
                            </div>
                            <div style="background:#fff; border:1px solid #fef3c7; border-radius:10px; padding:12px;">
                                <div style="font-size:11px; font-weight:bold; color:#f59e0b;">默认离开语</div>
                                <div id="vip-default-leave" style="font-size:12px; color:#475569; margin-top:6px; line-height:1.6;"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div style="background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:18px;">
                    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px;">
                        <div style="font-size:15px; font-weight:bold; color:#1e293b;">我的个性化设置</div>
                        <span id="vip-customize-badge" style="font-size:10px; font-weight:bold; padding:2px 8px; border-radius:10px;"></span>
                    </div>

                    <div id="vip-customize-form" style="display:none;">
                        <div class="vip-setting-group">
                            <label class="vip-setting-label">入场特效选择</label>
                            <select id="vip-custom-join-effect" class="vip-setting-input">
                                <!-- 动态渲染 -->
                            </select>
                        </div>
                        <div class="vip-setting-group">
                            <label class="vip-setting-label">离场特效选择</label>
                            <select id="vip-custom-leave-effect" class="vip-setting-input">
                                <!-- 动态渲染 -->
                            </select>
                        </div>
                        <div class="vip-setting-group">
                            <label class="vip-setting-label">我的欢迎语</label>
                            <textarea id="vip-custom-join" class="vip-setting-input vip-setting-textarea" placeholder="例：{username} 闪耀登场..."></textarea>
                            <p style="font-size:10px; color:#94a3b8; margin-top:6px;">支持使用 {username} 占位符</p>
                        </div>
                        <div class="vip-setting-group">
                            <label class="vip-setting-label">我的离开语</label>
                            <textarea id="vip-custom-leave" class="vip-setting-input vip-setting-textarea" placeholder="例：{username} 优雅离场..."></textarea>
                        </div>
                        <button data-vip-save-presence class="vip-btn-save" style="width:100%;">保存我的专属设置</button>
                    </div>

                    <div id="vip-customize-notice" style="display:none; padding:15px; background:#f8fafc; border:1px dashed #cbd5e1; border-radius:10px; font-size:12px; color:#64748b; line-height:1.8;">
                        <!-- 动态提示 -->
                    </div>
                </div>
            </div>
        </div>

        {{-- 购买记录面板 --}}
        <div id="vip-view-logs" class="vip-view-pane">
            <div style="overflow-x:auto;">
                <table style="width:100%; border-collapse:collapse; font-size:12px;">
                    <thead>
                        <tr style="background:#f1f5f9; color:#475569; text-align:left;">
                            <th style="padding:10px; border-bottom:1px solid #e2e8f0;">订单号</th>
                            <th style="padding:10px; border-bottom:1px solid #e2e8f0;">等级</th>
                            <th style="padding:10px; border-bottom:1px solid #e2e8f0;">金额</th>
                            <th style="padding:10px; border-bottom:1px solid #e2e8f0;">状态</th>
                            <th style="padding:10px; border-bottom:1px solid #e2e8f0;">开通时间</th>
                        </tr>
                    </thead>
                    <tbody id="vip-logs-body">
                        <!-- 动态渲染购买记录 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    (function() {
        const CSRF = () => document.querySelector('meta[name="csrf-token"]')?.content ?? '';
        let vipData = null;

        window.openVipModal = function() {
            document.getElementById('vip-modal').style.display = 'flex';
            fetchVipData();
        };

        window.closeVipModal = function() {
            document.getElementById('vip-modal').style.display = 'none';
        };

        window.switchVipTab = function(tabName) {
            document.querySelectorAll('.vip-tab-btn').forEach(btn => btn.classList.remove('active'));
            document.querySelectorAll('.vip-view-pane').forEach(pane => pane.classList.remove('active'));

            document.getElementById('vip-tabbtn-' + tabName).classList.add('active');
            document.getElementById('vip-view-' + tabName).classList.add('active');
        };

        async function fetchVipData() {
            try {
                const res = await fetch('{{ route('vip.center') }}', {
                    headers: { 'Accept': 'application/json' }
                });
                const json = await res.json();
                if (json.status === 'success') {
                    vipData = json.data;
                    renderVipModal();
                }
            } catch (e) {
                console.error('Failed to fetch VIP data', e);
            }
        }

        function renderVipModal() {
            const d = vipData;
            
            // 状态栏
            document.getElementById('vip-current-name').textContent = d.user.is_vip ? (d.user.vip_name || '尊贵会员') : '普通用户';
            document.getElementById('vip-current-name').style.color = d.user.vip_level?.color || '#1e293b';
            document.getElementById('vip-expire-time').textContent = d.user.is_vip ? `到期时间：${d.user.hy_time}` : '开通会员享特权';
            document.getElementById('vip-total-amount').textContent = `¥${Number(d.totalAmount).toFixed(2)}`;

            // 会员等级
            const grid = document.getElementById('vip-levels-grid');
            grid.innerHTML = d.vipLevels.map(v => {
                const isCurrent = v.is_current;
                const isHigher = v.is_higher;
                const isLower = v.is_lower;

                let btnText = '立即购买';
                let btnColor = '#1e293b';
                let btnTextColor = '#fff';
                let priceToDisplay = v.price;
                let isDisabled = !d.vipPaymentEnabled;
                let showUpgradeInfo = false;

                if (isCurrent) {
                    btnText = '立即续费';
                    btnColor = '#f59e0b';
                    btnTextColor = '#fff';
                } else if (isHigher && d.user.is_vip) {
                    btnText = '补差价升级';
                    btnColor = '#4f46e5';
                    btnTextColor = '#fff';
                    priceToDisplay = v.upgrade_price;
                    showUpgradeInfo = true;
                } else if (isLower) {
                    btnText = '无法降级';
                    btnColor = '#f1f5f9';
                    btnTextColor = '#94a3b8';
                    isDisabled = true;
                }

                return `
                    <div class="vip-level-card ${isCurrent ? 'current' : ''}">
                        ${isCurrent ? '<span class="vip-level-badge">当前档位</span>' : ''}
                        <div style="display:flex; align-items:center; gap:10px;">
                            <span style="font-size:24px;">${v.icon}</span>
                            <span style="font-size:16px; font-weight:bold; color:${v.color}">${v.name}</span>
                        </div>
                        <div style="font-size:11px; color:#64748b; line-height:1.5; min-height:33px;">${v.description || ''}</div>
                        <div style="margin-top:5px; space-y:6px;">
                            <div class="vip-feature-item"><span class="vip-feature-icon">✓</span> 经验获取 <b>${v.exp_multiplier}x</b></div>
                            <div class="vip-feature-item"><span class="vip-feature-icon">✓</span> 金币获取 <b>${v.jjb_multiplier}x</b></div>
                            <div class="vip-feature-item"><span class="vip-feature-icon">✓</span> 专属入场特效 & 横幅</div>
                        </div>
                        <div style="margin-top:auto; padding-top:10px;">
                            <div style="font-size:18px; font-weight:900; color:#e11d48; margin-bottom:5px;">
                                ¥${Number(priceToDisplay).toFixed(2)} 
                                <span style="font-size:11px; font-weight:normal; color:#94a3b8;">/ ${v.duration_days}天</span>
                            </div>
                            ${showUpgradeInfo ? `<div style="font-size:10px; color:#4f46e5; font-weight:bold; margin-bottom:8px;">已省 ¥${(v.price - v.upgrade_price).toFixed(2)}</div>` : ''}
                            ${!d.vipPaymentEnabled || isDisabled
                                ? `<button ${isDisabled ? 'disabled' : 'disabled'} 
                                    style="width:100%; border:none; border-radius:8px; padding:10px; font-size:13px; font-weight:bold; cursor:not-allowed; transition:all .2s; 
                                    background:${btnColor}; color:${btnTextColor};">
                                    ${!d.vipPaymentEnabled && !isLower ? '支付暂未开启' : btnText}
                                </button>`
                                : `<div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
                                    <button data-vip-buy-level="${v.id}" data-vip-buy-provider="alipay"
                                        style="border:none; border-radius:8px; padding:10px; font-size:13px; font-weight:bold; cursor:pointer; transition:all .2s; background:${btnColor}; color:${btnTextColor};">
                                        支付宝
                                    </button>
                                    <button data-vip-buy-level="${v.id}" data-vip-buy-provider="wechat"
                                        style="border:none; border-radius:8px; padding:10px; font-size:13px; font-weight:bold; cursor:pointer; transition:all .2s; background:#16a34a; color:#fff;">
                                        微信
                                    </button>
                                </div>
                                <div style="font-size:10px; color:#64748b; margin-top:8px; text-align:center;">${btnText}后将跳转到对应支付页面</div>`
                            }
                        </div>
                    </div>
                `;
            }).join('');

            // 会员设置 Tab 显隐
            const settingsBtn = document.getElementById('vip-tabbtn-settings');
            if (d.user.is_vip) {
                settingsBtn.style.display = 'block';
                renderVipSettings();
            } else {
                settingsBtn.style.display = 'none';
            }

            // 购买记录
            const logsBody = document.getElementById('vip-logs-body');
            if (d.paymentLogs.length === 0) {
                logsBody.innerHTML = '<tr><td colspan="5" style="padding:40px; text-align:center; color:#94a3b8;">暂无记录</td></tr>';
            } else {
                logsBody.innerHTML = d.paymentLogs.map(log => {
                    const statusMap = {
                        'created': { text: '待创建', class: 'background:#f1f5f9;color:#475569' },
                        'pending': { text: '待支付', class: 'background:#fef3c7;color:#b45309' },
                        'paid': { text: '已支付', class: 'background:#dcfce7;color:#166534' },
                        'closed': { text: '已关闭', class: 'background:#f1f5f9;color:#64748b' },
                        'failed': { text: '失败', class: 'background:#fee2e2;color:#991b1b' },
                    };
                    const s = statusMap[log.status] || { text: log.status, class: 'background:#f1f5f9' };
                    return `
                        <tr style="border-bottom:1px solid #f1f5f9;">
                            <td style="padding:10px; font-family:monospace; color:#64748b;">${log.order_no}</td>
                            <td style="padding:10px; font-weight:bold;">${log.vip_name}</td>
                            <td style="padding:10px; font-weight:bold; color:#e11d48;">¥${Number(log.amount).toFixed(2)}</td>
                            <td style="padding:10px;"><span style="display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:bold; ${s.class}">${s.text}</span></td>
                            <td style="padding:10px; color:#64748b;">${log.opened_vip_at ? log.opened_vip_at.substring(0, 16).replace('T', ' ') : '—'}</td>
                        </tr>
                    `;
                }).join('');
            }
        }

        function renderVipSettings() {
            const d = vipData;
            const u = d.user;
            const vl = u.vip_level;

            if (!vl) return;

            document.getElementById('vip-theme-icon').textContent = vl.icon || '✨';
            document.getElementById('vip-theme-name').textContent = vl.name;
            document.getElementById('vip-join-effect').textContent = d.effectOptions[u.custom_join_effect || vl.join_effect] || '无';
            document.getElementById('vip-join-banner').textContent = `风格：${d.bannerStyleOptions[vl.join_banner] || '默认'}`;
            document.getElementById('vip-leave-effect').textContent = d.effectOptions[u.custom_leave_effect || vl.leave_effect] || '无';
            document.getElementById('vip-leave-banner').textContent = `风格：${d.bannerStyleOptions[vl.leave_banner] || '默认'}`;

            document.getElementById('vip-default-join').textContent = vl.join_templates?.[0] || '当前档位尚未配置默认欢迎语。';
            document.getElementById('vip-default-leave').textContent = vl.leave_templates?.[0] || '当前档位尚未配置默认离开语。';

            const badge = document.getElementById('vip-customize-badge');
            const form = document.getElementById('vip-customize-form');
            const notice = document.getElementById('vip-customize-notice');

            if (u.can_customize) {
                badge.textContent = '已开启';
                badge.style.background = '#dcfce7';
                badge.style.color = '#166534';
                form.style.display = 'block';
                notice.style.display = 'none';

                // 填充特效选项
                const joinSelect = document.getElementById('vip-custom-join-effect');
                const leaveSelect = document.getElementById('vip-custom-leave-effect');
                
                let optionsHtml = '';
                for (const [key, label] of Object.entries(d.effectOptions)) {
                    optionsHtml += `<option value="${key}">${label}</option>`;
                }
                joinSelect.innerHTML = optionsHtml;
                leaveSelect.innerHTML = optionsHtml;

                // 设置当前值
                joinSelect.value = u.custom_join_effect || vl.join_effect || 'none';
                leaveSelect.value = u.custom_leave_effect || vl.leave_effect || 'none';

                document.getElementById('vip-custom-join').value = u.custom_join_message || '';
                document.getElementById('vip-custom-leave').value = u.custom_leave_message || '';
            } else {
                badge.textContent = '未开放';
                badge.style.background = '#f1f5f9';
                badge.style.color = '#64748b';
                form.style.display = 'none';
                notice.style.display = 'block';
                notice.textContent = u.is_vip 
                    ? '当前会员档位暂未开放个人自定义功能，不过你仍会自动使用本等级配置的专属欢迎语、离开语和华丽特效。'
                    : '开通会员后，这里会解锁对应等级的专属进退场主题；若等级允许，还能设置你自己的欢迎语和离开语。';
            }
        }

        window.buyVip = function(levelId, provider = 'alipay') {
            // 这里我们模拟提交表单，因为支付逻辑通常需要页面跳转
            // 修改为在新窗口打开支付，避免聊天室页面丢失
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ route('vip.payment.store') }}';
            form.target = '_blank'; // 新窗口打开支付
            
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = CSRF();
            form.appendChild(csrfInput);

            const idInput = document.createElement('input');
            idInput.type = 'hidden';
            idInput.name = 'vip_level_id';
            idInput.value = levelId;
            form.appendChild(idInput);

            const providerInput = document.createElement('input');
            providerInput.type = 'hidden';
            providerInput.name = 'provider';
            providerInput.value = provider;
            form.appendChild(providerInput);

            document.body.appendChild(form);
            form.submit();
            document.body.removeChild(form);

            // 提交后关闭弹窗并提示用户
            closeVipModal();
            if (window.chatDialog) {
                const providerText = provider === 'wechat' ? '微信支付二维码页' : '支付宝支付页';
                window.chatDialog.alert(`正在为您打开${providerText}，请在新页面完成支付。`, '支付提示', '#3b82f6');
            }
        };

        window.saveVipPresenceSettings = async function() {
            const joinMsg = document.getElementById('vip-custom-join').value;
            const leaveMsg = document.getElementById('vip-custom-leave').value;
            const joinEffect = document.getElementById('vip-custom-join-effect').value;
            const leaveEffect = document.getElementById('vip-custom-leave-effect').value;

            try {
                const res = await fetch('{{ route('vip.center.presence.update') }}', {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': CSRF()
                    },
                    body: JSON.stringify({
                        custom_join_message: joinMsg,
                        custom_leave_message: leaveMsg,
                        custom_join_effect: joinEffect,
                        custom_leave_effect: leaveEffect
                    })
                });
                const json = await res.json();
                if (json.status === 'success') {
                    window.chatDialog?.alert(json.message, '提示', '#10b981');
                    fetchVipData();
                } else {
                    window.chatDialog?.alert(json.message || '保存失败', '提示', '#f59e0b');
                }
            } catch (e) {
                window.chatDialog?.alert('网络异常，请重试', '错误', '#ef4444');
            }
        };

        document.getElementById('vip-modal').addEventListener('click', function(e) {
            if (e.target === this) closeVipModal();
        });
    })();
</script>

{{-- ═══════════ 婚姻状态弹窗 ═══════════ --}}
<style>
    /* 婚姻弹窗选项卡按钮 */
    .marriage-tab-btn {
        background: rgba(255, 255, 255, .15);
        border: none;
        color: #fce7f3;
        border-radius: 12px;
        padding: 3px 12px;
        font-size: 11px;
        cursor: pointer;
        font-weight: bold;
        transition: all .2s;
    }

    .marriage-tab-btn.active {
        background: #fff;
        color: #be185d;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    }

    /* 已婚列表项样式 */
    .married-list-item {
        background: #fff;
        border: 1px solid #fce7f3;
        border-radius: 8px;
        padding: 10px;
        margin-bottom: 8px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        transition: all .2s;
    }

    .married-list-item:hover {
        border-color: #f43f5e;
        box-shadow: 0 2px 8px rgba(190, 24, 93, .1);
    }

    .married-couple-info {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .married-user-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        width: 80px;
    }

    .married-user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 0 0 1px #fce7f3;
        object-fit: cover;
    }

    .married-user-name {
        font-size: 11px;
        font-weight: bold;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .married-heart {
        font-size: 20px;
        color: #f43f5e;
        animation: heartBeat 1.5s ease-in-out infinite;
    }

    @keyframes heartBeat {
        0% { transform: scale(1); }
        15% { transform: scale(1.2); }
        30% { transform: scale(1); }
        45% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }

    .married-meta-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 10px;
        color: #999;
        padding-top: 6px;
        border-top: 1px dashed #fce7f3;
    }

    .married-intimacy {
        color: #be185d;
        font-weight: bold;
    }
</style>

<div id="marriage-status-modal"
    style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.5);
           z-index:9999; justify-content:center; align-items:center;">
    <div
        style="background:#fff; border-radius:10px; width:380px; max-width:94vw;
                box-shadow:0 12px 40px rgba(0,0,0,.3); overflow:hidden;
                animation:gdSlideIn .18s ease; display:flex; flex-direction:column; max-height: 85vh;">

        {{-- 标题栏 --}}
        <div
            style="background:linear-gradient(135deg,#be185d,#f43f5e,#ec4899);
                    color:#fff; padding:10px 16px;
                    display:flex; align-items:center; justify-content:space-between;">
            <div style="display:flex; align-items:center; gap:12px;">
                <span style="font-size:14px; font-weight:bold;">💍 婚姻系统</span>
                <div style="display:flex; gap:6px;">
                    <button id="marriage-tabbtn-mine" class="marriage-tab-btn active" data-marriage-tab="mine">我的婚姻</button>
                    <button id="marriage-tabbtn-list" class="marriage-tab-btn" data-marriage-tab="list">已婚列表</button>
                </div>
            </div>
            <span data-marriage-modal-close
                style="cursor:pointer; font-size:18px; opacity:.8; line-height:1;">✕</span>
        </div>

        {{-- 我的婚姻 面板 --}}
        <div id="marriage-view-mine" style="display:flex; flex-direction:column; flex:1; overflow:hidden;">
            <div id="marriage-status-body" style="padding:16px; min-height:120px;">
                <div style="text-align:center; color:#aaa; padding:30px 0; font-size:12px;">加载中…</div>
            </div>
            <div id="marriage-status-footer" style="padding:0 16px 16px; display:flex; gap:8px;"></div>
        </div>

        {{-- 已婚列表 面板 --}}
        <div id="marriage-view-list" style="display:none; flex-direction:column; flex:1; overflow:hidden; background: #fffafb;">
            <div id="married-list-container" style="padding:12px; flex:1; overflow-y:auto;">
                <div style="text-align:center; color:#aaa; padding:30px 0; font-size:12px;">加载中…</div>
            </div>
            <div id="married-list-pagination" style="padding:10px 16px; border-top:1px solid #fce7f3; display:flex; justify-content:space-between; align-items:center; font-size:11px;">
                <button data-marriage-page-delta="-1" id="married-prev-btn" style="border:1px solid #fbcfe8; background:#fff; color:#be185d; padding:2px 8px; border-radius:4px; cursor:pointer;">上一页</button>
                <span id="married-page-info" style="color:#be185d; font-weight:bold;">1 / 1</span>
                <button data-marriage-page-delta="1" id="married-next-btn" style="border:1px solid #fbcfe8; background:#fff; color:#be185d; padding:2px 8px; border-radius:4px; cursor:pointer;">下一页</button>
            </div>
        </div>
    </div>
</div>

<script>
    /**
     * 婚姻状态弹窗——工具栏点击「婚姻」按钮触发。
     * 调用 /marriage/status 接口，展示当前用户婚姻状态（单身/求婚中/已婚）。
     */
    (function() {

        const CSRF = () => document.querySelector('meta[name="csrf-token"]')?.content ?? '';
        const $ = id => document.getElementById(id);
        
        window.marriedListPage = 1;

        /** 打开弹窗并拉取状态 */
        window.openMarriageStatusModal = function() {
            $('marriage-status-modal').style.display = 'flex';
            switchMarriageTab('mine');
        };

        /** 切换 Tab */
        window.switchMarriageTab = function(tabName) {
            $('marriage-tabbtn-mine').classList.toggle('active', tabName === 'mine');
            $('marriage-tabbtn-list').classList.toggle('active', tabName === 'list');
            $('marriage-view-mine').style.display = tabName === 'mine' ? 'flex' : 'none';
            $('marriage-view-list').style.display = tabName === 'list' ? 'flex' : 'none';

            if (tabName === 'mine') {
                fetchMyMarriageStatus();
            } else {
                fetchMarriedList(1);
            }
        };

        async function fetchMyMarriageStatus() {
            $('marriage-status-body').innerHTML =
                '<div style="text-align:center;color:#aaa;padding:30px 0;font-size:12px;">加载中…</div>';
            $('marriage-status-footer').innerHTML = '';

            try {
                const res = await fetch('/marriage/status', {
                    headers: { Accept: 'application/json' }
                });
                const data = await res.json();
                renderMarriageStatus(data);
            } catch (e) {
                $('marriage-status-body').innerHTML =
                    '<div style="text-align:center;color:#e55;padding:30px 0;font-size:12px;">❌ 加载失败，请稍后重试</div>';
            }
        }

        window.fetchMarriedList = async function(page) {
            if (page < 1) return;
            
            const container = $('married-list-container');
            container.innerHTML = '<div style="text-align:center;color:#aaa;padding:30px 0;font-size:12px;">加载中…</div>';
            
            try {
                const res = await fetch(`/marriage/list?page=${page}`, {
                    headers: { Accept: 'application/json' }
                });
                const json = await res.json();
                if (json.status === 'success') {
                    marriedListPage = json.pagination.current_page;
                    renderMarriedList(json.data, json.pagination);
                }
            } catch (e) {
                container.innerHTML = '<div style="text-align:center;color:#e55;padding:30px 0;font-size:12px;">❌ 加载失败</div>';
            }
        };

        function renderMarriedList(data, pagination) {
            const container = $('married-list-container');
            if (!data || data.length === 0) {
                container.innerHTML = '<div style="text-align:center;color:#aaa;padding:40px 0;font-size:12px;">💖 暂无婚姻记录，快去寻找你的另一半吧</div>';
                $('married-list-pagination').style.display = 'none';
                return;
            }

            $('married-list-pagination').style.display = 'flex';
            $('married-page-info').textContent = `${pagination.current_page} / ${pagination.last_page}`;
            $('married-prev-btn').disabled = pagination.current_page <= 1;
            $('married-prev-btn').style.opacity = pagination.current_page <= 1 ? 0.5 : 1;
            $('married-next-btn').disabled = pagination.current_page >= pagination.last_page;
            $('married-next-btn').style.opacity = pagination.current_page >= pagination.last_page ? 0.5 : 1;

            container.innerHTML = data.map(m => {
                const user = m.user;
                const partner = m.partner;
                const ring = m.ring_item;
                const date = m.married_at ? m.married_at.substring(0, 10) : '—';
                
                const userColor = (user && user.sex == 2) ? 'color:#e91e8c;' : '';
                const partnerColor = (partner && partner.sex == 2) ? 'color:#e91e8c;' : '';

                return `
                    <div class="married-list-item">
                        <div class="married-couple-info">
                            <div class="married-user-box" style="cursor:pointer;" data-marriage-user-card="${user.username}">
                                <img src="${user.headface_url || '/images/headface/1.gif'}" class="married-user-avatar" onerror="this.src='/images/headface/1.gif'">
                                <span class="married-user-name" style="${userColor}" title="${user.username}">${user.username}</span>
                            </div>
                            <div class="married-heart">💖</div>
                            <div class="married-user-box" style="cursor:pointer;" data-marriage-user-card="${partner.username}">
                                <img src="${partner.headface_url || '/images/headface/1.gif'}" class="married-user-avatar" onerror="this.src='/images/headface/1.gif'">
                                <span class="married-user-name" style="${partnerColor}" title="${partner.username}">${partner.username}</span>
                            </div>
                        </div>
                        <div class="married-meta-info">
                            <span>💍 ${ring ? ring.name : '无戒指'}</span>
                            <span>💞 <span class="married-intimacy">${Number(m.intimacy).toLocaleString()}</span></span>
                            <span>📅 ${date}</span>
                        </div>
                    </div>
                `;
            }).join('');
        }

        /** 关闭弹窗 */
        window.closeMarriageStatusModal = function() {
            $('marriage-status-modal').style.display = 'none';
        };

        // 点击遮罩关闭
        $('marriage-status-modal').addEventListener('click', function(e) {
            if (e.target === this) closeMarriageStatusModal();
        });

        /**
         * 根据接口返回数据渲染弹窗内容。
         *
         * @param {object} data  `/marriage/status` 响应 JSON
         */
        function renderMarriageStatus(data) {
            const body = $('marriage-status-body');
            const footer = $('marriage-status-footer');

            // ── 单身 ────────────────────────────────────
            if (!data.status || data.status === 'none' || !data.marriage) {
                body.innerHTML = `
                    <div style="text-align:center; padding:16px 0;">
                        <div style="font-size:40px; margin-bottom:10px;">🕊️</div>
                        <div style="font-size:14px; font-weight:bold; color:#555;">目前单身</div>
                        <div style="font-size:11px; color:#999; margin-top:6px; line-height:1.7;">
                            还没有婚姻记录。<br>可在用户名片上点击「求婚」发起求婚。
                        </div>
                    </div>`;
                footer.innerHTML = `
                    <button data-marriage-modal-close
                        style="flex:1; padding:9px; background:#f3f4f6; color:#555;
                               border:1px solid #d1d5db; border-radius:6px; font-size:13px; cursor:pointer;">
                        关闭
                    </button>`;
                return;
            }

            const m = data.marriage;
            const isMine = (m.user && m.user.username === window.__chatUser?.username) ||
                window.__chatUser?.id === m.user?.id ||
                window.__chatUser?.id === m.partner?.id;

            // 确定"另一方"信息（我可能是 user 也可能是 partner）
            const me = window.__chatUser;
            const other = (m.user?.id === me?.id) ? m.partner : m.user;
            const iAmUser = (m.user?.id === me?.id);

            // ── 求婚中 ──────────────────────────────────
            if (data.status === 'pending') {
                const iProposed = iAmUser; // user_id 是发起方
                const expireAt = m.expires_at ? new Date(m.expires_at).toLocaleString('zh-CN', {
                    hour12: false
                }) : '—';
                const ringHtml = m.ring ?
                    `<span style="font-size:13px;">${m.ring.icon ?? '💍'} ${m.ring.name}</span>` : '';

                body.innerHTML = `
                    <div style="text-align:center; padding:8px 0;">
                        <div style="font-size:36px; margin-bottom:8px;">💌</div>
                        <div style="font-size:14px; font-weight:bold; color:#be185d;">
                            ${iProposed ? '你向 ' + (other?.username ?? '—') + ' 发出了求婚' : (other?.username ?? '—') + ' 向你求婚啦！'}
                        </div>
                        ${ringHtml ? `<div style="margin:8px 0; font-size:12px; color:#666;">戒指：${ringHtml}</div>` : ''}
                        <div style="font-size:11px; color:#999; margin-top:6px;">
                            过期时间：${expireAt}
                        </div>
                    </div>`;

                if (!iProposed) {
                    // 被求婚方：可以接受 / 拒绝
                    footer.innerHTML = `
                        <button data-marriage-action="reject" data-marriage-id="${m.id}" data-marriage-close-after-action="1"
                            style="flex:1;padding:9px;background:#f3f4f6;color:#555;
                                   border:1px solid #d1d5db;border-radius:6px;font-size:13px;cursor:pointer;">
                            😢 婉拒
                        </button>
                        <button data-marriage-action="accept" data-marriage-id="${m.id}" data-marriage-close-after-action="1"
                            style="flex:1;padding:9px;background:linear-gradient(135deg,#be185d,#f43f5e);
                                   color:#fff;border:none;border-radius:6px;font-size:13px;
                                   font-weight:bold;cursor:pointer;">
                            💑 答应啦！
                        </button>`;
                } else {
                    footer.innerHTML = `
                        <button data-marriage-modal-close
                            style="flex:1;padding:9px;background:#f3f4f6;color:#555;
                                   border:1px solid #d1d5db;border-radius:6px;font-size:13px;cursor:pointer;">
                            关闭（等待对方回应）
                        </button>`;
                }
                return;
            }

            // ── 已婚 ────────────────────────────────────
            if (data.status === 'married') {
                const levelIcon = m.level_icon ?? '💑';
                const levelName = m.level_name ?? '新婚';
                const days = m.days ?? 0;
                const intimacy = m.intimacy ?? 0;
                const marriedAt = m.married_at ?? '—';
                const ringHtml = m.ring ? `${m.ring.icon ?? '💍'} ${m.ring.name}` : '无';

                body.innerHTML = `
                    <div style="text-align:center; margin-bottom:12px;">
                        <div style="font-size:36px; margin-bottom:6px;">${levelIcon}</div>
                        <div style="font-size:14px; font-weight:bold; color:#be185d;">
                            已与 <strong>${other?.username ?? '—'}</strong> 成婚 🎉
                        </div>
                        <div style="font-size:12px; color:#999; margin-top:4px;">婚姻等级：${levelName}</div>
                    </div>
                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:12px;">
                        <div style="background:#fdf2f8;border:1px solid #fbcfe8;border-radius:6px;padding:10px;text-align:center;">
                            <div style="color:#be185d;font-weight:bold;font-size:18px;">${days}</div>
                            <div style="color:#888;margin-top:2px;">携手天数</div>
                        </div>
                        <div style="background:#fdf4ff;border:1px solid #e9d5ff;border-radius:6px;padding:10px;text-align:center;">
                            <div style="color:#7c3aed;font-weight:bold;font-size:18px;">${Number(intimacy).toLocaleString()}</div>
                            <div style="color:#888;margin-top:2px;">亲密度</div>
                        </div>
                        <div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;padding:8px 10px;grid-column:1/-1;">
                            <span style="color:#666;">💍 戒指：</span><span style="color:#333;">${ringHtml}</span>
                            &nbsp;｜&nbsp;
                            <span style="color:#666;">📅 婚期：</span><span style="color:#333;">${marriedAt}</span>
                        </div>
                    </div>`;

                // 已婚底部：离婚入口（需要二次确认）
                footer.innerHTML = `
                    <button data-marriage-modal-close
                        style="flex:1;padding:9px;background:#f3f4f6;color:#555;
                               border:1px solid #d1d5db;border-radius:6px;font-size:13px;cursor:pointer;">
                        关闭
                    </button>
                    <button data-marriage-divorce="${m.id}"
                        style="flex:.8;padding:9px;border:1px solid #fca5a5;background:#fff;
                               color:#dc2626;border-radius:6px;font-size:12px;cursor:pointer;">
                        💔 申请离婚
                    </button>`;
                return;
            }

            // 其他状态（divorced 等）
            body.innerHTML =
                `<div style="text-align:center;color:#999;padding:30px 0;font-size:12px;">暂无有效婚姻记录</div>`;
            footer.innerHTML = `
                <button data-marriage-modal-close
                    style="flex:1;padding:9px;background:#f3f4f6;color:#555;
                           border:1px solid #d1d5db;border-radius:6px;font-size:13px;cursor:pointer;">关闭</button>`;
        }

        /**
         * 通用婚姻操作（接受 / 拒绝求婚）
         *
         * @param {string|number} marriageId  marriage 记录 ID
         * @param {string}        action      'accept' | 'reject'
         */
        window.marriageAction = async function(marriageId, action) {
            try {
                const res = await fetch(`/marriage/${marriageId}/${action}`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': CSRF(),
                        'Content-Type': 'application/json',
                        Accept: 'application/json',
                    },
                });
                const data = await res.json();
                if (data.ok) {
                    window.chatDialog?.alert(data.message || (action === 'accept' ? '已接受求婚！' : '已婉拒求婚'),
                        action === 'accept' ? '💑 恭喜！' : '提示', action === 'accept' ? '#be185d' :
                        '#6b7280');
                } else {
                    window.chatDialog?.alert(data.message || '操作失败', '提示', '#f59e0b');
                }
            } catch {
                window.chatDialog?.alert('网络异常，请稍后重试', '错误', '#ef4444');
            }
        };

        /**
         * 申请离婚（先弹确认框，再调接口）
         *
         * @param {string|number} marriageId  marriage 记录 ID
         */
        window.tryDivorce = async function(marriageId) {
            closeMarriageStatusModal();
            const confirmed = await window.chatDialog?.confirm(
                '申请协议离婚后，对方有权同意或拒绝（拒绝即转为强制离婚，双方均扣除魅力值）。\n\n确定要申请吗？',
                '💔 申请离婚',
                '#dc2626',
            );
            if (!confirmed) {
                return;
            }

            try {
                const res = await fetch(`/marriage/${marriageId}/divorce`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': CSRF(),
                        'Content-Type': 'application/json',
                        Accept: 'application/json',
                    },
                    body: JSON.stringify({
                        type: 'mutual'
                    }),
                });
                const data = await res.json();
                window.chatDialog?.alert(data.message || '申请已发送', '提示', data.ok ? '#10b981' : '#f59e0b');
            } catch {
                window.chatDialog?.alert('网络异常，请稍后重试', '错误', '#ef4444');
            }
        };

    })();
</script>

{{-- ═══════════ 银行弹窗 ═══════════ --}}
<style>
    /* 银行弹窗遮罩 */
    #bank-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9999; justify-content:center; align-items:center; }
    /* 弹窗主体 */
    #bank-modal-inner { width:520px; max-width:96vw; max-height:88vh; background:#fff; border-radius:8px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 8px 32px rgba(0,0,0,.3); font-family:'Microsoft YaHei',SimSun,sans-serif; }
    /* 头部 */
    #bank-modal-header { background:linear-gradient(135deg,#336699,#5a8fc0); color:#fff; padding:10px 16px; display:flex; align-items:center; flex-shrink:0; }
    
    /* Tabs */
    .bank-tab-btn { background:rgba(255,255,255,.15); border:none; color:#d0e8ff; border-radius:15px; padding:4px 14px; font-size:12px; cursor:pointer; font-weight:bold; transition:all .2s; }
    .bank-tab-btn.active { background:#fff; color:#336699; box-shadow:0 2px 4px rgba(0,0,0,.1); }

    /* 包含容器 */
    .bank-view-pane { display:flex; flex-direction:column; flex:1; overflow:hidden; background:#f6faff; }

    /* 余额卡片 */
    .bank-balance-card { flex:1; background:#fff; border:1px solid #d0e4f5; border-radius:6px; padding:12px 14px; text-align:center; transition:box-shadow .2s; }
    .bank-balance-card:hover { box-shadow:0 2px 8px rgba(51,102,153,.1); }
    .bank-bcard-title { font-size:12px; margin-bottom:6px; }
    .bank-bcard-val { font-size:20px; font-weight:bold; }

    /* 操作区 */
    .bank-op-row { display:flex; gap:10px; align-items:center; margin-bottom:10px; }
    .bank-op-label { font-size:12px; font-weight:bold; width:44px; }
    .bank-op-input { flex:1; height:34px; padding:0 10px; border:1px solid #b0d0ee; border-radius:4px; font-size:13px; outline:none; transition:border-color .2s; }
    .bank-op-input:focus { border-color:#336699; }
    .bank-op-btn { height:34px; padding:0 20px; color:#fff; border:none; border-radius:4px; cursor:pointer; font-size:13px; font-weight:bold; transition:opacity .2s; }
    .bank-op-btn:hover { opacity:.85; }
    .bank-op-btn:disabled { opacity:.5; cursor:not-allowed; }
    
    /* 流水列表 */
    .bank-log-item { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed #d0e4f5; font-size:12px; }
    .bank-log-item:last-child { border-bottom:none; }
    .bank-log-deposit { color:#16a34a; font-weight:bold; }
    .bank-log-withdraw { color:#0891b2; font-weight:bold; }

    /* 排行榜单项 */
    .bank-rank-item { background:#fff; border:1px solid #d0e4f5; border-radius:6px; padding:10px 14px; display:flex; align-items:center; gap:12px; font-size:13px; margin-bottom:8px; transition:border-color .2s; }
    .bank-rank-item:hover { border-color:#336699; box-shadow:0 2px 8px rgba(51,102,153,.1); }
    .bank-rank-num { font-size:18px; font-weight:bold; font-style:italic; width:30px; text-align:center; color:#9db3d4; }
    .bank-rank-top1 { color:#fbbf24; }
    .bank-rank-top2 { color:#9ca3af; }
    .bank-rank-top3 { color:#b45309; }
    .bank-rank-val { margin-left:auto; font-weight:bold; color:#0891b2; display:flex; align-items:center; gap:4px; }
    .bank-modal-close { cursor:pointer; font-size:20px; opacity:.8; transition:opacity .15s; }
    .bank-modal-close:hover { opacity:1; }
</style>

<div id="bank-modal">
    <div id="bank-modal-inner">
        {{-- 标题栏 --}}
        <div id="bank-modal-header">
            <div style="font-size:15px; font-weight:bold; margin-right:20px;">🏦 金币银行</div>
            {{-- Tabs --}}
            <div style="display:flex; gap:10px; flex:1;">
                <button id="bank-tabbtn-account" class="bank-tab-btn active" data-bank-tab="account">我的账户</button>
                <button id="bank-tabbtn-ranking" class="bank-tab-btn" data-bank-tab="ranking">存款排行</button>
            </div>
            <span class="bank-modal-close" data-bank-modal-close>&times;</span>
        </div>

        {{-- 我的账户 面板 --}}
        <div id="bank-view-account" class="bank-view-pane" style="display:flex;">
            {{-- 余额展示 --}}
            <div style="display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid #d0e4f5; background:#fff;">
                <div class="bank-balance-card" style="border-left:4px solid #3b82f6;">
                    <div class="bank-bcard-title" style="color:#3b82f6;">💰 流通金币</div>
                    <div class="bank-bcard-val" style="color:#1d4ed8;" id="bank-jjb-display">—</div>
                </div>
                <div class="bank-balance-card" style="border-left:4px solid #0891b2;">
                    <div class="bank-bcard-title" style="color:#0891b2;">🏦 银行存款</div>
                    <div class="bank-bcard-val" style="color:#164e63;" id="bank-bank-display">—</div>
                </div>
            </div>

            {{-- 操作区 --}}
            <div style="padding:14px 16px; border-bottom:1px solid #d0e4f5; background:#fff;">
                <div class="bank-op-row">
                    <span class="bank-op-label" style="color:#3b82f6;">存 入</span>
                    <input type="number" id="bank-deposit-input" class="bank-op-input" min="1" placeholder="输入你想存入银行的金币数量...">
                    <button id="bank-deposit-btn" class="bank-op-btn" style="background:linear-gradient(135deg,#3b82f6,#60a5fa);" data-bank-action="deposit">确认存入</button>
                </div>
                <div class="bank-op-row" style="margin-bottom:0;">
                    <span class="bank-op-label" style="color:#0891b2;">取 出</span>
                    <input type="number" id="bank-withdraw-input" class="bank-op-input" min="1" placeholder="输入你想从银行取回的金币数量...">
                    <button id="bank-withdraw-btn" class="bank-op-btn" style="background:linear-gradient(135deg,#0891b2,#22d3ee);" data-bank-action="withdraw">确认取出</button>
                </div>
                <div id="bank-op-msg" style="display:none; text-align:center; font-size:12px; font-weight:bold; padding:8px 10px; border-radius:6px; margin-top:12px;"></div>
            </div>

            {{-- 流水记录 --}}
            <div style="padding:8px 16px; font-size:12px; font-weight:bold; color:#336699; background:#fff; border-bottom:1px solid #e0ecf8;">
                📝 最近资金流水
            </div>
            <div id="bank-logs-list" style="flex:1; overflow-y:auto; padding:10px 16px;">
                <div style="text-align:center; color:#9db3d4; font-size:12px; padding:30px 0;">加载中...</div>
            </div>
        </div>

        {{-- 存款排行 面板 --}}
        <div id="bank-view-ranking" class="bank-view-pane" style="display:none;">
            <div style="padding:10px 16px; border-bottom:1px solid #d0e4f5; display:flex; justify-content:space-between; align-items:center; background:#fff;">
                <div style="font-size:13px; color:#336699; font-weight:bold;">🏆 全站存款排行榜</div>
                <button data-bank-rank-sort id="bank-rank-sort-btn" style="background:#f0f6ff; border:1px solid #b0d0ee; color:#336699; padding:4px 12px; border-radius:15px; font-size:12px; cursor:pointer; font-weight:bold; transition:background .2s;">
                    降序 ↓
                </button>
            </div>
            
            <div id="bank-ranking-list" style="flex:1; overflow-y:auto; padding:12px 16px;">
                <div style="text-align:center; color:#9db3d4; font-size:12px; padding:30px 0;">加载中...</div>
            </div>

            {{-- 分页控件 --}}
            <div style="padding:10px 16px; border-top:1px solid #d0e4f5; background:#fff; display:flex; justify-content:space-between; align-items:center;">
                <button class="bank-tab-btn" id="bank-rank-prev" data-bank-rank-page-delta="-1" style="color:#336699; border:1px solid #b0d0ee; background:#fff; font-weight:normal;">上一页</button>
                <div id="bank-rank-page-info" style="font-size:12px; color:#666; font-weight:bold;">1 / 1</div>
                <button class="bank-tab-btn" id="bank-rank-next" data-bank-rank-page-delta="1" style="color:#336699; border:1px solid #b0d0ee; background:#fff; font-weight:normal;">下一页</button>
            </div>
        </div>

    </div>
</div>
