let publicRoomsData = [];
let roomsRefreshInterval = null;
let currentSortBy = 'activity';
let currentMinUsers = 0;
let isSubscribedToRooms = false;
let isRoomsBrowserOpen = false;
let retryAttempts = 0;
const MAX_RETRY_ATTEMPTS = 3;

// Configuration
const ROOMS_CONFIG = {
    refreshInterval: 30000, // 30 seconds
    maxRetries: 3,
    retryDelay: 2000, // 2 seconds
    socketTimeout: 25000, // 25 seconds to wait for socket
    fallbackToHttp: true,
    autoRefresh: true
};

// Show the public rooms browser
function showPublicRoomsBrowser() {
    console.log('Opening public rooms browser');
    const browserElement = document.getElementById('publicRoomsBrowser');
    if (!browserElement) {
        console.error('Public rooms browser element not found');
        return;
    }
    
    browserElement.style.display = 'flex';
    isRoomsBrowserOpen = true;
    retryAttempts = 0;
    
    // Reset scroll position
    const browserContent = document.getElementById('browserContent');
    if (browserContent) {
        browserContent.scrollTop = 0;
    }
    
    // Load rooms and subscribe to updates
    loadPublicRoomsWebSocket();
    subscribeToPublicRooms();
    
    // Set up auto-refresh if enabled
    if (ROOMS_CONFIG.autoRefresh && !roomsRefreshInterval) {
        roomsRefreshInterval = setInterval(() => {
            if (isRoomsBrowserOpen) {
                console.log('Auto-refreshing public rooms');
                loadPublicRoomsWebSocket();
            }
        }, ROOMS_CONFIG.refreshInterval);
    }
}

// Close the public rooms browser
function closePublicRoomsBrowser() {
    console.log('Closing public rooms browser');
    const browserElement = document.getElementById('publicRoomsBrowser');
    if (browserElement) {
        browserElement.style.display = 'none';
    }
    
    isRoomsBrowserOpen = false;
    unsubscribeFromPublicRooms();
    
    // Clear auto-refresh
    if (roomsRefreshInterval) {
        clearInterval(roomsRefreshInterval);
        roomsRefreshInterval = null;
    }
}

// Subscribe to live public rooms updates
function subscribeToPublicRooms() {
    if (isSocketAvailable() && !isSubscribedToRooms) {
        try {
            socket.emit('subscribe_public_rooms');
            isSubscribedToRooms = true;
            console.log('Subscribed to public rooms updates');
        } catch (error) {
            console.error('Error subscribing to public rooms:', error);
        }
    }
}

// Unsubscribe from public rooms updates
function unsubscribeFromPublicRooms() {
    if (isSocketAvailable() && isSubscribedToRooms) {
        try {
            socket.emit('unsubscribe_public_rooms');
            isSubscribedToRooms = false;
            console.log('Unsubscribed from public rooms updates');
        } catch (error) {
            console.error('Error unsubscribing from public rooms:', error);
        }
    }
}

// Check if socket is available and connected
function isSocketAvailable() {
    return typeof socket !== 'undefined' && 
           socket !== null && 
           socket.connected;
}

// Load public rooms via WebSocket with fallback
function loadPublicRoomsWebSocket() {
    if (!isRoomsBrowserOpen) {
        console.log('Rooms browser not open, skipping load');
        return;
    }
    
    try {
        showLoadingState();
        updateFiltersFromUI();
        
        if (isSocketAvailable()) {
            console.log('Loading rooms via WebSocket');
            socket.emit('request_public_rooms', {
                sort: currentSortBy,
                min_users: currentMinUsers,
                limit: 50
            });
            
            // Set a timeout for WebSocket response
            setTimeout(() => {
                if (document.getElementById('roomsLoading')?.style.display !== 'none') {
                    console.warn('WebSocket timeout, falling back to HTTP');
                    loadPublicRoomsHTTP();
                }
            }, 5000);
        } else {
            console.log('WebSocket not available, using HTTP fallback');
            loadPublicRoomsHTTP();
        }
        
    } catch (error) {
        console.error('Error requesting public rooms via WebSocket:', error);
        loadPublicRoomsHTTP();
    }
}

// Update filters from UI elements
function updateFiltersFromUI() {
    const sortSelect = document.getElementById('roomsSortSelect');
    const minUsersFilter = document.getElementById('minUsersFilter');
    
    currentSortBy = sortSelect?.value || 'activity';
    currentMinUsers = parseInt(minUsersFilter?.value || '0') || 0;
    
    console.log(`Updated filters: sort=${currentSortBy}, minUsers=${currentMinUsers}`);
}

