chatroom/resources/views/chat/partials/scripts.blade.php

{{--
    文件功能：聊天室前端交互脚本（Blade 模板形式）
    包含消息渲染、用户列表管理、发送消息、WebSocket 事件监听、
    管理操作、存点心跳、头像选择等全部前端逻辑

    通过 @include('chat.partials.scripts') 引入到 frame.blade.php

    @author ChatRoom Laravel
    @version 1.0.0
--}}
<script>
    /**
     * 聊天室前端交互逻辑
     * 保留所有 WebSocket 事件监听，复刻原版 UI 交互
     */

    // ── DOM 元素引用 ──────────────────────────────────────
    const container = document.getElementById('chat-messages-container');
    const container2 = document.getElementById('chat-messages-container2');
    const userList = document.getElementById('online-users-list');
    const toUserSelect = document.getElementById('to_user');
    const onlineCount = document.getElementById('online-count');
    const onlineCountBottom = document.getElementById('online-count-bottom');

    let onlineUsers = {};
    let autoScroll = true;

    // ── Tab 切换 ──────────────────────────────────────
    function switchTab(tab) {
        ['users', 'rooms', 'emoji', 'action'].forEach(t => {
            document.getElementById('panel-' + t).style.display = t === tab ? 'block' : 'none';
            document.getElementById('tab-' + t).classList.toggle('active', t === tab);
        });
        // 贴图 Tab 懒加载：首次切换时将 data-src 赋值到 src
        if (tab === 'emoji') {
            document.querySelectorAll('#panel-emoji img[data-src]').forEach(img => {
                img.src = img.dataset.src;
                img.removeAttribute('data-src');
            });
        }
    }

    // ── 分屏切换 ──────────────────────────────────────
    function changeSplitScreen(mode) {
        const panes = document.getElementById('message-panes');
        if (mode === '1') {
            panes.classList.add('split-h');
        } else {
            panes.classList.remove('split-h');
        }
    }

    // ── 表情插入 ──────────────────────────────────────
    function insertEmoji(code) {
        const input = document.getElementById('content');
        input.value += code;
        input.focus();
        switchTab('users');
    }

    // ── 动作选择 ──────────────────────────────────────
    function setAction(act) {
        document.getElementById('action').value = act;
        switchTab('users');
        document.getElementById('content').focus();
    }

    // ── 自动滚屏 ──────────────────────────────────────
    document.getElementById('auto_scroll').addEventListener('change', function() {
        autoScroll = this.checked;
    });

    // ── 滚动到底部 ───────────────────────────────────
    function scrollToBottom() {
        if (autoScroll) {
            container.scrollTop = container.scrollHeight;
        }
    }

    // ── 渲染在线人员列表（支持排序） ──────────────────
    function renderUserList() {
        userList.innerHTML = '';
        toUserSelect.innerHTML = '<option value="大家">大家</option>';

        // 在列表顶部添加"大家"条目（原版风格）
        let allDiv = document.createElement('div');
        allDiv.className = 'user-item';
        allDiv.innerHTML = '<span class="user-name" style="padding-left: 4px; color: navy;">大家</span>';
        allDiv.onclick = () => {
            toUserSelect.value = '大家';
        };
        userList.appendChild(allDiv);

        // ── AI 小助手（仅当全局开关开启时显示，与普通用户风格一致）──
        if (window.chatContext.chatBotEnabled) {
            let botDiv = document.createElement('div');
            botDiv.className = 'user-item';
            botDiv.innerHTML = `
                <img class="user-head" src="/images/ai_bot.png" onerror="this.src='/images/headface/1.gif'">
                <span class="user-name">AI小班长</span><span style="font-size:12px; margin-left:2px;" title="聊天机器人">🤖</span>
            `;
            botDiv.onclick = () => {
                toUserSelect.value = 'AI小班长';
                document.getElementById('content').focus();
            };
            userList.appendChild(botDiv);

            // 在发言对象下拉框中也添加 AI 小助手
            let botOption = document.createElement('option');
            botOption.value = 'AI小班长';
            botOption.textContent = '🤖 AI小班长';
            toUserSelect.appendChild(botOption);
        }

        // 获取排序方式
        const sortSelect = document.getElementById('user-sort-select');
        const sortBy = sortSelect ? sortSelect.value : 'default';

        // 构建用户数组并排序
        let userArr = [];
        for (let username in onlineUsers) {
            userArr.push({
                username,
                ...onlineUsers[username]
            });
        }

        if (sortBy === 'name') {
            userArr.sort((a, b) => a.username.localeCompare(b.username, 'zh'));
        } else if (sortBy === 'level') {
            userArr.sort((a, b) => (b.user_level || 0) - (a.user_level || 0));
        }

        let count = userArr.length;

        userArr.forEach(user => {
            const username = user.username;
            let item = document.createElement('div');
            item.className = 'user-item';
            item.dataset.username = username;

            const headface = (user.headface || '1.gif').toLowerCase();
            // VIP 图标和管理员标识 (互斥显示：管理员优先)
            let badges = '';
            if (user.is_admin) {
                // 军人专属风格：由于宽度受限，采用代表最高荣誉与权威的“将官军功章”单字符
                badges += `<span style="font-size:12px; margin-left:2px;" title="最高统帅">🎖️</span>`;
            } else if (user.vip_icon) {
                const vipColor = user.vip_color || '#f59e0b';
                badges +=
                    `<span style="font-size:12px; margin-left:2px; color:${vipColor};" title="${user.vip_name || 'VIP'}">${user.vip_icon}</span>`;
            }

            // 女生名字使用玫粉色
            const nameColor = (user.sex == 2) ? 'color:#e91e8c;' : '';
            item.innerHTML = `
                <img class="user-head" src="/images/headface/${headface}" onerror="this.src='/images/headface/1.gif'">
                <span class="user-name" style="${nameColor}">${username}</span>${badges}
            `;

            item.onclick = () => {
                toUserSelect.value = username;
                document.getElementById('content').focus();
            };
            // 双击打开用户名片弹窗（全局统一入口）
            item.ondblclick = () => openUserCard(username);
            userList.appendChild(item);

            if (username !== window.chatContext.username) {
                let option = document.createElement('option');
                option.value = username;
                option.textContent = username;
                toUserSelect.appendChild(option);
            }
        });

        onlineCount.innerText = count;
        onlineCountBottom.innerText = count;
        const footer = document.getElementById('online-count-footer');
        if (footer) footer.innerText = count;

        // 如果有搜索关键词，重新过滤
        filterUserList();
    }

    /**
     * 搜索/过滤用户列表
     */
    function filterUserList() {
        const searchInput = document.getElementById('user-search-input');
        const keyword = searchInput ? searchInput.value.trim().toLowerCase() : '';
        const items = userList.querySelectorAll('.user-item');

        items.forEach(item => {
            if (!keyword) {
                item.style.display = '';
                return;
            }
            const name = (item.dataset.username || item.textContent || '').toLowerCase();
            item.style.display = name.includes(keyword) ? '' : 'none';
        });
    }




    /**
     * 追加消息到聊天窗格（原版风格：非气泡模式，逐行显示）
     */
    function appendMessage(msg) {
        const isMe = msg.from_user === window.chatContext.username;
        const fontColor = msg.font_color || '#000000';

        const div = document.createElement('div');
        div.className = 'msg-line';

        const timeStr = msg.sent_at || '';
        let timeStrOverride = false;

        // 系统用户名列表（不可被选为聊天对象）
        const systemUsers = ['钓鱼播报', '星海小博士', '系统传音', '系统公告', 'AI小班长', '送花播报', '系统'];

        // 动作文字映射表：情绪型（着/地，放"对"之前）和动作型（了，替换"对X说"）
        const actionTextMap = {
            '微笑': {
                type: 'emotion',
                word: '微笑着'
            },
            '大笑': {
                type: 'emotion',
                word: '大笑着'
            },
            '愤怒': {
                type: 'emotion',
                word: '愤怒地'
            },
            '哭泣': {
                type: 'emotion',
                word: '哭泣着'
            },
            '害羞': {
                type: 'emotion',
                word: '害羞地'
            },
            '鄙视': {
                type: 'emotion',
                word: '鄙视地'
            },
            '得意': {
                type: 'emotion',
                word: '得意地'
            },
            '疑惑': {
                type: 'emotion',
                word: '疑惑地'
            },
            '同情': {
                type: 'emotion',
                word: '同情地'
            },
            '无奈': {
                type: 'emotion',
                word: '无奈地'
            },
            '拳打': {
                type: 'verb',
                word: '拳打了'
            },
            '飞吻': {
                type: 'verb',
                word: '飞吻了'
            },
            '偷看': {
                type: 'verb',
                word: '偷看了'
            },
        };
        // 生成自然语序的动作串：情绪型=[人][着/地]对[目标][verb]：；动作型=[人][了][目标]，[verb]：
        const buildActionStr = (action, fromHtml, toHtml, verb = '说') => {
            const info = actionTextMap[action];
            if (!info) return `${fromHtml}对${toHtml}${action}${verb}：`;
            if (info.type === 'emotion') return `${fromHtml}${info.word}对${toHtml}${verb}：`;
            return `${fromHtml}${info.word}${toHtml}，${verb}：`;
        };
        // 用户名（单击切换发言对象，双击查看资料；系统用户仅显示文本）
        const clickableUser = (uName, color) => {
            if (systemUsers.includes(uName)) {
                return `<span class="msg-user" style="color: ${color};">${uName}</span>`;
            }
            return `<span class="msg-user" style="color: ${color}; cursor: pointer;" onclick="switchTarget('${uName}')" ondblclick="openUserCard('${uName}')">${uName}</span>`;
        };

        // 获取发言者头像
        const senderInfo = onlineUsers[msg.from_user];
        const senderHead = ((senderInfo && senderInfo.headface) || '1.gif').toLowerCase();
        let headImgSrc = `/images/headface/${senderHead}`;
        if (msg.from_user === 'AI小班长') {
            headImgSrc = '/images/ai_bot.png';
        }
        const headImg =
            `<img src="${headImgSrc}" style="display:inline;width:16px;height:16px;vertical-align:middle;margin-right:2px;mix-blend-mode: multiply;" onerror="this.src='/images/headface/1.gif'">`;

        let html = '';

        // 系统用户消息以醒目公告样式显示
        if (systemUsers.includes(msg.from_user)) {
            if (msg.from_user === '系统公告' || msg.from_user === '系统传音') {
                // 管理员公告/系统传音：大字醒目样式，时间跟在内容后面
                div.style.cssText =
                    'background: linear-gradient(135deg, #fef2f2, #fff1f2); border: 2px solid #ef4444; border-radius: 6px; padding: 8px 12px; margin: 4px 0; box-shadow: 0 2px 4px rgba(239,68,68,0.15);';
                html =
                    `<div style="font-size: 14px; font-weight: bold; color: #dc2626;">${msg.content} <span style="font-size: 10px; color: #999; font-weight: normal;">(${timeStr})</span></div>`;
                // 由于我们把时间放进了特殊的结构里，这里把原有的外层时间置空，防止重复显示
                timeStrOverride = true;
            } else if (msg.from_user === '系统' && msg.to_user && msg.to_user !== '大家') {
                // 系统私人通知（自动存点等）：无头像，绿色左边框简洁条形样式
                div.style.cssText =
                    'background:#f0fdf4;border-left:3px solid #16a34a;border-radius:4px;padding:3px 8px;margin:2px 0;font-size:12px;';
                html =
                    `<span style="color:#16a34a;font-weight:bold;">📢 系统：</span><span style="color:#15803d;">${msg.content}</span>`;
            } else {
                // 其他系统用户（钓鱼播报、送花播报、AI小班长等）：普通样式
                let giftHtml = '';
                if (msg.gift_image) {
                    giftHtml =
                        `<img src="${msg.gift_image}" alt="${msg.gift_name || ''}" style="display:inline-block;width:40px;height:40px;vertical-align:middle;margin-left:6px;animation:giftBounce 0.6s ease-in-out;">`;
                }
                html =
                    `${headImg}<span class="msg-user" style="color: ${fontColor}; font-weight: bold;">${msg.from_user}：</span><span class="msg-content" style="color: ${fontColor}">${msg.content}</span>${giftHtml}`;
            }
        } else if (msg.is_secret) {
            if (msg.from_user === '系统') {
                // 系统悄悄通知（自动存点等）：绿色左边框条形，无头像，不显示"悄悄说"
                div.style.cssText =
                    'background:#f0fdf4;border-left:3px solid #16a34a;border-radius:4px;padding:3px 8px;margin:2px 0;font-size:12px;';
                html =
                    `<span style="color:#16a34a;font-weight:bold;">📢 系统：</span><span style="color:#15803d;">${msg.content}</span>`;
            } else {
                // 普通悄悄话样式（原版：紫色斜体，使用自然语序动作）
                const fromHtml = clickableUser(msg.from_user, '#cc00cc');
                const toHtml = clickableUser(msg.to_user, '#cc00cc');
                const verbStr = msg.action ?
                    buildActionStr(msg.action, fromHtml, toHtml, '悄悄说') :
                    `${fromHtml}对${toHtml}悄悄说：`;
                html = `<span class="msg-secret">${headImg}${verbStr}${msg.content}</span>`;
            }
        } else if (msg.to_user && msg.to_user !== '大家') {
            // 对特定对象说话
            const fromHtml = clickableUser(msg.from_user, '#000099');
            const toHtml = clickableUser(msg.to_user, '#000099');
            const verbStr = msg.action ?
                buildActionStr(msg.action, fromHtml, toHtml) :
                `${fromHtml}对${toHtml}说：`;
            html = `${headImg}${verbStr}<span class="msg-content" style="color: ${fontColor}">${msg.content}</span>`;
        } else {
            // 对大家说话
            const fromHtml = clickableUser(msg.from_user, '#000099');
            const verbStr = msg.action ?
                buildActionStr(msg.action, fromHtml, '大家') :
                `${fromHtml}对大家说：`;
            html = `${headImg}${verbStr}<span class="msg-content" style="color: ${fontColor}">${msg.content}</span>`;
        }

        if (!timeStrOverride) {
            html += ` <span class="msg-time">(${timeStr})</span>`;
        }
        div.innerHTML = html;

        // 路由规则（复刻原版）：
        // 公众窗口(say1)：别人的公聊消息
        // 包厢窗口(say2)：自己发的消息 + 悄悄话 + 对自己说的消息
        const isRelatedToMe = isMe ||
            msg.is_secret ||
            msg.to_user === window.chatContext.username;

        if (isRelatedToMe) {
            container2.appendChild(div);
            if (autoScroll) container2.scrollTop = container2.scrollHeight;
        } else {
            container.appendChild(div);
            scrollToBottom();
        }
    }

    // ── WebSocket 初始化 ─────────────────────────────
    document.addEventListener('DOMContentLoaded', () => {
        if (typeof window.initChat === 'function') {
            window.initChat(window.chatContext.roomId);
        }
    });

    // ── WebSocket 事件监听 ────────────────────────────
    window.addEventListener('chat:here', (e) => {
        const users = e.detail;
        onlineUsers = {};
        users.forEach(u => {
            onlineUsers[u.username] = u;
        });
        renderUserList();
    });

    window.addEventListener('chat:joining', (e) => {
        const user = e.detail;
        onlineUsers[user.username] = user;
        renderUserList();

        // 原版风格：完整句式的随机趣味欢迎语
        const gender = user.sex == 2 ? '美女' : '帅哥';
        const uname = user.username;
        const welcomeTemplates = [
            `${gender}<b>${uname}</b>开着刚买不久的车，来到了，见到各位大虾，拱手曰："众位大虾，小生有礼了"`,
            `${gender}<b>${uname}</b>骑着小毛驴哼着小调，悠闲地走了进来，对大家嘿嘿一笑`,
            `${gender}<b>${uname}</b>坐着豪华轿车缓缓驶入，推门而出，拍了拍身上的灰，霸气说道："我来也！"`,
            `${gender}<b>${uname}</b>踩着七彩祥云从天而降，众人皆惊，抱拳道："各位久等了！"`,
            `${gender}<b>${uname}</b>划着小船飘然而至，微微一笑，翩然上岸`,
            `${gender}<b>${uname}</b>骑着自行车铃铛叮当响，远远就喊："我来啦！想我没？"`,
            `${gender}<b>${uname}</b>开着拖拉机突突突地开了进来，下车后拍了拍手说："交通不便，来迟了！"`,
            `${gender}<b>${uname}</b>坐着火箭嗖的一声到了，吓了大家一跳，嘿嘿笑道："别怕别怕，是我啊"`,
            `${gender}<b>${uname}</b>骑着白马翩翩而来，英姿飒爽，拱手道："江湖路远，各位有礼了"`,
            `${gender}<b>${uname}</b>开着宝马一路飞驰到此，推开车门走了下来，向大家挥了挥手`,
            `${gender}<b>${uname}</b>踩着风火轮呼啸而至，在人群中潇洒亮相`,
            `${gender}<b>${uname}</b>乘坐滑翔伞从天空缓缓降落，对大家喊道："hello，我从天上来！"`,
            `${gender}<b>${uname}</b>从地下钻了出来，拍了拍土，说："哎呀，走错路了，不过总算到了"`,
            `${gender}<b>${uname}</b>蹦蹦跳跳地跑了进来，嘻嘻哈哈地跟大家打招呼`,
            `${gender}<b>${uname}</b>悄悄地溜了进来，生怕被人发现，东张西望了一番`,
            `${gender}<b>${uname}</b>迈着六亲不认的步伐走进来，气场两米八`,
        ];
        const msg = welcomeTemplates[Math.floor(Math.random() * welcomeTemplates.length)];
        const now = new Date();
        const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
            now.getMinutes().toString().padStart(2, '0') + ':' +
            now.getSeconds().toString().padStart(2, '0');

        const sysDiv = document.createElement('div');
        sysDiv.className = 'msg-line';

        // VIP 用户使用专属颜色和图标
        if (user.vip_icon && user.vip_name) {
            const vipColor = user.vip_color || '#f59e0b';
            sysDiv.innerHTML =
                `<span style="color: ${vipColor}; font-weight: bold;">【${user.vip_icon} ${user.vip_name}】${msg}</span><span class="msg-time">(${timeStr})</span>`;
        } else {
            sysDiv.innerHTML =
                `<span style="color: green">【欢迎】${msg}</span><span class="msg-time">(${timeStr})</span>`;
        }
        container.appendChild(sysDiv);
        scrollToBottom();
    });

    window.addEventListener('chat:leaving', (e) => {
        const user = e.detail;
        delete onlineUsers[user.username];
        renderUserList();

        // 原版风格：趣味离开语（与进入一致的风格）
        const gender = user.sex == 2 ? '美女' : '帅哥';
        const uname = user.username;
        const leaveTemplates = [
            `${gender}<b>${uname}</b>潇洒地挥了挥手，骑着小毛驴哼着小调离去了`,
            `${gender}<b>${uname}</b>开着跑车扬长而去，留下一路烟尘`,
            `${gender}<b>${uname}</b>踩着七彩祥云飘然远去，消失在天际`,
            `${gender}<b>${uname}</b>悄无声息地溜走了，连个招呼都不打`,
            `${gender}<b>${uname}</b>跳上直升机螺旋桨呼呼作响，朝大家喊道："我先走啦！"`,
            `${gender}<b>${uname}</b>拱手告别："各位大虾，后会有期！"随后翩然离去`,
            `${gender}<b>${uname}</b>骑着自行车铃铛叮当响，远远就喊："下次再聊！拜拜！"`,
            `${gender}<b>${uname}</b>坐着热气球缓缓升空，朝大家挥手告别`,
            `${gender}<b>${uname}</b>迈着六亲不认的步伐离开了，留下一众人目瞪口呆`,
            `${gender}<b>${uname}</b>化作一缕青烟消散在空气中……`,
        ];
        const msg = leaveTemplates[Math.floor(Math.random() * leaveTemplates.length)];
        const now = new Date();
        const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
            now.getMinutes().toString().padStart(2, '0') + ':' +
            now.getSeconds().toString().padStart(2, '0');

        const sysDiv = document.createElement('div');
        sysDiv.className = 'msg-line';
        // VIP 用户离开也带专属颜色和图标
        if (user.vip_icon && user.vip_name) {
            const vipColor = user.vip_color || '#f59e0b';
            sysDiv.innerHTML =
                `<span style="color: ${vipColor}; font-weight: bold;">【${user.vip_icon} ${user.vip_name}】${msg}</span><span class="msg-time">(${timeStr})</span>`;
        } else {
            sysDiv.innerHTML =
                `<span style="color: #cc6600">【离开】${msg}</span><span class="msg-time">(${timeStr})</span>`;
        }
        container.appendChild(sysDiv);
        scrollToBottom();
    });

    window.addEventListener('chat:message', (e) => {
        const msg = e.detail;
        if (msg.is_secret && msg.from_user !== window.chatContext.username && msg.to_user !== window
            .chatContext.username) {
            return;
        }
        appendMessage(msg);
    });

    window.addEventListener('chat:kicked', (e) => {
        if (e.detail.username === window.chatContext.username) {
            alert("您已被管理员踢出房间！" + (e.detail.reason ? "\n原因：" + e.detail.reason : ""));
            window.location.href = "{{ route('rooms.index') }}";
        }
    });

    // ── 禁言状态（本地计时器） ──
    let isMutedUntil = 0;

    window.addEventListener('chat:muted', (e) => {
        const d = e.detail;
        const now = new Date();
        const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
            now.getMinutes().toString().padStart(2, '0') + ':' +
            now.getSeconds().toString().padStart(2, '0');

        const isMe = d.username === window.chatContext.username;

        // 禁言通知：自己被禁言显示在包厢(say2)，其他人显示在公聊(say1)
        const div = document.createElement('div');
        div.className = 'msg-line';
        div.innerHTML =
            `<span style="color: #c00; font-weight: bold;">【系统】${d.message}</span><span class="msg-time">(${timeStr})</span>`;
        const targetContainer = isMe ? document.getElementById('say2') : container;
        if (targetContainer) {
            targetContainer.appendChild(div);
            targetContainer.scrollTop = targetContainer.scrollHeight;
        }

        // 如果是自己被禁言，设置本地禁言计时
        if (isMe && d.mute_time > 0) {
            isMutedUntil = Date.now() + d.mute_time * 60 * 1000;
            const contentInput = document.getElementById('content');
            const operatorName = d.operator || '管理员';
            if (contentInput) {
                contentInput.placeholder = `${operatorName} 已将您禁言 ${d.mute_time} 分钟，解禁后方可发言...`;
                contentInput.disabled = true;
                // 到期自动恢复
                setTimeout(() => {
                    isMutedUntil = 0;
                    contentInput.placeholder = '在这里输入聊天内容，按 Enter 发送...';
                    contentInput.disabled = false;
                    const unmuteDiv = document.createElement('div');
                    unmuteDiv.className = 'msg-line';
                    unmuteDiv.innerHTML =
                        '<span style="color: #16a34a; font-weight: bold;">【系统】您的禁言已解除，可以继续发言了。</span>';
                    // 解禁提示也显示在包厢窗口
                    const say2 = document.getElementById('say2');
                    if (say2) {
                        say2.appendChild(unmuteDiv);
                        say2.scrollTop = say2.scrollHeight;
                    }
                }, d.mute_time * 60 * 1000);
            }
        }
    });

    window.addEventListener('chat:title-updated', (e) => {
        document.getElementById('room-title-display').innerText = e.detail.title;
    });

    // ── 管理员全员清屏事件（等待 Echo 就绪后监听） ───────
    function setupScreenClearedListener() {
        if (!window.Echo || !window.chatContext) {
            // Echo 或 chatContext 还没就绪，延迟重试
            setTimeout(setupScreenClearedListener, 500);
            return;
        }
        window.Echo.join(`room.${window.chatContext.roomId}`)
            .listen('ScreenCleared', (e) => {
                console.log('收到全员清屏事件:', e);
                const operator = e.operator;

                // 清除公聊窗口所有消息
                const say1 = document.getElementById('chat-messages-container');
                if (say1) say1.innerHTML = '';

                // 清除包厢窗口中非悄悄话的消息
                const say2 = document.getElementById('chat-messages-container2');
                if (say2) {
                    const items = say2.querySelectorAll('.msg-line');
                    items.forEach(item => {
                        // 保留悄悄话消息（含 msg-secret 类）
                        if (!item.querySelector('.msg-secret')) {
                            item.remove();
                        }
                    });
                }

                // 显示清屏提示
                const sysDiv = document.createElement('div');
                sysDiv.className = 'msg-line';
                const now = new Date();
                const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
                    now.getMinutes().toString().padStart(2, '0') + ':' +
                    now.getSeconds().toString().padStart(2, '0');
                sysDiv.innerHTML =
                    `<span style="color: #dc2626; font-weight: bold;">🧹 管理员 <b>${operator}</b> 已执行全员清屏</span><span class="msg-time">(${timeStr})</span>`;
                if (say1) {
                    say1.appendChild(sysDiv);
                    say1.scrollTop = say1.scrollHeight;
                }
            });
        console.log('ScreenCleared 监听器已注册');
    }
    // DOMContentLoaded 后启动，确保 Vite 编译的 JS 已加载
    document.addEventListener('DOMContentLoaded', setupScreenClearedListener);

    // ── 发送消息（Enter 发送） ───────────────────────
    document.getElementById('content').addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage(e);
        }
    });

    /**
     * 发送聊天消息
     */
    async function sendMessage(e) {
        if (e) e.preventDefault();

        // 前端禁言检查
        if (isMutedUntil > Date.now()) {
            const remaining = Math.ceil((isMutedUntil - Date.now()) / 1000);
            const remainMin = Math.ceil(remaining / 60);
            // 在聊天窗口显示持久提示，避免弹窗消失太快
            const muteDiv = document.createElement('div');
            muteDiv.className = 'msg-line';
            muteDiv.innerHTML =
                `<span style="color: #dc2626; font-weight: bold;">【提示】您正在禁言中，还需等待约 ${remainMin} 分钟（${remaining} 秒）后方可发言。</span>`;
            const container2 = document.getElementById('say2');
            if (container2) {
                container2.appendChild(muteDiv);
                container2.scrollTop = container2.scrollHeight;
            }
            return;
        }

        const form = document.getElementById('chat-form');
        const formData = new FormData(form);
        const contentInput = document.getElementById('content');
        const submitBtn = document.getElementById('send-btn');

        const content = formData.get('content').trim();
        if (!content) {
            contentInput.focus();
            return;
        }

        // 如果发言对象是 AI 小助手，走专用机器人 API
        const toUser = formData.get('to_user');
        if (toUser === 'AI小班长') {
            contentInput.value = '';
            contentInput.focus();
            await sendToChatBot(content);
            return;
        }

        submitBtn.disabled = true;

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

            const data = await response.json();
            if (response.ok && data.status === 'success') {
                contentInput.value = '';
                contentInput.focus();
            } else {
                alert('发送失败: ' + (data.message || JSON.stringify(data.errors)));
            }
        } catch (error) {
            alert('网络连接错误，消息发送失败！');
            console.error(error);
        } finally {
            submitBtn.disabled = false;
        }
    }


    // ── 设置房间公告 ─────────────────────────────────────
    async function promptAnnouncement() {
        const currentText = document.getElementById('announcement-text')?.textContent?.trim() || '';
        const newText = prompt('请输入新的房间公告/祝福语：', currentText);
        if (newText === null || newText.trim() === '') return;

        try {
            const res = await fetch(`/room/${window.chatContext.roomId}/announcement`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                        'content'),
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    announcement: newText.trim()
                })
            });
            const data = await res.json();
            if (data.status === 'success') {
                const marquee = document.getElementById('announcement-text');
                if (marquee) marquee.textContent = newText.trim();
                alert('公告已更新！');
            } else {
                alert(data.message || '更新失败');
            }
        } catch (e) {
            alert('设置公告失败：' + e.message);
        }
    }

    // ── 站长公屏讲话 ─────────────────────────────────────
    async function promptAnnounceMessage() {
        const content = prompt('请输入公屏讲话内容：');
        if (!content || !content.trim()) return;

        try {
            const res = await fetch('/command/announce', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                        'content'),
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    content: content.trim(),
                    room_id: window.chatContext.roomId,
                })
            });
            const data = await res.json();
            if (!res.ok || data.status !== 'success') {
                alert(data.message || '发送失败');
            }
        } catch (e) {
            alert('发送失败：' + e.message);
        }
    }

    // ── 管理员全员清屏 ─────────────────────────────────────
    async function adminClearScreen() {
        if (!confirm('确定要清除所有人的聊天记录吗？（悄悄话将保留）')) return;

        try {
            const res = await fetch('/command/clear-screen', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                        'content'),
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    room_id: window.chatContext.roomId,
                })
            });
            const data = await res.json();
            if (!res.ok || data.status !== 'success') {
                alert(data.message || '清屏失败');
            }
        } catch (e) {
            alert('清屏失败：' + e.message);
        }
    }

    // ── 滚屏开关 ─────────────────────────────────────
    function toggleAutoScroll() {
        autoScroll = !autoScroll;
        const cb = document.getElementById('auto_scroll');
        if (cb) cb.checked = autoScroll;
        const statusEl = document.getElementById('scroll-status');
        if (statusEl) statusEl.textContent = autoScroll ? '开' : '关';
    }

    // ── 退出房间 ─────────────────────────────────────
    async function leaveRoom() {
        try {
            await fetch(window.chatContext.leaveUrl, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                        'content'),
                    'Accept': 'application/json'
                }
            });
        } catch (e) {
            console.error(e);
        }
        // 弹出窗口直接关闭，如果不是弹出窗口则跳回首页
        window.close();
        setTimeout(() => {
            window.location.href = '/';
        }, 500);
    }

    // ── 掉线检测计数器 ──
    let heartbeatFailCount = 0;
    const MAX_HEARTBEAT_FAILS = 3;

    // ── 存点功能（手动 + 自动）─────────────────────
    async function saveExp(silent = false) {
        if (!window.chatContext || !window.chatContext.heartbeatUrl) return;
        try {
            const response = await fetch(window.chatContext.heartbeatUrl, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                        .getAttribute('content'),
                    'Accept': 'application/json'
                }
            });

            // 检测登录态失效
            if (response.status === 401 || response.status === 419) {
                alert('⚠️ 您的登录已失效（可能超时或在其他设备登录），请重新登录。');
                window.location.href = '/';
                return;
            }

            const data = await response.json();
            if (response.ok && data.status === 'success') {
                heartbeatFailCount = 0;
                const now = new Date();
                const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
                    now.getMinutes().toString().padStart(2, '0') + ':' +
                    now.getSeconds().toString().padStart(2, '0');
                const d = data.data;
                const levelTitle = d.title || '普通会员';

                let levelInfo = '';
                if (d.is_max_level) {
                    levelInfo = `级别(${d.user_level});经验(${d.exp_num});金币(${d.jjb}枚);已满级。`;
                } else {
                    levelInfo = `级别(${d.user_level});经验(${d.exp_num});金币(${d.jjb}枚)。`;
                }

                // 本次获得的奖励提示
                let gainInfo = '';
                if (d.exp_gain > 0 || d.jjb_gain > 0) {
                    const parts = [];
                    if (d.exp_gain > 0) parts.push(`经验+${d.exp_gain}`);
                    if (d.jjb_gain > 0) parts.push(`金币+${d.jjb_gain}`);
                    gainInfo = `(本次: ${parts.join(', ')})`;
                }

                if (data.data.leveled_up) {
                    const upDiv = document.createElement('div');
                    upDiv.className = 'msg-line';
                    upDiv.innerHTML =
                        `<span style="color: #d97706; font-weight: bold;">【系统】恭喜！你的经验值已达 ${d.exp_num}，等级突破至 LV.${d.user_level}！🌟</span><span class="msg-time">(${timeStr})</span>`;
                    container2.appendChild(upDiv);
                    if (autoScroll) container2.scrollTop = container2.scrollHeight;
                }

                if (!silent) {
                    const detailDiv = document.createElement('div');
                    detailDiv.className = 'msg-line';
                    detailDiv.innerHTML =
                        `<span style="color: green;">【${levelTitle}存点】您的最新情况:${levelInfo} ${gainInfo}</span><span class="msg-time">(${timeStr})</span>`;
                    container2.appendChild(detailDiv);
                    if (autoScroll) container2.scrollTop = container2.scrollHeight;
                } else {
                    return;
                }
            }
        } catch (e) {
            console.error('存点失败', e);
            heartbeatFailCount++;

            if (heartbeatFailCount >= MAX_HEARTBEAT_FAILS) {
                alert('⚠️ 与服务器的连接已断开，请检查网络后重新登录。');
                window.location.href = '/';
                return;
            }

            if (!silent) {
                const sysDiv = document.createElement('div');
                sysDiv.className = 'msg-line';
                sysDiv.innerHTML = `<span style="color: red;">【系统】存点失败，请稍后重试</span>`;
                container2.appendChild(sysDiv);
            }
        }
    }

    // ── 自动存点心跳（每60秒自动存一次）───────────
    const HEARTBEAT_INTERVAL = 60 * 1000;
    setInterval(() => saveExp(true), HEARTBEAT_INTERVAL);
    setTimeout(() => saveExp(true), 10000);

    // ── 头像选择器（原版 fw.asp 功能）───────────────
    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';
    }

    /**
     * 加载头像列表
     */
    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.onerror = () => img.style.display = 'none';
                img.onclick = () => selectAvatar(file, img);
                grid.appendChild(img);
            });
        } catch (e) {
            grid.innerHTML = '<div style="text-align:center;padding:20px;color:red;">加载失败</div>';
        }
    }

    /**
     * 选中一个头像
     */
    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 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') {
                alert('头像修改成功！');
                const myName = window.chatContext.username;
                if (onlineUsers[myName]) {
                    onlineUsers[myName].headface = data.headface;
                }
                renderUserList();
                closeAvatarPicker();
            } else {
                alert(data.message || '修改失败');
            }
        } catch (e) {
            alert('网络错误');
        }

        btn.disabled = false;
        btn.textContent = '确定更换';
    }
    // ── 钓鱼小游戏（复刻原版 diaoyu/ 功能）─────────────
    let fishingTimer = null;
    let fishingReelTimeout = null;

    /**
     * 开始钓鱼 — 调用抛竿 API，花费金币，显示等待动画
     */
    async function startFishing() {
        const btn = document.getElementById('fishing-btn');
        btn.disabled = true;

        try {
            const res = await fetch(window.chatContext.fishCastUrl, {
                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(data.message || '钓鱼失败');
                btn.disabled = false;
                return;
            }

            // 在包厢窗口显示抛竿消息
            const now = new Date();
            const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
                now.getMinutes().toString().padStart(2, '0') + ':' +
                now.getSeconds().toString().padStart(2, '0');

            const castDiv = document.createElement('div');
            castDiv.className = 'msg-line';
            castDiv.innerHTML =
                `<span style="color: #2563eb; font-weight: bold;">🎣【钓鱼】</span>${data.message}<span class="msg-time">(${timeStr})</span>`;
            container2.appendChild(castDiv);
            if (autoScroll) container2.scrollTop = container2.scrollHeight;

            // 等待鱼上钩（后端返回的随机等待秒数）
            btn.textContent = '🎣 等待中...';

            fishingTimer = setTimeout(() => {
                // 鱼上钩了！
                const hookDiv = document.createElement('div');
                hookDiv.className = 'msg-line';
                hookDiv.innerHTML =
                    '<span style="color: #d97706; font-weight: bold; font-size: 14px;">🐟 鱼上钩了！快点击 [拉竿] 按钮！</span>';
                container2.appendChild(hookDiv);
                if (autoScroll) container2.scrollTop = container2.scrollHeight;

                btn.textContent = '🎣 拉竿！';
                btn.disabled = false;
                btn.onclick = reelFish;

                // 15 秒内不拉竿，鱼跑掉
                fishingReelTimeout = setTimeout(() => {
                    const missDiv = document.createElement('div');
                    missDiv.className = 'msg-line';
                    missDiv.innerHTML =
                        '<span style="color: #999;">💨 你反应太慢了，鱼跑掉了...</span>';
                    container2.appendChild(missDiv);
                    if (autoScroll) container2.scrollTop = container2.scrollHeight;

                    resetFishingBtn();
                }, 15000);
            }, data.wait_time * 1000);

        } catch (e) {
            alert('网络错误：' + e.message);
            btn.disabled = false;
        }
    }

    /**
     * 拉竿 — 调用收竿 API，获取随机结果
     */
    async function reelFish() {
        const btn = document.getElementById('fishing-btn');
        btn.disabled = true;
        btn.textContent = '🎣 拉竿中...';

        // 取消跑鱼计时器
        if (fishingReelTimeout) {
            clearTimeout(fishingReelTimeout);
            fishingReelTimeout = null;
        }

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

            const now = new Date();
            const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
                now.getMinutes().toString().padStart(2, '0') + ':' +
                now.getSeconds().toString().padStart(2, '0');

            if (res.ok && data.status === 'success') {
                const r = data.result;
                const color = r.exp >= 0 ? '#16a34a' : '#dc2626';
                const resultDiv = document.createElement('div');
                resultDiv.className = 'msg-line';
                resultDiv.innerHTML =
                    `<span style="color: ${color}; font-weight: bold;">${r.emoji}【钓鱼结果】</span>${r.message}` +
                    ` <span style="color: #666; font-size: 11px;">（当前经验:${data.exp_num} 金币:${data.jjb}）</span>` +
                    `<span class="msg-time">(${timeStr})</span>`;
                container2.appendChild(resultDiv);
            } else {
                const errDiv = document.createElement('div');
                errDiv.className = 'msg-line';
                errDiv.innerHTML =
                    `<span style="color: red;">【钓鱼】${data.message || '操作失败'}</span><span class="msg-time">(${timeStr})</span>`;
                container2.appendChild(errDiv);
            }
            if (autoScroll) container2.scrollTop = container2.scrollHeight;
        } catch (e) {
            alert('网络错误：' + e.message);
        }

        resetFishingBtn();
    }

    /**
     * 重置钓鱼按钮状态
     */
    function resetFishingBtn() {
        const btn = document.getElementById('fishing-btn');
        btn.textContent = '🎣 钓鱼';
        btn.disabled = false;
        btn.onclick = startFishing;
        fishingTimer = null;
        fishingReelTimeout = null;
    }

    // ── AI 聊天机器人 ──────────────────────────────────
    let chatBotSending = false;

    /**
     * 发送消息给 AI 机器人
     * 先在包厢窗口显示用户消息，再调用 API 获取回复
     */
    async function sendToChatBot(content) {
        if (chatBotSending) {
            alert('AI 正在思考中，请稍候...');
            return;
        }
        chatBotSending = true;

        // 显示"思考中"提示
        // 延迟显示"思考中"，让广播消息先到达
        const thinkDiv = document.createElement('div');
        thinkDiv.className = 'msg-line';
        thinkDiv.innerHTML = '<span style="color: #16a34a;">🤖 <b>AI小班长</b> 正在思考中...</span>';
        setTimeout(() => {
            container2.appendChild(thinkDiv);
            if (autoScroll) container2.scrollTop = container2.scrollHeight;
        }, 500);

        try {
            const res = await fetch(window.chatContext.chatBotUrl, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                        'content'),
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    message: content,
                    room_id: window.chatContext.roomId
                })
            });

            const data = await res.json();

            // 移除"思考中"提示（消息已通过广播显示）
            thinkDiv.remove();

            if (!res.ok || data.status !== 'success') {
                const errDiv = document.createElement('div');
                errDiv.className = 'msg-line';
                errDiv.innerHTML = `<span style="color: #dc2626;">🤖【AI小班长】${data.message || '回复失败，请稍后重试'}</span>`;
                container.appendChild(errDiv);
            }
        } catch (e) {
            thinkDiv.remove();
            const errDiv = document.createElement('div');
            errDiv.className = 'msg-line';
            errDiv.innerHTML = '<span style="color: #dc2626;">🤖【AI小班长】网络连接错误，请稍后重试</span>';
            container.appendChild(errDiv);
        }

        chatBotSending = false;
        scrollToBottom();
    }

    /**
     * 清除与 AI 小助手的对话上下文
     */
    async function clearChatBotContext() {
        try {
            const res = await fetch(window.chatContext.chatBotClearUrl, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                        'content'),
                    'Accept': 'application/json'
                }
            });
            const data = await res.json();

            const sysDiv = document.createElement('div');
            sysDiv.className = 'msg-line';
            sysDiv.innerHTML = '<span style="color: #16a34a;">🤖【系统】' + (data.message || '对话已重置') + '</span>';
            container2.appendChild(sysDiv);
            if (autoScroll) container2.scrollTop = container2.scrollHeight;
        } catch (e) {
            alert('清除失败：' + e.message);
        }
    }

    /**
     * HTML 转义函数，防止 XSS
     */
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
</script>