<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CDN & Server Performance Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .container {
            background: white;
            border-radius: 20px;
            padding: 40px;
            max-width: 800px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        h1 {
            color: #333;
            margin-bottom: 10px;
            font-size: 28px;
        }
        .subtitle {
            color: #666;
            margin-bottom: 30px;
            font-size: 14px;
            border-bottom: 2px solid #667eea;
            padding-bottom: 15px;
        }
        .status-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin: 25px 0;
        }
        .status-card {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 10px;
            border-left: 4px solid #667eea;
        }
        .status-card .label {
            font-size: 12px;
            color: #888;
            text-transform: uppercase;
            font-weight: 600;
        }
        .status-card .value {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin-top: 5px;
        }
        .status-card .value.good { color: #28a745; }
        .status-card .value.warning { color: #ffc107; }
        .status-card .value.error { color: #dc3545; }
        
        .info-box {
            background: #f1f3f5;
            padding: 15px;
            border-radius: 10px;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            overflow-x: auto;
            white-space: pre-wrap;
            word-break: break-all;
        }
        
        .test-btn {
            background: #667eea;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            margin: 10px 5px 10px 0;
        }
        .test-btn:hover {
            background: #5a67d8;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        .test-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        .result {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 10px;
            display: none;
        }
        .result.show {
            display: block;
        }
        .result.success { border: 2px solid #28a745; }
        .result.error { border: 2px solid #dc3545; }
        .result.warning { border: 2px solid #ffc107; }
        
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 10px;
            vertical-align: middle;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .timestamp {
            color: #999;
            font-size: 12px;
            margin-top: 20px;
            text-align: center;
        }
        
        @media (max-width: 600px) {
            .status-grid {
                grid-template-columns: 1fr;
            }
            .container {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚀 CDN Performance Test</h1>
        <div class="subtitle">
            Server: <strong id="serverInfo">Loading...</strong><br>
            Your IP: <span id="clientIP">Detecting...</span>
        </div>

        <!-- Status Cards -->
        <div class="status-grid">
            <div class="status-card">
                <div class="label">Page Load Time</div>
                <div class="value" id="loadTime">-- ms</div>
            </div>
            <div class="status-card">
                <div class="label">DNS Lookup</div>
                <div class="value" id="dnsTime">-- ms</div>
            </div>
            <div class="status-card">
                <div class="label">Server Response</div>
                <div class="value" id="serverTime">-- ms</div>
            </div>
            <div class="status-card">
                <div class="label">Content Download</div>
                <div class="value" id="downloadTime">-- ms</div>
            </div>
        </div>

        <!-- Test Buttons -->
        <div>
            <button class="test-btn" onclick="testLatency()">📡 Test CDN Latency</button>
            <button class="test-btn" onclick="testOrigin()">🔗 Test Origin Server</button>
            <button class="test-btn" onclick="clearResults()">🗑️ Clear Results</button>
        </div>

        <!-- Results Area -->
        <div id="resultArea" class="result"></div>

        <!-- Detailed Info -->
        <div style="margin-top: 20px;">
            <details>
                <summary style="cursor: pointer; font-weight: 600; color: #667eea;">
                    📊 View Detailed Network Info
                </summary>
                <div class="info-box" id="networkInfo">
                    Collecting network information...
                </div>
            </details>
        </div>

        <div class="timestamp">
            Page generated: <span id="pageTime"></span>
        </div>
    </div>

    <script>
        // Get page load timing
        function getPageTiming() {
            if (performance && performance.timing) {
                const timing = performance.timing;
                const loadTime = timing.loadEventEnd - timing.navigationStart;
                const dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
                const serverTime = timing.responseStart - timing.requestStart;
                const downloadTime = timing.responseEnd - timing.responseStart;
                
                document.getElementById('loadTime').textContent = loadTime + ' ms';
                document.getElementById('dnsTime').textContent = dnsTime + ' ms';
                document.getElementById('serverTime').textContent = serverTime + ' ms';
                document.getElementById('downloadTime').textContent = downloadTime + ' ms';
                
                // Color code
                document.getElementById('loadTime').className = 'value ' + (loadTime < 500 ? 'good' : loadTime < 2000 ? 'warning' : 'error');
            }
        }

        // Get client info
        async function getClientInfo() {
            try {
                // Get client IP via API
                const response = await fetch('https://api.ipify.org?format=json');
                const data = await response.json();
                document.getElementById('clientIP').textContent = data.ip;
            } catch (e) {
                document.getElementById('clientIP').textContent = 'Unable to detect';
            }

            // Get server info
            document.getElementById('serverInfo').textContent = window.location.hostname;
        }

        // Test CDN Latency
        async function testLatency() {
            const resultArea = document.getElementById('resultArea');
            resultArea.className = 'result show';
            resultArea.innerHTML = '<span class="loading"></span> Testing CDN latency...';
            
            const startTime = performance.now();
            
            try {
                // Fetch a small file with cache busting
                const response = await fetch('/?cache=' + Date.now(), {
                    method: 'HEAD'
                });
                
                const endTime = performance.now();
                const latency = Math.round(endTime - startTime);
                
                let status = 'success';
                let message = `✅ CDN responded in <strong>${latency}ms</strong>`;
                
                if (latency > 1000) {
                    status = 'error';
                    message = `⚠️ High CDN latency: <strong>${latency}ms</strong> - This is causing slow loading!`;
                } else if (latency > 300) {
                    status = 'warning';
                    message = `⚠️ Moderate CDN latency: <strong>${latency}ms</strong> - May affect user experience`;
                } else {
                    message = `✅ Excellent CDN response: <strong>${latency}ms</strong>`;
                }
                
                resultArea.className = `result show ${status}`;
                resultArea.innerHTML = `
                    <strong>📡 CDN Latency Test</strong><br>
                    ${message}<br>
                    <small>Server: ${window.location.hostname} | Status: ${response.status}</small>
                `;
                
            } catch (error) {
                resultArea.className = 'result show error';
                resultArea.innerHTML = `
                    ❌ CDN test failed: ${error.message}<br>
                    <small>Check if your CDN is properly configured</small>
                `;
            }
        }

        // Test Origin Server (bypass CDN)
        async function testOrigin() {
            const resultArea = document.getElementById('resultArea');
            resultArea.className = 'result show';
            resultArea.innerHTML = '<span class="loading"></span> Testing origin server connection...';
            
            // You need to replace this with your actual origin server IP
            // The CDN usually adds headers like X-Cache, CF-Ray, etc.
            
            try {
                const response = await fetch('/', {
                    headers: {
                        'Cache-Control': 'no-cache',
                        'Pragma': 'no-cache'
                    }
                });
                
                // Check for CDN headers
                const headers = {};
                response.headers.forEach((value, key) => {
                    headers[key] = value;
                });
                
                let cdnInfo = 'No CDN headers detected';
                let isCached = 'Unknown';
                
                if (headers['x-cache'] || headers['cf-cache-status']) {
                    cdnInfo = headers['x-cache'] || headers['cf-cache-status'] || 'CDN detected';
                    isCached = cdnInfo.includes('HIT') ? '✅ Cached' : '❌ Not cached (origin fetch)';
                }
                
                const serverHeader = headers['server'] || 'Unknown';
                
                resultArea.className = 'result show success';
                resultArea.innerHTML = `
                    <strong>🔗 Origin Server Test</strong><br>
                    Status: ${response.status} ${response.statusText}<br>
                    Server: ${serverHeader}<br>
                    Cache Status: ${isCached}<br>
                    CDN Headers: ${cdnInfo}<br>
                    <small>Response time: ${Math.round(response.headers.get('x-response-time') || 'N/A')}ms</small>
                `;
                
            } catch (error) {
                resultArea.className = 'result show error';
                resultArea.innerHTML = `
                    ❌ Origin test failed: ${error.message}<br>
                    <small>Your origin server might be unreachable or firewall blocking the CDN</small>
                `;
            }
        }

        // Get network info
        function getNetworkInfo() {
            const info = document.getElementById('networkInfo');
            let details = '';
            
            // Performance entries
            if (performance && performance.getEntriesByType) {
                const navEntries = performance.getEntriesByType('navigation');
                if (navEntries.length > 0) {
                    const nav = navEntries[0];
                    details += `DNS: ${Math.round(nav.domainLookupEnd - nav.domainLookupStart)}ms\n`;
                    details += `TCP: ${Math.round(nav.connectEnd - nav.connectStart)}ms\n`;
                    details += `SSL: ${Math.round((nav.secureConnectionStart ? nav.connectEnd - nav.secureConnectionStart : 0))}ms\n`;
                    details += `TTFB: ${Math.round(nav.responseStart - nav.requestStart)}ms\n`;
                    details += `Download: ${Math.round(nav.responseEnd - nav.responseStart)}ms\n`;
                }
            }
            
            // Resource entries
            const resources = performance.getEntriesByType('resource');
            if (resources.length > 0) {
                details += `\nTotal resources loaded: ${resources.length}`;
                let totalSize = 0;
                resources.forEach(r => {
                    if (r.transferSize) totalSize += r.transferSize;
                });
                details += `\nTotal size: ${(totalSize / 1024).toFixed(2)} KB`;
            }
            
            // Navigator info
            details += `\n\nConnection: ${navigator.connection ? navigator.connection.effectiveType : 'Unknown'}`;
            details += `\nDevice: ${/Mobile|Android|iPhone/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop'}`;
            
            info.textContent = details || 'No detailed network info available';
        }

        // Clear results
        function clearResults() {
            const resultArea = document.getElementById('resultArea');
            resultArea.className = 'result';
            resultArea.innerHTML = '';
        }

        // Set page time
        document.getElementById('pageTime').textContent = new Date().toLocaleString();

        // Run on load
        window.onload = function() {
            getPageTiming();
            getClientInfo();
            getNetworkInfo();
            
            // Auto-test CDN latency after 2 seconds
            setTimeout(testLatency, 2000);
        };
    </script>
</body>
</html>