// Enhanced HTTP fallback with retry logic
async function loadPublicRoomsHTTP() {
    if (!isRoomsBrowserOpen) {
        console.log('Rooms browser not open, skipping HTTP load');
        return;
    }
    
    try {
        showLoadingState();
        updateFiltersFromUI();
        
        console.log(`Loading rooms via HTTP (attempt ${retryAttempts + 1}/${MAX_RETRY_ATTEMPTS})`);
        
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
        
        const response = await fetch(
            `/api/rooms/public?sort=${encodeURIComponent(currentSortBy)}&min_users=${currentMinUsers}&limit=50`,
            { signal: controller.signal }
        );
        
        clearTimeout(timeoutId);
        
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        
        const data = await response.json();
        
        if (!data || !Array.isArray(data.rooms)) {
            throw new Error('Invalid response format');
        }
        
        publicRoomsData = data.rooms;
        console.log(`Loaded ${publicRoomsData.length} rooms via HTTP`);
        
        // Load stats separately
        await loadRoomStats();
        
        displayRooms();
        retryAttempts = 0; // Reset on success
        
    } catch (error) {
        console.error('Error loading public rooms via HTTP:', error);
        
        if (error.name === 'AbortError') {
            console.error('Request timed out');
        }
        
        retryAttempts++;
        
        if (retryAttempts < MAX_RETRY_ATTEMPTS) {
            console.log(`Retrying in ${ROOMS_CONFIG.retryDelay}ms...`);
            setTimeout(() => {
                if (isRoomsBrowserOpen) {
                    loadPublicRoomsHTTP();
                }
            }, ROOMS_CONFIG.retryDelay);
        } else {
            showErrorState();
            retryAttempts = 0;
        }
    }
}

// Load room statistics
async function loadRoomStats() {
    try {
        const statsResponse = await fetch('/api/rooms/stats');
        if (statsResponse.ok) {
            const stats = await statsResponse.json();
            updateStatsDisplay(stats);
        }
    } catch (error) {
        console.warn('Failed to load room stats:', error);
    }
}

// Refresh public rooms with user feedback
function refreshPublicRooms() {
    console.log('Manual refresh requested');
    retryAttempts = 0; // Reset retry counter on manual refresh
    
    // Show brief loading indicator
    const refreshBtn = document.getElementById('refreshPublicRoomsBtn');
    const originalText = refreshBtn?.textContent;
    
    if (refreshBtn) {
        refreshBtn.textContent = 'Refreshing...';
        refreshBtn.disabled = true;
    }
    
    loadPublicRoomsWebSocket();
    
    // Reset button after delay
    setTimeout(() => {
        if (refreshBtn) {
            refreshBtn.textContent = originalText || 'Refresh';
            refreshBtn.disabled = false;
        }
    }, 2000);
}

// Update stats display with enhanced formatting
function updateStatsDisplay(stats) {
    const statsElement = document.getElementById('roomsStats');
    if (!statsElement || !stats) return;
    
    const publicRooms = stats.public_rooms || 0;
    const totalUsers = stats.total_users || 0;
    const lastUpdated = new Date().toLocaleTimeString();
    
    statsElement.innerHTML = `
        <span>${publicRooms} public room${publicRooms !== 1 ? 's' : ''}</span>
        <span>•</span>
        <span>${totalUsers} user${totalUsers !== 1 ? 's' : ''} online</span>
        <span style="color: #666; font-size: 0.85em;">• Updated ${lastUpdated}</span>
    `;
}

// Enhanced loading state
function showLoadingState() {
    const loadingElement = document.getElementById('roomsLoading');
    const listElement = document.getElementById('roomsList');
    const emptyElement = document.getElementById('roomsEmpty');
    
    if (loadingElement) {
        loadingElement.style.display = 'flex';
        loadingElement.innerHTML = `
            <div style="display: flex; align-items: center; gap: 1rem; color: #888;">
                <div class="loading-spinner" style="
                    width: 20px;
                    height: 20px;
                    border: 2px solid #333;
                    border-top: 2px solid #00ff88;
                    border-radius: 50%;
                    animation: spin 1s linear infinite;
                "></div>
                <span>Loading public rooms...</span>
            </div>
        `;
    }
    if (listElement) listElement.style.display = 'none';
    if (emptyElement) emptyElement.style.display = 'none';
}

