{% extends "base.html" %}


{% block title %}Job History - {{ jobName }}{% endblock %}

{% block content %}
<div class="page-header">
    <h2>Execution History: {{ jobName }}</h2>
    <a href="javascript:history.back()" class="btn btn-secondary">← Back</a>
</div>

<div class="section">
    <div class="table-container">
        <table id="history-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Started</th>
                    <th>Ended</th>
                    <th>Duration</th>
                    <th>Status</th>
                    <th>PID</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="history-body">
                <tr>
                    <td colspan="7" class="loading">Loading...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const jobId = {{ jobId }};
    const jobName = "{{ jobName }}";
    const executions = {{ executionsJson }};
    const executionIds = {{ executionIdsJson }};

    function calculateDuration(start, end, status) {
        if (!start) return '-';
        if (!end) return '-';

        let endTime = parseTime(end);
        let startTime = parseTime(start);

        // Check for invalid end time (e.g. 1970 epoch or empty)
        if (!end || endTime.getFullYear() <= 1970) {
            if (status === 'Running') {
                const diff = new Date() - startTime;
                return formatDuration(diff) + ' (Running)';
            }
            return '-';
        }

        const diff = endTime - startTime;
        return formatDuration(diff);
    }

    function formatDuration(ms) {
        if (ms < 0) ms = 0;
        const seconds = Math.floor(ms / 1000);
        const minutes = Math.floor(seconds / 60);
        const hours = Math.floor(minutes / 60);

        if (hours > 0) return `${hours}h ${minutes % 60}m`;
        if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
        return `${seconds}s`;
    }

    async function loadHistory() {
        try {
            // Ensure executions is always an array
            if (!Array.isArray(executions)) {
                console.error('Executions is not an array:', executions);
                document.getElementById('history-body').innerHTML =
                    '<tr><td colspan="7" class="error">Error loading history</td></tr>';
                return;
            }

            const tbody = document.getElementById('history-body');
            if (executions.length === 0) {
                tbody.innerHTML = '<tr><td colspan="7" class="no-data">No execution history</td></tr>';
                return;
            }

            tbody.innerHTML = executions.map((exec, idx) => `
            <tr>
                <td>${executionIds[idx]}</td>
                <td>${formatTime(exec.startTime)}</td>
                <td>${formatTime(exec.endTime)}</td>
                <td>${calculateDuration(exec.startTime, exec.endTime, exec.status)}</td>
                <td>${formatStatus(exec.status)}</td>
                <td>${exec.pid}</td>
                <td>
                    <a href="/execution_log?id=${executionIds[idx]}" class="btn btn-sm">View Log</a>
                </td>
            </tr>
        `).join('');

        } catch (error) {
            console.error('Error loading history:', error);
            document.getElementById('history-body').innerHTML =
                '<tr><td colspan="7" class="error">Error loading history</td></tr>';
        }
    }

    loadHistory();
    setInterval(loadHistory, 10000); // Refresh every 10 seconds
</script>
{% endblock %}