{% extends "v2/base.html" %}

{% block title %}Queue-Status — GWÖ-Antragsprüfer{% endblock %}

{% set v2_active_nav = "admin_queue" %}

{% block main %}
<div style="padding:0 0 1.5rem;display:flex;align-items:baseline;gap:16px;">
  <div>
    <h1 style="font-family:var(--font-display);font-size:22px;color:var(--ecg-teal);margin:0 0 4px;">Queue-Status</h1>
    <p style="font-size:12px;font-family:var(--font-mono);color:var(--ecg-dark);opacity:0.6;">
      Analyse-Jobs · automatische Aktualisierung alle 5 s
    </p>
  </div>
  <span id="refresh-indicator" style="font-family:var(--font-mono);font-size:11px;opacity:0.4;margin-left:auto;">—</span>
</div>

<div id="loading" style="font-family:var(--font-mono);font-size:12px;opacity:0.5;padding:16px 0;">
  Lade Queue …
</div>

<div id="error" class="v2-kasten outline-blue" style="display:none;">
  <h4>Fehler beim Laden</h4>
  <p id="error-msg"></p>
</div>

<div id="content" style="display:none;">

  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:24px;">
    <div class="v2-kasten" style="text-align:center;">
      <div style="font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--ecg-teal);" id="stat-running">—</div>
      <div style="font-family:var(--font-mono);font-size:11px;opacity:0.6;margin-top:4px;">Läuft</div>
    </div>
    <div class="v2-kasten" style="text-align:center;">
      <div style="font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--ecg-blue);" id="stat-queued">—</div>
      <div style="font-family:var(--font-mono);font-size:11px;opacity:0.6;margin-top:4px;">Wartend</div>
    </div>
    <div class="v2-kasten" style="text-align:center;">
      <div style="font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--ecg-dark);opacity:0.5;" id="stat-failed">—</div>
      <div style="font-family:var(--font-mono);font-size:11px;opacity:0.6;margin-top:4px;">Fehlgeschlagen</div>
    </div>
  </div>

  <!-- Laufende Jobs -->
  <div style="margin-bottom:24px;">
    <div style="font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;opacity:0.5;margin-bottom:8px;text-transform:uppercase;">Laufende Jobs</div>
    <div id="running-empty" class="v2-kasten outline-green" style="display:none;">
      <p>Keine laufenden Jobs.</p>
    </div>
    <table id="running-table" class="v2-admin-table" style="display:none;">
      <thead>
        <tr><th>Drucksache</th><th>Status</th><th>Gestartet</th></tr>
      </thead>
      <tbody id="running-rows"></tbody>
    </table>
  </div>

  <!-- Wartende Jobs -->
  <div style="margin-bottom:24px;">
    <div style="font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;opacity:0.5;margin-bottom:8px;text-transform:uppercase;">Wartende Jobs</div>
    <div id="queued-empty" class="v2-kasten outline-green" style="display:none;">
      <p>Keine wartenden Jobs.</p>
    </div>
    <table id="queued-table" class="v2-admin-table" style="display:none;">
      <thead>
        <tr><th>Drucksache</th><th>Bundesland</th><th>Eingereiht</th></tr>
      </thead>
      <tbody id="queued-rows"></tbody>
    </table>
  </div>

  <!-- Fehlgeschlagene Jobs -->
  <div>
    <div style="font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;opacity:0.5;margin-bottom:8px;text-transform:uppercase;">Fehlgeschlagene Jobs</div>
    <div id="failed-empty" class="v2-kasten outline-green" style="display:none;">
      <p>Keine fehlgeschlagenen Jobs.</p>
    </div>
    <table id="failed-table" class="v2-admin-table" style="display:none;">
      <thead>
        <tr><th>Drucksache</th><th>Fehler</th><th>Zeit</th></tr>
      </thead>
      <tbody id="failed-rows"></tbody>
    </table>
  </div>

</div>
{% endblock %}

{% block body_scripts %}
<script>
let firstLoad = true;

function fmtTime(ts) {
  if (!ts) return '—';
  try { return new Date(ts).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' }); }
  catch (_) { return ts; }
}

function renderTable(tbodyId, tableId, emptyId, rows, renderRow) {
  const tbody   = document.getElementById(tbodyId);
  const table   = document.getElementById(tableId);
  const emptyEl = document.getElementById(emptyId);
  if (!rows || !rows.length) {
    table.style.display   = 'none';
    emptyEl.style.display = '';
  } else {
    emptyEl.style.display = 'none';
    tbody.innerHTML       = rows.map(renderRow).join('');
    table.style.display   = '';
  }
}

async function refresh() {
  try {
    const resp = await fetch('/api/queue/status');
    if (!resp.ok) throw new Error('HTTP ' + resp.status);
    const data = await resp.json();

    if (firstLoad) {
      document.getElementById('loading').style.display = 'none';
      document.getElementById('content').style.display = '';
      firstLoad = false;
    }

    // Statistik-Kacheln
    const running = data.running || [];
    const queued  = data.queued  || data.waiting || [];
    const failed  = data.failed  || [];

    document.getElementById('stat-running').textContent = running.length;
    document.getElementById('stat-queued').textContent  = queued.length;
    document.getElementById('stat-failed').textContent  = failed.length;

    // Laufende Jobs
    renderTable('running-rows', 'running-table', 'running-empty', running, j => `
      <tr>
        <td style="font-family:var(--font-mono);font-size:12px;">${j.drucksache || j.id || '—'}</td>
        <td><span class="v2-admin-badge running">${j.status || 'running'}</span></td>
        <td style="font-family:var(--font-mono);font-size:11px;">${fmtTime(j.started_at || j.created_at)}</td>
      </tr>`);

    // Wartende Jobs
    renderTable('queued-rows', 'queued-table', 'queued-empty', queued, j => `
      <tr>
        <td style="font-family:var(--font-mono);font-size:12px;">${j.drucksache || j.id || '—'}</td>
        <td>${j.bundesland || '—'}</td>
        <td style="font-family:var(--font-mono);font-size:11px;">${fmtTime(j.created_at || j.enqueued_at)}</td>
      </tr>`);

    // Fehlgeschlagene Jobs
    renderTable('failed-rows', 'failed-table', 'failed-empty', failed, j => `
      <tr>
        <td style="font-family:var(--font-mono);font-size:12px;">${j.drucksache || j.id || '—'}</td>
        <td style="font-size:11px;color:var(--ecg-blue);max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
            title="${(j.error || '').replace(/"/g,'&quot;')}">${j.error || '—'}</td>
        <td style="font-family:var(--font-mono);font-size:11px;">${fmtTime(j.failed_at || j.updated_at)}</td>
      </tr>`);

    document.getElementById('refresh-indicator').textContent =
      'Aktualisiert ' + new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' });

  } catch (e) {
    if (firstLoad) {
      document.getElementById('loading').style.display = 'none';
      document.getElementById('error-msg').textContent = e.message;
      document.getElementById('error').style.display   = '';
      firstLoad = false;
    }
  }
}

refresh();
setInterval(refresh, 5000);
</script>
{% endblock %}