{% extends "settings/_base.html" %}

{% block settings_head_extra %}
  <link rel="stylesheet" href="{{ static('settings_api_keys.css') }}">
{% endblock %}

{% block section_header %}
  <header class="settings-header">
    <h1 class="settings-header__title">API keys</h1>
    <p class="settings-header__lede">
      Tokens that agents use in <code>Authorization: Bearer …</code> when
      posting drops. Create one per agent so you can revoke them individually.
    </p>
  </header>
{% endblock %}

{% block settings_content %}
  {# ------------------------------------------------------------------
     One-time reveal card.

     Only rendered on the render that follows a successful POST; after
     the user navigates away or reloads, the plaintext is gone forever.
     The DB stores only sha256(token), so there's nowhere else to pull
     it from.
  ------------------------------------------------------------------- #}
  {% if new_token_plaintext %}
    <section class="apikey-reveal" aria-live="polite">
      <div class="apikey-reveal__header">
        <h2 class="apikey-reveal__title">
          New key: <span class="apikey-reveal__label">{{ new_token_label }}</span>
        </h2>
        <p class="apikey-reveal__warning">
          Save this now. You won't see it again.
        </p>
      </div>

      <div class="apikey-reveal__token-row">
        <code class="apikey-reveal__token"
              id="apikey-new-token">{{ new_token_plaintext }}</code>
        <button class="btn btn--primary apikey-reveal__copy"
                type="button"
                data-copy-target="apikey-new-token">
          Copy
        </button>
      </div>

      <p class="apikey-reveal__hint">
        Use it in your agent:
        <code>Authorization: Bearer {{ new_token_plaintext }}</code>
      </p>
    </section>

    {# Copy-to-clipboard shim — same navigator.clipboard.writeText pattern
       the drop page uses for its "Copy link" action. Inline so the reveal
       works without extra route/asset wiring. #}
    <script>
      (function () {
        var btn = document.querySelector('.apikey-reveal__copy');
        if (!btn) return;
        btn.addEventListener('click', function () {
          var id = btn.getAttribute('data-copy-target');
          var el = document.getElementById(id);
          if (!el) return;
          var text = el.textContent || '';
          if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(function () {
              btn.textContent = 'Copied';
              setTimeout(function () { btn.textContent = 'Copy'; }, 1400);
            });
          }
        });
      })();
    </script>
  {% endif %}

  {# ------------------------------------------------------------------
     New-key form.

     Single <input> + button — no separate form page at MVP. A POST
     renders this same list page with ``new_token_plaintext`` populated,
     so the user sees the reveal card above alongside the refreshed list.
  ------------------------------------------------------------------- #}
  <section class="apikey-new">
    <form class="apikey-new__form" method="post" action="/settings/api-keys" autocomplete="off">
      <input type="hidden" name="_csrf" value="{{ csrf_token(request) }}" />
      <label class="apikey-new__label" for="apikey-label">New key label</label>
      <div class="apikey-new__row">
        <input class="apikey-new__input"
               id="apikey-label"
               name="label"
               type="text"
               placeholder="e.g. weekly-scan-bot"
               maxlength="120"
               required />
        <button class="btn btn--primary" type="submit">+ New key</button>
      </div>
      {% if error %}
        <p class="apikey-new__error">{{ error }}</p>
      {% endif %}
    </form>
  </section>

  {# ------------------------------------------------------------------
     Existing keys list.
  ------------------------------------------------------------------- #}
  <section class="apikey-list">
    {% if keys %}
      <table class="apikey-table">
        <thead>
          <tr>
            <th scope="col">Label</th>
            <th scope="col">Created</th>
            <th scope="col">Last used</th>
            <th scope="col">Status</th>
            <th scope="col"><span class="sr-only">Actions</span></th>
          </tr>
        </thead>
        <tbody>
          {% for key in keys %}
            <tr class="apikey-row {% if key.revoked_at %}apikey-row--revoked{% endif %}">
              <td class="apikey-row__label">{{ key.label }}</td>
              <td class="apikey-row__created mono">
                {{ key.created_at.strftime("%Y-%m-%d") }}
              </td>
              <td class="apikey-row__last-used mono">
                {% if key.last_used_at %}
                  {{ key.last_used_at.strftime("%Y-%m-%d %H:%M") }}
                {% else %}
                  <span class="apikey-row__never">never</span>
                {% endif %}
              </td>
              <td class="apikey-row__status">
                {% if key.revoked_at %}
                  <span class="apikey-status apikey-status--revoked">revoked</span>
                {% else %}
                  <span class="apikey-status apikey-status--active">active</span>
                {% endif %}
              </td>
              <td class="apikey-row__actions">
                {% if not key.revoked_at %}
                  <form method="post"
                        action="/settings/api-keys/{{ key.id }}/revoke"
                        class="apikey-row__revoke-form">
                    <input type="hidden" name="_csrf" value="{{ csrf_token(request) }}" />
                    <button class="btn btn--ghost btn--danger" type="submit">
                      Revoke
                    </button>
                  </form>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    {% else %}
      <div class="apikey-empty">
        <p class="apikey-empty__primary">No API keys yet.</p>
        <p class="apikey-empty__secondary">
          Mint one above to give an agent posting access.
        </p>
      </div>
    {% endif %}

    {# Revoked toggle — only rendered when there's something to toggle to. #}
    {% if revoked_count > 0 %}
      <div class="apikey-list__toggle">
        {% if include_revoked %}
          <a href="/settings/api-keys">Hide revoked</a>
        {% else %}
          <a href="/settings/api-keys?show_revoked=1">
            Show revoked ({{ revoked_count }})
          </a>
        {% endif %}
      </div>
    {% endif %}
  </section>
{% endblock %}