{% extends "base.html" %}

{% block title %}Active Jobs - VidAI{% endblock %}

{% block head %}
<style>
    .container { max-width: 90vw; min-width: 1600px; margin: 2rem auto; padding: 0 2rem; }
    .jobs-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 { color: #374151; }
    .job-row > div { padding: 0.25rem 0; }
    .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; min-width: 200px; max-width: 300px; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; }
    .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() {
        // Add random parameter to avoid browser caching
        const randomParam = Math.random().toString(36).substring(7);
        const userSelector = document.getElementById('userSelector');
        let url = '/api/job_status_updates?since=' + lastUpdate + '&_=' + randomParam;

        // Include user_id parameter if admin is viewing another user's jobs
        if (userSelector && userSelector.value) {
            url += '&user_id=' + userSelector.value;
        }

        fetch(url)
            .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);
            });

        // Also update progress for processing jobs
        updateJobProgress();
    }

    function updateJobProgress() {
        // Update progress for all processing jobs
        const processingJobs = document.querySelectorAll('[data-job-id]');
        processingJobs.forEach(jobRow => {
            const jobId = jobRow.getAttribute('data-job-id');
            const statusElement = jobRow.querySelector('.job-status');
            if (statusElement && statusElement.classList.contains('status-processing')) {
                fetch(`/api/job_progress/${jobId}`)
                    .then(response => response.json())
                    .then(progressData => {
                        if (progressData && progressData.progress !== undefined) {
                            updateJobProgressDisplay(jobId, progressData);
                        } else if (progressData && progressData.status === 'no_progress') {
                            // No progress available yet, ensure it shows "Processing..."
                            const progressElement = jobRow.querySelector('.job-progress');
                            if (progressElement && progressElement.textContent === '') {
                                progressElement.textContent = 'Processing...';
                            }
                        }
                    })
                    .catch(error => {
                        console.log(`Error getting progress for job ${jobId}:`, error);
                        // On error, ensure it shows "Processing..."
                        const progressElement = jobRow.querySelector('.job-progress');
                        if (progressElement && progressElement.textContent === '') {
                            progressElement.textContent = 'Processing...';
                        }
                    });
            }
        });
    }

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

        const progressElement = jobRow.querySelector('.job-progress');
        if (progressElement) {
            const progressPercent = progressData.progress || 0;
            const stage = progressData.stage || 'processing';
            const message = progressData.message || '';

            // Create progress bar
            const progressBar = document.createElement('div');
            progressBar.style.width = '100%';
            progressBar.style.height = '8px';
            progressBar.style.backgroundColor = '#e5e7eb';
            progressBar.style.borderRadius = '4px';
            progressBar.style.overflow = 'hidden';
            progressBar.style.marginBottom = '4px';

            const progressFill = document.createElement('div');
            progressFill.style.width = `${progressPercent}%`;
            progressFill.style.height = '100%';
            progressFill.style.backgroundColor = '#3b82f6';
            progressFill.style.transition = 'width 0.3s ease';

            progressBar.appendChild(progressFill);

            // Update progress text
            const progressText = document.createElement('div');
            progressText.style.fontSize = '0.75rem';
            progressText.style.color = '#6b7280';
            progressText.style.wordWrap = 'break-word';
            progressText.style.overflowWrap = 'break-word';
            progressText.style.whiteSpace = 'normal';
            progressText.style.lineHeight = '1.2';
            progressText.textContent = `${progressPercent}% - ${stage}: ${message}`;

            progressElement.innerHTML = '';
            progressElement.appendChild(progressBar);
            progressElement.appendChild(progressText);
        }
    }

    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);

                // Initialize progress display for newly processing jobs
                if (jobUpdate.status === 'processing') {
                    const progressElement = jobRow.querySelector('.job-progress');
                    if (progressElement && progressElement.textContent === '') {
                        progressElement.textContent = 'Processing...';
                    }
                }
            }

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

            // Progress info is updated separately by updateJobProgress() function
            // Don't override it with job result status
        }
    }

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

    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 cancelBtn = document.createElement('button');
            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.style.marginRight = '0.5rem';
            cancelBtn.textContent = 'Cancel';
            cancelBtn.onclick = () => performJobAction(jobId, 'cancel', cancelBtn);

            actionsElement.appendChild(cancelBtn);
        } else if (status === 'cancelled') {
            const buttonContainer = document.createElement('div');
            buttonContainer.style.display = 'flex';
            buttonContainer.style.gap = '0.5rem';

            const restartBtn = document.createElement('button');
            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';
            restartBtn.onclick = () => performJobAction(jobId, 'restart', restartBtn);

            const deleteBtn = document.createElement('button');
            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';
            deleteBtn.onclick = () => {
                if (confirm('Are you sure you want to delete this job? This action cannot be undone.')) {
                    performJobAction(jobId, 'delete', deleteBtn);
                }
            };

            buttonContainer.appendChild(restartBtn);
            buttonContainer.appendChild(deleteBtn);
            actionsElement.appendChild(buttonContainer);
        } else if (status === 'queued') {
            const deleteBtn = document.createElement('button');
            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';
            deleteBtn.onclick = () => {
                if (confirm('Are you sure you want to delete this job? This action cannot be undone.')) {
                    performJobAction(jobId, 'delete', deleteBtn);
                }
            };

            actionsElement.appendChild(deleteBtn);
        } else if (status === 'failed') {
            const deleteBtn = document.createElement('button');
            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';
            deleteBtn.onclick = () => {
                if (confirm('Are you sure you want to delete this job? This action cannot be undone.')) {
                    performJobAction(jobId, 'delete', deleteBtn);
                }
            };

            actionsElement.appendChild(deleteBtn);
        }
    }

    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);

        const formData = new FormData();
        formData.append('_method', 'POST');

        fetch(`/job/${jobId}/${action}`, {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: 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);
    }

    // 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);
            }
        });
    }

    // Handle user selector change (for admins)
    function handleUserChange() {
        const userSelector = document.getElementById('userSelector');
        const userInput = document.getElementById('userInput');
        const userSubmitBtn = document.getElementById('userSubmitBtn');

        if (userSelector) {
            // Handle dropdown change
            userSelector.addEventListener('change', function() {
                const selectedUserId = this.value;
                // Reload the page with the new user_id parameter
                window.location.href = `/jobs?user_id=${selectedUserId}`;
            });
        }

        if (userSubmitBtn && userInput) {
            // Handle input field submission
            userSubmitBtn.addEventListener('click', function() {
                const username = userInput.value.trim();
                if (username) {
                    // Reload the page with the username parameter
                    window.location.href = `/jobs?username=${encodeURIComponent(username)}`;
                }
            });

            // Allow Enter key to submit
            userInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    userSubmitBtn.click();
                }
            });
        }
    }

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

    // Initial update
    document.addEventListener('DOMContentLoaded', function() {
        initializeCompletedJobs();
        initializeJobActions();
        handleUserChange();
        updateJobStatuses();
    });

    function initializeJobActions() {
        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) {
                const statusClass = Array.from(statusElement.classList).find(cls => cls.startsWith('status-'));
                if (statusClass) {
                    const status = statusClass.replace('status-', '');
                    updateJobActions(jobId, status);
                }
            }
        });
    }
