<!DOCTYPE html>
<html>
<head>
    <title>API Test - Direct User Load</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; background: #f9f9f9; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ccc; border-radius: 5px; background: white; }
        pre { background: #f4f4f4; padding: 10px; overflow-x: auto; border-radius: 3px; }
        .success { color: #28a745; font-weight: bold; }
        .error { color: #dc3545; font-weight: bold; }
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
        th { background: #f4f4f4; }
        .debug-section { background: #f0f0f0; padding: 10px; margin-top: 15px; border-radius: 3px; }
        .debug-item { padding: 5px 0; }
        .debug-key { font-weight: bold; color: #333; }
        .debug-value { color: #666; }
    </style>
</head>
<body>
    <h1>API User Load Test</h1>
    
    <div class="test-section">
        <h2>Direct API Call Test</h2>
        <button onclick="testAPI()">Test api_list_users.php</button>
        <div id="api-result"></div>
    </div>
    
    <script>
    async function testAPI() {
        const resultDiv = document.getElementById('api-result');
        resultDiv.innerHTML = '<p>Loading...</p>';
        
        try {
            const response = await fetch('api_list_users.php');
            const data = await response.json();
            
            let html = '<h3>Raw Response:</h3>';
            html += '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
            
            // Show debug info if present
            if (data.debug) {
                html += '<div class="debug-section"><h3>Debug Information:</h3>';
                for (const [key, value] of Object.entries(data.debug)) {
                    html += '<div class="debug-item">';
                    html += '<span class="debug-key">' + key + ':</span> ';
                    html += '<span class="debug-value">' + JSON.stringify(value) + '</span>';
                    html += '</div>';
                }
                html += '</div>';
            }
            
            // Show results
            if (data.success && Array.isArray(data.users) && data.users.length > 0) {
                html += '<p class="success">✓ API returned ' + data.users.length + ' users!</p>';
                html += '<table>';
                html += '<tr><th>ID</th><th>Username</th><th>Email</th><th>Name</th><th>Admin</th></tr>';
                
                data.users.forEach(user => {
                    html += '<tr>';
                    html += '<td>' + user.id + '</td>';
                    html += '<td>' + user.username + '</td>';
                    html += '<td>' + user.email + '</td>';
                    html += '<td>' + (user.name || '—') + '</td>';
                    html += '<td>' + (user.is_admin ? 'Yes' : 'No') + '</td>';
                    html += '</tr>';
                });
                html += '</table>';
            } else if (Array.isArray(data.users) && data.users.length === 0) {
                html += '<p class="error">⚠ API returned empty user list</p>';
            } else {
                html += '<p class="error">✗ API returned error: ' + (data.message || 'Unknown') + '</p>';
            }
            
            resultDiv.innerHTML = html;
        } catch (err) {
            resultDiv.innerHTML = '<p class="error">✗ Error: ' + err.message + '</p>';
        }
    }
    
    // Auto-test on load
    window.addEventListener('load', () => {
        console.log('Page loaded, running test...');
        testAPI();
    });
    </script>
</body>
</html>
