<!DOCTYPE html>
<html>
<head>
    <title>Debug API Response</title>
    <style>
        body { font-family: monospace; padding: 20px; }
        pre { background: #f0f0f0; padding: 15px; overflow: auto; word-break: break-all; }
    </style>
</head>
<body>
    <h1>Raw API Response Debug</h1>
    <p>Testing: <code>api_list_users.php</code></p>
    <hr>
    <h2>Response as Text:</h2>
    <pre id="raw"></pre>
    <h2>Response Length:</h2>
    <pre id="len"></pre>
    <h2>Response as Hex:</h2>
    <pre id="hex"></pre>

    <script>
    fetch('api_list_users.php')
        .then(r => r.text())
        .then(text => {
            document.getElementById('raw').textContent = text;
            document.getElementById('len').textContent = 'Length: ' + text.length + ' bytes';
            
            // Show hex representation
            let hex = '';
            for (let i = 0; i < Math.min(text.length, 200); i++) {
                hex += text.charCodeAt(i).toString(16).padStart(2, '0') + ' ';
            }
            document.getElementById('hex').textContent = hex;
            
            // Try to parse JSON
            try {
                let json = JSON.parse(text);
                document.getElementById('raw').textContent += '\n\n--- PARSED JSON ---\n' + JSON.stringify(json, null, 2);
            } catch (e) {
                document.getElementById('raw').textContent += '\n\n--- JSON PARSE ERROR ---\n' + e.message;
            }
        })
        .catch(e => {
            document.getElementById('raw').textContent = 'FETCH ERROR: ' + e.message;
        });
    </script>
</body>
</html>