// Enhanced error state with retry options
function showErrorState() {
    const loadingElement = document.getElementById('roomsLoading');
    const listElement = document.getElementById('roomsList');
    const emptyElement = document.getElementById('roomsEmpty');
    
    if (loadingElement) loadingElement.style.display = 'none';
    if (listElement) listElement.style.display = 'none';
    
    if (emptyElement) {
        emptyElement.style.display = 'flex';
        emptyElement.innerHTML = `
            <div style="text-align: center; max-width: 400px;">
                <div style="font-size: 3rem; margin-bottom: 1rem;">⚠️</div>
                <h3 style="margin: 0 0 0.5rem 0; color: #ffffff;">Failed to Load Rooms</h3>
                <p style="margin: 0 0 1.5rem 0; color: #888; line-height: 1.5;">
                    Unable to connect to the server. This could be due to network issues or server maintenance.
                </p>
                <div style="display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap;">
                    <button class="btn" onclick="refreshPublicRooms()">Try Again</button>
                    <button class="btn btn-secondary" onclick="loadPublicRoomsHTTP()">Force HTTP</button>
                </div>
                <p style="margin-top: 1rem; color: #666; font-size: 0.85em;">
                    Attempted ${retryAttempts}/${MAX_RETRY_ATTEMPTS} retries
                </p>
            </div>
        `;
    }
}

// Enhanced room display with better error handling
function displayRooms() {
    const roomsList = document.getElementById('roomsList');
    const roomsLoading = document.getElementById('roomsLoading');
    const roomsEmpty = document.getElementById('roomsEmpty');
    
    if (roomsLoading) roomsLoading.style.display = 'none';
    
    if (!Array.isArray(publicRoomsData) || publicRoomsData.length === 0) {
        if (roomsEmpty) {
            roomsEmpty.style.display = 'flex';
            roomsEmpty.innerHTML = `
                <div style="text-align: center;">
                    <div style="font-size: 2.5rem; margin-bottom: 1rem;">🏠</div>
                    <h3 style="margin: 0 0 0.5rem 0; color: #ffffff;">No Public Rooms Found</h3>
                    <p style="margin: 0 0 1rem 0; color: #888;">
                        ${currentMinUsers > 0 ? `Try reducing the minimum users filter (currently ${currentMinUsers})` : 'Check back later or create your own room'}
                    </p>
                    <button class="btn btn-secondary" onclick="refreshPublicRooms()">Refresh</button>
                </div>
            `;
        }
        if (roomsList) roomsList.style.display = 'none';
        return;
    }
    
    if (roomsEmpty) roomsEmpty.style.display = 'none';
    if (roomsList) {
        roomsList.style.display = 'block';
        
        try {
            const roomsHtml = publicRoomsData.map(room => createRoomCard(room)).join('');
            roomsList.innerHTML = roomsHtml;
            console.log(`Displayed ${publicRoomsData.length} rooms`);
        } catch (error) {
            console.error('Error rendering rooms:', error);
            showErrorState();
        }
    }
}

// Enhanced room card with better data handling
function createRoomCard(room) {
    if (!room || typeof room !== 'object') {
        console.warn('Invalid room data:', room);
        return '';
    }
    
    const roomId = sanitizeText(room.room_id || 'unknown');
    const title = sanitizeText(room.title || room.room_id || 'Unnamed Room');
    const description = sanitizeText(room.description || 'No description available');
    const userCount = Math.max(0, parseInt(room.user_count) || 0);
    const messageCount = Math.max(0, parseInt(room.message_count) || 0);
    const minutesAgo = Math.max(0, parseInt(room.minutes_since_activity) || 0);
    
    const activityClass = getActivityClass(minutesAgo);
    const timeAgo = formatTimeAgo(minutesAgo);
    
    return `
        <div class="room-card" 
             onclick="joinPublicRoom('${escapeHtml(roomId)}')" 
             style="
                 cursor: pointer;
                 transition: all 0.2s ease;
                 border: 1px solid #333;
                 border-radius: 8px;
                 padding: 1rem;
                 margin-bottom: 1rem;
                 background: #2a2a2a;
             "
             onmouseover="this.style.background='#333'; this.style.borderColor='#555';"
             onmouseout="this.style.background='#2a2a2a'; this.style.borderColor='#333';">
            
            <div class="room-title" style="
                display: flex;
                align-items: center;
                gap: 0.5rem;
                margin-bottom: 0.5rem;
                font-size: 1.1rem;
                font-weight: bold;
                color: #ffffff;
            ">
                ${title}
                <span class="activity-indicator ${activityClass}" style="
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    flex-shrink: 0;
                "></span>
            </div>
            
            <div class="room-description" style="
                color: #b0b0b0;
                margin-bottom: 1rem;
                line-height: 1.4;
                font-size: 0.9rem;
            ">${description}</div>
            
            <div class="room-stats" style="
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
                gap: 0.5rem;
                font-size: 0.85rem;
                color: #888;
            ">
                <div class="room-stat" style="display: flex; align-items: center; gap: 0.25rem;">
                    <span>👥</span>
                    <span>${userCount} user${userCount !== 1 ? 's' : ''}</span>
                </div>
                <div class="room-stat" style="display: flex; align-items: center; gap: 0.25rem;">
                    <span>💬</span>
                    <span>${messageCount} message${messageCount !== 1 ? 's' : ''}</span>
                </div>
                <div class="room-stat" style="display: flex; align-items: center; gap: 0.25rem;">
                    <span>🕐</span>
                    <span>Active ${timeAgo}</span>
                </div>
                <div class="room-stat" style="display: flex; align-items: center; gap: 0.25rem;">
                    <span>🆔</span>
                    <span style="font-family: monospace; font-size: 0.8em;">${roomId}</span>
                </div>
            </div>
        </div>
    `;
}

