{% extends "base.html" %}


{% block title %}Executions - Job Scheduler{% endblock %}

{% block content %}
<div class="dashboard-header">
    <h2>Execution History</h2>
</div>

<div class="section">
    <div class="search-container"
        style="margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <input type="text" id="job-search" placeholder="Search by job or task name..."
            style="flex: 1; min-width: 200px; max-width: 400px; padding: 0.5rem; border: 1px solid var(--input-border); border-radius: 4px; font-size: 1rem;">
        <select id="status-filter"
            style="padding: 0.5rem; border: 1px solid var(--input-border); border-radius: 4px; font-size: 1rem; background: var(--input-bg); color: var(--text);">
            <option value="">All Statuses</option>
            <option value="Success">Success</option>
            <option value="Failed">Failed</option>
            <option value="Running">Running</option>
            <option value="Scheduled">Scheduled</option>
        </select>
        <button id="delete-selected-btn" class="btn btn-danger btn-sm" style="display:none" onclick="deleteSelected()">
            Delete Selected (<span id="selected-count">0</span>)
        </button>
    </div>
    <div class="table-container">
        <table id="executions-table">
            <thead>
                <tr>
                    <th style="width:1%"><input type="checkbox" id="select-all" onchange="toggleSelectAll(this)" title="Select all on this page"></th>
                    <th>ID</th>
                    <th>PID</th>
                    <th>Task</th>
                    <th>Job</th>
                    <th>Status</th>
                    <th>Start Time</th>
                    <th>End Time</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="executions-body">
                <tr>
                    <td colspan="9" class="loading">Loading...</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="pagination" class="pagination"
        style="margin-top: 1rem; display: flex; justify-content: center; align-items: center; gap: 0.5rem;"></div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const PAGE_LIMIT = 50;
    let allExecutions = {{ allExecutionsJson }}.map((exec, idx) => ({
        ...exec,
        executionId: {{ executionIdsJson }}[idx]
    }));

    let filteredExecutions = allExecutions.slice();
    let currentPage = 1;
    let selectedIds = new Set();

    async function deleteExecution(execId) {
        showConfirmModal('Delete Execution', 'Are you sure you want to delete this execution and its logs?', async () => {
            try {
                const response = await fetch(`/api/delete_execution?id=${execId}`, { method: 'POST' });
                if (response.ok) { location.reload(); }
                else { alert('Failed to delete execution'); }
            } catch (error) { alert('Error deleting execution'); }
        });
    }

    async function cancelExecution(execId) {
        showConfirmModal('Cancel Execution', 'Are you sure you want to cancel this running execution?', async () => {
            try {
                const response = await fetch(`/api/cancel_execution?id=${execId}`, { method: 'POST' });
                if (response.ok) { location.reload(); }
                else { alert('Failed to cancel execution'); }
            } catch (error) { alert('Error cancelling execution'); }
        });
    }

    async function deleteSelected() {
        const ids = Array.from(selectedIds);
        if (ids.length === 0) return;
        showConfirmModal('Delete Executions', `Are you sure you want to delete ${ids.length} selected execution(s) and their logs?`, async () => {
            try {
                const response = await fetch('/api/delete_executions', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({ids: ids})
                });
                if (response.ok) {
                    window.location.reload();
                } else {
                    alert('Failed to delete executions');
                }
            } catch (error) {
                console.error('Error deleting executions:', error);
                alert('Error deleting executions');
            }
        });
    }

    function toggleSelectAll(checkbox) {
        const start = (currentPage - 1) * PAGE_LIMIT;
        const pageItems = filteredExecutions.slice(start, start + PAGE_LIMIT);
        if (checkbox.checked) {
            pageItems.forEach(exec => selectedIds.add(exec.executionId));
        } else {
            pageItems.forEach(exec => selectedIds.delete(exec.executionId));
        }
        updateSelectionUI();
        renderTable();
    }

    function toggleSelect(execId, checked) {
        if (checked) {
            selectedIds.add(execId);
        } else {
            selectedIds.delete(execId);
        }
        updateSelectionUI();
    }

    function updateSelectionUI() {
        const btn = document.getElementById('delete-selected-btn');
        const countEl = document.getElementById('selected-count');
        const selectAll = document.getElementById('select-all');
        const start = (currentPage - 1) * PAGE_LIMIT;
        const pageItems = filteredExecutions.slice(start, start + PAGE_LIMIT);

        if (selectedIds.size > 0) {
            btn.style.display = '';
            countEl.textContent = selectedIds.size;
        } else {
            btn.style.display = 'none';
        }

        const allOnPageSelected = pageItems.length > 0 && pageItems.every(exec => selectedIds.has(exec.executionId));
        selectAll.checked = allOnPageSelected;
        selectAll.indeterminate = !allOnPageSelected && pageItems.some(exec => selectedIds.has(exec.executionId));
    }

    function applyFilter() {
        const searchTerm = document.getElementById('job-search').value.toLowerCase();
        const statusFilter = document.getElementById('status-filter').value;

        filteredExecutions = allExecutions.filter(exec => {
            const searchable = (exec.jobName || '') + ' ' + (exec.taskName || '');
            const matchesSearch = !searchTerm || searchable.toLowerCase().includes(searchTerm);
            const matchesStatus = !statusFilter || exec.status === statusFilter;
            return matchesSearch && matchesStatus;
        });

        currentPage = 1;
        renderTable();
        updatePagination();
    }

    function renderTable() {
        const tbody = document.getElementById('executions-body');
        if (filteredExecutions.length === 0) {
            tbody.innerHTML = '<tr><td colspan="9" class="no-data">No executions found</td></tr>';
            return;
        }
        const start = (currentPage - 1) * PAGE_LIMIT;
        const pageItems = filteredExecutions.slice(start, start + PAGE_LIMIT);
        tbody.innerHTML = pageItems.map(exec => `
            <tr>
                <td><input type="checkbox" ${selectedIds.has(exec.executionId) ? 'checked' : ''} onchange="toggleSelect(${exec.executionId}, this.checked)"></td>
                <td>${exec.executionId}</td>
                <td>${exec.pid}</td>
                <td><a href="/task_detail?id=${exec.taskId}">${exec.taskName}</a></td>
                <td>${exec.jobName}</td>
                <td>${formatStatus(exec.status)}</td>
                <td>${formatTime(exec.startTime)}</td>
                <td>${formatTime(exec.endTime)}</td>
                <td>
                    <a href="/execution_log?id=${exec.executionId}" class="btn btn-sm">View Log</a>
                    ${exec.status === 'Running' ? `<button onclick="cancelExecution(${exec.executionId})" class="btn btn-sm btn-danger">Cancel</button>` : ''}
                    <button onclick="deleteExecution(${exec.executionId})" class="btn btn-sm btn-danger">Delete</button>
                </td>
            </tr>
        `).join('');

        updateSelectionUI();
    }

    function goToPage(page) {
        currentPage = page;
        renderTable();
        updatePagination();
    }

    function updatePagination() {
        const paginationEl = document.getElementById('pagination');
        const total = filteredExecutions.length;
        const totalPages = Math.ceil(total / PAGE_LIMIT);

        if (totalPages <= 1) { paginationEl.style.display = 'none'; return; }

        paginationEl.style.display = 'flex';
        const page = currentPage;
        let html = `<span style="margin-right: 1rem;">Showing ${(page - 1) * PAGE_LIMIT + 1}-${Math.min(page * PAGE_LIMIT, total)} of ${total}</span>`;

        if (page > 1) html += `<button class="btn btn-sm" onclick="goToPage(${page - 1})">Previous</button>`;

        let startPage = Math.max(1, page - 2);
        let endPage = Math.min(totalPages, page + 2);
        if (startPage > 1) { html += `<button class="btn btn-sm" onclick="goToPage(1)">1</button>`; if (startPage > 2) html += `<span>...</span>`; }
        for (let p = startPage; p <= endPage; p++) {
            if (p === page) html += `<button class="btn btn-sm" style="background: var(--primary); opacity: 0.8;" disabled>${p}</button>`;
            else html += `<button class="btn btn-sm" onclick="goToPage(${p})">${p}</button>`;
        }
        if (endPage < totalPages) { if (endPage < totalPages - 1) html += `<span>...</span>`; html += `<button class="btn btn-sm" onclick="goToPage(${totalPages})">${totalPages}</button>`; }
        if (page < totalPages) html += `<button class="btn btn-sm" onclick="goToPage(${page + 1})">Next</button>`;

        paginationEl.innerHTML = html;
    }

    document.getElementById('job-search').addEventListener('input', applyFilter);
    document.getElementById('status-filter').addEventListener('change', applyFilter);

    // Initial render
    renderTable();
    updatePagination();
</script>
{% endblock %}