{% extends "layout.html" %}

{% block content %}

{# Helper macro for building queue section sort links #}
{% macro q_sort(label, col, current_sort, current_dir, prefix, align='left') %}
  {% set is_active = current_sort == col %}
  {% set next_dir = 'asc' if (is_active and current_dir == 'desc') else 'desc' %}
  <th class="py-3 {{ 'pr-4' if align == 'left' else '' }} {{ 'text-right' if align == 'right' else '' }}">
    <a href="?{{ prefix }}s={{ col }}&{{ prefix }}d={{ next_dir }}&{{ prefix }}p=1"
       class="inline-flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200 transition-colors {{ 'text-slate-700 dark:text-slate-200' if is_active else '' }}">
      {{ label }}
      {% if is_active %}
        <span class="text-brand-500 dark:text-brand-400">{{ '▲' if current_dir == 'asc' else '▼' }}</span>
      {% endif %}
    </a>
  </th>
{% endmacro %}

{# Helper macro for pagination controls #}
{% macro q_pagination(pg, prefix) %}
  {% if pg and pg.total_items > 0 %}
  <div class="mt-3 flex items-center justify-between text-sm text-slate-600 dark:text-slate-300">
    <p>
      Showing <span class="font-medium text-slate-800 dark:text-slate-200">{{ pg.start_index }}</span>
      to <span class="font-medium text-slate-800 dark:text-slate-200">{{ pg.end_index }}</span>
      of <span class="font-medium text-slate-800 dark:text-slate-200">{{ pg.total_items }}</span> results
    </p>
    {% if pg.total_pages > 1 %}
    <nav class="flex items-center gap-1">
      {% if pg.has_prev %}
        <a href="?{{ prefix }}p={{ pg.page - 1 }}"
          class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800">Prev</a>
      {% else %}
        <span class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-400 dark:text-slate-600 cursor-not-allowed">Prev</span>
      {% endif %}
      {% for p in pg.page_range(2) %}
        {% if p == pg.page %}
          <span class="px-3 py-1.5 text-sm border border-brand-500 bg-brand-50 dark:bg-brand-700/30 text-brand-700 dark:text-brand-200 font-medium">{{ p }}</span>
        {% else %}
          <a href="?{{ prefix }}p={{ p }}"
            class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800">{{ p }}</a>
        {% endif %}
      {% endfor %}
      {% if pg.has_next %}
        <a href="?{{ prefix }}p={{ pg.page + 1 }}"
          class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800">Next</a>
      {% else %}
        <span class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-400 dark:text-slate-600 cursor-not-allowed">Next</span>
      {% endif %}
    </nav>
    {% endif %}
  </div>
  {% endif %}
{% endmacro %}

<section class="ui-shell">
<div class="space-y-5">
  <div class="ui-page-header">
    <p class="ui-eyebrow">Admin</p>
    <div class="flex items-start justify-between mt-2">
      <div>
        <h1 class="ui-page-title mt-0">Sync Queue</h1>
        <p class="ui-page-subtitle mt-1">Live view of pending, running, and completed background jobs.</p>
      </div>
      <button onclick="location.reload()" class="ui-btn-secondary transition-colors">
        Refresh
      </button>
    </div>
  </div>

  <!-- Summary Cards -->
  <div class="mt-6 grid gap-4 md:grid-cols-4">
    <div class="ui-stat-card p-4 border-amber-300 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-950/20">
      <div class="ui-card-value text-amber-600 dark:text-amber-400 mt-0">{{ summary.pending_count }}</div>
      <div class="ui-card-meta text-amber-700 dark:text-amber-300/70">Pending</div>
    </div>
    <div class="ui-stat-card p-4 border-blue-300 dark:border-blue-500/30 bg-blue-50 dark:bg-blue-950/20">
      <div class="ui-card-value text-blue-600 dark:text-blue-400 mt-0">{{ summary.running_count }}</div>
      <div class="ui-card-meta text-blue-700 dark:text-blue-300/70">Running</div>
    </div>
    <div class="ui-stat-card p-4 border-brand-200 dark:border-brand-500/30 bg-brand-50 dark:bg-brand-700/20">
      <div class="ui-card-value text-brand-500 dark:text-brand-300 mt-0">{{ summary.completed_count }}</div>
      <div class="ui-card-meta text-brand-700 dark:text-brand-200/70">Completed (24h)</div>
    </div>
    <div class="ui-stat-card p-4 border-red-300 dark:border-red-500/30 bg-red-50 dark:bg-red-950/20">
      <div class="ui-card-value text-red-600 dark:text-red-400 mt-0">{{ summary.failed_count }}</div>
      <div class="ui-card-meta text-red-700 dark:text-red-300/70">Failed (24h)</div>
    </div>
  </div>

  <!-- Solution Generation Summary -->
  {% if solution %}
  <div class="mt-6">
    <h2 class="ui-card-label">Solution Generation</h2>
    <div class="mt-3 grid gap-4 md:grid-cols-4">
      <a href="/admin/solutions?job_status=queued" class="ui-stat-card p-3 border-amber-300/60 dark:border-amber-500/20 bg-amber-50/50 dark:bg-amber-950/10 hover:border-amber-300 dark:hover:border-amber-500/40 transition-colors">
        <div class="ui-card-value-lg text-amber-600 dark:text-amber-400 mt-0">{{ solution.pending }}</div>
        <div class="ui-card-meta text-amber-700 dark:text-amber-300/70">Pending</div>
      </a>
      <a href="/admin/solutions?job_status=in_progress" class="ui-stat-card p-3 border-blue-300/60 dark:border-blue-500/20 bg-blue-50/50 dark:bg-blue-950/10 hover:border-blue-300 dark:hover:border-blue-500/40 transition-colors">
        <div class="ui-card-value-lg text-blue-600 dark:text-blue-400 mt-0">{{ solution.running }}</div>
        <div class="ui-card-meta text-blue-700 dark:text-blue-300/70">Running</div>
      </a>
      <a href="/admin/solutions?job_status=completed&window=24h" class="ui-stat-card p-3 border-brand-200/60 dark:border-brand-500/20 bg-brand-50/50 dark:bg-brand-700/10 hover:border-brand-300 dark:hover:border-brand-500/40 transition-colors">
        <div class="ui-card-value-lg text-brand-500 dark:text-brand-300 mt-0">{{ solution.completed_24h }}</div>
        <div class="ui-card-meta text-brand-700 dark:text-brand-200/70">Completed (24h)</div>
      </a>
      <a href="/admin/solutions?job_status=failed&window=24h" class="ui-stat-card p-3 border-red-300/60 dark:border-red-500/20 bg-red-50/50 dark:bg-red-950/10 hover:border-red-300 dark:hover:border-red-500/40 transition-colors">
        <div class="ui-card-value-lg text-red-600 dark:text-red-400 mt-0">{{ solution.failed_24h }}</div>
        <div class="ui-card-meta text-red-700 dark:text-red-300/70">Failed (24h)</div>
      </a>
    </div>
  </div>
  {% endif %}

  <!-- Running Syncs -->
  {% if running %}
  <div class="mt-8">
    <h2 class="text-lg font-semibold text-blue-600 dark:text-blue-400 flex items-center gap-2">
      <span class="h-2 w-2 rounded-full bg-blue-500 dark:bg-blue-400 animate-pulse"></span>
      Running ({{ running_total }})
    </h2>
    <div class="mt-3 overflow-x-auto">
      <table class="w-full text-left text-sm">
        <thead>
          <tr class="border-b border-slate-200 dark:border-slate-700 text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">
            {{ q_sort('Project', 'project', rs, rd, 'r') }}
            {{ q_sort('Started', 'started_at', rs, rd, 'r') }}
            <th class="py-3 pr-4">Duration</th>
            {{ q_sort('Jobs', 'jobs', rs, rd, 'r', align='right') }}
            {{ q_sort('Manifests', 'manifests', rs, rd, 'r', align='right') }}
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
          {% for sync in running %}
          <tr class="text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800/50 transition-colors">
            <td class="py-3 pr-4">
              <a href="/admin/configurations/{{ sync.config_id }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
                {{ sync.config_name }}
              </a>
            </td>
            <td class="py-3 pr-4 text-xs text-slate-500 dark:text-slate-400">
              {{ sync.started_at.strftime('%Y-%m-%d %H:%M:%S') if sync.started_at else '-' }}
            </td>
            <td class="py-3 pr-4 text-xs text-slate-500 dark:text-slate-400">
              {% if sync.started_at %}
                {% set elapsed = (now() - sync.started_at).total_seconds() | int %}
                {{ elapsed }}s
              {% else %}
                -
              {% endif %}
            </td>
            <td class="py-3 pr-4 text-right font-medium">{{ sync.jobs_retrieved_count or 0 }}</td>
            <td class="py-3 text-right font-medium">{{ sync.manifests_updated_count or 0 }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {{ q_pagination(running_pg, 'r') }}
  </div>
  {% endif %}

  <!-- Pending Syncs -->
  {% if pending %}
  <div class="mt-8">
    <h2 class="text-lg font-semibold text-amber-600 dark:text-amber-400">Pending ({{ pending_total }})</h2>
    <div class="mt-3 overflow-x-auto">
      <table class="w-full text-left text-sm">
        <thead>
          <tr class="border-b border-slate-200 dark:border-slate-700 text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">
            {{ q_sort('Project', 'project', ps, pd, 'p') }}
            {{ q_sort('Queued', 'queued_at', ps, pd, 'p') }}
            <th class="py-3">Position</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
          {% for sync in pending %}
          <tr class="text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800/50 transition-colors">
            <td class="py-3 pr-4">
              <a href="/admin/configurations/{{ sync.config_id }}" class="text-amber-600 dark:text-amber-400 hover:text-amber-500 dark:hover:text-amber-300">
                {{ sync.config_name }}
              </a>
            </td>
            <td class="py-3 pr-4 text-xs text-slate-500 dark:text-slate-400">
              {{ sync.queued_at.strftime('%Y-%m-%d %H:%M:%S') if sync.queued_at else '-' }}
            </td>
            <td class="py-3 text-xs text-slate-500 dark:text-slate-400">#{{ loop.index }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {{ q_pagination(pending_pg, 'p') }}
  </div>
  {% endif %}

  <!-- Completed Syncs (Last 24h) -->
  {% if completed %}
  <div class="mt-8">
    <h2 class="text-lg font-semibold text-brand-500 dark:text-brand-300">Completed (Last 24h)</h2>
    <div class="mt-3 overflow-x-auto">
      <table class="w-full text-left text-sm">
        <thead>
          <tr class="border-b border-slate-200 dark:border-slate-700 text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">
            {{ q_sort('Project', 'project', cs, cd, 'c') }}
            {{ q_sort('Completed', 'completed_at', cs, cd, 'c') }}
            <th class="py-3 pr-4">Duration</th>
            {{ q_sort('Jobs', 'jobs', cs, cd, 'c', align='right') }}
            {{ q_sort('Manifests', 'manifests', cs, cd, 'c', align='right') }}
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
          {% for sync in completed %}
          <tr class="text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800/50 transition-colors">
            <td class="py-3 pr-4">
              <a href="/admin/configurations/{{ sync.config_id }}" class="text-brand-500 dark:text-brand-300 hover:text-brand-500 dark:hover:text-brand-200">
                {{ sync.config_name }}
              </a>
            </td>
            <td class="py-3 pr-4 text-xs text-slate-500 dark:text-slate-400">
              {{ sync.completed_at.strftime('%Y-%m-%d %H:%M:%S') if sync.completed_at else '-' }}
            </td>
            <td class="py-3 pr-4 text-xs text-slate-500 dark:text-slate-400">
              {% if sync.started_at and sync.completed_at %}
                {{ ((sync.completed_at - sync.started_at).total_seconds()) | round(1) }}s
              {% else %}
                -
              {% endif %}
            </td>
            <td class="py-3 pr-4 text-right font-medium">{{ sync.jobs_retrieved_count or 0 }}</td>
            <td class="py-3 text-right font-medium">{{ sync.manifests_updated_count or 0 }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {{ q_pagination(completed_pg, 'c') }}
  </div>
  {% endif %}

  <!-- Failed Syncs (Last 24h) -->
  {% if failed %}
  <div class="mt-8">
    <h2 class="text-lg font-semibold text-red-600 dark:text-red-400">Failed (Last 24h)</h2>
    <div class="mt-3 overflow-x-auto">
      <table class="w-full text-left text-sm">
        <thead>
          <tr class="border-b border-slate-200 dark:border-slate-700 text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">
            {{ q_sort('Project', 'project', fs, fd, 'f') }}
            {{ q_sort('Failed At', 'completed_at', fs, fd, 'f') }}
            {{ q_sort('Errors', 'errors', fs, fd, 'f', align='right') }}
            <th class="py-3">Last Error</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
          {% for sync in failed %}
          <tr class="text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800/50 transition-colors">
            <td class="py-3 pr-4">
              <a href="/admin/configurations/{{ sync.config_id }}" class="text-red-600 dark:text-red-400 hover:text-red-500 dark:hover:text-red-300">
                {{ sync.config_name }}
              </a>
            </td>
            <td class="py-3 pr-4 text-xs text-slate-500 dark:text-slate-400">
              {{ sync.completed_at.strftime('%Y-%m-%d %H:%M:%S') if sync.completed_at else '-' }}
            </td>
            <td class="py-3 pr-4 text-right font-medium text-red-600 dark:text-red-400">{{ sync.errors|length if sync.errors else 0 }}</td>
            <td class="py-3 text-xs text-red-600 dark:text-red-300/80 max-w-xs truncate">
              {% if sync.errors and sync.errors|length > 0 %}
                {{ sync.errors[0].error_message[:100] }}{% if sync.errors[0].error_message|length > 100 %}...{% endif %}
              {% else %}
                -
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {{ q_pagination(failed_pg, 'f') }}
  </div>
  {% endif %}

  <!-- Empty State -->
  {% if not pending and not running and not completed and not failed %}
  <div class="mt-8 rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-8 text-center">
    <p class="text-sm text-slate-500 dark:text-slate-400">No sync operations to display.</p>
    <p class="mt-2 text-xs text-slate-400 dark:text-slate-500">Sync operations will appear here when triggered from project configurations.</p>
  </div>
  {% endif %}
</div>
</section>
{% endblock %}