document.addEventListener('DOMContentLoaded', () => {
    const chatForm = document.getElementById('chat-form');
    const chatInput = document.getElementById('chat-input');
    const messagesList = document.getElementById('messages-list');

    // Scroll to bottom
    messagesList.scrollTop = messagesList.scrollHeight;

    chatForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        const content = chatInput.value.trim();
        if (!content) return;

        chatInput.value = '';

        try {
            const response = await fetch('api_v1_messages.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    content: content,
                    channel_id: new URLSearchParams(window.location.search).get('channel_id') || 1
                })
            });

            const result = await response.json();
            if (result.success) {
                appendMessage(result.message);
                messagesList.scrollTop = messagesList.scrollHeight;
            } else {
                alert('Error: ' + result.error);
            }
        } catch (err) {
            console.error('Failed to send message:', err);
        }
    });

    function appendMessage(msg) {
        const div = document.createElement('div');
        div.className = 'message-item';
        div.innerHTML = `
            <div class="message-avatar"></div>
            <div class="message-content">
                <div class="message-author">
                    ${msg.username}
                    <span class="message-time">${msg.time}</span>
                </div>
                <div class="message-text">
                    ${msg.content.replace(/\n/g, '<br>')}
                </div>
            </div>
        `;
        messagesList.appendChild(div);
    }
});