{% extends "base.html" %}

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

{% block content %}
<div class="mx-auto">
    <!-- Header -->
    <div class="card card-header mb-6">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-2xl font-bold text-heading">Submissions Table</h2>
            <div class="space-x-3">
                <button 
                    onclick="refreshTable()"
                    class="btn-outline">
                    Refresh
                </button>
            </div>
        </div>
        
        <!-- Filters -->
        <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="select">
                    <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="select">
                    <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="select">
                    <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 Table Container -->
    <div class="card">
        <div id="submissions-table-container">
            <div class="p-6 text-center">
                <div class="animate-spin rounded-full h-8 w-8 border-b-2 spinner-border mx-auto"></div>
                <p class="mt-2 text-description">Loading submissions...</p>
            </div>
        </div>
    </div>
</div>

<script>
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-table' + (queryString ? '?' + queryString : '');
}

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

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

function refreshTable() {
    applyFilters();
}

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

// Filter function (legacy support)
function filterSubmissions() {
    applyFilters();
}

// Define deleteSubmission function
function deleteSubmission(submissionId) {
    if (confirm('Are you sure you want to delete this submission? This action cannot be undone.')) {
        fetch('{{ API_BASE_URL }}/api/submissions/' + submissionId, {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                alert('Error deleting submission: ' + data.error);
            } else {
                // Refresh the table
                refreshTable();
            }
        })
        .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();
});
</script>
{% endblock %}