// Enhanced activity classification
function getActivityClass(minutesAgo) {
    if (minutesAgo <= 5) return 'activity-active';
    if (minutesAgo <= 30) return 'activity-recent';
    if (minutesAgo <= 120) return 'activity-moderate';
    return 'activity-old';
}

// Enhanced time formatting
function formatTimeAgo(minutes) {
    if (minutes < 1) return 'just now';
    if (minutes < 60) return `${Math.floor(minutes)}m ago`;
    
    const hours = Math.floor(minutes / 60);
    if (hours < 24) return `${hours}h ago`;
    
    const days = Math.floor(hours / 24);
    if (days < 7) return `${days}d ago`;
    
    const weeks = Math.floor(days / 7);
    return `${weeks}w ago`;
}

// Enhanced text sanitization
function sanitizeText(text) {
    if (typeof text !== 'string') return '';
    return text.trim().substring(0, 200); // Limit length and trim
}

// Enhanced HTML escaping
function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = String(text);
    return div.innerHTML;
}

// Enhanced room joining with validation
function joinPublicRoom(roomId) {
    if (!roomId || typeof roomId !== 'string') {
        console.error('Invalid room ID provided:', roomId);
        return;
    }
    
    // Validate room ID format
    const roomIdPattern = /^[a-zA-Z0-9\-_]{1,32}$/;
    if (!roomIdPattern.test(roomId)) {
        console.error('Invalid room ID format:', roomId);
        return;
    }
    
    console.log(`Joining public room: ${roomId}`);
    
    // Close the browser
    closePublicRoomsBrowser();
    
    // Fill in the room input
    const roomInput = document.getElementById('roomInput');
    if (roomInput) {
        roomInput.value = roomId;
        roomInput.dispatchEvent(new Event('input', { bubbles: true }));
    }
    
    // Clear password field for public rooms
    const roomPasswordInput = document.getElementById('roomPasswordInput');
    if (roomPasswordInput) {
        roomPasswordInput.value = '';
    }
    
    // Trigger join room functionality with delay to ensure UI updates
    setTimeout(() => {
        const joinButton = document.getElementById('joinRoomBtn');
        if (joinButton) {
            joinButton.click();
        } else {
            console.error('Join button not found');
        }
    }, 100);
}

// Enhanced WebSocket handlers
function setupPublicRoomsWebSocketHandlers() {
    if (!isSocketAvailable()) {
        console.log('Socket not available, WebSocket handlers not attached');
        return;
    }

    // Handle public rooms data response
    socket.on('public_rooms_data', function(data) {
        console.log('Received public rooms data via WebSocket:', data);
        
        if (data && Array.isArray(data.rooms)) {
            publicRoomsData = data.rooms;
        } else {
            console.warn('Invalid public rooms data format');
            publicRoomsData = [];
        }
        
        if (data && data.stats) {
            updateStatsDisplay(data.stats);
        }
        
        if (isRoomsBrowserOpen) {
            displayRooms();
        }
    });

    // Handle live updates
    socket.on('public_rooms_updated', function(data) {
        console.log('Received live public rooms update:', data);
        
        if (isRoomsBrowserOpen && isSubscribedToRooms) {
            if (data && Array.isArray(data.rooms)) {
                publicRoomsData = data.rooms;
            }
            
            if (data && data.stats) {
                updateStatsDisplay(data.stats);
            }
            
            displayRooms();
        }
    });

    // Handle WebSocket errors
    socket.on('public_rooms_error', function(data) {
        console.error('Public rooms WebSocket error:', data);
        if (isRoomsBrowserOpen) {
            showErrorState();
        }
    });

    // Handle connection events
    socket.on('connect', function() {
        console.log('Socket connected, resubscribing if browser is open');
        if (isRoomsBrowserOpen && !isSubscribedToRooms) {
            subscribeToPublicRooms();
        }
    });

    socket.on('disconnect', function() {
        console.log('Socket disconnected');
        isSubscribedToRooms = false;
    });

    console.log('Enhanced public rooms WebSocket handlers attached');
}

