<!-- Chat Interface -->
<div class="cyber-card border border-cyber-primary/30">
    <!-- Chat Header -->
    <div class="flex items-center justify-between p-3 border-b border-cyber-primary/20">
        <h3 id="chattitle" class="font-cyber cyber-text-primary">{lang chat}</h3>
        <div class="flex items-center space-x-2">
            <button id="switch" class="cyber-btn cyber-btn-secondary text-xs"
                    onclick="toggleChatMode(); return false;">
                {lang chatswitch}
            </button>
            <button id="ref" class="cyber-btn cyber-btn-primary text-xs"
                    onclick="refreshChat(); return false;">
                {lang refresh}
            </button>
        </div>
    </div>
    
    <!-- Chat Content -->
    <div class="h-64 overflow-y-auto p-3 bg-cyber-bg-primary/50">
        <!-- Chat Messages -->
        <div id="chatlist" class="space-y-2 text-sm font-mono">
            <!--{loop $chatdata['msg'] $msg}-->
            <div class="chat-message">$msg</div>
            <!--{/loop}-->
        </div>
        
        <!-- News List (Hidden by default) -->
        <div id="newslist" class="hidden space-y-2 text-sm font-mono">
            <!--{eval $chat_news = nparse_news(0,$newslimit);}-->
            <div class="news-content">$chat_news</div>
        </div>
    </div>
    
    <!-- Chat Input -->
    <div class="p-3 border-t border-cyber-primary/20">
        <form id="sendchat" name="sendchat" action="chat.php" onsubmit="return false;" class="space-y-3">
            <input type="hidden" id="lastcid" name="lastcid" value="$chatdata['lastcid']">
            <input type="hidden" id="teamID" name="teamID" value="$teamID">
            <input type="hidden" id="sendmode" name="sendmode" value="ref">
            
            <!-- Chat Type Selector -->
            <div class="flex items-center space-x-2">
                <select name="chattype" class="cyber-input text-sm" value="2">
                    <option value="0" selected>$chatinfo[0]</option>
                    <!--{if $teamID}-->
                    <option value="1">$chatinfo[1]</option>
                    <!--{/if}-->
                </select>
                
                <!-- Emoji Button -->
                <button type="button" id="embtn" class="cyber-btn cyber-btn-accent text-xs">
                    {lang emoji}
                </button>
            </div>
            
            <!-- Message Input -->
            <div class="flex space-x-2">
                <input type="text" id="chatmsg" name="chatmsg" maxlength="60" 
                       class="cyber-input flex-1" placeholder="输入消息...">
                <button type="button" id="send" class="cyber-btn cyber-btn-primary"
                        onclick="sendMessage(); return false;">
                    {lang send}
                </button>
            </div>
            
            <!-- Emoji Panel -->
            <div id="empanel" class="hidden cyber-card p-2 border border-cyber-primary/30">
                <div class="grid grid-cols-8 gap-1">
                    <!--{loop $emdata $em}-->
                    <button type="button" class="cyber-btn cyber-btn-secondary text-xs p-1" 
                            onclick="insertEm('$em')">$em</button>
                    <!--{/loop}-->
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
// Initialize chat
chat('ref', $chatrefresh);

// Chat functionality
function toggleChatMode() {
    const chatList = document.getElementById('chatlist');
    const newsList = document.getElementById('newslist');
    const chatTitle = document.getElementById('chattitle');
    const sendMode = document.getElementById('sendmode');
    
    if (sendMode.value === 'news') {
        sendMode.value = 'ref';
        chatList.classList.remove('hidden');
        newsList.classList.add('hidden');
        chatTitle.textContent = '聊天讯息';
    } else {
        sendMode.value = 'news';
        chatList.classList.add('hidden');
        newsList.classList.remove('hidden');
        chatTitle.textContent = '进行状况';
    }
    
    chat(sendMode.value, $chatrefresh);
}

function refreshChat() {
    const sendMode = document.getElementById('sendmode');
    if (sendMode.value === 'news') {
        chat('news', $chatrefresh);
    } else {
        sendMode.value = 'ref';
        chat('ref', $chatrefresh);
    }
}

function sendMessage() {
    const sendMode = document.getElementById('sendmode');
    const chatMsg = document.getElementById('chatmsg');
    
    if (chatMsg.value.trim() === '') {
        showNotification('请输入消息内容', 'warning');
        return;
    }
    
    if (sendMode.value === 'ref') {
        sendMode.value = 'send';
        chat('send', $chatrefresh);
        chatMsg.value = ''; // Clear input after sending
    }
}

