<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Operivara Dashboard</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="app-container">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="logo">
                <i class="fas fa-robot"></i>
                <span>Operivara</span>
            </div>
            
            <nav class="navigation">
                <a href="dashboard" class="nav-item active" data-page="dashboard">
                    <i class="fas fa-tachometer-alt"></i>
                    <span>Dashboard</span>
                </a>
                <a href="settings" class="nav-item" data-page="settings">
                    <i class="fas fa-cog"></i>
                    <span>Settings</span>
                </a>
                <a href="stats" class="nav-item" data-page="stats">
                    <i class="fas fa-chart-bar"></i>
                    <span>Stats</span>
                </a>
                <a href="security" class="nav-item" data-page="security">
                    <i class="fas fa-shield-alt"></i>
                    <span>Security</span>
                </a>
                <a href="premium" class="nav-item" data-page="premium">
                    <i class="fas fa-crown"></i>
                    <span>Premium</span>
                </a>
                <a href="https://vote.operivara.com" class="nav-item" target="_blank">
                    <i class="fas fa-vote-yea"></i>
                    <span>Vote</span>
                </a>
                <a href="support" class="nav-item" data-page="support">
                    <i class="fas fa-headset"></i>
                    <span>Support</span>
                </a>
            </nav>
            
            <div class="user-profile">
                <div class="user-info">
                    <img src="https://ui-avatars.com/api/?name=Wesley57766670&background=5ce1e6&color=fff&size=32" alt="User Avatar" class="user-avatar">
                    <span class="username">Wesley57766670</span>
                </div>
                <a href="profile" class="nav-item" data-page="profile">
                    <i class="fas fa-user"></i>
                    <span>Profile</span>
                </a>
            </div>
            
            <button class="logout-btn" onclick="handleLogout()">
                <i class="fas fa-sign-out-alt"></i>
                <span>Logout</span>
            </button>
        </aside>
        
        <!-- Main Content -->
        <div class="main-content">
            <div class="content-wrapper">
                <div class="page-content">
                    <div class="page-header">
                        <h1>Dashboard</h1>
                        <p>Welcome to your Operivara dashboard</p>
                    </div>
                    
                    <div class="stats-container">
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-server"></i>
                            </div>
                            <div class="stat-content">
                                <h3>Servers</h3>
                                <p class="stat-number" id="servers-count">Loading.</p>
                            </div>
                        </div>
                        
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <div class="stat-content">
                                <h3>Users</h3>
                                <p class="stat-number" id="users-count">Loading.</p>
                            </div>
                        </div>
                        
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div class="stat-content">
                                <h3>Uptime</h3>
                                <p class="stat-number" id="uptime">Loading.</p>
                            </div>
                        </div>
                                                
                    </div>
                    
                    <div class="page-content">
                        <h3>Recent Changelog</h3>
                        <div id="changelog-container">
                            <div class="loading-spinner">
                                <i class="fas fa-spinner fa-spin"></i>
                                <span>Loading changelog...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Bottom Action Bar -->
            <div class="action-bar">
                <a href="https://docs.operivara.com" target="_blank" class="action-link">
                    <i class="fas fa-book"></i>
                    <span>Documentation</span>
                </a>
                <a href="https://invite.operivara.com" target="_blank" class="action-link">
                    <i class="fas fa-plus-circle"></i>
                    <span>Add bot</span>
                </a>
                <a href="https://servers.operivara.com" target="_blank" class="action-link">
                    <i class="fas fa-server"></i>
                    <span>Servers</span>
                </a>
                <a href="https://faq.operivara.com" target="_blank" class="action-link">
                    <i class="fas fa-question-circle"></i>
                    <span>FAQ</span>
                </a>
            </div>
        </div>
    </div>
    
    <script src="js/auth.js"></script>
    
    <script>
        // Loading animation for stats
        let loadingStates = ['Loading.', 'Loading..', 'Loading...'];
        let currentLoadingIndex = 0;
        let loadingInterval;
        let isLoading = true;
        
        function updateLoadingAnimation() {
            if (!isLoading) return;
            
            const loadingElements = [
                'servers-count', 'users-count', 'uptime'
            ];
            
            loadingElements.forEach(id => {
                const element = document.getElementById(id);
                if (element && (element.textContent === 'Loading.' || 
                               element.textContent === 'Loading..' || 
                               element.textContent === 'Loading...')) {
                    element.textContent = loadingStates[currentLoadingIndex];
                }
            });
            
            currentLoadingIndex = (currentLoadingIndex + 1) % loadingStates.length;
        }
        
        function stopLoadingAnimation() {
            isLoading = false;
            if (loadingInterval) {
                clearInterval(loadingInterval);
            }
        }
        
        // Start loading animation
        loadingInterval = setInterval(updateLoadingAnimation, 500);
        
        // Load bot statistics from API
        async function loadBotStats() {
            try {
                const response = await fetch('https://api.operivara.com/v1/bot-status');
                const result = await response.json();
                
                if (result.success && result.data && result.data.success && result.data.data) {
                    const data = result.data.data;
                    
                    // Update statistics
                    const serversCountEl = document.getElementById('servers-count');
                    serversCountEl.textContent = data.statistics.guilds ? data.statistics.guilds : 'Loading...';

                    const usersCountEl = document.getElementById('users-count');
                    usersCountEl.textContent = data.statistics.users ? data.statistics.users : 'Loading...';


                    const uptimeEl = document.getElementById('uptime');
                    uptimeEl.textContent = data.statistics.uptime ? data.statistics.uptime : 'Loading...';


                    
                    // Stop loading animation once data is loaded
                    stopLoadingAnimation();
                    
                } else {
                    throw new Error('Invalid response format');
                }
            } catch (error) {
                console.error('Failed to load bot stats:', error);
                // Set default values on error
                document.getElementById('servers-count').textContent = 'Error';
                document.getElementById('users-count').textContent = 'Error';
                document.getElementById('uptime').textContent = 'Error';
                
                // Stop loading animation on error too
                stopLoadingAnimation();
            }
        }
        
        // Load changelog from API
        async function loadChangelog() {
            try {
                const response = await fetch('https://api.operivara.com/v1/get-changelog');
                const result = await response.json();
                
                if (result.success && result.data && result.data.success && result.data.data.changelog) {
                    const changelogContainer = document.getElementById('changelog-container');
                    changelogContainer.innerHTML = '';
                    
                    result.data.data.changelog.forEach(item => {
                        const changelogItem = document.createElement('div');
                        changelogItem.className = 'changelog-item';
                        changelogItem.innerHTML = `
                            <div class="changelog-date">${item.date}</div>
                            <div class="changelog-content">
                                <h4>${item.title}<span class="changelog-version">${item.version}</span></h4>
                                <p>${item.description}</p>
                            </div>
                        `;
                        changelogContainer.appendChild(changelogItem);
                    });
                } else {
                    throw new Error('Invalid response format');
                }
            } catch (error) {
                console.error('Failed to load changelog:', error);
                const changelogContainer = document.getElementById('changelog-container');
                changelogContainer.innerHTML = `
                    <div class="error-message">
                        <i class="fas fa-exclamation-triangle"></i>
                        <p>Failed to load changelog. Please try again later.</p>
                    </div>
                `;
            }
        }
        
        // Function to get cached server data
        function getCachedServerData() {
            try {
                const cached = localStorage.getItem('operivara_server_cache');
                if (!cached) return null;
                
                const parsed = JSON.parse(cached);
                const now = Date.now();
                
                // Check if cache is still valid (5 minutes)
                if (now - parsed.timestamp > 5 * 60 * 1000) {
                    console.log('Cache expired');
                    return null;
                }
                
                return parsed;
            } catch (error) {
                console.error('Error reading cache:', error);
                return null;
            }
        }

        // Function to cache server data
        function cacheServerData(servers) {
            try {
                const cacheData = {
                    servers: servers,
                    timestamp: Date.now()
                };
                localStorage.setItem('operivara_server_cache', JSON.stringify(cacheData));
                console.log('Server data cached');
            } catch (error) {
                console.error('Error caching data:', error);
            }
        }

        // Function to fetch and cache servers
        async function fetchAndCacheServers() {
            try {
                // Get userId and accessToken from cookies (same method as auth.js)
                function getCookie(name) {
                    const cookies = document.cookie.split(';');
                    for (let cookie of cookies) {
                        const [cookieName, cookieValue] = cookie.trim().split('=');
                        if (cookieName === name) {
                            return decodeURIComponent(cookieValue);
                        }
                    }
                    return null;
                }
                
                const userId = getCookie('operivara_user') ? JSON.parse(getCookie('operivara_user')).id : null;
                const accessToken = getCookie('operivara_access_token');
                
                if (!userId || !accessToken) {
                    console.log('No auth credentials found');
                    return;
                }
                
                // Call get-user-servers function
                const response = await fetch(`/.netlify/functions/get-user-servers?userId=${userId}&accessToken=${accessToken}`);
                
                if (!response.ok) {
                    throw new Error(`Server error: ${response.status}`);
                }

                const result = await response.json();
                
                if (result.success && result.data && result.data.userGuilds) {
                    const adminServers = result.data.userGuilds;
                    
                    if (adminServers && adminServers.length > 0) {
                        // Cache the fresh data
                        cacheServerData(adminServers);
                        
                        // Update servers count with fresh data
                        const serversCountEl = document.getElementById('servers-count');
                        if (serversCountEl) {
                            serversCountEl.textContent = adminServers.length;
                        }
                    }
                } else {
                    throw new Error(result.error || 'Invalid response format');
                }
            } catch (error) {
                console.error('Failed to fetch servers:', error);
            }
        }

        // Load all data when page loads
        document.addEventListener('DOMContentLoaded', function() {
            loadBotStats();
            loadChangelog();
            
            // Check if we have cached server data and update count
            const cachedData = getCachedServerData();
            if (cachedData && cachedData.servers) {
                const serversCountEl = document.getElementById('servers-count');
                if (serversCountEl) {
                    serversCountEl.textContent = cachedData.servers.length;
                }
            }
            
            // Always fetch fresh data in background
            fetchAndCacheServers();
            
            // Refresh stats every 30 seconds
            setInterval(loadBotStats, 30000);
        });
    </script>
</body>
</html>
