{% extends "base.html" %}
{% block title %}消息 - 智联青云{% endblock %}

{% block content %}
<div id="chatApp" class="flex bg-white/80 backdrop-blur-xl rounded-3xl shadow-2xl border border-white/50 overflow-hidden" style="height:calc(100vh - 120px);min-height:500px;">
    <!-- 左侧面板 -->
    <div class="w-80 border-r border-slate-200/60 bg-white/50 flex flex-col flex-shrink-0 relative z-10">
        <!-- Tab 切换：聊天 / 通知 -->
        <div class="flex p-3 gap-2 bg-white/40 border-b border-slate-200/50 backdrop-blur-md sticky top-0 z-20">
            <button id="tabChat" onclick="switchTab('chat')" class="flex-1 px-4 py-2 text-sm font-bold text-white bg-gradient-to-r from-indigo-500 to-purple-500 rounded-xl shadow-md transition-all duration-300">💬 聊天</button>
            <button id="tabNotif" onclick="switchTab('notif')" class="flex-1 px-4 py-2 text-sm font-medium text-slate-600 hover:text-indigo-600 hover:bg-white bg-white/50 rounded-xl transition-all duration-300 relative border border-white/50">
                🔔 通知
                <span id="chatNotifBadge" class="hidden absolute -top-1.5 -right-1.5 bg-rose-500 text-white text-[10px] font-bold rounded-full h-5 min-w-[20px] px-1.5 flex items-center justify-center shadow-sm border-2 border-white transform animate-bounce">0</span>
            </button>
        </div>
        <!-- 聊天面板 -->
        <div id="chatPanel" class="flex-1 flex flex-col overflow-hidden">
            <!-- 搜索 + 创建 -->
            <div class="p-4 space-y-3 bg-white/30 backdrop-blur-sm border-b border-slate-200/50">
                <div class="relative group">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg class="w-4 h-4 text-slate-400 group-focus-within:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    </div>
                    <input id="roomSearch" type="text" placeholder="搜索聊天..." class="w-full pl-10 pr-4 py-2.5 text-sm bg-white border border-slate-200/80 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 transition-all shadow-sm" oninput="filterRooms()">
                </div>
                <button onclick="showCreateGroup()" class="w-full px-4 py-2.5 text-sm font-bold bg-white text-indigo-600 border border-indigo-100 rounded-xl hover:bg-indigo-50 hover:shadow-md transition-all flex items-center justify-center gap-2 group">
                    <div class="w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center group-hover:bg-indigo-600 group-hover:text-white transition-colors">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    </div>
                    发起群聊
                </button>
            </div>
            <!-- 会话列表 -->
            <div id="roomList" class="flex-1 overflow-y-auto hide-scrollbar p-2 space-y-1 bg-transparent"></div>
        </div>
        <!-- 通知面板 -->
        <div id="chatNotifPanel" class="flex-1 overflow-y-auto hide-scrollbar hidden p-2 space-y-2 bg-transparent">
            <div id="chatNotifList" class="space-y-2"></div>
            <div id="chatNotifEmpty" class="flex flex-col items-center justify-center h-64 text-slate-400">
                <div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mb-3">📭</div>
                <div class="text-sm font-medium">暂无新通知</div>
            </div>
        </div>
    </div>
    <!-- 右侧聊天区 -->
    <div class="flex-1 flex flex-col bg-[url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%236366f1\' fill-opacity=\'0.03\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] relative">
        <div class="absolute inset-0 bg-gradient-to-br from-white/90 to-white/50 backdrop-blur-[2px] z-0"></div>
        <!-- 未选中状态 -->
        <div id="emptyState" class="flex-1 flex items-center justify-center z-10">
            <div class="text-center transform transition-all hover:scale-105 duration-500">
                <div class="w-32 h-32 mx-auto bg-gradient-to-tr from-indigo-100 to-purple-100 rounded-full flex items-center justify-center mb-6 shadow-inner relative">
                    <div class="absolute inset-0 bg-indigo-400 blur-2xl opacity-20 rounded-full animate-pulse"></div>
                    <span class="text-6xl animate-bounce">💬</span>
                </div>
                <h3 class="text-2xl font-extrabold text-slate-800 tracking-tight mb-2">欢迎来到联考消息中心</h3>
                <p class="text-slate-500 font-medium">在左侧选择一个聊天，或发起新的对话</p>
            </div>
        </div>
        <!-- 通知详情视图 -->
        <div id="notifDetailView" class="flex-1 flex-col hidden z-10 bg-white/80 backdrop-blur-md">
            <div class="px-6 py-4 border-b border-slate-200/60 flex items-center gap-4 bg-white/50 sticky top-0 backdrop-blur-xl">
                <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-indigo-100 to-purple-100 flex items-center justify-center text-2xl shadow-sm border border-white" id="notifDetailIconContainer">
                    <span id="notifDetailIcon"></span>
                </div>
                <div>
                    <div id="notifDetailType" class="text-lg font-extrabold text-slate-900"></div>
                    <div id="notifDetailTime" class="text-xs font-medium text-slate-500 mt-1"></div>
                </div>
            </div>
            <div class="flex-1 overflow-y-auto p-8 hide-scrollbar">
                <div class="bg-white rounded-3xl p-8 shadow-sm border border-slate-100 relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-indigo-50/50 rounded-bl-full -z-10"></div>
                    <div id="notifDetailContent" class="text-base text-slate-700 leading-relaxed font-medium"></div>
                    <div id="notifDetailFrom" class="text-sm text-slate-400 mt-6 pt-6 border-t border-slate-100 flex items-center gap-2"></div>
                    <div id="notifDetailActions" class="mt-6"></div>
                </div>
            </div>
        </div>
        <!-- 聊天视图 -->
        <div id="chatView" class="flex-1 flex-col hidden z-10 relative">
            <!-- 顶栏 -->
            <div id="chatHeader" class="px-6 py-4 border-b border-slate-200/60 flex items-center justify-between bg-white/60 backdrop-blur-xl sticky top-0 z-20">
                <div class="flex items-center gap-3">
                    <div id="chatAvatarContainer" class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-100 to-purple-100 flex items-center justify-center text-indigo-600 font-bold shadow-sm overflow-hidden">
                        <!-- 头像动态插入 -->
                    </div>
                    <div>
                        <div class="flex items-center gap-2">
                            <span id="chatName" class="text-lg font-bold text-slate-900 tracking-tight"></span>
                            <span id="chatMemberCount" class="text-xs font-bold text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-full border border-indigo-100"></span>
                        </div>
                        <div id="typingIndicator" class="text-[11px] font-medium text-indigo-500 hidden animate-pulse mt-0.5"></div>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <button onclick="showAnnouncement()" class="w-10 h-10 rounded-xl bg-white text-slate-500 hover:text-amber-600 hover:bg-amber-50 hover:shadow-sm border border-slate-100 transition-all flex items-center justify-center group" title="群公告" id="btnAnnouncement">
                        <svg class="w-5 h-5 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"/></svg>
                    </button>
                    <button onclick="showSearchPanel()" class="w-10 h-10 rounded-xl bg-white text-slate-500 hover:text-indigo-600 hover:bg-indigo-50 hover:shadow-sm border border-slate-100 transition-all flex items-center justify-center group" title="搜索聊天记录">
                        <svg class="w-5 h-5 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    </button>
                    <button onclick="showFileList()" class="w-10 h-10 rounded-xl bg-white text-slate-500 hover:text-emerald-600 hover:bg-emerald-50 hover:shadow-sm border border-slate-100 transition-all flex items-center justify-center group" title="群文件">
                        <svg class="w-5 h-5 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
                    </button>
                    <button onclick="showMembers()" class="w-10 h-10 rounded-xl bg-white text-slate-500 hover:text-indigo-600 hover:bg-indigo-50 hover:shadow-sm border border-slate-100 transition-all flex items-center justify-center group" title="成员列表">
                        <svg class="w-5 h-5 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                    </button>
                </div>
            </div>
            <!-- 消息区域 -->
            <div id="messageArea" class="flex-1 overflow-y-auto hide-scrollbar px-6 py-4 space-y-5" onscroll="handleScroll()"></div>
            <!-- 引用回复预览 -->
            <div id="replyPreview" class="px-4 py-3 bg-indigo-50/80 backdrop-blur-md border-t border-indigo-100 hidden flex items-center justify-between shadow-inner">
                <div class="flex items-center gap-2 overflow-hidden">
                    <div class="w-1 h-4 bg-indigo-500 rounded-full"></div>
                    <div class="text-sm font-medium text-indigo-900 truncate"><span id="replyToText"></span></div>
                </div>
                <button onclick="cancelReply()" class="w-6 h-6 rounded-full bg-white/50 text-indigo-400 hover:text-indigo-600 hover:bg-white flex items-center justify-center transition-colors shadow-sm ml-2 flex-shrink-0">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>
            <!-- 输入区域 -->
            <div class="p-4 bg-white/80 backdrop-blur-xl border-t border-slate-200/60 shadow-[0_-4px_20px_-15px_rgba(0,0,0,0.1)]">
                <!-- Emoji 面板 -->
                <div id="emojiPanel" class="hidden absolute bottom-[calc(100%+10px)] left-4 p-3 bg-white/95 backdrop-blur-xl border border-slate-200/60 rounded-2xl shadow-xl max-h-48 overflow-y-auto w-64 z-50">
                    <div class="flex flex-wrap gap-2 justify-center" id="emojiGrid"></div>
                </div>
                <!-- @提及自动补全 -->
                <div id="mentionPanel" class="hidden absolute bottom-[calc(100%+10px)] left-20 bg-white border border-slate-200 rounded-xl shadow-xl max-h-48 overflow-y-auto w-56 z-50">
                    <div id="mentionList" class="py-1"></div>
                </div>
                <!-- 录音指示器 -->
                <div id="recordingIndicator" class="hidden absolute bottom-[calc(100%+10px)] left-1/2 -translate-x-1/2 bg-rose-500 text-white px-4 py-2 rounded-xl shadow-lg flex items-center gap-2 z-50">
                    <div class="w-3 h-3 bg-white rounded-full animate-pulse"></div>
                    <span class="text-sm font-medium">录音中... <span id="recordingTime">0s</span></span>
                </div>
                <div class="flex items-end gap-3">
                    <div class="flex flex-col gap-2 pb-1.5">
                        <button onclick="toggleEmoji()" class="w-9 h-9 rounded-xl bg-slate-50 text-slate-500 hover:text-amber-500 hover:bg-amber-50 transition-colors flex items-center justify-center shadow-sm" title="表情">
                            😀
                        </button>
                        <label class="w-9 h-9 rounded-xl bg-slate-50 text-slate-500 hover:text-emerald-500 hover:bg-emerald-50 transition-colors flex items-center justify-center shadow-sm cursor-pointer" title="发送图片">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                            <input type="file" accept="image/*" class="hidden" onchange="uploadFile(this,'image')">
                        </label>
                        <label class="w-9 h-9 rounded-xl bg-slate-50 text-slate-500 hover:text-blue-500 hover:bg-blue-50 transition-colors flex items-center justify-center shadow-sm cursor-pointer" title="发送文件">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
                            <input type="file" class="hidden" onchange="uploadFile(this,'file')">
                        </label>
                        <button onclick="insertMention()" class="w-9 h-9 rounded-xl bg-slate-50 text-slate-500 hover:text-indigo-500 hover:bg-indigo-50 transition-colors flex items-center justify-center shadow-sm font-bold text-sm" title="@提及">
                            @
                        </button>
                        <button id="voiceBtn" onmousedown="startRecording()" onmouseup="stopRecording()" ontouchstart="startRecording()" ontouchend="stopRecording()" class="w-9 h-9 rounded-xl bg-slate-50 text-slate-500 hover:text-rose-500 hover:bg-rose-50 transition-colors flex items-center justify-center shadow-sm" title="按住录音">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/></svg>
                        </button>
                    </div>
                    
                    <div class="flex-1 bg-white rounded-2xl border border-slate-200/80 shadow-sm focus-within:ring-2 focus-within:ring-indigo-500/30 focus-within:border-indigo-400 transition-all overflow-hidden">
                        <textarea id="msgInput" rows="1" placeholder="输入消息... (Enter发送, Shift+Enter换行)" class="flex-1 w-full px-4 py-3.5 text-sm bg-transparent border-none focus:outline-none focus:ring-0 resize-none max-h-32 min-h-[48px] hide-scrollbar" oninput="handleTyping(); this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px';"></textarea>
                    </div>
                    
                    <button onclick="sendMessage()" class="w-12 h-12 rounded-2xl bg-gradient-to-r from-indigo-500 to-purple-600 text-white flex items-center justify-center hover:shadow-lg hover:shadow-indigo-500/30 transform hover:-translate-y-0.5 transition-all flex-shrink-0 group">
                        <svg class="w-5 h-5 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 创建群聊弹窗 -->
