echo-mvp/resource/static/js/room.js

const socket = io();

let originalTitle = document.title;
let notificationActive = false;
let notificationInterval = null;

// The 'room' variable is now directly available from the template,
// so you don't need to get it from the URL.

function getUsername(roomCode) {
    const allUsernames = JSON.parse(localStorage.getItem('usernames') || '{}');
    let storedUsername = allUsernames[roomCode];

    // If a username exists and is not just whitespace, return it
    if (storedUsername && storedUsername.trim()) {
        return storedUsername;
    }

    // If no stored username, or it's empty, prompt the user
    let newUsername = prompt("Please enter your name:");
    
    // If the user cancels the prompt or enters only whitespace
    if (newUsername === null || !newUsername.trim()) {
        return null; // Indicates user didn't provide a valid name
    }

    newUsername = newUsername.trim();

    // Store for future use
    allUsernames[roomCode] = newUsername;
    localStorage.setItem('usernames', JSON.stringify(allUsernames));
    
    return newUsername;
}

// Use the 'room' variable provided by the template directly
const name = getUsername(room); // 'room' is now defined by your template script
if (!name) {
    // If the user cancels or provides no name, redirect them
    window.location.href = '/';
} else {
    socket.emit('join', { room, sender: name });
    loadMessages();
}


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;
    
    showNotification("Echo | New Message", `${data.sender}: ${data.text}`);
});

function showNotification(title, body) {
    const notificationSetting = localStorage.getItem('notification-setting') || 'off';
    
    if (notificationSetting === 'off') {
        return;
    }
    
    if (notificationSetting === 'system') {
        if (document.hasFocus()) return;
        
        if (Notification.permission === 'granted') {
            new Notification(title, { body });
        } else if (Notification.permission !== 'denied') {
            Notification.requestPermission().then(permission => {
                if (permission === 'granted') {
                    new Notification(title, { body });
                }
            });
        }
    } else if (notificationSetting === 'tab') {
        if (!document.hasFocus() && !notificationActive) {
            originalTitle = document.title;
            notificationInterval = setInterval(() => {
                document.title = document.title === originalTitle 
                    ? "Echo | New Message!" 
                    : originalTitle;
            }, 1000);
            notificationActive = true;

            if (!window.hasNotificationListener) {
                const returnToNormal = () => {
                    clearInterval(notificationInterval);
                    document.title = originalTitle;
                    notificationActive = false;
                };
                window.addEventListener('focus', returnToNormal);
                window.hasNotificationListener = true;
            }
        }
    }
}

document.getElementById('send-button').onclick = () => {
    const text = document.getElementById('chat-input').value;
    const allUsernames = JSON.parse(localStorage.getItem('usernames') || '{}');
    const sender = allUsernames[room] || 'Anonymous';

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

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

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

window.addEventListener('pageshow', (event) => {
    if (event.persisted) {
        loadMessages();
    }
});