<!DOCTYPE html>
<html>
<head>
    <title>API Raw Output Test</title>
    <style>
        body { font-family: Arial; padding: 20px; background: #f5f5f5; }
        .box { background: white; padding: 20px; border-radius: 5px; margin: 10px 0; border: 1px solid #ddd; }
        pre { background: #f0f0f0; padding: 15px; overflow: auto; border-radius: 3px; }
        button { padding: 10px 20px; background: #0066cc; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; }
        button:hover { background: #0052a3; }
        .success { color: green; font-weight: bold; }
        .error { color: red; font-weight: bold; }
    </style>
</head>
<body>
    <div class="box">
        <h1>API Raw Output Test</h1>
        <button onclick="testAPI()">Test API Now</button>
        <div id="result"></div>
    </div>

    <script>
    async function testAPI() {
        const resultDiv = document.getElementById('result');
        resultDiv.innerHTML = '<p>Testing...</p>';
        
        try {
            const response = await fetch('api_list_users.php');
            const text = await response.text();
            
            // Show raw text
            resultDiv.innerHTML = '<h2>Raw Response Text:</h2>';
            resultDiv.innerHTML += '<pre>' + JSON.stringify(text, null, 2) + '</pre>';
            
            // Try to parse as JSON
            try {
                const data = JSON.parse(text);
                resultDiv.innerHTML += '<h2>Parsed JSON:</h2>';
                resultDiv.innerHTML += '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
                
                if (data.users && data.users.length > 0) {
                    resultDiv.innerHTML += '<h2 class="success">✓ SUCCESS: Found ' + data.users.length + ' users</h2>';
                    resultDiv.innerHTML += '<table style="width:100%; border-collapse: collapse;">';
                    resultDiv.innerHTML += '<tr>';
                    resultDiv.innerHTML += '<th style="border: 1px solid #ddd; padding: 8px;">ID</th>';
                    resultDiv.innerHTML += '<th style="border: 1px solid #ddd; padding: 8px;">Username</th>';
                    resultDiv.innerHTML += '<th style="border: 1px solid #ddd; padding: 8px;">Email</th>';
                    resultDiv.innerHTML += '</tr>';
                    data.users.forEach(user => {
                        resultDiv.innerHTML += '<tr>';
                        resultDiv.innerHTML += '<td style="border: 1px solid #ddd; padding: 8px;">' + user.id + '</td>';
                        resultDiv.innerHTML += '<td style="border: 1px solid #ddd; padding: 8px;">' + user.username + '</td>';
                        resultDiv.innerHTML += '<td style="border: 1px solid #ddd; padding: 8px;">' + user.email + '</td>';
                        resultDiv.innerHTML += '</tr>';
                    });
                    resultDiv.innerHTML += '</table>';
                } else if (data.debug) {
                    resultDiv.innerHTML += '<h2>Debug Info:</h2>';
                    resultDiv.innerHTML += '<pre>' + JSON.stringify(data.debug, null, 2) + '</pre>';
                }
            } catch(e) {
                resultDiv.innerHTML += '<h2 class="error">✗ JSON Parse Error: ' + e.message + '</h2>';
            }
        } catch (err) {
            resultDiv.innerHTML = '<h2 class="error">✗ Fetch Error: ' + err.message + '</h2>';
        }
    }
    
    // Auto-test on page load
    window.addEventListener('load', testAPI);
    </script>
</body>
</html>
