// Function to fetch the username
async function fetchUsername() {
    const userId = localStorage.getItem("userId"); // Replace with the actual user ID
    const secret = localStorage.getItem("secret")

    try {
        const response = await fetch(`/api/user/test/${userId}/${secret}`);
        const userData = await response.json();

        // Call function to display username
        displayUsername(localStorage.getItem("username"));
        displayTestResults(userData);
    } catch (error) {
        console.error('Error fetching username:', error);
    }
}

// Function to display test results in a table
function displayTestResults(testData) {
    const testResultsDiv = document.getElementById('testResults');

    if (!testData) {
        testResultsDiv.innerHTML = '<p>No test data available.</p>';
        return;
    }

    // Construct HTML for the table
    const html = `
        <table>
            <tr>
                <th>Test Type</th>
                <th>Test Length</th>
                <th>Test Time</th>
                <th>Test Seed</th>
                <th>Quote ID</th>
                <th>Words Per Minute (WPM)</th>
                <th>Accuracy</th>
            </tr>
            <tr>
                <td>${testData.test_type}</td>
                <td>${testData.test_length}</td>
                <td>${testData.test_time}</td>
                <td>${testData.test_seed}</td>
                <td>${testData.quote_id}</td>
                <td>${testData.wpm}</td>
                <td>${testData.accuracy}</td>
            </tr>
        </table>
    `;

    // Update the testResultsDiv with the HTML
    testResultsDiv.innerHTML = html;
}

// Function to display username
function displayUsername(username) {
    const usernameDiv = document.getElementById('username');

    if (!username) {
        usernameDiv.innerHTML = '<p>No username available.</p>';
        return;
    }

    // Update the usernameDiv with the username
    usernameDiv.innerHTML = `<p><strong>Welcome, ${username}!</strong></p>`;
}

// Call the fetchUsername function when the page loads
window.onload = fetchUsername;