{% extends "admin/layout.html" %}

{% block content %}
{# Breadcrumb #}
<nav class="flex mb-6" aria-label="Breadcrumb">
    <ol role="list" class="flex items-center gap-x-2">
        <li>
            <a href="{{ prefix }}/" class="text-gray-400 hover:text-gray-300">
                <svg class="size-5 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z" clip-rule="evenodd"/>
                </svg>
                <span class="sr-only">Dashboard</span>
            </a>
        </li>
        <li class="flex items-center gap-x-2">
            <svg class="size-5 shrink-0 text-gray-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"/>
            </svg>
            <span class="text-sm font-medium text-gray-400">Queue</span>
        </li>
    </ol>
</nav>

{# Page heading #}
<div class="sm:flex sm:items-center mb-8">
    <div class="sm:flex-auto">
        <h1 class="text-base font-semibold text-white">Queue</h1>
        <p class="mt-2 text-sm text-gray-400">Monitor pending jobs, throughput, and failed jobs.</p>
    </div>
</div>

{# ── Throughput (last 24 h) ───────────────────────────────────────── #}
{% if not history_table_missing %}
<div class="mb-10">
    <h2 class="text-sm font-semibold text-white mb-4">Throughput — last 24 hours</h2>
    {% if throughput %}
    <div class="rounded-lg bg-white/5 ring-1 ring-inset ring-white/10 p-4">
        <div class="space-y-1">
            {% for bucket in throughput %}
            <div class="flex items-center gap-x-3 text-xs">
                <span class="w-12 shrink-0 text-gray-500 text-right font-mono">{{ bucket.hour_label }}</span>
                <div class="flex-1 flex items-center gap-x-1 h-4">
                    {% if bucket.total > 0 %}
                    <div class="h-full rounded-sm flex overflow-hidden" style="width: {{ bucket.bar_pct }}%">
                        {% if bucket.completed > 0 %}
                        <div class="bg-emerald-500/70" style="width: {{ bucket.completed_pct }}%;"></div>
                        {% endif %}
                        {% if bucket.failed > 0 %}
                        <div class="bg-red-500/70 flex-1"></div>
                        {% endif %}
                    </div>
                    {% else %}
                    <div class="h-full w-0.5 bg-white/5 rounded-sm"></div>
                    {% endif %}
                </div>
                <span class="w-16 shrink-0 text-gray-400 font-mono">
                    {% if bucket.total > 0 %}
                    <span class="text-emerald-400">{{ bucket.completed }}</span>
                    {% if bucket.failed > 0 %}<span class="text-gray-600"> / </span><span class="text-red-400">{{ bucket.failed }}</span>{% endif %}
                    {% else %}
                    <span class="text-gray-700">—</span>
                    {% endif %}
                </span>
            </div>
            {% endfor %}
        </div>
        <div class="mt-3 flex items-center gap-x-4 text-xs text-gray-500">
            <span class="flex items-center gap-x-1.5"><span class="inline-block size-2 rounded-sm bg-emerald-500/70"></span>Completed</span>
            <span class="flex items-center gap-x-1.5"><span class="inline-block size-2 rounded-sm bg-red-500/70"></span>Failed</span>
        </div>
    </div>
    {% else %}
    <div class="rounded-lg border border-dashed border-white/10 py-8 text-center">
        <p class="text-sm text-gray-500">No job history yet. Jobs are recorded here once processed.</p>
    </div>
    {% endif %}
</div>

{# ── Per-queue breakdown ──────────────────────────────────────────── #}
{% if queue_stats %}
<div class="mb-10">
    <h2 class="text-sm font-semibold text-white mb-4">Queue breakdown</h2>
    <div class="flow-root">
        <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                <table class="min-w-full divide-y divide-white/15">
                    <thead>
                        <tr>
                            <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-white sm:pl-0">Queue</th>
                            <th scope="col" class="px-3 py-3.5 text-right text-sm font-semibold text-white">Pending</th>
                            <th scope="col" class="px-3 py-3.5 text-right text-sm font-semibold text-white">Processed (1h)</th>
                            <th scope="col" class="px-3 py-3.5 text-right text-sm font-semibold text-white pr-4 sm:pr-0">Failed (1h)</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/10">
                        {% for qs in queue_stats %}
                        <tr>
                            <td class="py-4 pl-4 pr-3 text-sm font-mono text-white sm:pl-0">{{ qs.queue }}</td>
                            <td class="px-3 py-4 text-sm text-right text-gray-400">
                                {% if qs.pending > 0 %}
                                <span class="inline-flex items-center rounded-md bg-gray-400/10 px-2 py-0.5 text-xs font-medium text-gray-300 ring-1 ring-inset ring-gray-400/20">{{ qs.pending }}</span>
                                {% else %}—{% endif %}
                            </td>
                            <td class="px-3 py-4 text-sm text-right">
                                {% if qs.processed_1h > 0 %}
                                <span class="text-emerald-400 font-medium">{{ qs.processed_1h }}</span>
                                {% else %}<span class="text-gray-600">0</span>{% endif %}
                            </td>
                            <td class="px-3 py-4 text-sm text-right pr-4 sm:pr-0">
                                {% if qs.failed_1h > 0 %}
                                <span class="text-red-400 font-medium">{{ qs.failed_1h }}</span>
                                {% else %}<span class="text-gray-600">0</span>{% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% else %}
<div class="mb-10 rounded-md bg-yellow-400/10 px-4 py-3 ring-1 ring-inset ring-yellow-400/20">
    <p class="text-sm text-yellow-300">The <code class="font-mono">jobs_history</code> table does not exist. Add it by re-running <code class="font-mono">hunt queue:table</code> and <code class="font-mono">hunt migrate</code>.</p>
</div>
{% endif %}

{# ── Failed Jobs ─────────────────────────────────────────────────── #}
<div class="mb-10">
    <div class="sm:flex sm:items-center mb-4">
        <div class="sm:flex-auto">
            <h2 class="text-sm font-semibold text-white">Failed Jobs
                {% if failed_jobs %}
                <span class="ml-2 inline-flex items-center rounded-full bg-red-400/10 px-2 py-0.5 text-xs font-medium text-red-400 ring-1 ring-inset ring-red-400/20">{{ failed_jobs | length }}</span>
                {% endif %}
            </h2>
        </div>
        {% if failed_jobs %}
        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
            <form method="post" action="{{ prefix }}/queue/flush" onsubmit="return confirm('Flush all failed jobs? This cannot be undone.')">
                <input type="hidden" name="_token" value="{{ csrf_token }}">
                <button type="submit" class="inline-flex items-center gap-x-1.5 rounded-md bg-red-500/10 px-3 py-2 text-sm font-semibold text-red-400 ring-1 ring-inset ring-red-500/20 hover:bg-red-500/20">
                    <svg class="-ml-0.5 size-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
                    </svg>
                    Flush all
                </button>
            </form>
        </div>
        {% endif %}
    </div>

    {% if failed_table_missing %}
    <div class="rounded-md bg-yellow-400/10 px-4 py-3 ring-1 ring-inset ring-yellow-400/20">
        <p class="text-sm text-yellow-300">The <code class="font-mono">jobs_failed</code> table does not exist. Run your queue migrations first.</p>
    </div>
    {% elif not failed_jobs %}
    <div class="rounded-lg border border-dashed border-white/10 py-12 text-center">
        <svg class="mx-auto size-10 text-gray-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
        </svg>
        <p class="mt-2 text-sm text-gray-500">No failed jobs.</p>
    </div>
    {% else %}
    <div class="flow-root">
        <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                <table class="min-w-full divide-y divide-white/15">
                    <thead>
                        <tr>
                            <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-white sm:pl-0">ID</th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-white">Queue</th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-white">Job</th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-white">Exception</th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-white">Failed At</th>
                            <th scope="col" class="py-3.5 pr-4 pl-3 sm:pr-0"><span class="sr-only">Actions</span></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/10">
                        {% for job in failed_jobs %}
                        <tr>
                            <td class="py-4 pl-4 pr-3 text-sm font-medium text-white whitespace-nowrap sm:pl-0">{{ job.id }}</td>
                            <td class="px-3 py-4 text-sm text-gray-400 whitespace-nowrap">{{ job.queue }}</td>
                            <td class="px-3 py-4 text-sm text-gray-300 whitespace-nowrap font-mono">{{ job._job_class }}</td>
                            <td class="px-3 py-4 text-sm text-gray-400 max-w-xs">
                                {% if job.exception %}
                                <span class="text-red-400 truncate block max-w-xs">{{ job.exception[:80] }}{% if job.exception | length > 80 %}…{% endif %}</span>
                                {% else %}
                                <span class="text-gray-600">—</span>
                                {% endif %}
                            </td>
                            <td class="px-3 py-4 text-sm text-gray-400 whitespace-nowrap">{{ job._failed_at_fmt }}</td>
                            <td class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-0">
                                <div class="flex items-center justify-end gap-x-2">
                                    <button onclick="document.getElementById('job-modal-{{ job.id }}').showModal()"
                                            class="inline-flex items-center gap-x-1 rounded px-2 py-1 text-xs font-semibold text-gray-300 bg-white/5 ring-1 ring-inset ring-white/10 hover:bg-white/10">
                                        View
                                    </button>
                                    <form method="post" action="{{ prefix }}/queue/failed/{{ job.id }}/retry">
                                        <input type="hidden" name="_token" value="{{ csrf_token }}">
                                        <button type="submit" class="inline-flex items-center gap-x-1 rounded px-2 py-1 text-xs font-semibold text-indigo-400 bg-indigo-500/10 ring-1 ring-inset ring-indigo-500/20 hover:bg-indigo-500/20" title="Retry">
                                            <svg class="size-3.5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                <path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z" clip-rule="evenodd"/>
                                            </svg>
                                            Retry
                                        </button>
                                    </form>
                                    <form method="post" action="{{ prefix }}/queue/failed/{{ job.id }}/delete" onsubmit="return confirm('Delete this failed job?')">
                                        <input type="hidden" name="_token" value="{{ csrf_token }}">
                                        <button type="submit" class="text-gray-500 hover:text-red-400" title="Delete">
                                            <svg class="size-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                            </svg>
                                            <span class="sr-only">Delete</span>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {# Failed job detail modals #}
    {% for job in failed_jobs %}
    <dialog id="job-modal-{{ job.id }}"
            class="w-full max-w-3xl rounded-xl bg-gray-900 text-white shadow-2xl ring-1 ring-white/10 p-0 backdrop:bg-black/60">
        <div class="flex items-center justify-between border-b border-white/10 px-6 py-4">
            <div>
                <h3 class="text-base font-semibold text-white font-mono">{{ job._job_class }}</h3>
                <p class="mt-0.5 text-xs text-gray-400">Queue: {{ job.queue }} &nbsp;&middot;&nbsp; Failed: {{ job._failed_at_fmt }}</p>
            </div>
            <form method="dialog">
                <button class="rounded-md bg-white/5 p-1.5 text-gray-400 hover:text-white hover:bg-white/10">
                    <svg class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"/>
                    </svg>
                    <span class="sr-only">Close</span>
                </button>
            </form>
        </div>
        <div class="p-6 space-y-5 max-h-[70vh] overflow-y-auto">
            <div>
                <h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Exception</h4>
                <pre class="whitespace-pre-wrap break-all text-xs text-red-300 bg-white/5 rounded-lg p-4 max-h-48 overflow-y-auto ring-1 ring-inset ring-white/10">{{ job.exception or '—' }}</pre>
            </div>
            <div>
                <h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Payload</h4>
                <pre class="whitespace-pre-wrap break-all text-xs text-gray-300 bg-white/5 rounded-lg p-4 max-h-64 overflow-y-auto ring-1 ring-inset ring-white/10">{{ job._payload_formatted }}</pre>
            </div>
        </div>
        <div class="flex items-center justify-end gap-x-3 border-t border-white/10 px-6 py-4">
            <form method="post" action="{{ prefix }}/queue/failed/{{ job.id }}/retry">
                <input type="hidden" name="_token" value="{{ csrf_token }}">
                <button type="submit" class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-400">Retry</button>
            </form>
            <form method="dialog">
                <button class="rounded-md bg-white/5 px-3 py-2 text-sm font-semibold text-white hover:bg-white/10">Close</button>
            </form>
        </div>
    </dialog>
    {% endfor %}
    {% endif %}
</div>

{# ── Pending / Processing Jobs ────────────────────────────────────── #}
<div>
    <div class="sm:flex sm:items-center mb-4">
        <div class="sm:flex-auto">
            <h2 class="text-sm font-semibold text-white">Pending Jobs
                {% if pending_jobs %}
                <span class="ml-2 inline-flex items-center rounded-full bg-white/10 px-2 py-0.5 text-xs font-medium text-gray-300 ring-1 ring-inset ring-white/10">{{ pending_jobs | length }}</span>
                {% endif %}
            </h2>
        </div>
    </div>

    {% if jobs_table_missing %}
    <div class="rounded-md bg-yellow-400/10 px-4 py-3 ring-1 ring-inset ring-yellow-400/20">
        <p class="text-sm text-yellow-300">The <code class="font-mono">jobs</code> table does not exist. Run your queue migrations first.</p>
    </div>
    {% elif not pending_jobs %}
    <div class="rounded-lg border border-dashed border-white/10 py-12 text-center">
        <svg class="mx-auto size-10 text-gray-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H15M2.25 13.5h3.86a2.251 2.251 0 0 1 2.012 1.244l.256.512a2.252 2.252 0 0 0 2.013 1.244h3.218a2.252 2.252 0 0 0 2.013-1.244l.256-.512a2.251 2.251 0 0 1 2.012-1.244h3.860"/>
        </svg>
        <p class="mt-2 text-sm text-gray-500">No jobs in queue.</p>
    </div>
    {% else %}
    <div class="flow-root">
        <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                <table class="min-w-full divide-y divide-white/15">
                    <thead>
                        <tr>
                            <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-white sm:pl-0">ID</th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-white">Queue</th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-white">Job</th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-white">Status</th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-white">Attempts</th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-white">Created At</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/10">
                        {% for job in pending_jobs %}
                        <tr>
                            <td class="py-4 pl-4 pr-3 text-sm font-medium text-white whitespace-nowrap sm:pl-0">{{ job.id }}</td>
                            <td class="px-3 py-4 text-sm text-gray-400 whitespace-nowrap">{{ job.queue }}</td>
                            <td class="px-3 py-4 text-sm text-gray-300 whitespace-nowrap font-mono">{{ job._job_class }}</td>
                            <td class="px-3 py-4 text-sm whitespace-nowrap">
                                {% if job._status == 'Processing' %}
                                <span class="inline-flex items-center rounded-md bg-blue-400/10 px-2 py-1 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-400/20">Processing</span>
                                {% elif job._status == 'Delayed' %}
                                <span class="inline-flex items-center rounded-md bg-yellow-400/10 px-2 py-1 text-xs font-medium text-yellow-400 ring-1 ring-inset ring-yellow-400/20">Delayed</span>
                                {% else %}
                                <span class="inline-flex items-center rounded-md bg-gray-400/10 px-2 py-1 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-400/20">Pending</span>
                                {% endif %}
                            </td>
                            <td class="px-3 py-4 text-sm text-gray-400 whitespace-nowrap">{{ job.attempts }}</td>
                            <td class="px-3 py-4 text-sm text-gray-400 whitespace-nowrap">{{ job._created_at_fmt }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}