{include file="public/header" /}
<style>
/* 客服工作台整体样式 */
.chat-workbench {
    display: flex;
    height: calc(100vh - 60px);
    background: #f5f5f5;
    gap: 10px;
    padding: 10px;
}

/* 左侧会话列表 */
.chat-sessions {
    width: 280px;
    min-width: 280px;
    background: #fff;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.sessions-header {
    padding: 15px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sessions-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}
.sessions-tabs {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
}
.sessions-tabs .tab-item {
    flex: 1;
    padding: 12px 0;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}
.sessions-tabs .tab-item:hover {
    color: #009688;
}
.sessions-tabs .tab-item.active {
    color: #009688;
    border-bottom-color: #009688;
}
.sessions-tabs .tab-item .badge {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    font-size: 11px;
    background: #ff5722;
    color: #fff;
    border-radius: 9px;
    margin-left: 4px;
}
.sessions-list {
    flex: 1;
    overflow-y: auto;
}
.session-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.2s;
}
.session-item:hover {
    background: #f8f9fa;
}
.session-item.active {
    background: #e8f5e9;
    border-left: 3px solid #009688;
}
.session-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #009688, #4db6ac);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin-right: 12px;
    flex-shrink: 0;
    position: relative;
}
.session-avatar .online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #4caf50;
    border: 2px solid #fff;
    border-radius: 50%;
}
.session-info {
    flex: 1;
    min-width: 0;
}
.session-info .name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.session-info .username {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.session-info .time {
    font-size: 11px;
    color: #999;
    flex-shrink: 0;
    margin-left: 8px;
}
.session-info .last-msg {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.session-badge {
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
    font-size: 11px;
    background: #ff5722;
    color: #fff;
    border-radius: 10px;
    text-align: center;
    margin-left: 8px;
}
.sessions-empty {
    padding: 40px 20px;
    text-align: center;
    color: #999;
}
.sessions-empty i {
    font-size: 48px;
    color: #ddd;
    margin-bottom: 10px;
}
.accept-btn {
    padding: 4px 10px;
    background: #009688;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 8px;
    transition: background 0.2s;
}
.accept-btn:hover {
    background: #00796b;
}

/* 中间聊天区域 */
.chat-main {
    flex: 1;
    background: #fff;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    min-width: 0;
}
.chat-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chat-header .chat-title {
    display: flex;
    align-items: center;
}
.chat-header .chat-title h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}
.chat-header .chat-status {
    display: flex;
    align-items: center;
    margin-left: 15px;
    font-size: 12px;
}
.chat-header .chat-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
}
.chat-header .chat-status .status-dot.online {
    background: #4caf50;
}
.chat-header .chat-status .status-dot.offline {
    background: #9e9e9e;
}
.ws-status {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    background: #ffebee;
    color: #e53935;
}
.ws-status.connected {
    background: #e8f5e9;
    color: #43a047;
}
.ws-status i {
    margin-right: 4px;
}

/* 消息区域 */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #f5f5f5;
}
.message-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
}
.message-placeholder i {
    font-size: 64px;
    color: #ddd;
    margin-bottom: 15px;
}
.message-placeholder p {
    font-size: 14px;
}
.message-group {
    margin-bottom: 20px;
}
.message-date {
    text-align: center;
    margin: 15px 0;
}
.message-date span {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(0,0,0,0.1);
    border-radius: 12px;
    font-size: 11px;
    color: #666;
}
.message-row {
    display: flex;
    margin-bottom: 12px;
}
.message-row.user {
    justify-content: flex-start;
}
.message-row.agent {
    justify-content: flex-end;
}
.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #009688;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
}
.message-row.user .message-avatar {
    margin-right: 10px;
    background: #607d8b;
}
.message-row.agent .message-avatar {
    margin-left: 10px;
    order: 2;
}
.message-content {
    max-width: 60%;
}
.message-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}
.message-row.user .message-bubble {
    background: #fff;
    color: #333;
    border-top-left-radius: 4px;
}
.message-row.agent .message-bubble {
    background: #009688;
    color: #fff;
    border-top-right-radius: 4px;
}
.message-bubble img {
    max-width: 200px;
    border-radius: 8px;
    cursor: pointer;
}
.message-time {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}
.message-row.agent .message-time {
    text-align: right;
}
.typing-indicator {
    display: none;
    padding: 10px 20px;
    color: #999;
    font-size: 12px;
}
.typing-indicator.show {
    display: block;
}

