<?php session_start(); ?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>金融智能通信平台</title>
    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
    <style>
        .new-chat-btn { cursor: pointer; color: var(--accent-color); font-size: 24px; font-weight: bold; padding: 0 10px; }
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 1000; }
        .modal-content { background: white; padding: 25px; border-radius: 12px; width: 320px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); position: relative; }
        .close-btn { position: absolute; top: 10px; right: 15px; cursor: pointer; font-size: 20px; color: #888; }
        .modal-content select, .modal-content input { width: 100%; margin: 10px 0; padding: 10px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; }
        .modal-content button { width: 100%; padding: 10px; background: var(--accent-color); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }
        
        .emoji-picker { display: none; position: absolute; bottom: 80px; left: 10px; background: white; border: 1px solid #ddd; border-radius: 8px; padding: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); grid-template-columns: repeat(8, 1fr); gap: 5px; width: 280px; z-index: 500; cursor: pointer; }
        .emoji-picker span { font-size: 20px; text-align: center; padding: 5px; }
        .emoji-picker span:hover { background: #f0f0f0; border-radius: 4px; }
        
        .delete-btn { color: #ff4d4f; cursor: pointer; font-size: 14px; margin-left: 10px; }

        /* Branding hidden - Aggressive */
        footer, .footer, #footer, [class*="footer"], .built-with, #built-with, div[style*="position: fixed"][style*="bottom: 0"], .flatlogic-branding, [class*="flatlogic"], div[class*="flatlogic"], *[id*="flatlogic"], *[class*="flatlogic"], .brand-label { display: none !important; visibility: hidden !important; height: 0 !important; width: 0 !important; opacity: 0 !important; overflow: hidden !important; pointer-events: none !important; }
    </style>
</head>
<body>
    <div class="app-container">
        <div class="sidebar">
            <div class="sidebar-header">
                <span>会话列表</span>
                <span class="new-chat-btn" onclick="document.getElementById('newChatModal').style.display='flex'">+</span>
            </div>
            <div class="sidebar-search">
                <input type="text" placeholder="搜索">
            </div>
            <div class="conversation-list" id="convList">
                <div class="conversation-item" onclick="selectConversation('+86 13800138000')">
                    <div class="conv-info">
                        <h4>+86 13800138000</h4>
                        <p>你好，请问在吗？</p>
                    </div>
                    <span class="delete-btn" onclick="event.stopPropagation(); deleteConversation(this)">删除</span>
                </div>
            </div>
        </div>
        
        <div class="chat-panel">
            <div class="chat-header" id="chatHeader">
                请开启会话
            </div>
            <div class="message-list" id="messageList">
                <div class="message msg-other">欢迎使用金融智能通信平台。</div>
            </div>
            <div class="input-area">
                <span class="emoji-btn" onclick="toggleEmojiPicker()" style="cursor: pointer;">😊</span>
                <div id="emojiPicker" class="emoji-picker">
                    <span>😀</span><span>😂</span><span>😊</span><span>😍</span><span>👍</span><span>😎</span><span>🤔</span><span>😅</span>
                    <span>🤩</span><span>💪</span><span>🔥</span><span>✨</span><span>🎈</span><span>🎉</span><span>❤️</span><span>🙃</span>
                    <span>🙄</span><span>😛</span><span>😴</span><span>🤐</span><span>🤑</span><span>🤠</span><span>🥳</span><span>👋</span>
                    <span>😄</span><span>😃</span><span>😆</span><span>😇</span><span>😉</span><span>😌</span><span>😘</span><span>🤗</span>
                    <span>🤔</span><span>🤯</span><span>🤬</span><span>🥶</span><span>🥵</span><span>🥴</span><span>🥺</span><span>🧐</span>
                </div>
                <input type="text" id="msgInput" placeholder="输入消息..." onkeypress="handleKeyPress(event)">
                <button onclick="sendMessage()">发送</button>
            </div>
        </div>
    </div>

    <div id="newChatModal" class="modal">
        <div class="modal-content">
            <span class="close-btn" onclick="document.getElementById('newChatModal').style.display='none'">×</span>
            <h3>发起新会话</h3>
            <select id="countryCode" onchange="updatePhoneField()">
                <option value="+86" data-name="中国">中国 (+86)</option>
                <option value="+60" data-name="马来西亚">马来西亚 (+60)</option>
                <option value="+1" data-name="美国/加拿大">美国/加拿大 (+1)</option>
                <option value="+44" data-name="英国">英国 (+44)</option>
                <option value="+81" data-name="日本">日本 (+81)</option>
                <option value="+49" data-name="德国">德国 (+49)</option>
                <option value="+61" data-name="澳大利亚">澳大利亚 (+61)</option>
                <option value="+33" data-name="法国">法国 (+33)</option>
                <option value="+7" data-name="俄罗斯">俄罗斯 (+7)</option>
                <option value="+65" data-name="新加坡">新加坡 (+65)</option>
                <option value="+91" data-name="印度">印度 (+91)</option>
                <option value="+55" data-name="巴西">巴西 (+55)</option>
                <option value="+39" data-name="意大利">意大利 (+39)</option>
                <option value="+34" data-name="西班牙">西班牙 (+34)</option>
                <option value="+82" data-name="韩国">韩国 (+82)</option>
                <option value="+27" data-name="南非">南非 (+27)</option>
            </select>
            <input type="text" id="phoneInput" placeholder="输入手机号码">
            <button onclick="initiateChat()">开始聊天</button>
        </div>
    </div>

    <script>
        const isLoggedIn = <?php echo (isset($_SESSION["is_logged_in"]) && $_SESSION["is_logged_in"]) ? 'true' : 'false'; ?>;
        
        // Remove branding on load and continuously
        function hideBranding() {
            const forbidden = document.querySelectorAll('[class*="flatlogic"], [id*="flatlogic"], footer, .brand-label');
            forbidden.forEach(el => { el.style.display = 'none'; el.style.visibility = 'hidden'; el.style.opacity = '0'; });
        }
        setInterval(hideBranding, 500);

        // MutationObserver for branding removal
        const observer = new MutationObserver(() => hideBranding());
        observer.observe(document.body, { childList: true, subtree: true });

        // Mock data structure to simulate storage
        let chatHistory = {
            "+86 13800138000": ["欢迎使用金融智能通信平台。", "你好，请问在吗？"]
        };
        let currentConv = null;

        function updatePhoneField() { document.getElementById('phoneInput').value = document.getElementById('countryCode').value; }
        function toggleEmojiPicker() { const picker = document.getElementById('emojiPicker'); picker.style.display = picker.style.display === 'grid' ? 'none' : 'grid'; }
        
        document.querySelectorAll('.emoji-picker span').forEach(el => {
            el.onclick = () => { document.getElementById('msgInput').value += el.innerText; toggleEmojiPicker(); }
        });

        function handleKeyPress(e) { if (e.key === 'Enter') sendMessage(); }

        function selectConversation(phone) {
            currentConv = phone;
            document.getElementById('chatHeader').innerText = phone;
            const list = document.getElementById('messageList');
            list.innerHTML = '';
            (chatHistory[phone] || []).forEach(msg => {
                const div = document.createElement('div');
                div.className = 'message msg-other';
                div.innerText = msg;
                list.appendChild(div);
            });
        }

        function deleteConversation(el) {
            const item = el.parentElement;
            const phone = item.querySelector('h4').innerText;
            delete chatHistory[phone];
            item.remove();
            if (currentConv === phone) {
                currentConv = null;
                document.getElementById('messageList').innerHTML = '';
                document.getElementById('chatHeader').innerText = '请开启会话';
            }
        }

        function sendMessage() {
            if (!isLoggedIn) { alert('请先登录以发送消息'); window.location.href = '/login.php'; return; }
            if (!currentConv) { alert('请先选择或发起一个会话'); return; }
            const input = document.getElementById('msgInput');
            if (input.value.trim() === '') return;
            
            chatHistory[currentConv].push(input.value);
            const msgList = document.getElementById('messageList');
            const msg = document.createElement('div');
            msg.className = 'message msg-me';
            msg.innerText = input.value;
            msgList.appendChild(msg);
            input.value = '';
            msgList.scrollTop = msgList.scrollHeight;
        }

        function initiateChat() {
            const phone = document.getElementById('phoneInput').value;
            if (!isLoggedIn) { alert('请先登录以开始聊天'); window.location.href = '/login.php'; return; }
            if (phone.length > 5) {
                if (!chatHistory[phone]) chatHistory[phone] = [];
                currentConv = phone;
                document.getElementById('chatHeader').innerText = phone;
                document.getElementById('newChatModal').style.display = 'none';
                selectConversation(phone);
            } else { alert('请输入完整的手机号码'); }
        }
        
        // Ensure scrolling works
        document.getElementById('convList').style.overflowY = 'auto';
        document.getElementById('messageList').style.overflowY = 'auto';
    </script>
</body>
</html>
