{# T30a admin scans list. Extends the T28 admin layout.                  #}
{# Filter bar (GET form, serializes to URL query params) + a card with a #}
{# divide-y data table + pagination footer.                              #}
{% extends "admin_layout.html" %}

{% block page_title %}Scans{% endblock %}

{% block breadcrumb %}
  <span class="text-gray-500">Admin</span>
  <span class="px-1.5 text-gray-300">/</span>
  <span class="text-gray-900 font-medium">Scans</span>
{% endblock %}

{% macro status_chip(status) -%}
  {% if status == 'success' -%}
    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">success</span>
  {%- elif status == 'errored' -%}
    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">errored</span>
  {%- elif status == 'cancelled' -%}
    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-700">cancelled</span>
  {%- elif status == 'soft_deleted' -%}
    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-orange-100 text-orange-800">soft-deleted</span>
  {%- else -%}
    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-700">{{ status }}</span>
  {%- endif %}
{%- endmacro %}

{# Builds a sort-toggle URL for a column header. Preserves every other  #}
{# filter param via ``filter_query`` so clicking a header doesn't reset #}
{# the filter bar.                                                      #}
{% macro sort_header(label, col, current_sort, current_order, filter_query) -%}
  {% set next_order = 'asc' if (current_sort == col and current_order == 'desc') else ('desc' if current_sort == col else 'desc') %}
  {% set indicator = '' %}
  {% if current_sort == col and current_order == 'asc' %}{% set indicator = ' ▲' %}{% endif %}
  {% if current_sort == col and current_order == 'desc' %}{% set indicator = ' ▼' %}{% endif %}
  <a href="?{{ filter_query }}&sort={{ col }}&order={{ next_order }}" class="inline-flex items-center gap-1 hover:text-gray-700">{{ label }}<span class="text-xs">{{ indicator }}</span></a>
{%- endmacro %}

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

  {# ===================== Filter bar ===================== #}
  <form method="get" action="/admin/scans" class="bg-white border border-gray-200 rounded-lg shadow-sm p-4">
    <div class="flex flex-wrap items-end gap-3">
      <div class="flex flex-col">
        <label for="filter-user" class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">User email</label>
        <input id="filter-user" type="text" name="user" value="{{ filt.user_email or '' }}" placeholder="user@example.com" class="px-3 py-1.5 text-sm border border-gray-300 rounded focus:border-blue-500 focus:ring-1 focus:ring-blue-500 w-56">
      </div>

      <div class="flex flex-col">
        <label for="filter-domain" class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Domain</label>
        <input id="filter-domain" type="text" name="domain" value="{{ filt.domain or '' }}" placeholder="example.com" class="px-3 py-1.5 text-sm border border-gray-300 rounded focus:border-blue-500 focus:ring-1 focus:ring-blue-500 w-48">
      </div>

      <div class="flex flex-col">
        <label for="filter-from" class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">From</label>
        <input id="filter-from" type="date" name="from" value="{{ filt.date_from.isoformat() if filt.date_from else '' }}" class="px-3 py-1.5 text-sm border border-gray-300 rounded focus:border-blue-500 focus:ring-1 focus:ring-blue-500">
      </div>

      <div class="flex flex-col">
        <label for="filter-to" class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">To</label>
        <input id="filter-to" type="date" name="to" value="{{ filt.date_to.isoformat() if filt.date_to else '' }}" class="px-3 py-1.5 text-sm border border-gray-300 rounded focus:border-blue-500 focus:ring-1 focus:ring-blue-500">
      </div>

      <div class="flex flex-col">
        <span class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Status</span>
        <div class="flex items-center gap-3 text-sm text-gray-700">
          {% for s in ['success', 'errored', 'cancelled', 'soft_deleted'] %}
            <label class="inline-flex items-center gap-1">
              <input type="checkbox" name="status" value="{{ s }}" {% if filt.statuses and s in filt.statuses %}checked{% endif %} class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
              <span>{{ 'soft-deleted' if s == 'soft_deleted' else s }}</span>
            </label>
          {% endfor %}
        </div>
      </div>

      <div class="flex flex-col">
        <span class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Options</span>
        <label class="inline-flex items-center gap-2 text-sm text-gray-700">
          <input type="checkbox" name="include_deleted" value="1" {% if filt.include_deleted %}checked{% endif %} class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
          <span>Include soft-deleted</span>
        </label>
      </div>

      {# Preserve sort + order across form submission. #}
      <input type="hidden" name="sort" value="{{ filt.sort_by }}">
      <input type="hidden" name="order" value="{{ filt.sort_order }}">

      <div class="flex items-center gap-2 ml-auto">
        <button type="submit" class="px-4 py-1.5 text-sm font-medium bg-blue-600 text-white rounded hover:bg-blue-700">Apply</button>
        <a href="/admin/scans" class="px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900">Reset</a>
      </div>
    </div>
  </form>

  {# ===================== Data table ===================== #}
  <section class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
    {% if not result.rows %}
      <div class="px-6 py-10 text-sm text-gray-400 italic text-center">No scans found.</div>
    {% else %}
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 text-sm">
          <thead class="bg-gray-50">
            <tr>
              <th class="text-left font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">Scan ID</th>
              <th class="text-left font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">
                {{ sort_header('Created', 'created_at', filt.sort_by, filt.sort_order, filter_query) }}
              </th>
              <th class="text-left font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">Owner</th>
              <th class="text-left font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">
                {{ sort_header('Domain', 'target_domain', filt.sort_by, filt.sort_order, filter_query) }}
              </th>
              <th class="text-left font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">Template</th>
              <th class="text-left font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">Status</th>
              <th class="text-right font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">
                {{ sort_header('Cost', 'cost_usd', filt.sort_by, filt.sort_order, filter_query) }}
              </th>
              <th class="text-right font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">Actions</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100">
            {% for row in result.rows %}
              <tr class="even:bg-gray-50 hover:bg-blue-50">
                <td class="py-2 px-4 font-mono text-xs text-gray-700">{{ row.scan_id_short }}</td>
                <td class="py-2 px-4 text-gray-700 whitespace-nowrap">{{ row.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                <td class="py-2 px-4 text-gray-700 max-w-[14em] truncate">{{ row.owner_email or '(anonymous)' }}</td>
                <td class="py-2 px-4 text-gray-700 max-w-[14em] truncate">{{ row.target_domain or '-' }}</td>
                <td class="py-2 px-4 text-gray-700">{{ row.starter_template or '-' }}</td>
                <td class="py-2 px-4">{{ status_chip(row.status) }}</td>
                <td class="py-2 px-4 text-right text-gray-900 tabular-nums">${{ '%.4f'|format(row.cost_usd) }}</td>
                <td class="py-2 px-4 text-right">
                  <a href="/debug/scans/{{ row.scan_id }}" class="text-sm text-blue-600 hover:text-blue-800 font-medium">View</a>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}
  </section>

  {# ===================== Pagination footer ===================== #}
  {% if result.rows %}
    {% set start = ((result.page - 1) * result.page_size) + 1 %}
    {% set end = start + result.rows|length - 1 %}
    <div class="flex items-center justify-between text-sm text-gray-600">
      <div>Showing <span class="font-medium text-gray-900">{{ start }}</span>&ndash;<span class="font-medium text-gray-900">{{ end }}</span> of <span class="font-medium text-gray-900">{{ result.total_count }}</span></div>
      <div class="flex items-center gap-2">
        {% if result.page > 1 %}
          <a href="?{{ filter_query }}&sort={{ filt.sort_by }}&order={{ filt.sort_order }}&page={{ result.page - 1 }}" class="px-3 py-1.5 border border-gray-200 rounded hover:bg-gray-100">&larr; Prev</a>
        {% else %}
          <span class="px-3 py-1.5 border border-gray-200 rounded text-gray-300 cursor-not-allowed">&larr; Prev</span>
        {% endif %}
        <span class="px-3 py-1.5 text-gray-500">Page {{ result.page }}</span>
        {% if result.has_more %}
          <a href="?{{ filter_query }}&sort={{ filt.sort_by }}&order={{ filt.sort_order }}&page={{ result.page + 1 }}" class="px-3 py-1.5 border border-gray-200 rounded hover:bg-gray-100">Next &rarr;</a>
        {% else %}
          <span class="px-3 py-1.5 border border-gray-200 rounded text-gray-300 cursor-not-allowed">Next &rarr;</span>
        {% endif %}
      </div>
    </div>
  {% endif %}

</div>
{% endblock %}