<div id="createGroupModal" class="fixed inset-0 bg-black/50 z-[9990] hidden flex items-center justify-center">
    <div class="bg-white rounded-xl shadow-xl w-96 max-h-[80vh] flex flex-col">
        <div class="px-4 py-3 border-b border-slate-200 flex justify-between items-center">
            <h3 class="font-semibold">创建群聊</h3>
            <button onclick="hideCreateGroup()" class="text-slate-400 hover:text-slate-600">&times;</button>
        </div>
        <div class="p-4 space-y-3">
            <input id="groupName" type="text" placeholder="群聊名称" class="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
            <p class="text-sm text-slate-500">选择好友加入群聊：</p>
            <div id="friendListForGroup" class="max-h-48 overflow-y-auto space-y-1"></div>
        </div>
        <div class="px-4 py-3 border-t border-slate-200">
            <button onclick="createGroup()" class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 text-sm">创建</button>
        </div>
    </div>
</div>

<!-- 成员列表弹窗 -->
<div id="membersModal" class="fixed inset-0 bg-black/50 z-[9990] hidden flex items-center justify-center">
    <div class="bg-white rounded-xl shadow-xl w-[420px] max-h-[80vh] flex flex-col">
        <div class="px-4 py-3 border-b border-slate-200 flex justify-between items-center">
            <h3 class="font-semibold">群成员</h3>
            <div class="flex items-center gap-2">
                <button onclick="showNicknameModal()" class="text-xs text-indigo-500 hover:text-indigo-700" title="设置群昵称">我的昵称</button>
                <button onclick="hideMembers()" class="text-slate-400 hover:text-slate-600 text-lg">&times;</button>
            </div>
        </div>
        <div id="membersList" class="p-4 overflow-y-auto max-h-96 space-y-2"></div>
        <div id="inviteSection" class="px-4 py-3 border-t border-slate-200 hidden">
            <button onclick="showInvite()" class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 text-sm">邀请好友</button>
        </div>
    </div>
</div>

<!-- 群公告弹窗 -->
<div id="announcementModal" class="fixed inset-0 bg-black/50 z-[9990] hidden flex items-center justify-center">
    <div class="bg-white rounded-xl shadow-xl w-96 flex flex-col">
        <div class="px-4 py-3 border-b border-slate-200 flex justify-between items-center">
            <h3 class="font-semibold">群公告</h3>
            <button onclick="hideAnnouncement()" class="text-slate-400 hover:text-slate-600 text-lg">&times;</button>
        </div>
        <div class="p-4 space-y-3">
            <div id="announcementDisplay" class="text-sm text-slate-600 min-h-[40px] whitespace-pre-wrap">暂无公告</div>
            <div id="announcementMeta" class="text-xs text-slate-400 hidden"></div>
            <div id="announcementEditSection" class="hidden">
                <textarea id="announcementInput" class="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 resize-none" rows="4" placeholder="输入群公告内容..."></textarea>
                <div class="flex justify-end gap-2 mt-2">
                    <button onclick="cancelEditAnnouncement()" class="px-3 py-1.5 text-sm text-slate-500 hover:bg-slate-100 rounded-lg">取消</button>
                    <button onclick="saveAnnouncement()" class="px-3 py-1.5 text-sm bg-primary text-white rounded-lg hover:bg-blue-600">发布</button>
                </div>
            </div>
            <button id="btnEditAnnouncement" onclick="editAnnouncement()" class="hidden text-sm text-primary hover:text-blue-700">编辑公告</button>
        </div>
    </div>
</div>

