{% extends "base.html" %}

{% block title %}Submissions{% endblock %}

{% block content %}
<div class="card card-body">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold">Submissions</h2>
        <div class="space-x-2">
            <button 
                onclick="refreshSubmissions()"
                class="btn-outline"
            >
                Refresh
            </button>
        </div>
    </div>

    <!-- Filter Buttons and Search -->
    <div class="mb-6">
        <div class="flex flex-col space-y-4 md:flex-row md:space-y-0 md:space-x-4 md:items-end">
            <!-- Search Bar -->
            <div class="flex-1">
                <label for="search-input" class="block text-sm font-medium text-label mb-1">Search</label>
                <input 
                    type="text" 
                    id="search-input"
                    placeholder=""
                    class="input"
                />
            </div>
            
            <!-- Status Filter -->
            <div class="w-full md:w-40">
                <label for="status-filter" class="block text-sm font-medium text-label mb-1">Status</label>
                <select id="status-filter" class="input">
                    <option value="all">All Statuses</option>
                    <option value="fresh">Fresh</option>
                    <option value="running">Running</option>
                    <option value="finished">Finished</option>
                    <option value="error">Error</option>
                </select>
            </div>
            
            <!-- Project Filter -->
            <div class="w-full md:w-48">
                <label for="project-filter" class="block text-sm font-medium text-label mb-1">Project</label>
                <input 
                    type="text" 
                    id="project-filter"
                    placeholder=""
                    class="input"
                />
            </div>
            
            <!-- User Filter -->
            <div class="w-full md:w-32">
                <label for="user-filter" class="block text-sm font-medium text-label mb-1">User</label>
                <select id="user-filter" class="input">
                    <option value="all" {% if IS_AUTHENTICATED %}selected{% endif %}>All</option>
                    <option value="guest" {% if not IS_AUTHENTICATED %}selected{% endif %}>Guest</option>
                    <option value="admin">Admin</option>
                </select>
            </div>
            
            <!-- Limit Filter -->
            <div class="w-full md:w-32">
                <label for="limit-filter" class="block text-sm font-medium text-label mb-1">Limit</label>
                <select id="limit-filter" class="input">
                    <option value="5">5</option>
                    <option value="10" selected>10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>
            
            <!-- Clear Filters Button -->
            <div>
                <button 
                    onclick="clearFilters()"
                    class="btn-outline"
                >
                    Clear
                </button>
            </div>
        </div>
    </div>

    <!-- Submissions List -->
    <div 
        id="submissions-container"
    >
        <div class="text-center text-description">Loading submissions...</div>
    </div>
</div>

<script>
    let autoRefreshInterval;
    let debounceTimer;

    function buildFilterUrl() {
        const params = new URLSearchParams();
        
        // Status filter
        const status = document.getElementById('status-filter').value;
        if (status && status !== 'all') {
            params.append('status', status);
        }
        
        // Search filter
        const search = document.getElementById('search-input').value.trim();
        if (search) {
            params.append('search', search);
        }
        
        // Project filter
        const project = document.getElementById('project-filter').value.trim();
        if (project) {
            params.append('project', project);
        }
        
        // User filter
        const user = document.getElementById('user-filter').value;
        if (user && user !== 'all') {
            params.append('user', user);
        }
        
        // Limit
        const limit = document.getElementById('limit-filter').value;
        if (limit) {
            params.append('limit', limit);
        }
        
        const queryString = params.toString();
        return '/templates/submissions' + (queryString ? '?' + queryString : '');
    }

    function applyFilters() {
        const url = buildFilterUrl();
        htmx.ajax('GET', url, {
            target: '#submissions-container',
            swap: 'innerHTML'
        });
    }

    function debounceApplyFilters() {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(applyFilters, 500);
    }

    function startAutoRefresh() {
        // Clear any existing interval
        if (autoRefreshInterval) {
            clearInterval(autoRefreshInterval);
        }
        
        // Start new interval that respects current filters
        autoRefreshInterval = setInterval(function() {
            const url = buildFilterUrl();
            htmx.ajax('GET', url, {
                target: '#submissions-container',
                swap: 'innerHTML'
            });
        }, 5000); // Refresh every 5 seconds
    }

    function filterSubmissions(status) {
        // Legacy function kept for compatibility
        document.getElementById('status-filter').value = status;
        applyFilters();
        startAutoRefresh();
    }

    function clearFilters() {
        // Reset all filter inputs
        document.getElementById('search-input').value = '';
        document.getElementById('project-filter').value = '';
        document.getElementById('status-filter').value = 'all';
        document.getElementById('limit-filter').value = '10';
        
        // Reset user filter to default based on auth
        {% if IS_AUTHENTICATED %}
        document.getElementById('user-filter').value = 'all';
        {% else %}
        document.getElementById('user-filter').value = 'guest';
        {% endif %}
        
        // Apply filters
        applyFilters();
    }

    function refreshSubmissions() {
        applyFilters();
    }

    function deleteSubmission(submissionId) {
        if (confirm('Are you sure you want to delete this submission? This action cannot be undone.')) {
            fetch('/api/submissions/' + submissionId + '/delete', {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert('Error deleting submission: ' + data.error);
                } else {
                    // Refresh the submissions list after successful deletion
                    refreshSubmissions();
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Failed to delete submission');
            });
        }
    }

    // Add event listeners for filter inputs
    document.addEventListener('DOMContentLoaded', function() {
        // Add input event listeners for debounced filtering
        document.getElementById('search-input').addEventListener('input', debounceApplyFilters);
        document.getElementById('project-filter').addEventListener('input', debounceApplyFilters);
        document.getElementById('status-filter').addEventListener('change', applyFilters);
        document.getElementById('user-filter').addEventListener('change', applyFilters);
        document.getElementById('limit-filter').addEventListener('change', applyFilters);
        
        // Load initial content based on current dropdown values
        applyFilters();
        
        // Start auto-refresh when page loads
        startAutoRefresh();
    });
</script>
{% endblock %}