class ChatBox extends HTMLElement {
    constructor() {
        super();
        this.app = null;
    }
    
    connectedCallback() {
        this.innerHTML = `
            <div style="display: flex; flex-direction: column; height: 100%;">
                <div id="chatMessages" style="flex: 1; overflow-y: auto; padding: 5px; font-size: 12px; font-family: 'Courier New', monospace;">
                </div>
                <input 
                    type="text" 
                    id="chatInput" 
                    placeholder="Type message..."
                    style="border: none; border-top: 1px solid var(--border-color); padding: 5px;"
                    maxlength="200"
                />
            </div>
        `;
        
        const input = this.querySelector('#chatInput');
        
        input.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                const message = input.value.trim();
                if (message && this.app) {
                    this.app.sendChatMessage(message);
                    input.value = '';
                }
            }
        });
    }
    
    addMessage(nickname, message, timestamp) {
        const messagesDiv = this.querySelector('#chatMessages');
        
        const messageEl = document.createElement('div');
        messageEl.style.marginBottom = '3px';
        
        const time = timestamp || new Date().toTimeString().slice(0, 5);
        const color = nickname === 'system' ? '#FFD700' : '#87CEEB';
        
        messageEl.innerHTML = `
            <span style="color: #666;">${time}</span> 
            <span style="color: ${color}; font-weight: bold;">${nickname}:</span> 
            <span style="color: var(--text-color);">${this.escapeHtml(message)}</span>
        `;
        
        messagesDiv.appendChild(messageEl);
        messagesDiv.scrollTop = messagesDiv.scrollHeight;
        
        // Keep only last 100 messages
        while (messagesDiv.children.length > 100) {
            messagesDiv.removeChild(messagesDiv.firstChild);
        }
    }
    
    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
}

customElements.define('chat-box', ChatBox);