{% extends "admin/base_admin.html" %}
{% set admin_page = "pseo" %}

{% block title %}pSEO Jobs - {{ config.APP_NAME }}{% endblock %}

{% block admin_head %}
<style>
  .progress-bar-wrap { height: 6px; background: #E2E8F0; border-radius: 9999px; overflow: hidden; min-width: 120px; }
  .progress-bar-fill { height: 100%; background: #1D4ED8; border-radius: 9999px; transition: width 0.3s; }
</style>
{% endblock %}

{% block admin_content %}
<header class="flex justify-between items-center mb-8">
  <div>
    <h1 class="text-2xl">Generation Jobs</h1>
    <p class="text-slate text-sm mt-1">Recent article generation runs</p>
  </div>
  <a href="{{ url_for('pseo.pseo_dashboard') }}" class="btn-outline btn-sm">← pSEO Engine</a>
</header>

{% if not jobs %}
  <div class="card">
    <p class="text-slate text-sm">No generation jobs found. Use the pSEO Engine dashboard to generate articles.</p>
  </div>
{% else %}
<div class="card">
  <div class="table-wrap">
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Template</th>
          <th>Status</th>
          <th>Progress</th>
          <th>Started</th>
          <th>Completed</th>
          <th>Error</th>
        </tr>
      </thead>
      <tbody>
        {% for job in jobs %}
        <tr id="job-{{ job.id }}">
          <td class="text-xs text-slate">#{{ job.id }}</td>
          <td>
            {% if job.payload %}
              {% set payload = job.payload | fromjson %}
              <span class="font-mono text-xs">{{ payload.get('template_slug', '—') }}</span>
            {% else %}—{% endif %}
          </td>
          <td>
            {% if job.status == 'complete' %}
              <span class="badge-success">Complete</span>
            {% elif job.status == 'failed' %}
              <span class="badge-danger">Failed</span>
            {% elif job.status == 'pending' %}
              {# Poll live status for running jobs #}
              <div hx-get="{{ url_for('pseo.pseo_job_status', job_id=job.id) }}"
                   hx-trigger="load, every 2s"
                   hx-target="closest tr"
                   hx-swap="outerHTML">
                <span class="badge-warning">Running…</span>
              </div>
            {% else %}
              <span class="badge">{{ job.status }}</span>
            {% endif %}
          </td>
          <td>
            {% if job.progress_total and job.progress_total > 0 %}
            <div class="flex items-center gap-2">
              <div class="progress-bar-wrap">
                <div class="progress-bar-fill" style="width: {{ [((job.progress_current / job.progress_total) * 100) | int, 100] | min }}%"></div>
              </div>
              <span class="text-xs text-slate">{{ job.progress_current }}/{{ job.progress_total }}</span>
            </div>
            {% else %}—{% endif %}
          </td>
          <td class="text-xs text-slate">{{ (job.created_at or '') | truncate(19, True, '') }}</td>
          <td class="text-xs text-slate">{{ (job.completed_at or '') | truncate(19, True, '') }}</td>
          <td>
            {% if job.error %}
              <details>
                <summary class="text-xs text-red-600 cursor-pointer">Error</summary>
                <pre class="text-xs mt-1 p-2 bg-gray-50 rounded overflow-auto max-w-xs">{{ job.error[:500] }}</pre>
              </details>
            {% else %}—{% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}
{% endblock %}