/* 输入区域 */
.chat-input-area {
    border-top: 1px solid #e8e8e8;
    background: #fff;
}
.input-toolbar {
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid #f0f0f0;
}
.input-toolbar .tool-btn {
    height: 28px;
    padding: 0 12px;
    border: 1px solid #e8e8e8;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 12px;
    transition: all 0.2s;
}
.input-toolbar .tool-btn:hover:not(:disabled) {
    background: #f5f5f5;
    color: #009688;
    border-color: #009688;
}
.input-toolbar .tool-btn:disabled {
    color: #ccc;
    cursor: not-allowed;
    border-color: #eee;
}
.input-wrapper {
    padding: 10px 15px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.input-wrapper textarea {
    flex: 1;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    resize: none;
    outline: none;
    min-height: 60px;
    max-height: 120px;
    transition: border-color 0.2s;
}
.input-wrapper textarea:focus {
    border-color: #009688;
}
.input-wrapper textarea:disabled {
    background: #f5f5f5;
}
.send-btn {
    padding: 10px 24px;
    background: #009688;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.send-btn:hover:not(:disabled) {
    background: #00796b;
}
.send-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* 快捷回复面板 */
.quick-reply-panel {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
}
.quick-reply-panel.show {
    display: block;
}
.quick-reply-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.2s;
}
.quick-reply-item:hover {
    background: #f8f9fa;
}
.quick-reply-item .title {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    margin-bottom: 3px;
}
.quick-reply-item .content {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 右侧用户信息面板 */
.chat-user-panel {
    width: 260px;
    min-width: 260px;
    background: #fff;
    border-radius: 4px;
    display: none;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.chat-user-panel.show {
    display: flex;
}
.user-profile {
    padding: 25px 20px;
    text-align: center;
    border-bottom: 1px solid #e8e8e8;
}
.user-profile .avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #009688, #4db6ac);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    margin: 0 auto 12px;
}
.user-profile .username {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}
.user-profile .source-tag {
    display: inline-block;
    padding: 3px 10px;
    background: #e8f5e9;
    color: #009688;
    border-radius: 12px;
    font-size: 12px;
}
.user-details {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
}
.detail-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
}
.detail-item .label {
    font-size: 13px;
    color: #999;
}
.detail-item .value {
    font-size: 13px;
    color: #333;
    font-weight: 500;
}
.detail-item .value.money {
    color: #ff9800;
}
.user-actions {
    padding: 15px;
    border-top: 1px solid #e8e8e8;
}
.user-actions .action-btn {
    width: 100%;
    padding: 10px;
    margin-bottom: 8px;
    border: 1px solid #e8e8e8;
    background: #fff;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-actions .action-btn i {
    margin-right: 6px;
}
.user-actions .action-btn:hover {
    border-color: #009688;
    color: #009688;
}
.user-actions .action-btn.danger {
    color: #e53935;
}
.user-actions .action-btn.danger:hover {
    border-color: #e53935;
    background: #ffebee;
}
</style>
<body>
<div class="chat-workbench">
    <!-- 左侧会话列表 -->
    <div class="chat-sessions">
        <div class="sessions-header">
            <h3>会话列表</h3>
            <button class="layui-btn layui-btn-xs layui-btn-primary" id="refresh-sessions" title="刷新">刷新</button>
        </div>
        <div class="sessions-tabs">
            <div class="tab-item active" data-status="1">
                进行中 <span class="badge" id="active-count">0</span>
            </div>
            <div class="tab-item" data-status="0">
                待接入 <span class="badge" id="pending-count">0</span>
            </div>
        </div>
        <div class="sessions-list">
            <div id="session-list"></div>
            <div id="pending-list" style="display:none;"></div>
        </div>
    </div>

    <!-- 中间聊天窗口 -->
    <div class="chat-main">
        <div class="chat-header">
            <div class="chat-title">
                <h3 id="chat-title">请选择会话</h3>
                <div class="chat-status" id="user-status" style="display:none;">
                    <span class="status-dot online"></span>
                    <span>在线</span>
                </div>
            </div>
            <div class="chat-header-actions">
                <span class="ws-status" id="ws-status">未连接</span>
                <button class="layui-btn layui-btn-xs layui-btn-danger" id="end-session" style="display:none;margin-left:10px;">结束会话</button>
            </div>
        </div>
        <div class="chat-messages" id="message-area">
            <div class="message-placeholder">
                <div style="font-size:48px;color:#ddd;margin-bottom:15px;">💬</div>
                <p>请从左侧选择一个会话开始聊天</p>
            </div>
        </div>
        <div class="typing-indicator" id="typing-indicator">
            用户正在输入...
        </div>
        <div class="chat-input-area" style="position:relative;">
            <div class="quick-reply-panel" id="quick-reply-panel"></div>
            <div class="input-toolbar">
                <button class="tool-btn" id="show-quick-reply" title="快捷回复" disabled>快捷</button>
            </div>
            <div class="input-wrapper">
                <textarea id="message-input" placeholder="输入消息，按 Enter 发送..." disabled></textarea>
                <button class="send-btn" id="send-message" disabled>发送</button>
            </div>
        </div>
    </div>

    <!-- 右侧用户信息面板 -->
    <div class="chat-user-panel" id="user-panel">
        <div class="user-profile">
            <div class="avatar" id="user-avatar">U</div>
            <div class="username" id="user-username">-</div>
            <span class="source-tag" id="user-source">-</span>
        </div>
        <div class="user-details">
            <div class="detail-item">
                <span class="label">账户余额</span>
                <span class="value money" id="user-money">-</span>
            </div>
            <div class="detail-item">
                <span class="label">会话ID</span>
                <span class="value" id="session-id">-</span>
            </div>
            <div class="detail-item">
                <span class="label">会话时长</span>
                <span class="value" id="session-duration">-</span>
            </div>
        </div>
        <div class="user-actions">
            <button class="action-btn" id="view-user-detail">查看用户详情</button>
            <button class="action-btn" id="view-chat-history">历史消息记录</button>
            <button class="action-btn danger" id="end-session-panel" style="display:none;">结束会话</button>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.5.0/socket.io.min.js"></script>
