{% extends "base.html" %}
{% import "_pagination.html" as pagination %}
{% import "_batches.html" as badges %}

{% block title %}Batches - Control Plane{% endblock %}

{% block content %}
<turbo-frame id="content">
{% if schema_missing %}
<div class="rounded-lg border border-gray-200 p-6 text-sm text-gray-600">
  <p class="font-medium text-gray-900 mb-1">Batches are not installed</p>
  <p>The batches schema (<code>batches</code>, <code>batch_executions</code> and <code>jobs.batch_id</code>) is missing. Run <code>Quebec.create_tables()</code>, or on a Rails-managed database the Solid Queue <code>add_batches_to_solid_queue</code> migration.</p>
</div>
{% else %}
<!-- Filters -->
<div class="flex flex-wrap items-center gap-3 mb-6" data-controller="filter">
  <div class="relative w-full sm:w-auto">
    <select data-action="change->filter#apply" name="status" data-filter-target="statusSelect" class="w-full sm:w-auto appearance-none bg-white border border-gray-300 rounded-md h-8 pl-3 pr-10 text-sm focus:outline-none focus:ring-1 focus:ring-black focus:border-black">
      <option value="">Filter by status...</option>
      {% for s in statuses %}
      <option value="{{ s }}" {% if filter_status == s %}selected{% endif %}>{{ s | title }}</option>
      {% endfor %}
    </select>
    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
      </svg>
    </div>
  </div>

  <a href="{{ base_path }}/batches" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-gray-200 bg-white hover:bg-gray-100 hover:text-gray-900 h-8 px-4 py-1.5">
    Clear
  </a>

  <div class="flex-grow basis-full sm:basis-auto"></div>
</div>

{% set filter_args = "" %}
{% if filter_status %}{% set filter_args = "status=" ~ filter_status %}{% endif %}

<!-- Mobile cards -->
<div class="sm:hidden space-y-3">
  {% if batches|length > 0 %}
    {% for batch in batches %}
    <div class="rounded-lg border border-gray-200 p-4 space-y-2 text-sm">
      <div class="flex items-start justify-between gap-2">
        <div class="min-w-0">
          <div class="font-medium text-gray-900 truncate">
            <a href="{{ base_path }}/batches/{{ batch.id }}" data-turbo-action="advance" class="hover:underline">{% if batch.description %}{{ batch.description }}{% else %}Batch #{{ batch.id }}{% endif %}</a>
          </div>
          <div class="text-xs text-gray-500">id {{ batch.id }}</div>
        </div>
        {{ badges::status_badge(status=batch.status) }}
      </div>
      <dl class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs">
        <dt class="text-gray-500">Progress</dt>
        <dd class="text-gray-900">{{ batch.completed_jobs }} / {{ batch.total_jobs }}{% if batch.failed_jobs > 0 %} · {{ batch.failed_jobs }} failed{% endif %}</dd>
        <dt class="text-gray-500">Created</dt>
        <dd class="text-gray-900"><span data-controller="localtime" data-localtime-datetime-value="{{ batch.created_at }}">{{ batch.created_at }}</span></dd>
        {% if batch.finished_at %}
        <dt class="text-gray-500">Finished</dt>
        <dd class="text-gray-900"><span data-controller="localtime" data-localtime-datetime-value="{{ batch.finished_at }}">{{ batch.finished_at }}</span></dd>
        {% endif %}
      </dl>
    </div>
    {% endfor %}
  {% else %}
    <div class="rounded-lg border border-gray-200 p-4 text-sm text-center text-gray-500">No batches found</div>
  {% endif %}
</div>

<!-- Desktop table -->
<div class="hidden sm:block overflow-x-auto rounded-lg border border-gray-200">
  <table class="min-w-full divide-y divide-gray-200">
    <thead class="bg-gray-50">
      <tr>
        <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Batch</th>
        <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
        <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
        <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created At</th>
        <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Finished At</th>
      </tr>
    </thead>
    <tbody class="bg-white divide-y divide-gray-200">
      {% if batches|length > 0 %}
        {% for batch in batches %}
        <tr>
          <td class="px-3 py-3 sm:px-6 sm:py-4 whitespace-nowrap">
            <div class="text-sm font-medium text-gray-900">
              <a href="{{ base_path }}/batches/{{ batch.id }}" data-turbo-action="advance" class="hover:underline">{% if batch.description %}{{ batch.description }}{% else %}Batch #{{ batch.id }}{% endif %}</a>
            </div>
            <div class="text-sm text-gray-500">id: {{ batch.id }}</div>
          </td>
          <td class="px-3 py-3 sm:px-6 sm:py-4 whitespace-nowrap">{{ badges::status_badge(status=batch.status) }}</td>
          <td class="px-3 py-3 sm:px-6 sm:py-4 whitespace-nowrap">
            <div class="flex items-center gap-3">
              <div class="w-32 h-2 rounded-full bg-gray-200 overflow-hidden">
                <div class="h-2 {% if batch.status == 'failed' %}bg-red-500{% else %}bg-gray-900{% endif %}" style="width: {{ batch.progress_percentage }}%"></div>
              </div>
              <div class="text-sm text-gray-900">{{ batch.completed_jobs }} / {{ batch.total_jobs }}{% if batch.failed_jobs > 0 %} <span class="text-red-700">· {{ batch.failed_jobs }} failed</span>{% endif %}</div>
            </div>
          </td>
          <td class="px-3 py-3 sm:px-6 sm:py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900"><span data-controller="localtime" data-localtime-datetime-value="{{ batch.created_at }}">{{ batch.created_at }}</span></div>
          </td>
          <td class="px-3 py-3 sm:px-6 sm:py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900">{% if batch.finished_at %}<span data-controller="localtime" data-localtime-datetime-value="{{ batch.finished_at }}">{{ batch.finished_at }}</span>{% else %}<span class="text-gray-400">—</span>{% endif %}</div>
          </td>
        </tr>
        {% endfor %}
      {% else %}
        <tr>
          <td colspan="5" class="px-3 py-3 sm:px-6 sm:py-4 text-center text-sm text-gray-500">No batches found</td>
        </tr>
      {% endif %}
    </tbody>
  </table>
</div>

<!-- Pagination -->
{{ pagination::bar(base_path=base_path, path="batches", page=current_page_num, total_pages=total_pages, filter_args=filter_args) }}
{% endif %}
</turbo-frame>
{% endblock %}