<!-- 搜索聊天记录弹窗 -->
<div id="searchModal" class="fixed inset-0 bg-black/50 z-[9990] hidden flex items-center justify-center">
    <div class="bg-white rounded-xl shadow-xl w-[480px] max-h-[80vh] flex flex-col">
        <div class="px-4 py-3 border-b border-slate-200 flex justify-between items-center">
            <h3 class="font-semibold">搜索聊天记录</h3>
            <button onclick="hideSearchPanel()" class="text-slate-400 hover:text-slate-600 text-lg">&times;</button>
        </div>
        <div class="p-4">
            <input id="msgSearchInput" type="text" placeholder="输入关键词搜索..." class="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" oninput="debounceSearch()">
        </div>
        <div id="searchResults" class="flex-1 overflow-y-auto px-4 pb-4 space-y-2 max-h-96"></div>
    </div>
</div>

<!-- 群文件弹窗 -->
<div id="fileListModal" class="fixed inset-0 bg-black/50 z-[9990] hidden flex items-center justify-center">
    <div class="bg-white rounded-xl shadow-xl w-[480px] max-h-[80vh] flex flex-col">
        <div class="px-4 py-3 border-b border-slate-200 flex justify-between items-center">
            <h3 class="font-semibold">群文件</h3>
            <button onclick="hideFileList()" class="text-slate-400 hover:text-slate-600 text-lg">&times;</button>
        </div>
        <div id="fileListContent" class="flex-1 overflow-y-auto p-4 space-y-2 max-h-96"></div>
    </div>
</div>

<!-- 群昵称弹窗 -->
<div id="nicknameModal" class="fixed inset-0 bg-black/50 z-[9991] hidden flex items-center justify-center">
    <div class="bg-white rounded-xl shadow-xl w-80 flex flex-col">
        <div class="px-4 py-3 border-b border-slate-200 flex justify-between items-center">
            <h3 class="font-semibold">设置群昵称</h3>
            <button onclick="hideNicknameModal()" class="text-slate-400 hover:text-slate-600 text-lg">&times;</button>
        </div>
        <div class="p-4 space-y-3">
            <input id="nicknameInput" type="text" placeholder="输入群内昵称（留空使用默认名称）" class="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" maxlength="50">
            <button onclick="saveNickname()" class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 text-sm">保存</button>
        </div>
    </div>
</div>

<!-- 图片预览弹窗 -->
<div id="imagePreview" class="fixed inset-0 bg-black/80 z-[9990] hidden flex items-center justify-center cursor-pointer" onclick="this.classList.add('hidden')">
    <img id="previewImg" class="max-w-[90vw] max-h-[90vh] rounded-lg">
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
<script>
const currentUser = {{ user | tojson }};
if (!currentUser) window.location.href = '/login';
const socket = io();
let currentRoomId = null;
let rooms = [];
let replyToId = null;
let loadingMore = false;
let oldestMsgId = null;
let currentRoomMembers = [];
let currentRoomCreatorId = null;
let myRoomRole = null;
let mediaRecorder = null;
let audioChunks = [];
let recordingStartTime = null;
let recordingInterval = null;
let searchTimer = null;
let mentionMembers = [];

const EMOJIS = ['😀','😂','😍','🥰','😎','🤔','😅','😭','😤','👍','👎','❤️','🔥','🎉','👏','🙏','💪','😊','🥺','😢','😡','🤣','😘','🤗','😱','💯','✅','❌','⭐','🌟'];

// ========== 初始化 ==========
document.addEventListener('DOMContentLoaded', () => {
    loadRooms();
    initEmoji();
    checkUnreadNotifs();
    // 初始化富文本编辑器
    new RichEditor('msgInput', {
        compact: true,
        onEnter: sendMessage
    });
    // URL参数自动打开聊天室
    const params = new URLSearchParams(window.location.search);
    if (params.get('room_id')) {
        setTimeout(() => selectRoom(parseInt(params.get('room_id'))), 500);
    }
    if (params.get('tab') === 'notif') {
        switchTab('notif');
    }
});

// ========== 通知系统 ==========
let notifData = [];

function switchTab(tab) {
    const chatPanel = document.getElementById('chatPanel');
    const notifPanel = document.getElementById('chatNotifPanel');
    const tabChat = document.getElementById('tabChat');
    const tabNotif = document.getElementById('tabNotif');
    if (tab === 'chat') {
        chatPanel.classList.remove('hidden');
        chatPanel.classList.add('flex');
        notifPanel.classList.add('hidden');
        tabChat.className = 'flex-1 px-3 py-2.5 text-sm font-medium text-primary border-b-2 border-primary';
        tabNotif.className = 'flex-1 px-3 py-2.5 text-sm font-medium text-slate-400 border-b-2 border-transparent hover:text-slate-600 relative';
    } else {
        chatPanel.classList.add('hidden');
        chatPanel.classList.remove('flex');
        notifPanel.classList.remove('hidden');
        tabChat.className = 'flex-1 px-3 py-2.5 text-sm font-medium text-slate-400 border-b-2 border-transparent hover:text-slate-600';
        tabNotif.className = 'flex-1 px-3 py-2.5 text-sm font-medium text-primary border-b-2 border-primary relative';
        loadNotifications();
    }
    const badge = document.getElementById('chatNotifBadge');
    tabNotif.appendChild(badge);
}

async function loadNotifications() {
    const res = await fetch('/api/notifications');
    const data = await res.json();
    if (data.success) {
        notifData = data.notifications;
        renderNotifications();
    }
}

function renderNotifications() {
    const list = document.getElementById('chatNotifList');
    const empty = document.getElementById('chatNotifEmpty');
    if (notifData.length === 0) {
        list.innerHTML = '';
        empty.classList.remove('hidden');
        return;
    }
    empty.classList.add('hidden');
    list.innerHTML = notifData.map(n => {
        const isContestApp = n.type === 'contest_application';
        const isTeacherApp = n.type === 'teacher_application';
        const isResult = n.type === 'contest_result' || n.type === 'teacher_result';
        const isNewExam = n.type === 'contest_new_exam';
        const isGraded = n.type === 'exam_graded';
        const isSystem = n.type === 'system_announcement';
        const isPendingContest = isContestApp && n.application_status === 'pending';
        const isPendingTeacher = isTeacherApp && n.application_status === 'pending';
        let statusHtml = '';
        if ((isContestApp || isTeacherApp) && n.application_status === 'approved') statusHtml = '<span class="text-xs text-green-600 font-medium">已批准</span>';
        else if ((isContestApp || isTeacherApp) && n.application_status === 'rejected') statusHtml = '<span class="text-xs text-red-600 font-medium">已拒绝</span>';
        const icon = isContestApp ? '📋' : isTeacherApp ? '👨‍🏫' : isResult ? '📢' : isNewExam ? '📝' : isGraded ? '✅' : isSystem ? '📢' : '🔔';
        const iconBg = isContestApp ? 'bg-orange-100' : isTeacherApp ? 'bg-purple-100' : isResult ? 'bg-green-100' : isNewExam ? 'bg-indigo-100' : isGraded ? 'bg-emerald-100' : isSystem ? 'bg-amber-100' : 'bg-blue-100';
        const clickAction = `showNotifDetail(${n.id})`;
        let actionsHtml = '';
        if (isPendingContest && currentUser.role === 'admin') {
            actionsHtml = `<div class="flex gap-2 mt-2">
                <button onclick="event.stopPropagation();approveContest(${n.post_id})" class="px-3 py-1 text-xs bg-green-500 text-white rounded hover:bg-green-600">批准</button>
                <button onclick="event.stopPropagation();rejectContest(${n.post_id})" class="px-3 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600">拒绝</button>
            </div>`;
        }
        if (isPendingTeacher && currentUser.role === 'admin' && n.application_id) {
            actionsHtml = `<div class="flex gap-2 mt-2">
                <button onclick="event.stopPropagation();approveTeacher(${n.application_id})" class="px-3 py-1 text-xs bg-green-500 text-white rounded hover:bg-green-600">批准</button>
                <button onclick="event.stopPropagation();rejectTeacher(${n.application_id})" class="px-3 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600">拒绝</button>
            </div>`;
        }
        return `<div class="px-3 py-3 ${n.read ? '' : 'bg-blue-50'} hover:bg-slate-50 border-b border-slate-100 transition cursor-pointer" onclick="${clickAction}">
            <div class="flex items-start gap-2">
                <div class="w-8 h-8 rounded-full ${iconBg} flex items-center justify-center flex-shrink-0 mt-0.5">
                    <span class="text-sm">${icon}</span>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm text-slate-700">${escHtml(n.content)}</p>
                    <div class="flex items-center gap-2 mt-1">
                        <span class="text-xs text-slate-400">${n.created_at}</span>
                        ${statusHtml}
                    </div>
                    ${actionsHtml}
                </div>
            </div>
        </div>`;
    }).join('');
}