<script>
layui.use(['layer', 'upload'], function(){
    var layer = layui.layer;
    var upload = layui.upload;

    var adminId = {$admin_id};
    var loginToken = '{$login_token}';
    var currentSessionId = null;
    var currentSession = null;
    var socket = null;
    var currentTab = 1; // 1=进行中, 0=待接入
    var sessionStartTime = null;
    var durationTimer = null;

    // WebSocket连接
    function connectWebSocket() {
        console.log('开始连接WebSocket...');
        socket = io('wss://api.g7g7.top', {
            transports: ['websocket'],
            reconnection: true,
            reconnectionDelay: 1000,
            reconnectionAttempts: 5
        });

        socket.on('connect', function() {
            console.log('Socket.IO connect 事件触发, socket.id:', socket.id);
            updateWsStatus(true);
            socket.emit('chat.connect', {
                token: loginToken,
                role: 'agent',
                maxSessions: {$admin_status.max_sessions}
            });
            console.log('已发送 chat.connect 事件');
        });

        socket.on('disconnect', function(reason) {
            console.log('Socket.IO disconnect 事件触发, 原因:', reason);
            updateWsStatus(false);
        });

        socket.on('connect_error', function(error) {
            console.log('Socket.IO connect_error:', error);
            updateWsStatus(false);
        });

        socket.on('chat_connected', function(data) {
            if (data.success) {
                layer.msg('连接成功', {icon: 1, time: 1500});
                loadSessions();
                loadPendingSessions();
            } else {
                layer.msg('连接失败: ' + data.error, {icon: 2});
            }
        });

        socket.on('chat_message_new', function(data) {
            if (data.sessionId == currentSessionId) {
                appendMessage(data, 'user');
                playNotificationSound();
            } else {
                playNotificationSound();
            }
            loadSessions();
        });

        socket.on('chat_session_new', function(data) {
            layer.msg('新会话分配', {icon: 1});
            playNotificationSound();
            loadSessions();
        });

        socket.on('chat_session_ended', function(data) {
            if (data.sessionId == currentSessionId) {
                layer.msg('会话已结束', {icon: 0});
                closeCurrentSession();
            }
            loadSessions();
        });

        socket.on('chat_user_typing', function(data) {
            if (data.sessionId == currentSessionId) {
                showTypingIndicator();
            }
        });

        // 心跳
        setInterval(function() {
            if (socket && socket.connected) {
                socket.emit('chat.ping', {});
            }
        }, 25000);
    }

    // 更新WebSocket状态显示
    function updateWsStatus(connected) {
        var $status = $('#ws-status');
        if (connected) {
            $status.addClass('connected').text('已连接');
        } else {
            $status.removeClass('connected').text('未连接');
        }
    }

    // 播放提示音
    function playNotificationSound() {
        // 可以添加提示音逻辑
    }

    // 显示打字指示器
    function showTypingIndicator() {
        var $indicator = $('#typing-indicator');
        $indicator.addClass('show');
        setTimeout(function() {
            $indicator.removeClass('show');
        }, 3000);
    }

    // 加载会话列表
    function loadSessions() {
        $.get('/chat/sessions', {status: 1}, function(res) {
            if (res.code === 0) {
                $('#active-count').text(res.data.length);
                renderSessionList(res.data, '#session-list', false);
            }
        });
    }

    // 加载待分配会话
    function loadPendingSessions() {
        $.get('/chat/pending', function(res) {
            if (res.code === 0) {
                $('#pending-count').text(res.data.length);
                renderSessionList(res.data, '#pending-list', true);
            }
        });
    }

    // 渲染会话列表
    function renderSessionList(sessions, container, isPending) {
        var html = '';
        if (sessions.length === 0) {
            html = '<div class="sessions-empty">';
            html += '<div style="font-size:36px;color:#ddd;margin-bottom:10px;">💬</div>';
            html += '<p>暂无会话</p>';
            html += '</div>';
        } else {
            sessions.forEach(function(session) {
                var isActive = session.id == currentSessionId ? ' active' : '';
                var username = session.user_info ? session.user_info.username : '未知用户';
                var firstChar = username.charAt(0).toUpperCase();
                var unreadBadge = session.unread_count > 0 ? '<span class="session-badge">' + session.unread_count + '</span>' : '';
                var lastMsg = session.last_msg || '暂无消息';
                if (lastMsg.length > 20) lastMsg = lastMsg.substring(0, 20) + '...';

                html += '<div class="session-item' + isActive + '" data-id="' + session.id + '">';
                html += '  <div class="session-avatar">' + firstChar + '<span class="online-dot"></span></div>';
                html += '  <div class="session-info">';
                html += '    <div class="name-row">';
                html += '      <span class="username">' + username + '</span>';
                html += '      <span class="time">' + (session.last_msg_time_fmt || session.create_time_fmt || '') + '</span>';
                html += '    </div>';
                html += '    <div class="last-msg">' + lastMsg + '</div>';
                html += '  </div>';
                if (isPending) {
                    html += '  <button class="accept-btn" data-id="' + session.id + '">接入</button>';
                } else {
                    html += unreadBadge;
                }
                html += '</div>';
            });
        }
        $(container).html(html);

        // 绑定点击事件
        $(container + ' .session-item').click(function(e) {
            // 如果点击的是接入按钮，不触发打开会话
            if ($(e.target).hasClass('accept-btn')) return;
            var sessionId = $(this).data('id');
            if (!isPending) {
                openSession(sessionId);
            }
        });

        // 绑定接入按钮事件
        if (isPending) {
            $(container + ' .accept-btn').click(function(e) {
                e.stopPropagation();
                var sessionId = $(this).data('id');
                acceptSession(sessionId);
            });
        }
    }

    // 接入会话
    function acceptSession(sessionId) {
        $.post('/chat/acceptSession', {session_id: sessionId}, function(res) {
            if (res.code === 0) {
                layer.msg('接入成功', {icon: 1, time: 1500});
                loadSessions();
                loadPendingSessions();
                // 自动打开刚接入的会话
                setTimeout(function() {
                    openSession(sessionId);
                    // 切换到进行中标签
                    $('.sessions-tabs .tab-item[data-status="1"]').click();
                }, 500);
            } else {
                layer.msg(res.msg || '接入失败', {icon: 2});
                loadPendingSessions();
            }
        });
    }

    // 打开会话
    function openSession(sessionId) {
        // 移除之前的选中状态
        $('.session-item').removeClass('active');
        $('.session-item[data-id="' + sessionId + '"]').addClass('active');

        currentSessionId = sessionId;

        // 加载消息
        $.get('/chat/messages', {session_id: sessionId}, function(res) {
            if (res.code === 0) {
                $('#message-area').html('');
                res.data.forEach(function(msg) {
                    appendMessage(msg, msg.sender_type === 1 ? 'user' : 'agent');
                });
                scrollToBottom();
            }
        });

        // 获取会话详情
        $.get('/chat/sessions', {status: 1}, function(res) {
            if (res.code === 0) {
                var session = res.data.find(function(s) { return s.id == sessionId; });
                if (session) {
                    currentSession = session;
                    var username = session.user_info ? session.user_info.username : '未知用户';
                    var money = session.user_info ? session.user_info.money : '-';
                    var sourceName = session.source_name || '-';
                    var firstChar = username.charAt(0).toUpperCase();

                    // 更新聊天头部
                    $('#chat-title').text(username);
                    $('#user-status').show();
                    $('#end-session').show();

                    // 更新右侧用户面板
                    $('#user-avatar').text(firstChar);
                    $('#user-username').text(username);
                    $('#user-money').text(money);
                    $('#user-source').text(sourceName);
                    $('#session-id').text(session.id);
                    $('#user-panel').addClass('show');
                    $('#end-session-panel').show();

                    // 启用输入
                    $('#message-input, #send-message, #show-quick-reply').prop('disabled', false);

                    // 开始计时
                    startDurationTimer(session.create_time);
                }
            }
        });
    }

    // 会话时长计时器
    function startDurationTimer(startTime) {
        if (durationTimer) clearInterval(durationTimer);
        // startTime 是 Unix 时间戳（秒），需要转换为毫秒
        sessionStartTime = startTime * 1000;

        function updateDuration() {
            var now = Date.now();
            var diff = Math.floor((now - sessionStartTime) / 1000);
            var hours = Math.floor(diff / 3600);
            var minutes = Math.floor((diff % 3600) / 60);
            var seconds = diff % 60;
            var str = '';
            if (hours > 0) str += hours + '时';
            str += minutes + '分' + seconds + '秒';
            $('#session-duration').text(str);
        }

        updateDuration();
        durationTimer = setInterval(updateDuration, 1000);
    }

    // 追加消息
    function appendMessage(msg, type) {
        var content = msg.content || (msg.data ? msg.data.content : '');
        var time = msg.create_time_fmt || new Date().toLocaleTimeString();
        var isImage = msg.msg_type === 2 || (msg.data && msg.data.msgType === 2);
        var username = type === 'user' ? (currentSession && currentSession.user_info ? currentSession.user_info.username : 'U') : '客服';
        var firstChar = username.charAt(0).toUpperCase();

        var html = '<div class="message-row ' + type + '">';
        html += '  <div class="message-avatar">' + firstChar + '</div>';
        html += '  <div class="message-content">';
        html += '    <div class="message-bubble">';
        if (isImage) {
            html += '<img src="' + content + '" onclick="layer.photos({photos: {data: [{src: \'' + content + '\'}]}})">';
        } else {
            html += escapeHtml(content);
        }
        html += '    </div>';
        html += '    <div class="message-time">' + time + '</div>';
        html += '  </div>';
        html += '</div>';

        $('#message-area').append(html);
        scrollToBottom();
    }

    // HTML转义
    function escapeHtml(text) {
        var div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    // 滚动到底部
    function scrollToBottom() {
        var area = document.getElementById('message-area');
        area.scrollTop = area.scrollHeight;
    }

    // 发送消息
    $('#send-message').click(function() {
        sendMessage();
    });

    function sendMessage() {
        var content = $('#message-input').val().trim();
        if (!content) {
            layer.msg('请输入消息', {icon: 0});
            return;
        }
        if (!currentSessionId) {
            layer.msg('请先选择会话', {icon: 0});
            return;
        }

        socket.emit('chat.message.send', {
            sessionId: currentSessionId,
            msgType: 1,
            content: content,
            clientMsgId: Date.now()
        });

        appendMessage({content: content, create_time_fmt: new Date().toLocaleTimeString()}, 'agent');
        $('#message-input').val('');
    }

    // 回车发送
    $('#message-input').keypress(function(e) {
        if (e.which === 13 && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    });

    // 结束会话
    function endCurrentSession() {
        if (!currentSessionId) return;
        layer.confirm('确定结束此会话?', {icon: 3, title: '提示'}, function(index) {
            $.post('/chat/endSession', {session_id: currentSessionId}, function(res) {
                if (res.code === 0) {
                    layer.msg('会话已结束', {icon: 1});
                    closeCurrentSession();
                    loadSessions();
                } else {
                    layer.msg(res.msg || '操作失败', {icon: 2});
                }
            });
            layer.close(index);
        });
    }

    $('#end-session, #end-session-panel').click(endCurrentSession);

    // 关闭当前会话
    function closeCurrentSession() {
        currentSessionId = null;
        currentSession = null;
        if (durationTimer) clearInterval(durationTimer);

        $('#chat-title').text('请选择会话');
        $('#user-status').hide();
        $('#end-session').hide();
        $('#user-panel').removeClass('show');
        $('#end-session-panel').hide();
        $('#message-input, #send-message, #show-quick-reply').prop('disabled', true);
        $('#message-area').html('<div class="message-placeholder"><div style="font-size:48px;color:#ddd;margin-bottom:15px;">💬</div><p>请从左侧选择一个会话开始聊天</p></div>');

        $('.session-item').removeClass('active');
    }

    // 快捷回复
    var quickReplyLoaded = false;
    var quickReplies = [];

    function loadQuickReplies() {
        $.get('/chat/quickReplies', function(res) {
            if (res.code === 0) {
                quickReplies = res.data;
                quickReplyLoaded = true;
                renderQuickReplyPanel();
            }
        });
    }

    function renderQuickReplyPanel() {
        var html = '';
        quickReplies.forEach(function(item) {
            html += '<div class="quick-reply-item" data-content="' + escapeHtml(item.content) + '">';
            html += '  <div class="title">' + escapeHtml(item.title) + '</div>';
            html += '  <div class="content">' + escapeHtml(item.content.substring(0, 50)) + (item.content.length > 50 ? '...' : '') + '</div>';
            html += '</div>';
        });
        $('#quick-reply-panel').html(html);

        $('#quick-reply-panel .quick-reply-item').click(function() {
            var content = $(this).data('content');
            $('#message-input').val(content);
            $('#quick-reply-panel').removeClass('show');
            $('#message-input').focus();
        });
    }

    $('#show-quick-reply').click(function() {
        if (!quickReplyLoaded) {
            loadQuickReplies();
        }
        $('#quick-reply-panel').toggleClass('show');
    });

    // 点击其他地方关闭快捷回复面板
    $(document).click(function(e) {
        if (!$(e.target).closest('#show-quick-reply, #quick-reply-panel').length) {
            $('#quick-reply-panel').removeClass('show');
        }
    });

    // 刷新会话
    $('#refresh-sessions').click(function() {
        loadSessions();
        loadPendingSessions();
        layer.msg('已刷新', {icon: 1, time: 1000});
    });

    // 标签切换
    $('.sessions-tabs .tab-item').click(function() {
        var status = $(this).data('status');
        currentTab = status;

        $(this).addClass('active').siblings().removeClass('active');

        if (status === 0) {
            $('#session-list').hide();
            $('#pending-list').show();
            loadPendingSessions();
        } else {
            $('#pending-list').hide();
            $('#session-list').show();
            loadSessions();
        }
    });

    // 图片上传
    upload.render({
        elem: '#upload-image',
        url: '/chat/upload',
        accept: 'images',
        before: function() {
            layer.load(1);
        },
        done: function(res) {
            layer.closeAll('loading');
            if (res.code === 0) {
                socket.emit('chat.message.send', {
                    sessionId: currentSessionId,
                    msgType: 2,
                    content: res.url,
                    clientMsgId: Date.now()
                });
                appendMessage({content: res.url, msg_type: 2, create_time_fmt: new Date().toLocaleTimeString()}, 'agent');
            } else {
                layer.msg(res.msg || '上传失败', {icon: 2});
            }
        },
        error: function() {
            layer.closeAll('loading');
            layer.msg('上传失败', {icon: 2});
        }
    });

    // 查看用户详情
    $('#view-user-detail').click(function() {
        if (currentSession && currentSession.user_id) {
            layer.open({
                type: 2,
                title: '用户详情',
                area: ['800px', '600px'],
                content: '/player/player_edit?id=' + currentSession.user_id
            });
        }
    });

    // 查看历史记录
    $('#view-chat-history').click(function() {
        if (currentSessionId) {
            layer.open({
                type: 2,
                title: '历史消息记录',
                area: ['800px', '600px'],
                content: '/chat/record?session_id=' + currentSessionId
            });
        }
    });

    // 初始化
    connectWebSocket();
    loadQuickReplies();
});
</script>
</body>
</html>