document.addEventListener('DOMContentLoaded', function() {
    const chatBox = document.getElementById('chat-box');
    const messageInput = document.getElementById('message-input');
    const nameInput = document.getElementById('name-input');
    const sendButton = document.getElementById('send-button');
    const joinButton = document.getElementById('join-button');
    const joinContainer = document.getElementById('join-container');
    const chatContainer = document.getElementById('chat-container');
    let socket = null;

    function getWebSocketUrl() {
        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
        const host = window.location.host; // Includes hostname and port if available
        const pathname = window.location.pathname + 'chat'; // Adjust the path as needed
        return `${protocol}//${host}${pathname}`;
    }

    function displayMessage(message) {
        const messageElement = document.createElement('div');
        messageElement.textContent = message;
        chatBox.appendChild(messageElement);
        chatBox.scrollTop = chatBox.scrollHeight;
    }
    function send() {
        const message = messageInput.value.trim();
        if(message !== '' && socket && socket.readyState === WebSocket.OPEN) {
            socket.send(message);
            messageInput.value = '';
        }
    }

    function connect() {
        const name = nameInput.value.trim();
        if(name === '') {
            alert('Please enter your name.');
            return;
        }
        const wsUrl = `${getWebSocketUrl()}?name=${encodeURIComponent(name)}`;
        try {
            socket = new WebSocket(wsUrl);
            
            socket.onopen = function(event) {
                displayMessage('Connected to the chat as ' + name + '.');
                joinContainer.style.display = 'none';
                chatContainer.style.display = 'block';
            };
            
            socket.onmessage = function(event) {
                displayMessage(event.data);
            };
            
            socket.onclose = function(event) {
                displayMessage('You have been disconnected from the chat.');
                joinContainer.style.display = 'block';
                chatContainer.style.display = 'none';
            };
            
            socket.onerror = function(error) {
                console.error('WebSocket Error:', error);
            };
        } catch (error) {
            console.error('Failed to connect:', error);
        }
    }

    joinButton.addEventListener('click', connect);

    nameInput.addEventListener('keypress', function(e) {
        if(e.key === 'Enter') {
            connect();
        }
    });

    messageInput.addEventListener('keypress', function(e) {
        if(e.key === 'Enter') {
            send();
        }
    });

    sendButton.addEventListener('click', send);


});