async function markNotifRead(nid, el) {
    if (el && el.classList.contains('bg-blue-50')) {
        el.classList.remove('bg-blue-50');
        await fetch(`/api/notifications/${nid}/read`, { method: 'POST' });
        checkUnreadNotifs();
    }
}

async function approveContest(appId) {
    if (!confirm('确定批准该杯赛申请？')) return;
    const res = await fetch(`/api/contest-applications/${appId}/approve`, { method: 'POST' });
    const data = await res.json();
    if (data.success) {
        loadNotifications();
    } else {
        alert(data.message || '操作失败');
    }
}

async function rejectContest(appId) {
    if (!confirm('确定拒绝该杯赛申请？')) return;
    const res = await fetch(`/api/contest-applications/${appId}/reject`, { method: 'POST' });
    const data = await res.json();
    if (data.success) {
        loadNotifications();
    } else {
        alert(data.message || '操作失败');
    }
}

async function approveTeacher(appId) {
    if (!confirm('确定批准该教师申请？')) return;
    const res = await fetch(`/api/teacher-applications/${appId}/approve`, { method: 'POST' });
    const data = await res.json();
    if (data.success) {
        loadNotifications();
    } else {
        alert(data.message || '操作失败');
    }
}

async function rejectTeacher(appId) {
    if (!confirm('确定拒绝该教师申请？')) return;
    const res = await fetch(`/api/teacher-applications/${appId}/reject`, { method: 'POST' });
    const data = await res.json();
    if (data.success) {
        loadNotifications();
    } else {
        alert(data.message || '操作失败');
    }
}

async function checkUnreadNotifs() {
    const res = await fetch('/api/notifications/unread-count');
    const data = await res.json();
    if (data.success) {
        const badge = document.getElementById('chatNotifBadge');
        if (data.count > 0) {
            badge.textContent = data.count > 99 ? '99+' : data.count;
            badge.classList.remove('hidden');
        } else {
            badge.classList.add('hidden');
        }
    }
}
setInterval(checkUnreadNotifs, 30000);

function showNotifDetail(nid) {
    const n = notifData.find(x => x.id === nid);
    if (!n) return;
    // 标记已读
    if (!n.read) {
        n.read = true;
        fetch(`/api/notifications/${nid}/read`, { method: 'POST' });
        checkUnreadNotifs();
        renderNotifications();
    }
    // 隐藏聊天视图和空状态，显示通知详情
    document.getElementById('emptyState').classList.add('hidden');
    document.getElementById('chatView').classList.add('hidden');
    document.getElementById('chatView').classList.remove('flex');
    const detail = document.getElementById('notifDetailView');
    detail.classList.remove('hidden');
    detail.classList.add('flex');

    const typeLabels = {
        'teacher_application': '教师申请', 'teacher_result': '教师审核结果',
        'contest_application': '杯赛申请', 'contest_result': '杯赛通知',
        'contest_new_exam': '新考试', 'exam_graded': '成绩通知',
        'system_announcement': '系统通知'
    };
    const typeIcons = {
        'teacher_application': '👨‍🏫', 'teacher_result': '🎓',
        'contest_application': '📋', 'contest_result': '🏅',
        'contest_new_exam': '📝', 'exam_graded': '✅',
        'system_announcement': '📢'
    };

    document.getElementById('notifDetailIcon').textContent = typeIcons[n.type] || '🔔';
    document.getElementById('notifDetailType').textContent = typeLabels[n.type] || '通知';
    document.getElementById('notifDetailTime').textContent = n.created_at || '';
    document.getElementById('notifDetailContent').textContent = n.content || '';
    document.getElementById('notifDetailFrom').textContent = n.from_user ? '来自：' + n.from_user : '';

    // 操作按钮
    let actHtml = '';
    if (n.type === 'contest_application' && n.application_status === 'pending' && n.post_id && currentUser.role === 'admin') {
        actHtml = `<div class="flex gap-3">
            <button onclick="approveContest(${n.post_id})" class="px-4 py-2 text-sm bg-green-500 text-white rounded-md hover:bg-green-600">批准</button>
            <button onclick="rejectContest(${n.post_id})" class="px-4 py-2 text-sm bg-red-500 text-white rounded-md hover:bg-red-600">拒绝</button>
        </div>`;
    } else if (n.type === 'teacher_application' && n.application_status === 'pending' && n.application_id && currentUser.role === 'admin') {
        actHtml = `<div class="flex gap-3">
            <button onclick="approveTeacher(${n.application_id})" class="px-4 py-2 text-sm bg-green-500 text-white rounded-md hover:bg-green-600">批准</button>
            <button onclick="rejectTeacher(${n.application_id})" class="px-4 py-2 text-sm bg-red-500 text-white rounded-md hover:bg-red-600">拒绝</button>
        </div>`;
    } else if (n.type === 'contest_new_exam' || n.type === 'exam_graded') {
        actHtml = `<a href="/exams/${n.post_id}" class="inline-block px-4 py-2 text-sm bg-primary text-white rounded-md hover:bg-blue-700">查看考试</a>`;
    } else if ((n.type === 'contest_application' || n.type === 'teacher_application') && n.application_status === 'approved') {
        actHtml = '<span class="text-sm text-green-600 font-medium">✅ 已批准</span>';
    } else if ((n.type === 'contest_application' || n.type === 'teacher_application') && n.application_status === 'rejected') {
        actHtml = '<span class="text-sm text-red-600 font-medium">❌ 已拒绝</span>';
    }
    document.getElementById('notifDetailActions').innerHTML = actHtml;
}

function initEmoji() {
    const grid = document.getElementById('emojiGrid');
    EMOJIS.forEach(e => {
        const btn = document.createElement('button');
        btn.className = 'w-8 h-8 text-lg hover:bg-slate-100 rounded flex items-center justify-center';
        btn.textContent = e;
        btn.onclick = () => { insertEmoji(e); };
        grid.appendChild(btn);
    });
}

function insertEmoji(e) {
    const input = document.getElementById('msgInput');
    input.value += e;
    input.focus();
}

function toggleEmoji() {
    document.getElementById('emojiPanel').classList.toggle('hidden');
}

// ========== 聊天室列表 ==========
async function loadRooms() {
    const res = await fetch('/api/chat/rooms');
    const data = await res.json();
    if (data.success) {
        rooms = data.rooms;
        renderRooms();
    }
}

function renderRooms() {
    const search = document.getElementById('roomSearch').value.toLowerCase();
    const list = document.getElementById('roomList');
    const filtered = rooms.filter(r => (r.name || '').toLowerCase().includes(search));
    list.innerHTML = filtered.map(r => `
        <div class="flex items-center gap-3 px-3 py-3 cursor-pointer hover:bg-slate-50 transition ${currentRoomId === r.id ? 'bg-blue-50 border-r-2 border-primary' : ''}" onclick="selectRoom(${r.id})">
            <div class="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center flex-shrink-0 overflow-hidden">
                ${r.avatar ? `<img src="${r.avatar}" class="w-full h-full object-cover">` :
                  `<span class="text-sm font-medium text-slate-500">${(r.name || '?')[0]}</span>`}
            </div>
            <div class="flex-1 min-w-0">
                <div class="flex justify-between items-center">
                    <span class="text-sm font-medium text-slate-800 truncate">${escHtml(r.name || '未命名')}</span>
                    <span class="text-xs text-slate-400 flex-shrink-0">${r.last_message ? formatTime(r.last_message.created_at) : ''}</span>
                </div>
                <div class="flex justify-between items-center mt-0.5">
                    <span class="text-xs text-slate-400 truncate">${r.last_message ? escHtml(getPreview(r)) : '暂无消息'}</span>
                    ${r.unread > 0 ? `<span class="bg-red-500 text-white text-xs rounded-full px-1.5 min-w-[18px] text-center flex-shrink-0">${r.unread > 99 ? '99+' : r.unread}</span>` : ''}
                </div>
            </div>
        </div>
    `).join('');
}

