{% extends "base.html" %}

{% block title %}API-Installation{% endblock %}
{% block heading %}API-Installation{% endblock %}

{% block content %}

<section class="card">
  <div class="card-header"><div>
    <h2>Schritt 1 — API aktivieren &amp; Token erzeugen</h2>
    <p class="sub">Token wird für jede API-Anfrage als <code class="text-blue-600">Authorization: Bearer …</code> Header benötigt</p>
  </div></div>
  <div class="p-5 space-y-4">
    {% if settings.get('api_token') %}
    <div class="alert alert-blue text-sm">
      <p class="font-medium">API ist aktiv ✓</p>
      <p class="mt-1 text-neutral-600">Token unten verwenden. Bei Verlust: neu erzeugen — der alte wird ungültig.</p>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Aktueller Token</label>
      <div class="flex items-center gap-2 mt-1">
        <input id="tok" class="input nums font-mono text-xs flex-1" readonly value="{{ settings.get('api_token') }}">
        <button class="btn btn-secondary btn-sm" type="button"
                onclick="navigator.clipboard.writeText(document.getElementById('tok').value); this.textContent='✓ Kopiert'">Kopieren</button>
      </div>
    </div>
    <form method="post" action="/api-setup/generate-token"
          onsubmit="return confirm('Neuen Token erzeugen? Der alte wird sofort ungültig.')">
      <button class="btn btn-secondary btn-sm" type="submit">Neuen Token erzeugen</button>
    </form>
    {% else %}
    <div class="alert alert-amber text-sm">
      <p class="font-medium">API noch nicht aktiviert</p>
      <p class="mt-1 text-neutral-600">Klicke unten — wir erzeugen einen Token, aktivieren die API und du kannst sofort loslegen.</p>
    </div>
    <form method="post" action="/api-setup/generate-token">
      <button class="btn btn-primary" type="submit">API aktivieren &amp; Token erzeugen</button>
    </form>
    {% endif %}
  </div>
</section>

<section class="card">
  <div class="card-header"><div>
    <h2>Schritt 2 — Test-Aufruf</h2>
    <p class="sub">Kopiere einen der curl-Befehle, ersetze <code class="text-blue-600">$TOKEN</code> durch deinen Token</p>
  </div></div>
  <div class="p-5 space-y-4">
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Health-Check (kein Token nötig)</label>
      <pre class="mt-1 p-3 rounded text-xs font-mono overflow-auto"
           style="background:#0a0a0a; color:#10b981;">curl http://localhost:8001/health</pre>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Alle Artikel auflisten</label>
      <pre class="mt-1 p-3 rounded text-xs font-mono overflow-auto"
           style="background:#0a0a0a; color:#10b981;">curl -H "Authorization: Bearer $TOKEN" \
  http://localhost:8001/api/items</pre>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bestand buchen (Auslagerung)</label>
      <pre class="mt-1 p-3 rounded text-xs font-mono overflow-auto"
           style="background:#0a0a0a; color:#10b981;">curl -H "Authorization: Bearer $TOKEN" \
  -X POST -d "delta=-1&action_code=stock_out&user_id=1" \
  http://localhost:8001/items/12/adjust</pre>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bestellung anlegen</label>
      <pre class="mt-1 p-3 rounded text-xs font-mono overflow-auto"
           style="background:#0a0a0a; color:#10b981;">curl -H "Authorization: Bearer $TOKEN" \
  -X POST -d "ident=BST-TEST&source_app=tools&line_0_item_id=12&line_0_quantity=10" \
  http://localhost:8001/orders/new</pre>
    </div>
  </div>
</section>

<section class="card">
  <div class="card-header"><div>
    <h2>Schritt 3 — Endpunkt-Übersicht</h2>
    <p class="sub">Alle Read-Endpoints geben JSON zurück, wenn der <code class="text-blue-600">Accept: application/json</code> Header gesetzt wird</p>
  </div></div>
  <table class="data-table">
    <thead>
      <tr><th>Methode</th><th>Pfad</th><th>Beschreibung</th></tr>
    </thead>
    <tbody>
      <tr><td><span class="badge badge-emerald">GET</span></td><td class="nums font-mono text-xs">/health</td><td>Health-Check, ohne Token</td></tr>
      <tr><td><span class="badge badge-emerald">GET</span></td><td class="nums font-mono text-xs">/api/items</td><td>Alle Artikel mit Bestand &amp; Lagerort</td></tr>
      <tr><td><span class="badge badge-emerald">GET</span></td><td class="nums font-mono text-xs">/api/items/{id}</td><td>Einzelner Artikel</td></tr>
      <tr><td><span class="badge badge-blue">POST</span></td><td class="nums font-mono text-xs">/items/{id}/rent</td><td>Werkzeug ausleihen</td></tr>
      <tr><td><span class="badge badge-blue">POST</span></td><td class="nums font-mono text-xs">/rentals/{id}/return</td><td>Rückgabe buchen</td></tr>
      <tr><td><span class="badge badge-blue">POST</span></td><td class="nums font-mono text-xs">/items/{id}/adjust</td><td>Bestand manuell buchen</td></tr>
      <tr><td><span class="badge badge-blue">POST</span></td><td class="nums font-mono text-xs">/orders/new</td><td>Bestellung anlegen</td></tr>
      <tr><td><span class="badge badge-blue">POST</span></td><td class="nums font-mono text-xs">/orders/{id}/receive</td><td>Wareneingang buchen</td></tr>
      <tr><td><span class="badge badge-blue">POST</span></td><td class="nums font-mono text-xs">/items/{id}/inspect</td><td>Prüfung erfassen (Mess-/Spannmittel)</td></tr>
      <tr><td><span class="badge badge-blue">POST</span></td><td class="nums font-mono text-xs">/production/{id}/progress</td><td>Stückzahl von Maschine melden</td></tr>
      <tr><td><span class="badge badge-emerald">GET</span></td><td class="nums font-mono text-xs">/export/items.csv</td><td>CSV-Export aller Artikel</td></tr>
      <tr><td><span class="badge badge-emerald">GET</span></td><td class="nums font-mono text-xs">/orders/{id}/pdf</td><td>Bestellschein-PDF</td></tr>
    </tbody>
  </table>
</section>

<section class="card">
  <div class="card-header"><div>
    <h2>Schritt 4 — Scanner-App pairen</h2>
    <p class="sub">Mobile Barcode-Scanner mit der API verbinden</p>
  </div></div>
  <div class="p-5 grid grid-cols-2 gap-6">
    <div>
      <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Server-URL</p>
      <p class="mt-1 nums font-mono text-sm">http://&lt;deine-IP&gt;:8001</p>
      <p class="text-xs text-neutral-500 mt-1">Auf Werkstatt-WLAN: gleiche Subnet wie der Server</p>
    </div>
    <div>
      <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Token</p>
      <p class="mt-1 nums font-mono text-xs">{{ settings.get('api_token', '— oben generieren —') }}</p>
    </div>
    <div class="col-span-2">
      <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Pair-QR (für Scanner-App)</p>
      <div class="mt-2 inline-block p-4 border-2 rounded" style="border-color:#262626; background:white;">
        {% if settings.get('api_token') %}
          <img src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data={{ settings.get('api_token') }}" alt="API-Token QR" />
        {% else %}
          <div class="w-44 h-44 flex items-center justify-center text-xs text-neutral-500">QR erscheint nach Token-Generierung</div>
        {% endif %}
      </div>
    </div>
  </div>
</section>

{% endblock %}