{% extends "base.html" %}



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

{% block content %}
<div class="dashboard-header">
    <h2>Dashboard</h2>
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-value" id="total-executions">-</div>
            <div class="stat-label">Total Executions</div>
        </div>
        <div class="stat-card success">
            <div class="stat-value" id="successful">-</div>
            <div class="stat-label">Successful</div>
        </div>
        <div class="stat-card running">
            <div class="stat-value" id="running">-</div>
            <div class="stat-label">Running</div>
        </div>
        <div class="stat-card failed">
            <div class="stat-value" id="failed">-</div>
            <div class="stat-label">Failed</div>
        </div>
    </div>
</div>

<div class="section" id="running-section" style="display:none">
    <h3>Currently Running</h3>
    <div class="table-container">
        <table id="running-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Task</th>
                    <th>Job</th>
                    <th>Started</th>
                    <th>Duration</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="running-body"></tbody>
        </table>
    </div>
</div>

<div class="section">
    <h3>Recent Executions</h3>
    <div class="search-container"
        style="margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <input type="text" id="name-search" placeholder="Search by task or job 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>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="8" 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>
    let executionIds = {{ executionIdsJson }};
    let allExecutions = {{ executionsJson }}.map((execution, idx) => {
        return {
            executionId: executionIds[idx],
            ...execution
        };
    });

    let filteredExecutions = allExecutions.slice();
    const PAGE_LIMIT = 50;
    let currentPage = 1;
    let selectedIds = new Set();
    let runningExecutions = allExecutions.filter(execution => execution.status == 'Running');

    async function cancelJob(execId) {
        showConfirmModal('Cancel Job', 'Are you sure you want to cancel this job?', async () => {
            try {
                await fetch(`/api/cancel_execution?id=${execId}`, { method: 'POST' });
                window.location.reload();
            } catch (e) { console.error(e); alert('Failed to cancel job'); }
        });
    }

    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) {
                    window.location.reload();
                } else {
                    alert('Failed to delete execution');
                }
            } catch (error) {
                console.error('Error deleting execution:', error);
                alert('Error deleting 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';
        }

        // Update select-all checkbox state
        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('name-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="8" 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><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>
                <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;
    }

    async function loadDashboard() {
        try {
            const statsReq = await fetch("/api/stats");

            if (statsReq.ok) {
                const stats = await statsReq.json();
                document.getElementById('total-executions').textContent = stats.total;
                document.getElementById('successful').textContent = stats.success;
                document.getElementById('running').textContent = stats.running;
                document.getElementById('failed').textContent = stats.failed;
            }

            const runningSection = document.getElementById('running-section');
            const runningBody = document.getElementById('running-body');

            if (runningExecutions.length > 0) {
                runningSection.style.display = 'block';
                runningBody.innerHTML = runningExecutions.map(exec => `
                <tr>
                    <td>${exec.executionId}</td>
                    <td><a href="/task_detail?id=${exec.taskId}">${exec.taskName}</a></td>
                    <td>${exec.jobName}</td>
                    <td>${formatTime(exec.startTime)}</td>
                    <td>${calculateDuration(exec.startTime)}</td>
                    <td>
                        <a href="/execution_log?id=${exec.executionId}" class="btn btn-sm">View Log</a>
                        <button onclick="cancelJob(${exec.executionId})" class="btn btn-sm btn-danger">Cancel</button>
                    </td>
                </tr>
            `).join('');
            } else {
                runningSection.style.display = 'none';
            }

            renderTable();
            updatePagination();

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

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

    loadDashboard();
</script>
{% endblock %}