function getPreview(r) {
    if (!r.last_message) return '';
    const lm = r.last_message;
    let text = lm.content || '';
    if (lm.type === 'image') text = '[图片]';
    else if (lm.type === 'file') text = '[文件]';
    if (r.type !== 'private' && lm.sender_name) text = lm.sender_name + ': ' + text;
    return text;
}

function filterRooms() { renderRooms(); }

// ========== 选择聊天室 ==========
async function selectRoom(roomId) {
    currentRoomId = roomId;
    oldestMsgId = null;
    document.getElementById('emptyState').classList.add('hidden');
    // 隐藏通知详情
    const nd = document.getElementById('notifDetailView');
    nd.classList.add('hidden');
    nd.classList.remove('flex');
    const cv = document.getElementById('chatView');
    cv.classList.remove('hidden');
    cv.classList.add('flex');
    const room = rooms.find(r => r.id === roomId);
    if (room) {
        document.getElementById('chatName').textContent = room.name || '聊天';
        document.getElementById('chatMemberCount').textContent = room.type !== 'private' ? `(${room.member_count}人)` : '';
    }
    renderRooms();
    await loadMessages(roomId);
    markRead(roomId);
}
// ========== 消息加载与渲染 ==========
async function loadMessages(roomId, beforeId) {
    let url = `/api/chat/rooms/${roomId}/messages?limit=30`;
    if (beforeId) url += `&before_id=${beforeId}`;
    const res = await fetch(url);
    const data = await res.json();
    if (!data.success) return;
    const area = document.getElementById('messageArea');
    if (!beforeId) {
        area.innerHTML = '';
        data.messages.forEach(m => area.appendChild(createMsgEl(m)));
        area.scrollTop = area.scrollHeight;
    } else {
        const oldH = area.scrollHeight;
        data.messages.forEach((m, i) => area.insertBefore(createMsgEl(m), area.children[i]));
        area.scrollTop = area.scrollHeight - oldH;
    }
    if (data.messages.length > 0) oldestMsgId = data.messages[0].id;
    loadingMore = false;
}

function handleScroll() {
    const area = document.getElementById('messageArea');
    if (area.scrollTop < 50 && !loadingMore && oldestMsgId && currentRoomId) {
        loadingMore = true;
        loadMessages(currentRoomId, oldestMsgId);
    }
}

function createMsgEl(msg) {
    const div = document.createElement('div');
    div.id = `msg-${msg.id}`;
    div.dataset.msgId = msg.id;
    if (msg.type === 'system') {
        div.className = 'text-center';
        div.innerHTML = `<span class="text-xs text-slate-400 bg-slate-100 px-3 py-1 rounded-full">${escHtml(msg.content)}</span>`;
        return div;
    }
    const isMe = msg.sender_id === currentUser.id;
    if (msg.recalled) {
        div.className = 'text-center';
        div.innerHTML = `<span class="text-xs text-slate-400">${escHtml(msg.sender_name)} 撤回了一条消息</span>`;
        return div;
    }
    div.className = `flex ${isMe ? 'justify-end' : 'justify-start'} gap-2`;
    const avatarHtml = msg.sender_avatar
        ? `<img src="${msg.sender_avatar}" class="w-8 h-8 rounded-full object-cover flex-shrink-0">`
        : `<div class="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center flex-shrink-0"><span class="text-xs text-slate-500">${(msg.sender_name||'?')[0]}</span></div>`;

    let contentHtml = '';
    if (msg.type === 'image' && msg.file_url) {
        contentHtml = `<img src="${msg.file_url}" class="max-w-[240px] rounded-lg cursor-pointer hover:opacity-90" onclick="previewImage('${msg.file_url}')">`;
    } else if (msg.type === 'file' && msg.file_url) {
        contentHtml = `<a href="${msg.file_url}" download="${escHtml(msg.file_name||'文件')}" class="flex items-center gap-2 text-sm text-primary hover:underline">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            ${escHtml(msg.file_name||'文件')}</a>`;
    } else if (msg.type === 'voice' && msg.file_url) {
        contentHtml = `<div class="flex items-center gap-2 cursor-pointer voice-msg" onclick="playVoice(this, '${msg.file_url}')">
            <svg class="w-5 h-5 text-current" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072M12 6v12m-3.536-2.464a5 5 0 010-7.072"/></svg>
            <span class="text-sm">${escHtml(msg.content || '语音')}</span>
            <div class="voice-bars flex items-end gap-0.5 h-4"><span class="w-0.5 bg-current rounded-full" style="height:40%"></span><span class="w-0.5 bg-current rounded-full" style="height:70%"></span><span class="w-0.5 bg-current rounded-full" style="height:100%"></span><span class="w-0.5 bg-current rounded-full" style="height:60%"></span><span class="w-0.5 bg-current rounded-full" style="height:30%"></span></div>
        </div>`;
    } else {
        contentHtml = `<span class="whitespace-pre-wrap break-words">${renderRichContent(msg.content)}</span>`;
    }

    // 表情回应
    let reactionsHtml = '';
    if (msg.reactions && Object.keys(msg.reactions).length > 0) {
        const items = Object.entries(msg.reactions).map(([emoji, data]) =>
            `<button class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-xs border ${data.users.some(u=>u.id===currentUser.id) ? 'bg-indigo-50 border-indigo-200 text-indigo-600' : 'bg-slate-50 border-slate-200 text-slate-500'} hover:bg-indigo-50 transition" onclick="toggleReaction(${msg.id},'${emoji}')" title="${data.users.map(u=>u.name).join(', ')}">${emoji} ${data.count}</button>`
        ).join('');
        reactionsHtml = `<div class="flex flex-wrap gap-1 mt-1" id="reactions-${msg.id}">${items}</div>`;
    } else {
        reactionsHtml = `<div class="flex flex-wrap gap-1 mt-1" id="reactions-${msg.id}"></div>`;
    }

    let replyHtml = '';
    if (msg.reply_to) {
        replyHtml = `<div class="text-xs text-slate-400 mb-1 px-2 py-1 bg-slate-50 rounded border-l-2 border-slate-300 truncate">回复 ${escHtml(msg.reply_to.sender_name)}: ${escHtml(msg.reply_to.content)}</div>`;
    }

    const bubbleColor = isMe ? 'bg-primary text-white' : 'bg-white border border-slate-200 text-slate-800';
    const nameHtml = !isMe ? `<div class="text-xs text-slate-400 mb-0.5">${escHtml(msg.sender_name)}</div>` : '';

    const readStatus = isMe && rooms.find(r=>r.id===currentRoomId)?.type === 'private'
        ? `<div class="text-xs text-slate-400 mt-0.5 text-right" id="read-${msg.id}"></div>` : '';

    if (isMe) {
        div.innerHTML = `
            <div class="max-w-[70%] flex flex-col items-end">
                ${replyHtml}
                <div class="${bubbleColor} px-3 py-2 rounded-xl rounded-tr-sm text-sm shadow-sm cursor-pointer" oncontextmenu="showMsgMenu(event,${msg.id},true)">${contentHtml}</div>
                ${reactionsHtml}
                <div class="text-xs text-slate-400 mt-0.5">${formatTime(msg.created_at)}</div>
                ${readStatus}
            </div>
            ${avatarHtml}`;
    } else {
        div.innerHTML = `
            ${avatarHtml}
            <div class="max-w-[70%]">
                ${nameHtml}${replyHtml}
                <div class="${bubbleColor} px-3 py-2 rounded-xl rounded-tl-sm text-sm shadow-sm cursor-pointer" oncontextmenu="showMsgMenu(event,${msg.id},false)">${contentHtml}</div>
                ${reactionsHtml}
                <div class="text-xs text-slate-400 mt-0.5">${formatTime(msg.created_at)}</div>
            </div>`;
    }
    return div;
}
// ========== 发送消息 ==========
function sendMessage() {
    const input = document.getElementById('msgInput');
    const content = input.value.trim();
    if (!content || !currentRoomId) return;
    const mentionsStr = mentionMembers.length > 0 ? (mentionMembers.includes('all') ? 'all' : JSON.stringify(mentionMembers)) : '';
    socket.emit('send_message', {
        room_id: currentRoomId, type: 'text', content: content,
        reply_to_id: replyToId, mentions: mentionsStr
    });
    input.value = '';
    mentionMembers = [];
    cancelReply();
    document.getElementById('emojiPanel').classList.add('hidden');
}

