{% extends 'room_base.html' %}
{% block title %}Room {{ room_code }}{% endblock %}
{% block content %}
    <h1>Room {{ room_code }}</h1>
    <div class="chat-container">
    <div id="chat-box"></div>
    <div class="chat-input-container">
        <input type="text" id="chat-input" placeholder="Say something..." />
        <button id="send-button">Send</button>
    </div>
    </div>

    <script>
        const socket = io();
        const room = "{{ room_code }}";

        const name = localStorage.getItem('username') || 'Anonymous';
        socket.emit('join', { room, sender: name });

        // Fetch message history
        fetch(`/api/room/${room}/messages`)
            .then(res => res.json())
            .then(data => {
                const chatBox = document.getElementById('chat-box');
                if (data && Array.isArray(data)) {
                    data.forEach(msg => {
                        const msgElem = document.createElement('p');
                        msgElem.textContent = `${msg.sender}: ${msg.text}`;
                        chatBox.appendChild(msgElem);
                    });
                    chatBox.scrollTop = chatBox.scrollHeight;
                }
            });

        // Message listener
        socket.on('message', (data) => {
            const chatBox = document.getElementById('chat-box');
            const msgElem = document.createElement('p');

            msgElem.textContent = `${data.sender}: ${data.text}`;
            if (data.sender === 'System') {
                msgElem.style.fontStyle = 'italic';
                msgElem.style.color = 'gray';
            }

            chatBox.appendChild(msgElem);
            chatBox.scrollTop = chatBox.scrollHeight;
        });

        // Send message on button click
        document.getElementById('send-button').onclick = () => {
            const text = document.getElementById('chat-input').value;
            const sender = localStorage.getItem('username') || 'Anonymous';

            if (text.trim()) {
                socket.emit('message', {
                    room,
                    text,
                    sender
                });
                document.getElementById('chat-input').value = '';
            }
        };

        // Send message on Enter key press
        document.getElementById('chat-input').addEventListener('keydown', (event) => {
            if (event.key === 'Enter') {
                document.getElementById('send-button').click();
            }
        });

    </script>
{% endblock %}