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

{% block title %}Batch-Analyse — GWÖ-Antragsprüfer{% endblock %}

{% set v2_active_nav = "batch" %}

{% block head_extra %}
<style>
.batch-form {
  max-width: 520px;
}
.batch-form label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-bottom: 4px;
}
.batch-form select {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--ecg-border);
  border-radius: 4px;
  background: var(--ecg-card-bg);
  color: var(--ecg-dark);
  margin-bottom: 14px;
}
.batch-form select:focus { outline: none; border-color: var(--ecg-teal); }
.batch-submit {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 24px;
  background: var(--ecg-green);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: opacity 0.1s;
}
.batch-submit:hover { opacity: 0.85; }
.batch-submit:disabled { opacity: 0.45; cursor: not-allowed; }
#batch-status {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 12px;
  display: none;
}
.batch-ok  { color: var(--ecg-green); }
.batch-err { color: #c00; }
</style>
{% endblock %}

{% block main %}
<div style="padding:0 0 1.5rem;">
  <h1 style="font-family:var(--font-display);font-size:22px;color:var(--ecg-teal);margin:0 0 4px;">Batch-Analyse</h1>
  <p style="font-size:12px;font-family:var(--font-mono);color:var(--ecg-dark);opacity:0.6;">
    Mehrere ungeprüfte Anträge eines Bundeslandes auf einmal analysieren
  </p>
</div>

<div class="v2-kasten outline-blue" style="max-width:520px;margin-bottom:1.5rem;">
  <p style="font-size:12px;">
    Die Batch-Analyse sucht ungeprüfte Anträge des gewählten Bundeslandes und reiht sie
    in die Analyse-Queue ein. Die Jobs laufen im Hintergrund — der Fortschritt ist in der
    <a href="/classic?mode=queue" style="color:var(--ecg-teal);">Queue-Ansicht (klassisch)</a> einsehbar.
  </p>
  <p style="font-size:11px;opacity:0.65;margin-top:6px;">
    Hinweis: Batch-Analyse erfordert Admin-Rechte. Bei fehlendem Zugriff schlägt der Aufruf mit 403 fehl.
  </p>
</div>

<form class="batch-form" onsubmit="startBatch(event)">

  <label for="batch-bl">Bundesland</label>
  <select id="batch-bl" name="bundesland">
    {% for bl in bundeslaender %}
    <option value="{{ bl.code }}"{% if bl.code == 'NRW' %} selected{% endif %}>{{ bl.name }} ({{ bl.code }})</option>
    {% endfor %}
  </select>

  <label for="batch-limit">Maximale Anzahl Anträge</label>
  <select id="batch-limit" name="limit">
    <option value="5">5</option>
    <option value="10" selected>10</option>
    <option value="20">20</option>
    <option value="50">50</option>
  </select>

  <button type="submit" class="batch-submit" id="batch-btn">Batch starten</button>

</form>

<div id="batch-status"></div>

{% endblock %}

{% block body_scripts %}
<script>
async function startBatch(e) {
  e.preventDefault();
  const btn      = document.getElementById('batch-btn');
  const statusEl = document.getElementById('batch-status');

  const bundesland = document.getElementById('batch-bl').value;
  const limit      = parseInt(document.getElementById('batch-limit').value, 10);

  btn.disabled = true;
  statusEl.style.display = '';
  statusEl.className = '';
  statusEl.textContent = 'Starte Batch …';

  try {
    const fd = new FormData();
    fd.append('bundesland', bundesland);
    fd.append('limit', limit);

    const resp = await fetch('/api/batch-analyze', { method: 'POST', body: fd });

    if (resp.status === 403) {
      throw new Error('Kein Zugriff — Admin-Rechte erforderlich.');
    }
    if (!resp.ok) {
      const err = await resp.json().catch(() => ({ detail: resp.statusText }));
      throw new Error(err.detail || ('HTTP ' + resp.status));
    }

    const data = await resp.json();
    statusEl.className = 'batch-ok';
    const queued = data.queued || data.jobs || 0;
    statusEl.textContent = `Batch gestartet: ${queued} Anträge in die Queue eingereiht. Fortschritt: `;
    const link = document.createElement('a');
    link.href = '/classic?mode=queue';
    link.style.color = 'var(--ecg-teal)';
    link.textContent = 'Queue ansehen →';
    statusEl.appendChild(link);

  } catch (err) {
    statusEl.className = 'batch-err';
    statusEl.textContent = 'Fehler: ' + err.message;
  } finally {
    btn.disabled = false;
  }
}
</script>
{% endblock %}