function handleInputKey(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
    }
    // @ 触发提及面板
    if (e.key === '@' || e.key === '2' && e.shiftKey) {
        setTimeout(() => insertMention(), 50);
    }
}

let typingTimer = null;
function handleTyping() {
    if (!currentRoomId) return;
    if (!typingTimer) {
        socket.emit('typing', { room_id: currentRoomId });
    }
    clearTimeout(typingTimer);
    typingTimer = setTimeout(() => { typingTimer = null; }, 2000);
}

// ========== 文件上传 ==========
async function uploadFile(input, type) {
    if (!input.files[0] || !currentRoomId) return;
    const fd = new FormData();
    fd.append('file', input.files[0]);
    const fileName = input.files[0].name;
    const res = await fetch('/api/upload', { method: 'POST', body: fd });
    const data = await res.json();
    if (data.success) {
        socket.emit('send_message', {
            room_id: currentRoomId,
            type: type,
            content: type === 'image' ? '[图片]' : fileName,
            file_url: data.url,
            file_name: fileName,
            reply_to_id: replyToId
        });
        cancelReply();
    } else {
        alert(data.message || '上传失败');
    }
    input.value = '';
}

// ========== 引用回复 ==========
function setReply(msgId) {
    const msgEl = document.getElementById(`msg-${msgId}`);
    if (!msgEl) return;
    replyToId = msgId;
    const text = msgEl.querySelector('.whitespace-pre-wrap')?.textContent || '[消息]';
    document.getElementById('replyToText').textContent = '回复: ' + text.substring(0, 30);
    document.getElementById('replyPreview').classList.remove('hidden');
    document.getElementById('msgInput').focus();
    hideMsgMenu();
}

function cancelReply() {
    replyToId = null;
    document.getElementById('replyPreview').classList.add('hidden');
}

// ========== 消息右键菜单 ==========
let msgMenuEl = null;
function showMsgMenu(e, msgId, isMe) {
    e.preventDefault();
    hideMsgMenu();
    const menu = document.createElement('div');
    menu.id = 'msgContextMenu';
    menu.className = 'fixed bg-white border border-slate-200 rounded-lg shadow-lg py-1 z-50';
    menu.style.left = e.clientX + 'px';
    menu.style.top = e.clientY + 'px';
    menu.innerHTML = `
        <div class="flex gap-1 px-2 py-1.5 border-b border-slate-100">${EMOJIS.slice(0,8).map(e => `<button class="w-7 h-7 text-base hover:bg-slate-100 rounded flex items-center justify-center" onclick="toggleReaction(${msgId},'${e}')">${e}</button>`).join('')}</div>
        <button class="w-full px-4 py-2 text-sm text-left hover:bg-slate-50" onclick="setReply(${msgId})">引用回复</button>
        <button class="w-full px-4 py-2 text-sm text-left hover:bg-slate-50" onclick="copyMsg(${msgId})">复制文字</button>
        ${isMe ? `<button class="w-full px-4 py-2 text-sm text-left text-red-500 hover:bg-red-50" onclick="recallMsg(${msgId})">撤回</button>` : ''}
    `;
    document.body.appendChild(menu);
    msgMenuEl = menu;
    setTimeout(() => document.addEventListener('click', hideMsgMenu, { once: true }), 10);
}

function hideMsgMenu() {
    if (msgMenuEl) { msgMenuEl.remove(); msgMenuEl = null; }
}

function copyMsg(msgId) {
    const el = document.querySelector(`#msg-${msgId} .whitespace-pre-wrap`);
    if (el) navigator.clipboard.writeText(el.textContent);
    hideMsgMenu();
}

async function recallMsg(msgId) {
    hideMsgMenu();
    const res = await fetch(`/api/chat/messages/${msgId}/recall`, { method: 'POST' });
    const data = await res.json();
    if (!data.success) alert(data.message || '撤回失败');
}

// ========== 图片预览 ==========
function previewImage(url) {
    document.getElementById('previewImg').src = url;
    document.getElementById('imagePreview').classList.remove('hidden');
}

// ========== 标记已读 ==========
function markRead(roomId) {
    fetch(`/api/chat/rooms/${roomId}/read`, { method: 'POST' });
    socket.emit('mark_read', { room_id: roomId });
    const room = rooms.find(r => r.id === roomId);
    if (room) { room.unread = 0; renderRooms(); }
}

// ========== 创建群聊 ==========
async function showCreateGroup() {
    document.getElementById('createGroupModal').classList.remove('hidden');
    const res = await fetch('/api/user/friends');
    const data = await res.json();
    const list = document.getElementById('friendListForGroup');
    if (data.success && data.friends.length > 0) {
        list.innerHTML = data.friends.map(f => `
            <label class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-slate-50 cursor-pointer">
                <input type="checkbox" value="${f.id}" class="friend-check rounded">
                <div class="w-7 h-7 rounded-full bg-slate-200 flex items-center justify-center overflow-hidden flex-shrink-0">
                    ${f.avatar ? `<img src="${f.avatar}" class="w-full h-full object-cover">` : `<span class="text-xs">${f.name[0]}</span>`}
                </div>
                <span class="text-sm">${escHtml(f.name)}</span>
            </label>
        `).join('');
    } else {
        list.innerHTML = '<p class="text-sm text-slate-400 text-center py-4">暂无好友，请先添加好友</p>';
    }
}

function hideCreateGroup() { document.getElementById('createGroupModal').classList.add('hidden'); }

async function createGroup() {
    const name = document.getElementById('groupName').value.trim();
    if (!name) return alert('请输入群名称');
    const ids = [...document.querySelectorAll('.friend-check:checked')].map(c => parseInt(c.value));
    const res = await fetch('/api/chat/rooms', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, member_ids: ids })
    });
    const data = await res.json();
    if (data.success) {
        hideCreateGroup();
        await loadRooms();
        selectRoom(data.room_id);
    } else {
        alert(data.message || '创建失败');
    }
}

// ========== 成员列表 ==========
async function showMembers() {
    if (!currentRoomId) return;
    document.getElementById('membersModal').classList.remove('hidden');
    const res = await fetch(`/api/chat/rooms/${currentRoomId}/members`);
    const data = await res.json();
    if (!data.success) return;
    currentRoomMembers = data.members;
    currentRoomCreatorId = data.creator_id;
    myRoomRole = data.members.find(m => m.id === currentUser.id)?.role || 'member';
    const isAdmin = myRoomRole === 'admin';
    const isCreator = currentUser.id === data.creator_id;
    const room = rooms.find(r => r.id === currentRoomId);
    const isGroup = room && room.type !== 'private';
    const list = document.getElementById('membersList');
    list.innerHTML = data.members.map(m => {
        const roleTag = m.is_creator ? '<span class="text-xs bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded">群主</span>'
            : m.role === 'admin' ? '<span class="text-xs bg-indigo-100 text-indigo-700 px-1.5 py-0.5 rounded">管理员</span>' : '';
        const mutedTag = m.muted ? '<span class="text-xs bg-red-100 text-red-600 px-1.5 py-0.5 rounded">已禁言</span>' : '';
        const nicknameTag = m.nickname ? `<span class="text-xs text-slate-400">(${escHtml(m.nickname)})</span>` : '';
        let actions = '';
        if (isGroup && m.id !== currentUser.id) {
            if (isAdmin && !m.is_creator) {
                actions += `<button onclick="muteMember(${m.id})" class="text-xs ${m.muted ? 'text-green-500 hover:text-green-700' : 'text-orange-500 hover:text-orange-700'}">${m.muted ? '解禁' : '禁言'}</button>`;
                actions += `<button onclick="kickMember(${m.id},'${escHtml(m.name)}')" class="text-xs text-red-500 hover:text-red-700">移除</button>`;
            }
            if (isCreator && !m.is_creator) {
                actions += `<button onclick="setAdmin(${m.id})" class="text-xs text-indigo-500 hover:text-indigo-700">${m.role === 'admin' ? '取消管理' : '设为管理'}</button>`;
                actions += `<button onclick="transferOwner(${m.id},'${escHtml(m.name)}')" class="text-xs text-amber-500 hover:text-amber-700">转让群主</button>`;
            }
        }
        return `<div class="flex items-center gap-3 py-2 px-2 rounded-lg hover:bg-slate-50">
            <div class="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center overflow-hidden flex-shrink-0">
                ${m.avatar ? `<img src="${m.avatar}" class="w-full h-full object-cover">` : `<span class="text-xs">${m.name[0]}</span>`}
            </div>
            <div class="flex-1 min-w-0">
                <div class="flex items-center gap-1.5 flex-wrap">
                    <span class="text-sm font-medium">${escHtml(m.name)}</span>${nicknameTag}${roleTag}${mutedTag}
                </div>
            </div>
            <div class="flex items-center gap-2 flex-shrink-0">${actions}</div>
        </div>`;
    }).join('');
    document.getElementById('inviteSection').classList.toggle('hidden', !isGroup);
}

