{% extends "base.html" %}

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

{% block head %}
<style>
    .container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }
    .history-table { background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); overflow: hidden; }
    .table-header { padding: 2rem; border-bottom: 1px solid #e5e7eb; }
    .table-header h2 { margin: 0; color: #1e293b; }
    .job-row { display: grid; grid-template-columns: 0.3fr 1.6fr 1fr 2fr 1fr 1fr 1fr 1fr 1.5fr 1fr; gap: 0.2rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid #e5e7eb; align-items: center; }
    .job-row:last-child { border-bottom: none; }
    .job-type { font-weight: 600; color: #1e293b; }
    .job-data { color: #64748b; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .job-time { color: #64748b; font-size: 0.9rem; }
    .job-status { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 500; text-align: center; }
    .status-queued { background: #fef3c7; color: #d97706; }
    .status-processing { background: #dbeafe; color: #2563eb; }
    .status-completed { background: #d1fae5; color: #065f46; }
    .status-failed { background: #fee2e2; color: #dc2626; }
    .status-cancelled { background: #f3f4f6; color: #6b7280; }
    .job-tokens { font-weight: 600; color: #667eea; text-align: center; }
    .no-jobs { text-align: center; padding: 3rem; color: #6b7280; }
    .job-progress { color: #64748b; font-size: 0.8rem; }
    .spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid #f3f3f3; border-top: 2px solid #667eea; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 0.5rem; }
    .view-result-link { color: #667eea; text-decoration: none; font-size: 0.9rem; font-weight: 500; }
    .view-result-link:hover { text-decoration: underline; }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
</style>
<script>
    let lastUpdate = Date.now();
    let lastCompletedJobs = new Set(); // Track jobs that were already completed

    function updateJobStatuses() {
        fetch('/api/job_status_updates?since=' + lastUpdate)
            .then(response => response.json())
            .then(data => {
                if (data.updates && data.updates.length > 0) {
                    data.updates.forEach(update => {
                        updateJobRow(update);

                        // Check if this is a newly completed job
                        if (update.status === 'completed' && !lastCompletedJobs.has(update.id)) {
                            showJobCompletionNotification(update.id);
                            lastCompletedJobs.add(update.id);
                        }
                    });
                    lastUpdate = Date.now();
                }
            })
            .catch(error => {
                console.log('Error updating job statuses:', error);
            });
    }

    function showJobCompletionNotification(jobId) {
        const notificationContainer = document.getElementById('notificationContainer');
        if (!notificationContainer) return;

        const notification = document.createElement('div');
        notification.className = 'notification success';
        notification.innerHTML = `
            <span class="notification-close" onclick="closeNotification(this)">&times;</span>
            <strong>Job Completed!</strong><br>
            Your analysis job has finished. <a href="/job_result/${jobId}" style="color: #065f46; text-decoration: underline;">View Results</a>
        `;

        notificationContainer.appendChild(notification);

        // Auto-hide after 10 seconds
        setTimeout(() => {
            notification.classList.add('fade-out');
            setTimeout(() => {
                notification.remove();
            }, 300);
        }, 10000);
    }

    function updateJobRow(jobUpdate) {
        const jobRow = document.querySelector(`[data-job-id="${jobUpdate.id}"]`);
        if (jobRow) {
            // Update status
            const statusElement = jobRow.querySelector('.job-status');
            if (statusElement) {
                statusElement.className = `job-status status-${jobUpdate.status}`;
                statusElement.textContent = jobUpdate.status.charAt(0).toUpperCase() + jobUpdate.status.slice(1);

                // Add spinner for processing jobs
                if (jobUpdate.status === 'processing') {
                    if (!statusElement.querySelector('.spinner')) {
                        statusElement.innerHTML = '<div class="spinner"></div>' + statusElement.textContent;
                    }
                } else {
                    const spinner = statusElement.querySelector('.spinner');
                    if (spinner) {
                        spinner.remove();
                    }
                }

                // Update actions based on status change
                updateJobActions(jobUpdate.id, jobUpdate.status);
            }

            // Update tokens if completed
            if (jobUpdate.status === 'completed' && jobUpdate.used_tokens) {
                const tokensElement = jobRow.querySelector('.job-tokens');
                if (tokensElement) {
                    tokensElement.textContent = jobUpdate.used_tokens;
                }
            }

            // Add progress info for processing jobs
            if (jobUpdate.status === 'processing' && jobUpdate.result) {
                let progressElement = jobRow.querySelector('.job-progress');
                if (!progressElement) {
                    progressElement = document.createElement('div');
                    progressElement.className = 'job-progress';
                    jobRow.appendChild(progressElement);
                }
                progressElement.textContent = jobUpdate.result.status || 'Processing...';
            }
        }
    }

    function updateJobActions(jobId, status) {
        const jobRow = document.querySelector(`[data-job-id="${jobId}"]`);
        if (!jobRow) return;

        const actionsElement = jobRow.querySelector('.job-actions');
        if (!actionsElement) return;

        // Clear existing actions
        actionsElement.innerHTML = '';

        if (status === 'completed') {
            const viewLink = document.createElement('a');
            viewLink.href = `/job_result/${jobId}`;
            viewLink.className = 'view-result-link';
            viewLink.textContent = 'View Result';
            actionsElement.appendChild(viewLink);
        } else if (status === 'processing') {
            const cancelForm = document.createElement('form');
            cancelForm.method = 'post';
            cancelForm.action = `/job/${jobId}/cancel`;
            cancelForm.style.display = 'inline';
            cancelForm.style.marginRight = '0.5rem';
            cancelForm.onsubmit = () => confirm('Are you sure you want to cancel this running job?');

            const cancelBtn = document.createElement('button');
            cancelBtn.type = 'submit';
            cancelBtn.className = 'cancel-btn';
            cancelBtn.style.background = '#f59e0b';
            cancelBtn.style.color = 'white';
            cancelBtn.style.border = 'none';
            cancelBtn.style.padding = '0.25rem 0.5rem';
            cancelBtn.style.borderRadius = '4px';
            cancelBtn.style.fontSize = '0.8rem';
            cancelBtn.style.cursor = 'pointer';
            cancelBtn.textContent = 'Cancel';

            cancelForm.appendChild(cancelBtn);
            actionsElement.appendChild(cancelForm);
        } else if (status === 'cancelled') {
            const restartForm = document.createElement('form');
            restartForm.method = 'post';
            restartForm.action = `/job/${jobId}/restart`;
            restartForm.style.display = 'inline';
            restartForm.style.marginRight = '0.5rem';
            restartForm.onsubmit = () => confirm('Are you sure you want to restart this cancelled job?');

            const restartBtn = document.createElement('button');
            restartBtn.type = 'submit';
            restartBtn.className = 'restart-btn';
            restartBtn.style.background = '#10b981';
            restartBtn.style.color = 'white';
            restartBtn.style.border = 'none';
            restartBtn.style.padding = '0.25rem 0.5rem';
            restartBtn.style.borderRadius = '4px';
            restartBtn.style.fontSize = '0.8rem';
            restartBtn.style.cursor = 'pointer';
            restartBtn.textContent = 'Restart';

            restartForm.appendChild(restartBtn);
            actionsElement.appendChild(restartForm);

            const deleteForm = document.createElement('form');
            deleteForm.method = 'post';
            deleteForm.action = `/job/${jobId}/delete`;
            deleteForm.style.display = 'inline';
            deleteForm.onsubmit = () => confirm('Are you sure you want to delete this cancelled job?');

            const deleteBtn = document.createElement('button');
            deleteBtn.type = 'submit';
            deleteBtn.className = 'delete-btn';
            deleteBtn.style.background = '#dc2626';
            deleteBtn.style.color = 'white';
            deleteBtn.style.border = 'none';
            deleteBtn.style.padding = '0.25rem 0.5rem';
            deleteBtn.style.borderRadius = '4px';
            deleteBtn.style.fontSize = '0.8rem';
            deleteBtn.style.cursor = 'pointer';
            deleteBtn.textContent = 'Delete';

            deleteForm.appendChild(deleteBtn);
            actionsElement.appendChild(deleteForm);
        } else if (status === 'queued') {
            const deleteForm = document.createElement('form');
            deleteForm.method = 'post';
            deleteForm.action = `/job/${jobId}/delete`;
            deleteForm.style.display = 'inline';
            deleteForm.onsubmit = () => confirm('Are you sure you want to delete this queued job?');

            const deleteBtn = document.createElement('button');
            deleteBtn.type = 'submit';
            deleteBtn.className = 'delete-btn';
            deleteBtn.style.background = '#dc2626';
            deleteBtn.style.color = 'white';
            deleteBtn.style.border = 'none';
            deleteBtn.style.padding = '0.25rem 0.5rem';
            deleteBtn.style.borderRadius = '4px';
            deleteBtn.style.fontSize = '0.8rem';
            deleteBtn.style.cursor = 'pointer';
            deleteBtn.textContent = 'Delete';

            deleteForm.appendChild(deleteBtn);
            actionsElement.appendChild(deleteForm);
        } else if (status === 'failed') {
            const deleteForm = document.createElement('form');
            deleteForm.method = 'post';
            deleteForm.action = `/job/${jobId}/delete`;
            deleteForm.style.display = 'inline';
            deleteForm.onsubmit = () => confirm('Are you sure you want to delete this failed job?');

            const deleteBtn = document.createElement('button');
            deleteBtn.type = 'submit';
            deleteBtn.className = 'delete-btn';
            deleteBtn.style.background = '#dc2626';
            deleteBtn.style.color = 'white';
            deleteBtn.style.border = 'none';
            deleteBtn.style.padding = '0.25rem 0.5rem';
            deleteBtn.style.borderRadius = '4px';
            deleteBtn.style.fontSize = '0.8rem';
            deleteBtn.style.cursor = 'pointer';
            deleteBtn.textContent = 'Delete';

            deleteForm.appendChild(deleteBtn);
            actionsElement.appendChild(deleteForm);
        }
    }

    // Initialize completed jobs tracking
    function initializeCompletedJobs() {
        const jobRows = document.querySelectorAll('[data-job-id]');
        jobRows.forEach(row => {
            const jobId = parseInt(row.getAttribute('data-job-id'));
            const statusElement = row.querySelector('.job-status');
            if (statusElement && statusElement.classList.contains('status-completed')) {
                lastCompletedJobs.add(jobId);
            }
        });
    }

    // Track pending actions to prevent multiple clicks
    const pendingActions = new Set();

    function performJobAction(jobId, action, buttonElement) {
        const actionKey = `${jobId}-${action}`;

        // Prevent multiple clicks on the same action
        if (pendingActions.has(actionKey)) {
            return;
        }

        // Disable the button and mark as pending
        buttonElement.disabled = true;
        buttonElement.textContent = 'Processing...';
        pendingActions.add(actionKey);

        // Set a timeout to re-enable the button after 10 seconds (in case of network issues)
        const timeoutId = setTimeout(() => {
            if (pendingActions.has(actionKey)) {
                pendingActions.delete(actionKey);
                buttonElement.disabled = false;
                buttonElement.textContent = action.charAt(0).toUpperCase() + action.slice(1);
            }
        }, 10000);

        fetch(`/job/${jobId}/${action}`, {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: new FormData(),
            redirect: 'manual'  // Don't follow redirects
        })
        .then(response => {
            clearTimeout(timeoutId); // Clear the timeout since we got a response

            if (response.status >= 200 && response.status < 300) {
                // Success status
                return response.json().then(data => {
                    if (data.success !== false) {
                        showActionNotification(jobId, action, 'success');
                    } else {
                        showActionNotification(jobId, action, 'error');
                    }
                });
            } else if (response.status >= 300 && response.status < 400) {
                // Redirect - treat as success for our purposes
                showActionNotification(jobId, action, 'success');
            } else {
                // Error status
                showActionNotification(jobId, action, 'error');
            }
        })
        .catch(error => {
            clearTimeout(timeoutId); // Clear the timeout on error
            console.log(`Error performing ${action} on job ${jobId}:`, error);
            showActionNotification(jobId, action, 'error');
        })
        .finally(() => {
            // Re-enable the button and remove from pending actions
            pendingActions.delete(actionKey);
            buttonElement.disabled = false;
            buttonElement.textContent = action.charAt(0).toUpperCase() + action.slice(1);
        });
    }

    function showActionNotification(jobId, action, status) {
        const notificationContainer = document.getElementById('notificationContainer');
        if (!notificationContainer) return;

        const actionText = action.charAt(0).toUpperCase() + action.slice(1);
        const statusText = status === 'success' ? 'successful' : 'failed';

        const notification = document.createElement('div');
        notification.className = `notification ${status}`;
        notification.innerHTML = `
            <span class="notification-close" onclick="closeNotification(this)">&times;</span>
            <strong>Job ${actionText} ${statusText}!</strong><br>
            Job ${jobId} has been ${actionText.toLowerCase()}ed ${statusText}ly.
        `;

        notificationContainer.appendChild(notification);

        // Auto-hide after 5 seconds
        setTimeout(() => {
            notification.classList.add('fade-out');
            setTimeout(() => {
                notification.remove();
            }, 300);
        }, 5000);
    }

    function closeNotification(closeBtn) {
        const notification = closeBtn.parentElement;
        notification.classList.add('fade-out');
        setTimeout(() => {
            notification.remove();
        }, 300);
    }

    // Pagination functions
    function changePage(page) {
        const url = new URL(window.location);
        url.searchParams.set('page', page);
        window.location.href = url.toString();
    }

    function changePageSize(perPage) {
        const url = new URL(window.location);
        url.searchParams.set('per_page', perPage);
        url.searchParams.set('page', '1'); // Reset to first page when changing page size
        window.location.href = url.toString();
    }

    // Update every 5 seconds
    setInterval(updateJobStatuses, 5000);

    // Initial update
    document.addEventListener('DOMContentLoaded', function() {
        initializeCompletedJobs();
        updateJobStatuses();
    });
</script>
{% endblock %}

{% block content %}
<div class="container">
        <div class="history-table">
            <div class="table-header">
                <h2><i class="fas fa-history"></i> Job History</h2>
            </div>
            {% for job in queue_items %}
            <div class="job-row" data-job-id="{{ job.id }}">
                <div class="queue-id" style="font-family: monospace; font-size: 0.8rem; color: #6b7280;">{{ job.id }}</div>
                <div class="job-id" style="font-family: monospace; font-size: 0.8rem; color: #6b7280;" title="{{ job.job_id or 'N/A' }}">{{ job.job_id or 'N/A' }}</div>
                <div class="job-type">{{ job.request_type.title() }}</div>
                <div class="job-data" title="{% if job.data.get('prompts') %}{% for prompt_item in job.data.prompts %}{% if prompt_item.step == 'user' %}{{ prompt_item.prompt }}{% endif %}{% endfor %}{% else %}{{ job.data.get('prompt', job.data.get('description', 'N/A')) }}{% endif %}">
                    {% if job.data.get('prompts') %}{% for prompt_item in job.data.prompts %}{% if prompt_item.step == 'user' %}{{ prompt_item.prompt[:50] }}{% if prompt_item.prompt|length > 50 %}...{% endif %}{% endif %}{% endfor %}{% else %}{{ job.data.get('prompt', job.data.get('description', 'N/A'))[:50] }}{% if job.data.get('prompt', job.data.get('description', 'N/A'))|length > 50 %}...{% endif %}{% endif %}
                </div>
                <div class="job-time">{{ job.created_at[:19] }}</div>
                <div class="worker-details" style="font-size: 0.8rem; color: #6b7280;">
                    {% if job.status == 'processing' %}
                        {% if job.job_id %}
                            {% if job.result and job.result.get('worker') %}
                                Worker: {{ job.result.worker }}
                            {% else %}
                                Assigned to cluster
                            {% endif %}
                        {% else %}
                            Local processing
                        {% endif %}
                    {% elif job.status == 'queued' %}
                        Pending assignment
                    {% elif job.status == 'completed' %}
                        Completed
                    {% elif job.status == 'failed' %}
                        Failed
                    {% elif job.status == 'cancelled' %}
                        Cancelled
                    {% else %}
                        -
                    {% endif %}
                </div>
                <span class="job-status status-{{ job.status }}">
                    {% if job.status == 'processing' %}<div class="spinner"></div>{% endif %}
                    {{ job.status.title() }}
                </span>
                <div class="job-tokens" style="font-size: 0.8rem; color: #6b7280;">Tokens: {{ job.used_tokens or 0 }}</div>
                <div class="job-progress" style="font-size: 0.8rem; color: #6b7280;">
                    {% if job.status == 'processing' and job.result %}
                        {{ job.result.get('status', 'Processing...') }}
                    {% elif job.status == 'completed' %}
                        Completed
                    {% elif job.status == 'failed' %}
                        Failed
                    {% elif job.status == 'cancelled' %}
                        Cancelled
                    {% else %}
                        -
                    {% endif %}
                </div>
                <div class="job-actions">
                    {% if job.status == 'completed' %}
                    <a href="/job_result/{{ job.id }}" class="view-result-link">View Result</a>
                    {% elif job.status == 'processing' %}
                    <button class="cancel-btn" style="background: #f59e0b; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; cursor: pointer; margin-right: 0.5rem;" onclick="performJobAction({{ job.id }}, 'cancel', this)">Cancel</button>
                    {% elif job.status == 'cancelled' %}
                    <div style="display: flex; gap: 0.5rem;">
                        <button class="restart-btn" style="background: #10b981; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; cursor: pointer;" onclick="performJobAction({{ job.id }}, 'restart', this)">Restart</button>
                        <button class="delete-btn" style="background: #dc2626; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; cursor: pointer;" onclick="if(confirm('Are you sure you want to delete this job? This action cannot be undone.')) performJobAction({{ job.id }}, 'delete', this)">Delete</button>
                    </div>
                    {% elif job.status == 'queued' %}
                    <button class="delete-btn" style="background: #dc2626; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; cursor: pointer;" onclick="if(confirm('Are you sure you want to delete this job? This action cannot be undone.')) performJobAction({{ job.id }}, 'delete', this)">Delete</button>
                    {% elif job.status == 'failed' %}
                    <button class="delete-btn" style="background: #dc2626; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; cursor: pointer;" onclick="if(confirm('Are you sure you want to delete this job? This action cannot be undone.')) performJobAction({{ job.id }}, 'delete', this)">Delete</button>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
            {% if not queue_items %}
            <div class="no-jobs">No jobs found. Start by analyzing some media!</div>
            {% endif %}
        </div>

        <!-- Pagination Controls -->
        {% if total_pages > 1 %}
        <div class="pagination-container" style="display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; padding: 1rem; background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
            <!-- Page Size Selector -->
            <div style="display: flex; align-items: center; gap: 0.5rem;">
                <label for="perPageSelector" style="font-size: 0.9rem; color: #374151; font-weight: 500;">Show:</label>
                <select id="perPageSelector" onchange="changePageSize(this.value)" style="border: 1px solid #d1d5db; border-radius: 6px; padding: 0.375rem 0.75rem; font-size: 0.875rem; background: white;">
                    <option value="10" {% if per_page == 10 %}selected{% endif %}>10</option>
                    <option value="20" {% if per_page == 20 %}selected{% endif %}>20</option>
                    <option value="50" {% if per_page == 50 %}selected{% endif %}>50</option>
                    <option value="100" {% if per_page == 100 %}selected{% endif %}>100</option>
                </select>
                <span style="font-size: 0.9rem; color: #6b7280;">per page</span>
            </div>

            <!-- Pagination Info -->
            <div style="font-size: 0.9rem; color: #6b7280;">
                Showing {{ ((page - 1) * per_page) + 1 }} to {{ min(page * per_page, total_jobs) }} of {{ total_jobs }} jobs
            </div>

            <!-- Page Navigation -->
            <div style="display: flex; align-items: center; gap: 0.5rem;">
                {% if page > 1 %}
                <button onclick="changePage({{ page - 1 }})" style="border: 1px solid #d1d5db; border-radius: 6px; padding: 0.375rem 0.75rem; font-size: 0.875rem; background: white; cursor: pointer;">Previous</button>
                {% endif %}

                {% set start_page = max(1, page - 2) %}
                {% set end_page = min(total_pages, page + 2) %}

                {% if start_page > 1 %}
                <button onclick="changePage(1)" style="border: 1px solid #d1d5db; border-radius: 6px; padding: 0.375rem 0.75rem; font-size: 0.875rem; background: white; cursor: pointer;">1</button>
                {% if start_page > 2 %}
                <span style="padding: 0.375rem 0.5rem; color: #6b7280;">...</span>
                {% endif %}
                {% endif %}

                {% for page_num in range(start_page, end_page + 1) %}
                <button onclick="changePage({{ page_num }})"
                        style="border: 1px solid {% if page_num == page %}#3b82f6{% else %}#d1d5db{% endif %}; border-radius: 6px; padding: 0.375rem 0.75rem; font-size: 0.875rem; background: {% if page_num == page %}#3b82f6{% else %}white{% endif %}; color: {% if page_num == page %}white{% else %}#374151{% endif %}; cursor: pointer;">
                    {{ page_num }}
                </button>
                {% endfor %}

                {% if end_page < total_pages %}
                {% if end_page < total_pages - 1 %}
                <span style="padding: 0.375rem 0.5rem; color: #6b7280;">...</span>
                {% endif %}
                <button onclick="changePage({{ total_pages }})" style="border: 1px solid #d1d5db; border-radius: 6px; padding: 0.375rem 0.75rem; font-size: 0.875rem; background: white; cursor: pointer;">{{ total_pages }}</button>
                {% endif %}

                {% if page < total_pages %}
                <button onclick="changePage({{ page + 1 }})" style="border: 1px solid #d1d5db; border-radius: 6px; padding: 0.375rem 0.75rem; font-size: 0.875rem; background: white; cursor: pointer;">Next</button>
                {% endif %}
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}