document.addEventListener('DOMContentLoaded', () => {
    const messagesContainer = document.getElementById('messages');
    const messageInput = document.getElementById('message-input');
    const sendButton = document.getElementById('send-button');
    
    let userId = localStorage.getItem('samuel_user_id');
    if (!userId) {
        userId = 'user_' + Math.random().toString(36).substr(2, 9);
        localStorage.setItem('samuel_user_id', userId);
    }
    
    let socket;
    
    function connectWebSocket() {
        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
        const wsUrl = `${protocol}//${window.location.host}/ws/${userId}`;
        
        socket = new WebSocket(wsUrl);
        
        socket.onopen = () => {
            console.log('Conexión establecida');
        };
        
        socket.onmessage = (event) => {
            const data = JSON.parse(event.data);
            addMessage(data.text, 'samuel', data.timestamp);
        };
        
        socket.onclose = () => {
            console.log('Conexión cerrada. Reintentando en 5 segundos...');
            setTimeout(connectWebSocket, 5000);
        };
        
        socket.onerror = (error) => {
            console.error('Error en WebSocket:', error);
        };
    }
    
    connectWebSocket();
    
    function sendMessage() {
        const message = messageInput.value.trim();
        if (message && socket && socket.readyState === WebSocket.OPEN) {
            addMessage(message, 'user');
            socket.send(JSON.stringify({ text: message }));
            messageInput.value = '';
            messageInput.focus();
        }
    }
    
    function addMessage(text, sender, timestamp) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${sender}`;
        
        const messageContent = document.createElement('p');
        messageContent.textContent = text;
        
        messageDiv.appendChild(messageContent);
        messagesContainer.appendChild(messageDiv);
        
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }
    
    sendButton.addEventListener('click', sendMessage);
    
    messageInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });
    
    messageInput.focus();
});