function hideMembers() { document.getElementById('membersModal').classList.add('hidden'); }

async function showInvite() {
    hideMembers();
    showCreateGroup();
    document.querySelector('#createGroupModal h3').textContent = '邀请好友';
    const btn = document.querySelector('#createGroupModal .bg-primary');
    btn.textContent = '邀请';
    btn.onclick = async () => {
        const ids = [...document.querySelectorAll('.friend-check:checked')].map(c => parseInt(c.value));
        if (ids.length === 0) return;
        const res = await fetch(`/api/chat/rooms/${currentRoomId}/members`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ user_ids: ids })
        });
        const data = await res.json();
        hideCreateGroup();
        if (data.success) loadRooms();
    };
}

// ========== 群管理操作 ==========
async function muteMember(uid) {
    const res = await fetch(`/api/chat/rooms/${currentRoomId}/mute/${uid}`, { method: 'POST' });
    const data = await res.json();
    if (data.success) showMembers();
    else alert(data.message || '操作失败');
}

async function kickMember(uid, name) {
    if (!confirm(`确定移除 ${name} ？`)) return;
    const res = await fetch(`/api/chat/rooms/${currentRoomId}/members/${uid}`, { method: 'DELETE' });
    const data = await res.json();
    if (data.success) { showMembers(); loadRooms(); }
    else alert(data.message || '操作失败');
}

async function setAdmin(uid) {
    const res = await fetch(`/api/chat/rooms/${currentRoomId}/set-admin/${uid}`, { method: 'POST' });
    const data = await res.json();
    if (data.success) showMembers();
    else alert(data.message || '操作失败');
}

async function transferOwner(uid, name) {
    if (!confirm(`确定将群主转让给 ${name} ？此操作不可撤销！`)) return;
    const res = await fetch(`/api/chat/rooms/${currentRoomId}/transfer/${uid}`, { method: 'POST' });
    const data = await res.json();
    if (data.success) { showMembers(); loadRooms(); }
    else alert(data.message || '操作失败');
}

// ========== 群公告 ==========
async function showAnnouncement() {
    if (!currentRoomId) return;
    document.getElementById('announcementModal').classList.remove('hidden');
    const res = await fetch(`/api/chat/rooms/${currentRoomId}/announcement`);
    const data = await res.json();
    if (data.success) {
        const display = document.getElementById('announcementDisplay');
        const meta = document.getElementById('announcementMeta');
        display.textContent = data.announcement || '暂无公告';
        if (data.by) {
            meta.textContent = `${data.by} 发布于 ${data.at}`;
            meta.classList.remove('hidden');
        } else { meta.classList.add('hidden'); }
    }
    document.getElementById('announcementEditSection').classList.add('hidden');
    // 检查是否管理员
    if (!currentRoomMembers.length) {
        const mRes = await fetch(`/api/chat/rooms/${currentRoomId}/members`);
        const mData = await mRes.json();
        if (mData.success) { currentRoomMembers = mData.members; myRoomRole = mData.members.find(m => m.id === currentUser.id)?.role || 'member'; }
    }
    document.getElementById('btnEditAnnouncement').classList.toggle('hidden', myRoomRole !== 'admin');
}
function hideAnnouncement() { document.getElementById('announcementModal').classList.add('hidden'); }
function editAnnouncement() {
    document.getElementById('announcementEditSection').classList.remove('hidden');
    document.getElementById('btnEditAnnouncement').classList.add('hidden');
    document.getElementById('announcementInput').value = document.getElementById('announcementDisplay').textContent === '暂无公告' ? '' : document.getElementById('announcementDisplay').textContent;
}
function cancelEditAnnouncement() {
    document.getElementById('announcementEditSection').classList.add('hidden');
    document.getElementById('btnEditAnnouncement').classList.remove('hidden');
}
async function saveAnnouncement() {
    const content = document.getElementById('announcementInput').value.trim();
    const res = await fetch(`/api/chat/rooms/${currentRoomId}/announcement`, {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content })
    });
    const data = await res.json();
    if (data.success) { hideAnnouncement(); showAnnouncement(); }
    else alert(data.message || '操作失败');
}

// ========== 搜索聊天记录 ==========
function showSearchPanel() { if (!currentRoomId) return; document.getElementById('searchModal').classList.remove('hidden'); document.getElementById('msgSearchInput').value = ''; document.getElementById('searchResults').innerHTML = ''; document.getElementById('msgSearchInput').focus(); }
function hideSearchPanel() { document.getElementById('searchModal').classList.add('hidden'); }
function debounceSearch() { clearTimeout(searchTimer); searchTimer = setTimeout(doSearch, 300); }
async function doSearch() {
    const q = document.getElementById('msgSearchInput').value.trim();
    const container = document.getElementById('searchResults');
    if (!q) { container.innerHTML = ''; return; }
    const res = await fetch(`/api/chat/rooms/${currentRoomId}/search?q=${encodeURIComponent(q)}`);
    const data = await res.json();
    if (!data.success) return;
    if (data.messages.length === 0) { container.innerHTML = '<p class="text-sm text-slate-400 text-center py-4">未找到相关消息</p>'; return; }
    container.innerHTML = data.messages.map(m => `
        <div class="p-3 bg-slate-50 rounded-lg hover:bg-slate-100 cursor-pointer transition" onclick="hideSearchPanel();scrollToMsg(${m.id})">
            <div class="flex justify-between items-center mb-1">
                <span class="text-xs font-medium text-slate-600">${escHtml(m.sender_name)}</span>
                <span class="text-xs text-slate-400">${m.created_at}</span>
            </div>
            <p class="text-sm text-slate-700 line-clamp-2">${escHtml(m.content)}</p>
        </div>
    `).join('');
}
function scrollToMsg(msgId) {
    const el = document.getElementById(`msg-${msgId}`);
    if (el) { el.scrollIntoView({ behavior: 'smooth', block: 'center' }); el.style.background = '#fef3c7'; setTimeout(() => el.style.background = '', 2000); }
}

// ========== 群文件 ==========
async function showFileList() {
    if (!currentRoomId) return;
    document.getElementById('fileListModal').classList.remove('hidden');
    const res = await fetch(`/api/chat/rooms/${currentRoomId}/files`);
    const data = await res.json();
    const container = document.getElementById('fileListContent');
    if (!data.success || data.files.length === 0) { container.innerHTML = '<p class="text-sm text-slate-400 text-center py-8">暂无文件</p>'; return; }
    container.innerHTML = data.files.map(f => {
        const icon = f.type === 'image' ? '🖼️' : '📄';
        return `<div class="flex items-center gap-3 p-3 bg-slate-50 rounded-lg hover:bg-slate-100 transition">
            <span class="text-xl">${icon}</span>
            <div class="flex-1 min-w-0">
                <div class="text-sm font-medium text-slate-700 truncate">${escHtml(f.file_name)}</div>
                <div class="text-xs text-slate-400">${escHtml(f.sender_name)} · ${f.created_at}</div>
            </div>
            <a href="${f.file_url}" download="${escHtml(f.file_name)}" class="text-xs text-primary hover:text-blue-700 flex-shrink-0" ${f.type === 'image' ? `onclick="event.preventDefault();previewImage('${f.file_url}')"` : ''}>
                ${f.type === 'image' ? '查看' : '下载'}
            </a>
        </div>`;
    }).join('');
}
function hideFileList() { document.getElementById('fileListModal').classList.add('hidden'); }