</script>
{% endblock %}

{% block content %}
<div class="container">
        <div class="jobs-table">
            <div class="table-header">
                <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                    <div>
                        <h2><i class="fas fa-tasks"></i> Jobs</h2>
                        <p style="margin: 0.5rem 0 0 0; color: #64748b; font-size: 0.9rem;">View and manage your queued, processing, cancelled, and recently completed jobs</p>
                    </div>
                    {% if current_user.get('role') == 'admin' and all_users %}
                    <div style="display: flex; align-items: center; gap: 0.5rem;">
                        <label for="userSelector" style="font-size: 0.9rem; color: #374151; font-weight: 500;">View jobs for:</label>
                        {% if use_dropdown %}
                        <select id="userSelector" style="border: 1px solid #d1d5db; border-radius: 6px; padding: 0.375rem 0.75rem; font-size: 0.875rem; background: white;">
                            {% for user_option in all_users %}
                            <option value="{{ user_option.id }}" {% if user_option.id == selected_user_id %}selected{% endif %}>
                                {{ user_option.username }} ({{ user_option.email }})
                            </option>
                            {% endfor %}
                        </select>
                        {% else %}
                        <div style="display: flex; gap: 0.5rem;">
                            <input type="text" id="userInput" placeholder="Enter username" style="border: 1px solid #d1d5db; border-radius: 6px; padding: 0.375rem 0.75rem; font-size: 0.875rem; background: white; min-width: 150px;" value="{% for user_option in all_users %}{% if user_option.id == selected_user_id %}{{ user_option.username }}{% endif %}{% endfor %}">
                            <button id="userSubmitBtn" style="background: #3b82f6; color: white; border: none; border-radius: 6px; padding: 0.375rem 0.75rem; font-size: 0.875rem; cursor: pointer;">Go</button>
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            </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;"></div>
                <div class="job-actions">
                    <!-- Actions will be populated by JavaScript -->
                </div>
            </div>
            {% endfor %}
            {% if not queue_items %}
            <div class="no-jobs">No active jobs. Start by analyzing some media!</div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}