// Enhanced socket initialization
function waitForSocketAndSetupHandlers(retryCount = 0) {
    if (isSocketAvailable()) {
        setupPublicRoomsWebSocketHandlers();
        console.log('WebSocket handlers setup successfully');
        return;
    }
    
    if (retryCount > 100) { // 100 * 250ms = 25 seconds max wait
        console.warn('Socket failed to initialize after 25 seconds, using HTTP-only mode');
        return;
    }
    
    if (retryCount % 20 === 0) { // Log every 5 seconds
        console.log(`Waiting for socket... (attempt ${retryCount + 1})`);
    }
    
    setTimeout(() => waitForSocketAndSetupHandlers(retryCount + 1), 250);
}

// Enhanced event listeners with better error handling
document.addEventListener('DOMContentLoaded', function() {
    console.log('Setting up public rooms browser event listeners');
    
    // Browse button (this was missing!)
    const browseButton = document.getElementById('browsePublicRoomsBtn');
    if (browseButton) {
        browseButton.addEventListener('click', showPublicRoomsBrowser);
        console.log('Browse public rooms button listener attached');
    } else {
        console.warn('Browse public rooms button not found');
    }
    
    // Close button
    const closeButton = document.getElementById('closePublicRoomsBrowserBtn');
    if (closeButton) {
        closeButton.addEventListener('click', closePublicRoomsBrowser);
    }
    
    // Sort selector
    const sortSelect = document.getElementById('roomsSortSelect');
    if (sortSelect) {
        sortSelect.addEventListener('change', refreshPublicRooms);
    }
    
    // Min users filter
    const minUsersFilter = document.getElementById('minUsersFilter');
    if (minUsersFilter) {
        minUsersFilter.addEventListener('change', refreshPublicRooms);
        minUsersFilter.addEventListener('input', debounce(refreshPublicRooms, 1000));
    }
    
    // Refresh button
    const refreshButton = document.getElementById('refreshPublicRoomsBtn');
    if (refreshButton) {
        refreshButton.addEventListener('click', refreshPublicRooms);
    }
    
    // Backdrop click handler
    const browserElement = document.getElementById('publicRoomsBrowser');
    if (browserElement) {
        browserElement.addEventListener('click', function(e) {
            if (e.target === this) {
                closePublicRoomsBrowser();
            }
        });
    }
    
    // Keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        if (!isRoomsBrowserOpen) return;
        
        if (e.key === 'Escape') {
            e.preventDefault();
            closePublicRoomsBrowser();
        } else if (e.key === 'F5' || (e.ctrlKey && e.key === 'r')) {
            e.preventDefault();
            refreshPublicRooms();
        }
    });
    
    // Start WebSocket setup
    waitForSocketAndSetupHandlers();
    
    console.log('Public rooms browser setup complete');
});

// Utility: Debounce function
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func.apply(this, args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// Cleanup on page unload
window.addEventListener('beforeunload', function() {
    if (isSubscribedToRooms) {
        unsubscribeFromPublicRooms();
    }
    if (roomsRefreshInterval) {
        clearInterval(roomsRefreshInterval);
    }
});

// Add CSS for activity indicators if not already present
if (!document.getElementById('roomsActivityStyles')) {
    const style = document.createElement('style');
    style.id = 'roomsActivityStyles';
    style.textContent = `
        .activity-active {
            background-color: #00ff88 !important;
            box-shadow: 0 0 6px rgba(0, 255, 136, 0.6);
        }
        .activity-recent {
            background-color: #ffaa00 !important;
        }
        .activity-moderate {
            background-color: #888 !important;
        }
        .activity-old {
            background-color: #444 !important;
        }
        .room-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
    `;
    document.head.appendChild(style);
}