{% extends 'base.html' %}
{% block title %}Tokeny API{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center flex-wrap mb-4 gap-2">
  <div>
    <h2 class="mb-2">🔑 Tokeny API</h2>
    <p class="text-secondary mb-0">Administrator może utworzyć wiele tokenów, ograniczyć ich zakres i endpointy oraz w każdej chwili je wyłączyć albo usunąć.</p>
  </div>
  <div class="d-flex gap-2 flex-wrap">
    <a href="{{ url_for('admin_api_docs') }}" class="btn btn-outline-light" target="_blank">📄 Zobacz opis API</a>
    <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
  </div>
</div>

{% include 'admin/_nav.html' %}

{% if latest_plain_token %}
<div class="alert alert-success border-success mb-4" role="alert">
  <div class="d-flex flex-column gap-2">
    <div><strong>Nowy token:</strong> {{ latest_api_token_name or 'API' }}</div>
    <div class="input-group">
      <input type="text" id="latestApiToken" class="form-control" readonly value="{{ latest_plain_token }}">
      <button type="button" class="btn btn-outline-light" data-copy-target="#latestApiToken">📋 Kopiuj</button>
    </div>
    <div class="small text-warning">Pełna wartość jest widoczna tylko teraz. Po odświeżeniu zostanie ukryta.</div>
  </div>
</div>
{% endif %}

<div class="card bg-dark text-white">
  <div class="card-body">
    <h5 class="mb-3">➕ Utwórz token</h5>
    <form method="post" data-unsaved-warning="true" class="stack-form">
      <input type="hidden" name="action" value="create">
      <div class="row g-4">
        <div class="col-xl-4">
          <label for="name" class="form-label">Nazwa tokenu</label>
          <input type="text" id="name" name="name" class="form-control" placeholder="np. integracja ERP / Power BI" required>
          <div class="form-text">Nazwij token tak, aby było wiadomo do czego służy.</div>
        </div>
        <div class="col-sm-6 col-xl-4">
          <label class="form-label d-block">Zakresy</label>
          <div class="form-check form-check-spaced"><input class="form-check-input" type="checkbox" id="scope_expenses_read" name="scope_expenses_read" checked><label class="form-check-label" for="scope_expenses_read">Odczyt wydatków</label></div>
          <div class="form-check form-check-spaced"><input class="form-check-input" type="checkbox" id="scope_lists_read" name="scope_lists_read" checked><label class="form-check-label" for="scope_lists_read">Odczyt list i wydatków list</label></div>
          <div class="form-check form-check-spaced"><input class="form-check-input" type="checkbox" id="scope_templates_read" name="scope_templates_read"><label class="form-check-label" for="scope_templates_read">Odczyt szablonów</label></div>
        </div>
        <div class="col-sm-6 col-xl-4">
          <label class="form-label d-block">Dozwolone endpointy</label>
          <div class="form-check form-check-spaced"><input class="form-check-input" type="checkbox" id="allow_ping" name="allow_ping" checked><label class="form-check-label" for="allow_ping">/api/ping</label></div>
          <div class="form-check form-check-spaced"><input class="form-check-input" type="checkbox" id="allow_latest_expenses" name="allow_latest_expenses" checked><label class="form-check-label" for="allow_latest_expenses">/api/expenses/latest</label></div>
          <div class="form-check form-check-spaced"><input class="form-check-input" type="checkbox" id="allow_expenses_summary" name="allow_expenses_summary" checked><label class="form-check-label" for="allow_expenses_summary">/api/expenses/summary</label></div>
          <div class="form-check form-check-spaced"><input class="form-check-input" type="checkbox" id="allow_lists" name="allow_lists" checked><label class="form-check-label" for="allow_lists">/api/lists oraz /api/lists/&lt;id&gt;/expenses</label></div>
          <div class="form-check form-check-spaced"><input class="form-check-input" type="checkbox" id="allow_templates" name="allow_templates"><label class="form-check-label" for="allow_templates">/api/templates</label></div>
        </div>
        <div class="col-sm-6 col-xl-3">
          <label for="max_limit" class="form-label">Maksymalny limit rekordów</label>
          <input type="number" id="max_limit" name="max_limit" min="1" max="500" value="100" class="form-control">
        </div>
        <div class="col-sm-6 col-xl-3 d-flex align-items-end">
          <button type="submit" class="btn btn-success w-100">🔑 Wygeneruj token</button>
        </div>
      </div>
    </form>
  </div>
</div>

<div class="card bg-dark text-white mt-4">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
      <h5 class="mb-0">📘 Dokumentacja API</h5>
      <a href="{{ url_for('admin_api_docs') }}" class="btn btn-sm btn-outline-light" target="_blank">Otwórz TXT</a>
    </div>
    <div class="small text-secondary mb-3">Autoryzacja: <code>Authorization: Bearer TWOJ_TOKEN</code> lub <code>X-API-Token</code>. Endpoint i zakres muszą być jednocześnie dozwolone na tokenie. Parametr <code>limit</code> jest przycinany do wartości ustawionej w tokenie.</div>
    <div class="table-responsive admin-table-responsive admin-table-responsive--full">
      <table class="table table-dark align-middle table-sm keep-horizontal">
        <thead>
          <tr><th>Metoda</th><th>Endpoint</th><th>Wymagany zakres</th><th>Opis</th></tr>
        </thead>
        <tbody>
          {% for row in api_examples %}
          <tr>
            <td><code>{{ row.method }}</code></td>
            <td><code class="api-chip api-chip--wrap">{{ row.path }}</code></td>
            <td><code class="api-chip">{{ row.scope }}</code></td>
            <td>{{ row.description }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="card bg-dark text-white mt-4">
  <div class="card-body">
    <div class="admin-page-head mb-3">
      <h5 class="mb-0">📋 Aktywne i historyczne tokeny</h5>
      <span class="badge rounded-pill bg-secondary">{{ api_tokens|length }} szt.</span>
    </div>
    <div class="table-responsive admin-table-responsive admin-table-responsive--wide">
      <table class="table table-dark align-middle sortable keep-horizontal" data-searchable="true">
        <thead>
          <tr>
            <th>Nazwa</th>
            <th>Prefix</th>
            <th>Status</th>
            <th>Zakres</th>
            <th>Endpointy</th>
            <th>Max limit</th>
            <th>Utworzono</th>
            <th>Ostatnie użycie</th>
            <th>Akcje</th>
          </tr>
        </thead>
        <tbody>
          {% for token in api_tokens %}
          <tr>
            <td>
              <div class="fw-semibold text-break">{{ token.name }}</div>
              <div class="small text-secondary">Autor: {{ token.creator.username if token.creator else '—' }}</div>
            </td>
            <td><code class="api-chip">{{ token.token_prefix }}…</code></td>
            <td>{% if token.is_active %}<span class="badge rounded-pill bg-success">Aktywny</span>{% else %}<span class="badge rounded-pill bg-secondary">Wyłączony</span>{% endif %}</td>
            <td><code class="api-chip api-chip--wrap">{{ token.scopes or '—' }}</code></td>
            <td><code class="api-chip api-chip--wrap">{{ token.allowed_endpoints or '—' }}</code></td>
            <td>{{ token.max_limit or '—' }}</td>
            <td>{{ token.created_at.strftime('%Y-%m-%d %H:%M') if token.created_at else '—' }}</td>
            <td>{{ token.last_used_at.strftime('%Y-%m-%d %H:%M') if token.last_used_at else 'Jeszcze nie użyto' }}</td>
            <td>
              <div class="d-flex flex-wrap gap-2">
                {% if token.is_active %}
                <form method="post" class="d-inline">
                  <input type="hidden" name="action" value="deactivate">
                  <input type="hidden" name="token_id" value="{{ token.id }}">
                  <button type="submit" class="btn btn-sm btn-outline-warning">⏸ Wyłącz</button>
                </form>
                {% else %}
                <form method="post" class="d-inline">
                  <input type="hidden" name="action" value="activate">
                  <input type="hidden" name="token_id" value="{{ token.id }}">
                  <button type="submit" class="btn btn-sm btn-outline-success">▶ Włącz</button>
                </form>
                {% endif %}
                <form method="post" class="d-inline" onsubmit="return confirm('Usunąć ten token API?')">
                  <input type="hidden" name="action" value="delete">
                  <input type="hidden" name="token_id" value="{{ token.id }}">
                  <button type="submit" class="btn btn-sm btn-outline-danger">🗑 Usuń</button>
                </form>
              </div>
            </td>
          </tr>
          {% else %}
          <tr><td colspan="9" class="text-center text-secondary py-4">Brak tokenów API.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}