function insertEm(em) {
    const chatMsg = document.getElementById('chatmsg');
    chatMsg.value += "[" + em + "]";
    chatMsg.focus();
}

// Emoji panel toggle
document.getElementById('embtn').addEventListener('click', function() {
    const panel = document.getElementById('empanel');
    panel.classList.toggle('hidden');
});

// Enhanced chat features
document.addEventListener('DOMContentLoaded', function() {
    const chatMsg = document.getElementById('chatmsg');
    const chatContainer = document.querySelector('#chatlist');
    
    // Auto-scroll to bottom when new messages arrive
    function scrollToBottom() {
        if (chatContainer) {
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }
    }
    
    // Enter key to send message
    chatMsg.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            sendMessage();
        }
    });
    
    // Auto-scroll on new messages
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                scrollToBottom();
                
                // Add animation to new messages
                mutation.addedNodes.forEach(function(node) {
                    if (node.nodeType === Node.ELEMENT_NODE) {
                        node.classList.add('cyber-fade-in');
                    }
                });
            }
        });
    });
    
    if (chatContainer) {
        observer.observe(chatContainer, { childList: true, subtree: true });
        scrollToBottom(); // Initial scroll
    }
    
    // Close emoji panel when clicking outside
    document.addEventListener('click', function(e) {
        const empanel = document.getElementById('empanel');
        const embtn = document.getElementById('embtn');
        
        if (!empanel.contains(e.target) && !embtn.contains(e.target)) {
            empanel.classList.add('hidden');
        }
    });
});

// Chat message styling
function enhanceChatMessages() {
    const messages = document.querySelectorAll('.chat-message');
    messages.forEach(msg => {
        // Add timestamp if not present
        if (!msg.querySelector('.timestamp')) {
            const timestamp = document.createElement('span');
            timestamp.className = 'timestamp text-xs cyber-text-secondary';
            timestamp.textContent = new Date().toLocaleTimeString('zh-CN', { hour12: false });
            msg.insertBefore(timestamp, msg.firstChild);
        }
        
        // Style different message types
        if (msg.textContent.includes('系统')) {
            msg.classList.add('system-message', 'cyber-text-warning');
        } else if (msg.textContent.includes('团队')) {
            msg.classList.add('team-message', 'cyber-text-accent');
        } else {
            msg.classList.add('normal-message');
        }
    });
}

// Call enhancement function periodically
setInterval(enhanceChatMessages, 1000);

function showNotification(message, type = 'info') {
    if (window.nouveauTheme) {
        window.nouveauTheme.showNotification(message, type);
    }
}
</script>

<style>
/* Chat-specific styles */
.chat-message {
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
    line-height: 1.4;
}

.chat-message:last-child {
    border-bottom: none;
}

.chat-message .timestamp {
    margin-right: 0.5rem;
}

.system-message {
    background: rgba(255, 165, 0, 0.1);
    padding: 0.5rem;
    border-left: 3px solid var(--cyber-warning);
    margin: 0.25rem 0;
}

.team-message {
    background: rgba(0, 255, 255, 0.1);
    padding: 0.5rem;
    border-left: 3px solid var(--cyber-accent);
    margin: 0.25rem 0;
}

.normal-message {
    color: var(--cyber-text-primary);
}

/* Scrollbar styling for chat */
#chatlist::-webkit-scrollbar,
#newslist::-webkit-scrollbar {
    width: 6px;
}

#chatlist::-webkit-scrollbar-track,
#newslist::-webkit-scrollbar-track {
    background: var(--cyber-bg-secondary);
}

#chatlist::-webkit-scrollbar-thumb,
#newslist::-webkit-scrollbar-thumb {
    background: var(--cyber-primary);
    border-radius: 3px;
}

#chatlist::-webkit-scrollbar-thumb:hover,
#newslist::-webkit-scrollbar-thumb:hover {
    background: var(--cyber-secondary);
}

/* Emoji panel styling */
#empanel button {
    min-width: 2rem;
    min-height: 2rem;
}

#empanel button:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .chat-message {
        font-size: 0.75rem;
    }
    
    #empanel {
        grid-template-columns: repeat(6, 1fr);
    }
    
    #chatmsg {
        font-size: 0.875rem;
    }
}
</style>
