const STORAGE_VERSION = '11'; // Update this when changing storage structure

if (localStorage.getItem('version') !== STORAGE_VERSION) {
  localStorage.clear();
  localStorage.setItem('version', STORAGE_VERSION);
}

const savedSettingDarkPersist = localStorage.getItem('dark-mode-toggle');
if (savedSettingDarkPersist === 'true') {
    document.body.classList.add('dark');
} else {
    document.body.classList.remove('dark');
}

document.documentElement.classList.add('no-transitions');

setTimeout(function() {
    document.documentElement.classList.remove('no-transitions');
}, 100);

function updateNavbarWithRooms() {
    const navbar = document.querySelector('.navbar');
    if (!navbar) return;
    
    const linksToRemove = [];
    navbar.querySelectorAll('a').forEach(link => {
        if (link.href && link.href.includes('/room/')) {
            linksToRemove.push(link);
        }
    });
    linksToRemove.forEach(link => link.remove());
    
    const allUsernames = JSON.parse(localStorage.getItem('usernames') || '{}');
    const rooms = Object.keys(allUsernames);
    
    rooms.forEach(roomCode => {
        const roomLink = document.createElement('a');
        roomLink.href = `/room/${roomCode}`;
        roomLink.textContent = `Room: ${roomCode}`;
        
        const removeBtn = document.createElement('span');
        removeBtn.textContent = ' ×';
        removeBtn.onclick = (e) => {
            e.preventDefault();
            e.stopPropagation();
            removeRoom(roomCode);
        };
        
        roomLink.appendChild(removeBtn);
        
        const settingsLink = navbar.querySelector('a[href="/settings"]');
        if (settingsLink) {
            settingsLink.before(roomLink);
        } else {
            navbar.appendChild(roomLink);
        }
    });
}

function removeRoom(roomCode) {
    const allUsernames = JSON.parse(localStorage.getItem('usernames')) || '{}';
    delete allUsernames[roomCode];
    localStorage.setItem('usernames', JSON.stringify(allUsernames));
    updateNavbarWithRooms();
}

document.addEventListener('DOMContentLoaded', updateNavbarWithRooms);