<!DOCTYPE html>
<html>
<head>
    <title>Test Results</title>
    <style>
        /* Add CSS styles for the table */
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            background-color: #fff;
            border-radius: 4px;
            overflow: hidden;
        }

        table th,
        table td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        table th {
            background-color: #f5f5f5;
        }

        table tr:hover {
            background-color: #f9f9f9;
        }

        table tfoot td {
            padding-top: 10px;
            font-weight: bold;
            text-align: center;
        }

        progress {
            width: 100%;
            height: 10px;
        }

        .spinner {
            display: inline-block;
            animation: spin 0.7s infinite linear;
        }

        .title {
            text-align: center;
        }

        .last-line {
            text-align: center;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        #last-line {
            white-space: pre;
        }

        .failed {
            color: red;
        }

        .passed {
            color: green;
        }

        .skipped {
            color: gray;
        }

        .deselected {
            color: darkgray;
        }

        .xfailed {
            color: darkred;
        }

        .xpassed {
            color: darkgreen;
        }

        .warnings {
            color: goldenrod;
        }

        .errors {
            color: magenta;
        }

        .rerun {
            color: darkgoldenrod;
        }




        .red {
            color: red;
        }

        .green {
            color: green;
        }

        .orange {
            color: orange;
        }

        #table-container {
            max-height: 80vh;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <h1 class="title">Test Results</h1>
    <div id="table-container">
        <table>
            <thead>
                <tr>
                    <th>node_id</th>
                    <th>test_duration</th>
                    <th>test_outcome</th>
                </tr>
            </thead>
            <tbody>
                {% for node_id, test_data in results.tally_tests.items() %}
                    <tr>
                        <td>{{ node_id }}</td>
                        <td>
                            {% if test_data.timer.running %}
                                <div class="spinner"></div>
                            {% else %}
                                {{ test_data.test_duration }}
                            {% endif %}
                        </td>
                        <td style="color: {% if test_data.test_outcome == 'Passed' %}green{% elif test_data.test_outcome == 'Failed' %}red{% else %}black{% endif %}">
                            {% if test_data.timer.running %}
                                ---
                            {% else %}
                                {{ test_data.test_outcome }}
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <hr>
    <table>
        <tfoot>
            <tr>
                <td colspan="3">
                    {% if results.session_started %}
                        {% if not results.session_finished %}
                            Test in progress...
                            <progress value="{{ results.num_tests_have_run }}" max="{{ results.num_tests_to_run }}"></progress>
                        {% else %}
                            Testing Complete!
                            <progress value="{{ results.num_tests_to_run }}" max="{{ results.num_tests_to_run }}"></progress>
                        {% endif %}
                    {% else %}
                        Waiting for data...
                    {% endif %}
                </td>
            </tr>
        </tfoot>
    </table>
    {% if results.lastline_ansi %}
        <p id="last-line" class="last-line" style="color: #{{ results.lastline_ansi }}">{{ results.lastline }}</p>
    {% endif %}

    <script>
        var fetchRate = {{ fetch_rate }};

        // Function to fetch updated results from the server
        function fetchResults() {
            fetch('/results')
                .then(response => response.json())
                .then(data => {
                    // Update the table with the fetched results
                    updateTable(data);
                })
                .catch(error => {
                    console.log('Error:', error);
                });
        }

        // Call fetchResults() initially to load the results
        fetchResults();


        // Function to update the table with new data
        function updateTable(results) {
            // Update the table rows with the new data
            const tableBody = document.querySelector('tbody');
            tableBody.innerHTML = '';

            for (const [nodeId, test] of Object.entries(results.tally_tests)) {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${nodeId}</td>
                    <td>${test.timer.running ? '<div class="spinner"></div>' : test.test_duration}</td>
                    <td style="color: ${getColor(test.test_outcome, test.timer.running)}">
                        ${test.timer.running ? '---' : test.test_outcome}
                    </td>
                `;

                tableBody.appendChild(row);
            }

            // Update the bottom row with the test session progress
            const bottomRow = document.querySelector('tfoot tr td');
            if (results.session_started) {
                if (!results.session_finished) {
                    bottomRow.innerHTML = 'Test in progress...<progress value="' + results.num_tests_have_run + '" max="' + results.num_tests_to_run + '"></progress>';

                    // Hide the last line if the test is in progress
                    hideLastLine();
                } else {
                    bottomRow.innerHTML = 'Testing Complete!<progress value="' + results.num_tests_to_run + '" max="' + results.num_tests_to_run + '"></progress>';

                    // Show the last line if the test is not running
                    const lastTest = results.tally_tests[Object.keys(results.tally_tests).pop()];
                    if (!lastTest.timer.running) {
                        showLastLine(results);
                    }
                }
            } else {
                bottomRow.innerHTML = 'Waiting for data...';

                // Hide the last line if waiting for data
                hideLastLine();
            }

            // After updating the table, scroll to the bottom
            const tableContainer = document.getElementById('table-container');
            tableContainer.scrollTop = tableContainer.scrollHeight;
        }

        // Function to hide the last line
        function hideLastLine() {
            const lastLine = document.getElementById('last-line');
            if (lastLine) {
                lastLine.style.display = 'none';
            }
        }

        // Function to show the last line
        function showLastLine(results) {
            const lastLine = document.getElementById('last-line');
            if (lastLine) {
                lastLine.style.display = 'block';
                updateLastLine(results);
            }
        }


        // Function to get the color of an outcome based on the test outcome value
        function getColor(lastLine, isRunning) {
            if (isRunning) {
                return 'black';
            } else if (lastLine.toLowerCase() === 'passed') {
                return 'green';
            } else if (lastLine.toLowerCase() === 'failed') {
                return 'red';
            } else if (lastLine.toLowerCase() === 'xfailed') {
                return 'red';
            } else if (lastLine.toLowerCase() === 'xpassed') {
                return 'green';
            } else if (lastLine.toLowerCase() === 'skipped') {
                return 'gray';
            } else if (lastLine.toLowerCase() === 'error') {
                return 'magenta';
            } else {
                return 'black';
            }
        }

        const lastLine = document.getElementById('last-line');
        const lineText = lastLine.textContent;

        // Function to update the last line with the latest outcome
        function updateLastLine(lastLineData) {
            const lastLine = document.getElementById('last-line');
            const lineText = lastLineData.lastline;

            // Define CSS classes for each outcome in the lastline
            const last_line_classes = {
                failed: 'failed',
                passed: 'passed',
                skipped: 'skipped',
                deselected: 'deselected',
                xfailed: 'xfailed',
                xpassed: 'xpassed',
                warnings: 'warnings',
                errors: 'errors',
                rerun: 'rerun',
            };

            // Function to color-code the outcome words
            function colorCodeOutcomeWords(lineText) {
                const outcomeWords = lineText.split(', ');

                // Iterate over each outcome word and wrap it in a <span> with appropriate class
                const coloredOutcome = outcomeWords.map(outcome => {
                    const [count, word] = outcome.split(' ');
                    const className = last_line_classes[word] || '';
                    return `<span class="${className}">${count} ${word}</span>`;
                });

                // Join the colored outcome words back into a string
                return coloredOutcome.join(', ');
            }

            // Color-code the outcome words and update the HTML content
            lastLine.innerHTML = colorCodeOutcomeWords(lineText);
        }

        // Define CSS classes for each outcome in the lastline
        const last_line_classes = {
            failed: 'failed',
            passed: 'passed',
            skipped: 'skipped',
            deselected: 'deselected',
            xfailed: 'xfailed',
            xpassed: 'xpassed',
            warnings: 'warnings',
            errors: 'errors',
            rerun: 'rerun',
        };

        // Function to color-code the outcome words
        function colorCodeOutcomeWords(lineText) {
        const outcomeWords = lineText.split(', ');

        // Iterate over each outcome word and wrap it in a <span> with appropriate class
        const coloredOutcome = outcomeWords.map(outcome => {
            const [count, word] = outcome.split(' ');
            const className = last_line_classes[word] || '';
            return `<span class="${className}">${count} ${word}</span>`;
        });

        // Join the colored outcome words back into a string
        return coloredOutcome.join(', ');
        }

        // Color-code the outcome words and update the HTML content
        lastLine.innerHTML = colorCodeOutcomeWords(lineText);

        // Periodically fetch updated results (ms)
        setInterval(fetchResults, fetchRate);

    </script>
</body>
</html>
