{% extends "_base.html" %}
{% set active_page = "jobs" %}

{% block title %}Jobs — TaskQ Admin{% endblock %}

{% block head %}
<script>
window.__taskqJobConfig = {
    tab: "{{ tab }}",
    basePath: "{{ base_path }}",
    realtimeMode: "{{ realtime_mode }}",
    pollIntervalMs: {{ poll_interval_ms }},
    actor: "{{ actor_filter }}",
    queue: "{{ queue_filter }}",
    timeRange: "{{ time_range }}",
    timeFrom: "{{ time_from }}",
    timeTo: "{{ time_to }}",
    identityKey: "{{ identity_key }}",
    fairnessKey: "{{ fairness_key }}",
    search: "{{ search }}",
    liveOn: {{ 'true' if live == 'on' else 'false' }},
    selectedStatuses: {{ statuses | tojson }},
    allStatuses: {{ all_statuses | tojson }},
    totalRows: {{ total_rows }}
};
</script>
<script src="{{ base_path }}/static/admin.js"></script>
{% endblock %}

{% block content %}
<div x-data="jobsPage" class="space-y-4">

    <div class="flex items-center justify-between">
        <h2 class="text-xl font-semibold tracking-tight">Jobs</h2>
        <span class="text-xs text-slate-500">Showing <span x-text="totalRows"></span> results</span>
    </div>

    {# Tabs #}
    <div class="border-b border-slate-200 dark:border-slate-700">
        <nav class="flex gap-0 -mb-px">
            <button @click="switchTab('live')"
                    :class="tab === 'live' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 hover:border-slate-300'"
                    class="px-4 py-2.5 text-sm font-medium border-b-2 transition-colors whitespace-nowrap">
                <i data-lucide="radio" class="w-3.5 h-3.5 inline mr-1.5"></i> Live Jobs
            </button>
            <button @click="switchTab('archived')"
                    :class="tab === 'archived' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 hover:border-slate-300'"
                    class="px-4 py-2.5 text-sm font-medium border-b-2 transition-colors whitespace-nowrap">
                <i data-lucide="archive" class="w-3.5 h-3.5 inline mr-1.5"></i> Archived
            </button>
        </nav>
    </div>

    {# Filter bar #}
    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg p-3">
        <form id="job-filters"
              hx-get="{{ base_path }}/jobs"
              hx-target="#job-table-container"
              hx-trigger="submit"
              hx-swap="outerHTML"
              class="space-y-3">

            <input type="hidden" name="tab" :value="tab">
            <input type="hidden" name="live" :value="liveOn ? 'on' : 'off'">

            <div class="flex flex-wrap gap-2 items-end">
                <div class="flex-1 min-w-[140px]">
                    <label class="block text-xs font-medium text-slate-500 mb-1">Actor</label>
                    <input type="text" name="actor" value="{{ actor_filter }}"
                           placeholder="e.g. send_email"
                           class="w-full px-2.5 py-1.5 text-sm border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
                </div>
                <div class="flex-1 min-w-[120px]">
                    <label class="block text-xs font-medium text-slate-500 mb-1">Queue</label>
                    <input type="text" name="queue" value="{{ queue_filter }}"
                           placeholder="e.g. default"
                           class="w-full px-2.5 py-1.5 text-sm border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
                </div>

                {# Status combobox #}
                <div class="relative" x-data="statusCombobox">
                    <label class="block text-xs font-medium text-slate-500 mb-1">Status</label>
                    <button type="button" @click="open = !open"
                            class="flex items-center gap-1.5 min-w-[140px] px-2.5 py-1.5 text-sm border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 hover:border-slate-400 focus:ring-2 focus:ring-blue-500 outline-none">
                        <span class="flex-1 text-left truncate" x-text="displayText()"></span>
                        <i data-lucide="chevrons-up-down" class="w-3.5 h-3.5 text-slate-400 shrink-0"></i>
                    </button>
                    <div x-show="open" x-cloak @click.outside="open = false"
                         class="absolute z-50 mt-1 w-56 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-lg shadow-lg py-1 max-h-64 overflow-y-auto">
                        <template x-for="s in allStatuses" :key="s">
                            <label class="flex items-center gap-2 px-3 py-1.5 hover:bg-slate-100 dark:hover:bg-slate-700 cursor-pointer text-sm">
                                <input type="checkbox" :value="s" name="status"
                                       :checked="selected.includes(s)"
                                       @change="toggle(s)"
                                       class="rounded border-slate-300 text-blue-600 focus:ring-blue-500">
                                <span x-text="s" class="capitalize" :class="statusColor(s)"></span>
                            </label>
                        </template>
                        <div class="border-t border-slate-200 dark:border-slate-600 mt-1 pt-1 px-2 flex gap-1 flex-wrap">
                            <button type="button" @click="selectAll()" class="text-xs px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600">All</button>
                            <button type="button" @click="selectActive()" class="text-xs px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600">Active</button>
                            <button type="button" @click="selectTerminal()" class="text-xs px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600">Terminal</button>
                            <button type="button" @click="selectNone()" class="text-xs px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600">Clear</button>
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-1 mt-1" x-show="selected.length > 0 && selected.length < 4">
                        <template x-for="s in selected" :key="s">
                            <span class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-xs font-medium"
                                  :class="chipColor(s)">
                                <span x-text="s"></span>
                                <button type="button" @click="toggle(s)" class="hover:opacity-70">&times;</button>
                            </span>
                        </template>
                        <span x-show="selected.length >= 4" class="text-xs text-slate-500" x-text="'+' + (selected.length - 3) + ' more'"></span>
                    </div>
                </div>

                <div class="min-w-[100px]">
                    <label class="block text-xs font-medium text-slate-500 mb-1">Time</label>
                    <select name="time_range"
                            class="w-full px-2.5 py-1.5 text-sm border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 focus:ring-2 focus:ring-blue-500 outline-none">
                        <option value="">Any time</option>
                        <option value="5m" {% if time_range == '5m' %}selected{% endif %}>Last 5 min</option>
                        <option value="15m" {% if time_range == '15m' %}selected{% endif %}>Last 15 min</option>
                        <option value="1h" {% if time_range == '1h' %}selected{% endif %}>Last hour</option>
                        <option value="6h" {% if time_range == '6h' %}selected{% endif %}>Last 6 hours</option>
                        <option value="24h" {% if time_range == '24h' %}selected{% endif %}>Last 24 hours</option>
                        <option value="7d" {% if time_range == '7d' %}selected{% endif %}>Last 7 days</option>
                        <option value="30d" {% if time_range == '30d' %}selected{% endif %}>Last 30 days</option>
                    </select>
                </div>
            </div>

            <div class="flex flex-wrap gap-2 items-end">
                <div class="flex-1 min-w-[140px]">
                    <label class="block text-xs font-medium text-slate-500 mb-1">Identity Key</label>
                    <input type="text" name="identity_key" value="{{ identity_key }}"
                           placeholder="exact match"
                           class="w-full px-2.5 py-1.5 text-sm border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
                </div>
                <div class="flex-1 min-w-[140px]">
                    <label class="block text-xs font-medium text-slate-500 mb-1">Fairness Key</label>
                    <input type="text" name="fairness_key" value="{{ fairness_key }}"
                           placeholder="exact match"
                           class="w-full px-2.5 py-1.5 text-sm border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
                </div>
                <div class="flex-1 min-w-[160px]">
                    <label class="block text-xs font-medium text-slate-500 mb-1">Search</label>
                    <input type="text" name="search" value="{{ search }}"
                           placeholder="ID or actor name..."
                           class="w-full px-2.5 py-1.5 text-sm border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
                </div>
                <div class="flex-1 min-w-[160px]">
                    <label class="block text-xs font-medium text-slate-500 mb-1">Tags</label>
                    <input type="text" name="tags" value="{{ tags_filter }}"
                           placeholder="comma-separated..."
                           class="w-full px-2.5 py-1.5 text-sm border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
                </div>
                <div class="flex gap-2">
                    <button type="submit"
                            class="px-4 py-1.5 text-sm font-medium bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                        Filter
                    </button>
                    <a href="{{ base_path }}/jobs"
                       class="px-4 py-1.5 text-sm font-medium border border-slate-300 dark:border-slate-600 rounded-md text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
                        Reset
                    </a>
                </div>
            </div>

            {# Live refresh toggle #}
            <div x-show="tab === 'live'" class="flex items-center gap-3 pt-1 border-t border-slate-200 dark:border-slate-700">
                <span class="text-xs text-slate-500">Live refresh</span>
                <button type="button" @click="toggleLive()"
                        :class="liveOn ? 'bg-blue-600' : 'bg-slate-300 dark:bg-slate-600'"
                        class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
                        role="switch" :aria-checked="liveOn">
                    <span :class="liveOn ? 'translate-x-4' : 'translate-x-0'"
                          class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
                </button>
                <span class="text-xs" :class="liveOn ? 'text-green-600 dark:text-green-400' : 'text-slate-400'" x-text="liveOn ? '● Live' : '○ Paused'"></span>
                <span x-show="!liveOn && pendingCount > 0" class="text-xs text-blue-600 dark:text-blue-400 cursor-pointer hover:underline" @click="showPending()" x-text="pendingCount + ' new'"></span>
            </div>
        </form>
    </div>

    {# Table container #}
    <div id="job-table-container">
        {% include "_partials/job_table.html" %}
    </div>

</div>
{% endblock %}