// ========== 群昵称 ==========
function showNicknameModal() { document.getElementById('nicknameModal').classList.remove('hidden'); const me = currentRoomMembers.find(m => m.id === currentUser.id); document.getElementById('nicknameInput').value = me?.nickname || ''; }
function hideNicknameModal() { document.getElementById('nicknameModal').classList.add('hidden'); }
async function saveNickname() {
    const nickname = document.getElementById('nicknameInput').value.trim();
    const res = await fetch(`/api/chat/rooms/${currentRoomId}/nickname`, {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ nickname })
    });
    const data = await res.json();
    if (data.success) { hideNicknameModal(); showMembers(); }
    else alert(data.message || '操作失败');
}

// ========== 表情回应 ==========
async function toggleReaction(msgId, emoji) {
    hideMsgMenu();
    const res = await fetch(`/api/chat/messages/${msgId}/reactions`, {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ emoji })
    });
    const data = await res.json();
    if (data.success) updateReactionsUI(msgId, data.reactions);
}
function updateReactionsUI(msgId, reactions) {
    const container = document.getElementById(`reactions-${msgId}`);
    if (!container) return;
    if (!reactions || Object.keys(reactions).length === 0) { container.innerHTML = ''; return; }
    container.innerHTML = Object.entries(reactions).map(([emoji, data]) =>
        `<button class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-xs border ${data.users.some(u=>u.id===currentUser.id) ? 'bg-indigo-50 border-indigo-200 text-indigo-600' : 'bg-slate-50 border-slate-200 text-slate-500'} hover:bg-indigo-50 transition" onclick="toggleReaction(${msgId},'${emoji}')" title="${data.users.map(u=>u.name).join(', ')}">${emoji} ${data.count}</button>`
    ).join('');
}

// ========== @提及 ==========
async function insertMention() {
    if (!currentRoomId) return;
    if (!currentRoomMembers.length) {
        const res = await fetch(`/api/chat/rooms/${currentRoomId}/members`);
        const data = await res.json();
        if (data.success) currentRoomMembers = data.members;
    }
    showMentionPanel(currentRoomMembers);
}
function showMentionPanel(members) {
    const panel = document.getElementById('mentionPanel');
    const list = document.getElementById('mentionList');
    list.innerHTML = `<button class="w-full px-3 py-2 text-sm text-left hover:bg-indigo-50 text-indigo-600 font-medium" onclick="doMention('all','所有人')">@所有人</button>` +
        members.filter(m => m.id !== currentUser.id).map(m =>
            `<button class="w-full px-3 py-2 text-sm text-left hover:bg-slate-50 flex items-center gap-2" onclick="doMention(${m.id},'${escHtml(m.name)}')">
                <div class="w-5 h-5 rounded-full bg-slate-200 flex items-center justify-center overflow-hidden flex-shrink-0">${m.avatar ? `<img src="${m.avatar}" class="w-full h-full object-cover">` : `<span class="text-[10px]">${m.name[0]}</span>`}</div>
                ${escHtml(m.name)}</button>`
        ).join('');
    panel.classList.remove('hidden');
    setTimeout(() => document.addEventListener('click', closeMentionPanel, { once: true }), 10);
}
function closeMentionPanel() { document.getElementById('mentionPanel').classList.add('hidden'); }
function doMention(id, name) {
    const input = document.getElementById('msgInput');
    input.value += `@${name} `;
    input.focus();
    if (!mentionMembers.includes(id)) mentionMembers.push(id);
    closeMentionPanel();
}

// ========== 语音消息 ==========
function playVoice(el, url) {
    const existing = document.querySelector('audio.chat-voice-player');
    if (existing) { existing.pause(); existing.remove(); }
    const audio = new Audio(url);
    audio.className = 'chat-voice-player';
    audio.style.display = 'none';
    document.body.appendChild(audio);
    el.classList.add('opacity-60');
    audio.play();
    audio.onended = () => { el.classList.remove('opacity-60'); audio.remove(); };
}

async function startRecording() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        mediaRecorder = new MediaRecorder(stream);
        audioChunks = [];
        mediaRecorder.ondataavailable = e => { if (e.data.size > 0) audioChunks.push(e.data); };
        mediaRecorder.start();
        recordingStartTime = Date.now();
        document.getElementById('recordingIndicator').classList.remove('hidden');
        document.getElementById('voiceBtn').classList.add('bg-rose-100', 'text-rose-500');
        recordingInterval = setInterval(() => {
            const sec = Math.floor((Date.now() - recordingStartTime) / 1000);
            document.getElementById('recordingTime').textContent = sec + 's';
        }, 200);
    } catch(e) { alert('无法访问麦克风，请检查权限设置'); }
}

async function stopRecording() {
    if (!mediaRecorder || mediaRecorder.state !== 'recording') return;
    clearInterval(recordingInterval);
    document.getElementById('recordingIndicator').classList.add('hidden');
    document.getElementById('voiceBtn').classList.remove('bg-rose-100', 'text-rose-500');
    const duration = Math.floor((Date.now() - recordingStartTime) / 1000);
    if (duration < 1) { mediaRecorder.stop(); mediaRecorder.stream.getTracks().forEach(t => t.stop()); return; }
    mediaRecorder.onstop = async () => {
        mediaRecorder.stream.getTracks().forEach(t => t.stop());
        const blob = new Blob(audioChunks, { type: 'audio/webm' });
        const fd = new FormData();
        fd.append('file', blob, 'voice.webm');
        fd.append('duration', duration);
        await fetch(`/api/chat/rooms/${currentRoomId}/voice`, { method: 'POST', body: fd });
    };
    mediaRecorder.stop();
}

// ========== SocketIO 事件监听 ==========
socket.on('new_message', (msg) => {
    if (msg.room_id === currentRoomId) {
        const area = document.getElementById('messageArea');
        area.appendChild(createMsgEl(msg));
        area.scrollTop = area.scrollHeight;
        markRead(currentRoomId);
    }
    // 更新会话列表
    const room = rooms.find(r => r.id === msg.room_id);
    if (room) {
        room.last_message = {
            content: msg.content, sender_name: msg.sender_name,
            created_at: msg.created_at, type: msg.type
        };
        if (msg.room_id !== currentRoomId) room.unread = (room.unread || 0) + 1;
        rooms.sort((a, b) => {
            const ta = a.last_message?.created_at || '';
            const tb = b.last_message?.created_at || '';
            return tb.localeCompare(ta);
        });
        renderRooms();
    } else {
        loadRooms();
    }
});

socket.on('message_recalled', (data) => {
    const el = document.getElementById(`msg-${data.message_id}`);
    if (el) {
        el.className = 'text-center';
        el.innerHTML = `<span class="text-xs text-slate-400">消息已撤回</span>`;
    }
});

socket.on('user_typing', (data) => {
    if (data.room_id === currentRoomId) {
        const ind = document.getElementById('typingIndicator');
        ind.textContent = `${data.user_name} 正在输入...`;
        ind.classList.remove('hidden');
        clearTimeout(ind._timer);
        ind._timer = setTimeout(() => ind.classList.add('hidden'), 3000);
    }
});

socket.on('read_update', (data) => {
    if (data.room_id === currentRoomId && data.user_id !== currentUser.id) {
        // 私聊已读回执
        const room = rooms.find(r => r.id === currentRoomId);
        if (room?.type === 'private') {
            document.querySelectorAll('[id^="read-"]').forEach(el => {
                el.textContent = '已读';
            });
        }
    }
});

socket.on('room_updated', () => { loadRooms(); });

socket.on('reaction_updated', (data) => {
    if (data.room_id === currentRoomId) {
        updateReactionsUI(data.message_id, data.reactions);
    }
});

socket.on('announcement_updated', (data) => {
    if (data.room_id === currentRoomId) {
        // 如果公告弹窗打开则刷新
        if (!document.getElementById('announcementModal').classList.contains('hidden')) {
            showAnnouncement();
        }
    }
});

socket.on('error', (data) => {
    if (data.message) alert(data.message);
});

// ========== 工具函数 ==========
function escHtml(s) {
    if (!s) return '';
    const d = document.createElement('div');
    d.textContent = s;
    return d.innerHTML;
}

function formatTime(ts) {
    if (!ts) return '';
    const d = new Date(ts.replace(' ', 'T'));
    const now = new Date();
    const diff = now - d;
    if (diff < 60000) return '刚刚';
    if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前';
    if (d.toDateString() === now.toDateString()) return ts.substring(11, 16);
    return ts.substring(5, 16);
}
</script>
{% endblock %}