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

{% block title %}Agent tokens — cmdop admin{% endblock %}

{% block content %}
{% from 'admin/components/ui.html' import card, input, pagination, tooltip, page_header %}

<div class="space-y-6" x-data="apiKeysPage()" x-init="load()" @keydown.escape.window="closeAll()">
  {{ page_header(
    'Agent tokens',
    'Long-lived tokens that authenticate agents and integrations against this fleet.',
    help_anchor='api-keys',
    actions=[
      {'label': 'Refresh', 'kind': 'secondary', 'icon': 'refresh-cw',
       'attrs': '@click="load()"'},
      {'label': 'New token', 'kind': 'primary', 'icon': 'plus',
       'attrs': '@click="openCreate()"'},
    ]
  ) }}

  <!-- Create / Reveal modal -->
  <template x-teleport="body">
  <div x-show="showCreate" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4">
    <div class="absolute inset-0 bg-black/60" @click="closeCreate()"></div>
    <div class="relative w-full max-w-md rounded-lg border border-white/[0.08] bg-ink-950 p-6 shadow-2xl">
      <h3 class="text-[15px] font-semibold text-ink-100 tracking-tight mb-1" x-show="!newKey">Create API key</h3>
      <h3 class="text-[15px] font-semibold text-ink-100 tracking-tight mb-1" x-show="newKey" x-cloak>API key created</h3>
      <p class="text-[11px] text-ink-500 mb-5" x-show="!newKey">Give it a name so you can find it later — and pick an expiry.</p>

      <form x-show="!newKey" @submit.prevent="createKey()" class="space-y-4">
        {{ input("name", label="Name", placeholder="Production agent", required=true) }}
        {{ input("expires_days", label="Expires in (days, optional)", type="number", placeholder="Leave empty for no expiry", attrs='min="1" max="3650"') }}
        <p x-show="formError" x-cloak class="text-[12px] text-red-300" x-text="formError"></p>
        <div class="flex justify-end gap-3 pt-2">
          <button type="button" @click="closeCreate()" class="px-3 py-1.5 text-[13px] text-ink-400 hover:text-ink-100">Cancel</button>
          <button type="submit" :disabled="creating" class="px-3 py-1.5 bg-white hover:bg-ink-100 text-black text-[13px] font-medium rounded-md disabled:opacity-50">
            <span x-text="creating ? 'Creating…' : 'Create'"></span>
          </button>
        </div>
      </form>

      <div x-show="newKey" x-cloak class="space-y-4">
        <div class="p-3 rounded-md bg-amber-500/[0.06] border border-amber-500/30 text-amber-200 text-[12px]">
          <span class="font-medium">Copy this token now</span> — it won't be shown again.
        </div>
        <div class="relative">
          <code id="new-key-token" class="block p-3 rounded-md bg-black border border-white/[0.08] text-[12px] text-cmdop-300 font-mono break-all select-all cursor-pointer hover:border-white/[0.16] transition-colors" x-text="newKey?.raw_token" @click="copyToken()" title="Click to copy"></code>
          <button @click="copyToken()" class="absolute top-2 right-2 px-2 py-0.5 text-[11px] border border-white/[0.08] hover:border-white/[0.16] text-ink-300 rounded transition-colors">
            <span x-text="copyLabel"></span>
          </button>
        </div>
        <div class="flex justify-end">
          <button @click="closeCreate()" class="px-3 py-1.5 bg-white hover:bg-ink-100 text-black text-[13px] font-medium rounded-md">Done</button>
        </div>
      </div>
    </div>
  </div>
  </template>

  <!-- Revoke confirmation modal -->
  <template x-teleport="body">
  <div x-show="showRevoke" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4">
    <div class="absolute inset-0 bg-black/60" @click="closeRevoke()"></div>
    <div class="relative w-full max-w-md rounded-lg border border-white/[0.08] bg-ink-950 p-6 shadow-2xl">
      <div class="flex items-start gap-3 mb-4">
        <div class="flex-shrink-0 w-9 h-9 rounded-md bg-red-500/[0.08] border border-red-500/30 flex items-center justify-center">
          <i data-lucide="alert-triangle" class="w-4 h-4 text-red-300"></i>
        </div>
        <div>
          <h3 class="text-[15px] font-semibold text-ink-100 tracking-tight">Revoke API key?</h3>
          <p class="text-[13px] text-ink-400 mt-1">
            <span class="text-ink-200 font-mono" x-text="revokeTarget.name"></span> will stop authenticating immediately.
          </p>
          <p class="text-[11px] text-ink-500 mt-2">Anything using it will get 401 until you issue a new key. This cannot be undone.</p>
        </div>
      </div>
      <div class="flex justify-end gap-3">
        <button type="button" @click="closeRevoke()" class="px-3 py-1.5 text-[13px] text-ink-400 hover:text-ink-100">Cancel</button>
        <button type="button" @click="confirmRevoke()" :disabled="revokeLoading" class="px-3 py-1.5 border border-red-500/30 hover:border-red-500/50 bg-red-500/[0.06] hover:bg-red-500/[0.10] text-red-200 text-[13px] font-medium rounded-md disabled:opacity-50">
          <span x-text="revokeLoading ? 'Revoking…' : 'Revoke'"></span>
        </button>
      </div>
    </div>
  </div>
  </template>

  {% call card() %}
  <div class="overflow-x-auto">
    <table class="w-full text-[13px] text-left">
      <thead class="text-[11px] text-ink-500 uppercase tracking-wider border-b border-white/[0.06]">
        <tr>
          <th class="px-4 py-3 font-medium">
            {# Plan 61/2b-W4 — Bootstrap vs Steady distinction. #}
            <span class="inline-flex items-center gap-1">Name {{ tooltip("Bootstrap key: single-use enrollment ticket — revoked at first attach. Steady key: long-lived, safe for bots and headless agents.") }}</span>
          </th>
          <th class="px-4 py-3 font-medium">
            <span class="inline-flex items-center gap-1">Prefix {{ tooltip("First few chars of the token (cmdop_…). You'll only see the full token at creation time — copy it then.") }}</span>
          </th>
          <th class="px-4 py-3 font-medium">Created</th>
          <th class="px-4 py-3 font-medium">Expires</th>
          <th class="px-4 py-3 font-medium">Status</th>
          <th class="px-4 py-3 font-medium text-right">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-white/[0.06]">
        <tr x-show="pagination.loading" x-cloak>
          <td colspan="6" class="px-4 py-8 text-center text-ink-500">
            <i data-lucide="loader-2" class="w-4 h-4 inline-block animate-spin mr-1.5"></i>
            Loading API keys…
          </td>
        </tr>
        <tr x-show="!pagination.loading && pagination.error" x-cloak>
          <td colspan="6" class="px-4 py-8 text-center">
            <i data-lucide="alert-triangle" class="w-6 h-6 mx-auto text-red-400 mb-2"></i>
            <p class="text-[13px] text-ink-200">Couldn't load API keys.</p>
            <p class="text-[12px] text-ink-500 mt-1" x-text="pagination.error"></p>
            <button @click="load()" class="mt-3 inline-flex items-center gap-1.5 px-2.5 py-1 text-[12px] text-ink-300 hover:text-ink-100 border border-white/[0.08] hover:border-white/[0.16] rounded-md transition-colors">Try again</button>
          </td>
        </tr>
        <tr x-show="!pagination.loading && !pagination.error && pagination.items.length === 0" x-cloak>
          <td colspan="6" class="px-4 py-12 text-center">
            <i data-lucide="key" class="w-10 h-10 mx-auto text-ink-600 mb-3"></i>
            <p class="text-[13px] font-medium text-ink-200">No API keys yet</p>
            <p class="text-[12px] text-ink-500 mt-1">Click <b class="text-ink-200">+ New key</b> to mint one for an agent or integration.</p>
          </td>
        </tr>
        <template x-for="k in pagination.items" :key="k.id">
          <tr class="hover:bg-white/[0.02] transition-colors">
            <td class="px-4 py-3 font-medium text-ink-100 truncate max-w-[240px]" :title="k.name" x-text="k.name"></td>
            <td class="px-4 py-3 text-ink-400 font-mono text-[12px]" x-text="k.key_prefix"></td>
            <td class="px-4 py-3 text-ink-500 text-[12px] font-mono">
              <span :title="new Date(k.created_at).toLocaleString()" x-text="formatRelative(k.created_at)"></span>
            </td>
            <td class="px-4 py-3 text-ink-500 text-[12px] font-mono">
              <template x-if="k.expires_at">
                <span :title="new Date(k.expires_at).toLocaleString()" x-text="formatRelative(k.expires_at, true)"></span>
              </template>
              <template x-if="!k.expires_at"><span class="text-ink-600">Never</span></template>
            </td>
            <td class="px-4 py-3">
              <div class="flex items-center gap-2">
                <span class="w-1.5 h-1.5 rounded-full" :class="statusDot(k)"></span>
                <span class="text-[12px] capitalize" :class="statusTextClass(k)" x-text="statusOf(k)"></span>
              </div>
            </td>
            <td class="px-4 py-3 text-right">
              <template x-if="!k.revoked_at && statusOf(k) !== 'expired'">
                <button @click="askRevoke(k)" class="text-[12px] text-red-400 hover:text-red-300 focus:outline-none focus:ring-2 focus:ring-red-500/40 rounded px-1.5 py-0.5" :aria-label="'Revoke ' + k.name">Revoke</button>
              </template>
              <template x-if="k.revoked_at || statusOf(k) === 'expired'">
                <span class="text-[12px] text-ink-600">—</span>
              </template>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
  {{ pagination('pagination') }}
  {% endcall %}
</div>

<script>
const FLEET_ID = '{{ fleet.id }}';

function apiKeysPage() {
  return {
    // Plan 60 Phase 1.5 — pagination state for the API keys table.
    pagination: paginationState({
      mode: 'offset',
      endpoint: `/api/fleets/${FLEET_ID}/api-keys`,
      perPage: 25,
      storageKey: 'cmdop.pagination.api_keys.perPage',
    }),

    showCreate: false,
    creating: false,
    formError: '',
    newKey: null,
    copyLabel: 'Copy',

    showRevoke: false,
    revokeLoading: false,
    revokeTarget: { id: '', name: '' },

    openCreate() {
      this.newKey = null;
      this.formError = '';
      this.showCreate = true;
      this.$nextTick(() => document.getElementById('name')?.focus());
    },
    closeCreate() {
      this.showCreate = false;
      this.newKey = null;
      this.formError = '';
      this.copyLabel = 'Copy';
    },

    askRevoke(k) {
      this.revokeTarget = { id: k.id, name: k.name };
      this.showRevoke = true;
    },
    closeRevoke() {
      this.showRevoke = false;
      this.revokeLoading = false;
    },

    closeAll() {
      if (this.showRevoke) return this.closeRevoke();
      if (this.showCreate) return this.closeCreate();
    },

    async load() {
      await this.pagination.fetch();
      this.$nextTick(() => { if (window.lucide) window.lucide.createIcons(); });
    },

    async createKey() {
      this.creating = true;
      this.formError = '';
      const days = document.getElementById('expires_days').value;
      const body = {
        name: document.getElementById('name').value,
        expires_in_days: days ? parseInt(days, 10) : null,
      };
      try {
        const res = await fetch(`/api/fleets/${FLEET_ID}/api-keys`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(body),
        });
        if (res.ok) {
          this.newKey = await res.json();
          this.load();
          // Auto-copy on reveal so admin can paste immediately
          this.$nextTick(async () => {
            try {
              await navigator.clipboard.writeText(this.newKey.raw_token);
              this.copyLabel = 'Copied ✓';
            } catch (e) {
              this.copyLabel = 'Copy';
            }
            if (window.lucide) window.lucide.createIcons();
          });
        } else {
          const data = await res.json().catch(() => ({}));
          this.formError = data.detail || `Failed to create key (${res.status})`;
        }
      } catch (e) {
        this.formError = e.message || 'Network error';
      } finally {
        this.creating = false;
      }
    },

    async copyToken() {
      if (!this.newKey?.raw_token) return;
      try {
        await navigator.clipboard.writeText(this.newKey.raw_token);
        this.copyLabel = 'Copied ✓';
        setTimeout(() => { this.copyLabel = 'Copy'; }, 1800);
      } catch (e) {
        toast('Couldn\'t access clipboard — select the token manually', 'error');
      }
    },

    async confirmRevoke() {
      this.revokeLoading = true;
      try {
        const res = await fetch(`/api/fleets/${FLEET_ID}/api-keys/${this.revokeTarget.id}`, { method: 'DELETE' });
        if (res.ok || res.status === 204) {
          toast(`Revoked ${this.revokeTarget.name}`, 'success');
          this.closeRevoke();
          this.load();
        } else {
          const data = await res.json().catch(() => ({}));
          toast(data.detail || 'Failed to revoke', 'error');
          this.revokeLoading = false;
        }
      } catch (e) {
        toast(e.message || 'Network error', 'error');
        this.revokeLoading = false;
      }
    },

    statusOf(k) {
      if (k.revoked_at) return 'revoked';
      if (k.expires_at && new Date(k.expires_at) < new Date()) return 'expired';
      return 'active';
    },
    statusDot(k) {
      const s = this.statusOf(k);
      if (s === 'active') return 'bg-emerald-400';
      if (s === 'expired') return 'bg-amber-300';
      return 'bg-red-400';
    },
    statusTextClass(k) {
      const s = this.statusOf(k);
      if (s === 'active') return 'text-emerald-300';
      if (s === 'expired') return 'text-amber-300';
      return 'text-red-300';
    },

    formatRelative(iso, future) {
      if (!iso) return '—';
      const t = new Date(iso).getTime();
      if (!t) return iso;
      const now = Date.now();
      const diff = future ? (t - now) : (now - t);
      const abs = Math.abs(diff);
      const s = Math.floor(abs / 1000);
      let label;
      if (s < 60) label = `${s}s`;
      else if (s < 3600) label = `${Math.floor(s / 60)}m`;
      else if (s < 86400) label = `${Math.floor(s / 3600)}h`;
      else if (s < 7 * 86400) label = `${Math.floor(s / 86400)}d`;
      else return new Date(iso).toLocaleDateString();
      return future
        ? (diff >= 0 ? `in ${label}` : `${label} ago`)
        : (diff >= 0 ? `${label} ago` : `in ${label}`);
    },
  };
}
</script>
{% endblock %}