{# Plan 61/2b W2 — "Provider keys" tab body of /admin/llm.

   Lifted from the old `admin/pages/llm_keys.html` body (drop {% extends %}).
   The page-header lives in the parent (`llm.html`) so we only render the
   business chrome here. #}
{% from 'admin/components/ui.html' import card, input, select, modal, empty_state, tooltip %}

<div class="space-y-4" x-data="llmKeysPage()">

  <div class="flex items-start justify-between gap-4">
    <div>
      <h2 class="text-headline text-ink-100">Provider keys</h2>
      <p class="text-footnote mt-1 max-w-2xl">
        Per-server credentials. Plaintext keys are encrypted at rest and never
        returned by the API. The boot health-check probes each row at startup —
        rotate any row flagged <span class="text-red-300">corrupt</span> below.
        For a guided walkthrough use
        <a href="/admin/wizards/add-llm-key" class="text-cmdop-400 hover:text-cmdop-300 underline">Add LLM key</a>.
      </p>
    </div>
    <button @click="openModal()" class="btn btn-secondary btn-sm whitespace-nowrap">
      <i data-lucide="plus" class="w-3.5 h-3.5"></i>
      Quick add
    </button>
  </div>

  <!-- Rotation hint — collapsed to a one-line affordance by default; it's
       troubleshooting reference, not something you need on every visit.
       Click to expand; dismissal sticks in localStorage. -->
  <div x-data="{ open: localStorage.getItem('cmdop:llm.rotation-hint') === 'open' }"
       x-init="$watch('open', v => localStorage.setItem('cmdop:llm.rotation-hint', v ? 'open' : 'closed'))"
       class="card border border-amber-500/[0.12] bg-amber-500/[0.03]">
    <button type="button" @click="open = !open"
            class="w-full flex items-center gap-2.5 px-4 py-2.5 text-left group">
      <i data-lucide="key-round" class="w-3.5 h-3.5 text-amber-300 flex-shrink-0"></i>
      <span class="text-[12px] text-ink-300 flex-1">Rotated <span class="font-mono">CMDOP_SECRET_BOX_KEY</span>? Recovery steps</span>
      <i data-lucide="chevron-right" class="w-3.5 h-3.5 text-ink-500 transition-transform duration-150" :class="open && 'rotate-90'"></i>
    </button>
    <div x-show="open" x-collapse>
      <p class="text-[12px] text-ink-500 px-4 pb-3 pl-[42px]">
        Run <span class="font-mono text-ink-300 bg-black/40 px-1.5 py-0.5 rounded">cmdop-admin llm-keys migrate-secret-box</span>
        to re-encrypt rows with the new key, or
        <span class="font-mono text-ink-300 bg-black/40 px-1.5 py-0.5 rounded">deactivate-corrupt</span>
        to soft-revoke unrecoverable rows.
        See <a href="/admin/help/troubleshooting" class="text-cmdop-400 hover:text-cmdop-300 underline" target="_blank" rel="noopener">troubleshooting</a>.
      </p>
    </div>
  </div>

  <!-- Create modal -->
  {% call modal('showModal', 'closeModal()', width='max-w-lg') %}
      <div class="flex items-start justify-between mb-4">
        <h3 class="text-[15px] font-semibold text-ink-100 tracking-tight">Add provider key</h3>
        <button @click="closeModal()" class="text-ink-500 hover:text-ink-200" type="button">✕</button>
      </div>

      <form @submit.prevent="createKey()" class="space-y-4">
        <div>
          <label class="block text-[11px] uppercase tracking-wider font-medium text-ink-500 mb-1.5">Provider</label>
          <select x-model="form.provider" class="w-full px-3 py-2 rounded-md bg-black border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 text-ink-100 text-[13px] focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 transition-colors">
            <template x-for="p in providers" :key="p.id">
              <option :value="p.id" x-text="p.label"></option>
            </template>
          </select>
          <p class="text-[12px] text-ink-500 mt-1" x-text="currentProvider.hint"></p>
          <a x-show="currentProvider.docs" :href="currentProvider.docs" target="_blank" rel="noopener"
             class="inline-block text-[12px] text-cmdop-400 hover:text-cmdop-300 mt-1">
            Where to get the key →
          </a>
        </div>
        <div>
          {{ input("name", label="Name", placeholder="primary", required=true, attrs='x-model="form.name"') }}
          <p class="text-[12px] text-ink-500 mt-1">Human-readable label. Multiple keys per provider allowed.</p>
        </div>
        {{ input("api_key", label="API key", type="password", required=true, attrs='x-model="form.api_key" :placeholder="currentProvider.keyPlaceholder" autocomplete="off" spellcheck="false"') }}
        <p class="text-[11px] text-amber-300/80">Saved encrypted. You won't see the full value again after submit.</p>
        <div>
          {{ input("base_url", label="Base URL (optional)", attrs='x-model="form.base_url" :placeholder="currentProvider.baseUrl"') }}
          <p class="text-[12px] text-ink-500 mt-1">Leave empty to use the provider default.</p>
        </div>
        <label class="flex items-center gap-2 text-[13px] text-ink-300">
          <input type="checkbox" x-model="form.is_default" class="rounded border-white/[0.12] bg-black text-cmdop-500 focus:ring-cmdop-500/30">
          Make default for this provider
          {{ tooltip('Used for any model from this provider unless an alias overrides.', position='right') }}
        </label>
        <p class="text-[11px] text-ink-500 -mt-2 pl-6">Only one default per provider — the current default will be demoted.</p>
        <div class="flex justify-end gap-3 pt-2 border-t border-white/[0.06]">
          <button type="button" @click="closeModal()" class="px-3 py-1.5 text-[13px] text-ink-400 hover:text-ink-100">Cancel</button>
          <button type="submit" :disabled="loading || !form.name || !form.api_key" class="px-3 py-1.5 bg-white hover:bg-ink-100 text-black text-[13px] font-medium rounded-md disabled:opacity-50 disabled:cursor-not-allowed">
            <span x-text="loading ? 'Saving…' : 'Save'"></span>
          </button>
        </div>
      </form>
  {% endcall %}

  <!-- Revoke confirm modal -->
  {% call modal('revokeTarget !== null', 'revokeTarget = null', width='max-w-md') %}
    <div x-show="revokeTarget">
      <h3 class="text-[15px] font-semibold text-ink-100 tracking-tight mb-2">Revoke provider key?</h3>
      <p class="text-[12px] text-ink-400">
        <span class="font-mono text-ink-200" x-text="revokeTarget && (revokeTarget.provider + ' · ' + revokeTarget.name)"></span>
        will be marked inactive. Any in-flight calls finish, but new dispatches skip it.
        This is a soft-revoke; the row remains for audit.
      </p>
      <div class="flex justify-end gap-3 pt-4 mt-4 border-t border-white/[0.06]">
        <button type="button" @click="revokeTarget = null" class="px-3 py-1.5 text-[13px] text-ink-400 hover:text-ink-100">Cancel</button>
        <button type="button" @click="confirmRevoke()" :disabled="revoking" 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-300 text-[13px] font-medium rounded-md disabled:opacity-50">
          <span x-text="revoking ? 'Revoking…' : 'Revoke'"></span>
        </button>
      </div>
    </div>
  {% endcall %}

  {% call card() %}
  <div class="overflow-x-auto" x-show="!loadingList && rows.length > 0" x-cloak>
    <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">Provider</th>
          <th class="px-4 py-3 font-medium">Name</th>
          <th class="px-4 py-3 font-medium">Preview</th>
          <th class="px-4 py-3 font-medium">
            <span class="inline-flex items-center gap-1">
              Default
              {{ tooltip('Used for any model from this provider unless an alias overrides.') }}
            </span>
          </th>
          <th class="px-4 py-3 font-medium">Status</th>
          <th class="px-4 py-3 font-medium">Created</th>
          <th class="px-4 py-3 font-medium text-right">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-white/[0.06]">
        <template x-for="k in rows" :key="k.id">
          <tr class="hover:bg-white/[0.02] transition-colors">
            <td class="px-4 py-3">
              <span class="inline-flex items-center gap-1.5">
                <span class="w-2 h-2 rounded-full" :class="providerDot(k.provider)"></span>
                <span class="font-medium text-ink-100" x-text="k.provider"></span>
              </span>
            </td>
            <td class="px-4 py-3 text-ink-200 truncate max-w-[14rem]" :title="k.name" x-text="k.name"></td>
            <td class="px-4 py-3 text-ink-500 font-mono text-[12px]" x-text="k.api_key_preview"></td>
            <td class="px-4 py-3">
              <template x-if="k.is_default">
                <span class="inline-block px-2 py-0.5 text-[11px] rounded border border-cmdop-500/30 text-cmdop-300">default</span>
              </template>
              <template x-if="!k.is_default">
                <span class="text-[12px] text-ink-600">—</span>
              </template>
            </td>
            <td class="px-4 py-3">
              <template x-if="k.is_active">
                <span class="inline-block px-1.5 py-0.5 rounded text-[10px] uppercase tracking-wider border border-emerald-500/30 text-emerald-300">active</span>
              </template>
              <template x-if="!k.is_active">
                <span class="inline-block px-1.5 py-0.5 rounded text-[10px] uppercase tracking-wider border border-red-500/30 text-red-300">revoked</span>
              </template>
            </td>
            <td class="px-4 py-3 text-ink-500 font-mono text-[12px]" :title="new Date(k.created_at).toISOString()" x-text="fmtRel(k.created_at)"></td>
            <td class="px-4 py-3 text-right">
              <template x-if="k.is_active">
                <button @click="askRevoke(k)" class="text-[12px] text-red-400 hover:text-red-300 px-2 py-1">Revoke</button>
              </template>
              <template x-if="!k.is_active">
                <span class="text-[12px] text-ink-600">—</span>
              </template>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>

  <div x-show="loadingList" x-cloak class="px-4 py-6 text-ink-500 text-[13px]">Loading…</div>

  <div x-show="!loadingList && rows.length === 0" x-cloak>
    {{ empty_state(
      "No provider keys yet",
      "Add an OpenAI, Anthropic, OpenRouter or DashScope key to start dispatching requests through the gateway.",
      icon="key",
      action_label="Add LLM key (wizard)",
      action_href="/admin/wizards/add-llm-key",
    ) }}
  </div>
  {% endcall %}
</div>

<script>
function llmKeysPage() {
  return {
    showModal: false,
    loading: false,
    loadingList: true,
    revoking: false,
    revokeTarget: null,
    rows: [],
    form: { provider: 'openai', name: '', api_key: '', base_url: '', is_default: false },
    providers: [
      {
        id: 'openai',
        label: 'OpenAI',
        hint: 'Direct OpenAI API key. Used for GPT-4o, GPT-5, o1, o3 families.',
        keyPlaceholder: 'sk-proj-...',
        baseUrl: 'https://api.openai.com/v1',
        docs: 'https://platform.openai.com/api-keys',
      },
      {
        id: 'anthropic',
        label: 'Anthropic',
        hint: 'Direct Anthropic Console key. Used for Claude Sonnet / Opus / Haiku.',
        keyPlaceholder: 'sk-ant-api03-...',
        baseUrl: 'https://api.anthropic.com',
        docs: 'https://console.anthropic.com/settings/keys',
      },
      {
        id: 'openrouter',
        label: 'OpenRouter',
        hint: 'Aggregator key — single key fans out to many models (openai/*, anthropic/*, etc.).',
        keyPlaceholder: 'sk-or-v1-...',
        baseUrl: 'https://openrouter.ai/api/v1',
        docs: 'https://openrouter.ai/keys',
      },
      {
        id: 'dashscope',
        label: 'DashScope (Alibaba)',
        hint: 'Alibaba Cloud Model Studio key. Used for Qwen models (qwen-max, qwen-flash, qwen3-*).',
        keyPlaceholder: 'sk-...',
        baseUrl: 'https://dashscope-intl.aliyuncs.com/compatible-mode/v1',
        docs: 'https://bailian.console.alibabacloud.com/',
      },
    ],

    init() { this.loadKeys(); },

    get currentProvider() {
      return this.providers.find(p => p.id === this.form.provider) || this.providers[0];
    },

    providerDot(p) {
      return ({
        openai:     'bg-emerald-400',
        anthropic:  'bg-amber-400',
        openrouter: 'bg-cmdop-400',
        dashscope:  'bg-purple-400',
      })[p] || 'bg-ink-500';
    },

    fmtRel(iso) {
      if (!iso) return '—';
      const d = new Date(iso);
      const secs = Math.floor((Date.now() - d.getTime()) / 1000);
      if (secs < 60) return 'just now';
      if (secs < 3600) return Math.floor(secs / 60) + 'm ago';
      if (secs < 86400) return Math.floor(secs / 3600) + 'h ago';
      const days = Math.floor(secs / 86400);
      if (days < 30) return days + 'd ago';
      return d.toLocaleDateString();
    },

    openModal() {
      this.form = { provider: 'openai', name: '', api_key: '', base_url: '', is_default: false };
      this.showModal = true;
    },

    closeModal() { this.showModal = false; },

    async loadKeys() {
      this.loadingList = true;
      try {
        // Plan 60 Phase 1.5 — endpoint returns OffsetPage. Page size 200
        // (the hard cap) keeps the existing client-side "show all" UX
        // intact until Phase 2 wires the pagination macro through.
        const res = await fetch('/api/admin/llm/keys?per_page=200');
        if (!res.ok) { toast('Failed to load keys', 'error'); this.rows = []; return; }
        const body = await res.json();
        this.rows = (body && body.items) || [];
      } finally {
        this.loadingList = false;
      }
    },

    async createKey() {
      if (this.loading) return;
      this.loading = true;
      const headers = { 'Content-Type': 'application/json' };
      const body = {
        provider: this.form.provider,
        name: this.form.name.trim(),
        api_key: this.form.api_key,
        base_url: this.form.base_url.trim() || null,
        is_default: this.form.is_default,
      };
      try {
        const res = await fetch('/api/admin/llm/keys', { method: 'POST', headers, body: JSON.stringify(body) });
        if (res.ok) {
          toast('Key saved', 'success');
          this.closeModal();
          this.loadKeys();
        } else {
          const data = await res.json().catch(() => ({}));
          toast(data.detail || 'Failed to save key', 'error');
        }
      } finally {
        this.loading = false;
      }
    },

    askRevoke(k) { this.revokeTarget = k; },

    async confirmRevoke() {
      if (!this.revokeTarget || this.revoking) return;
      this.revoking = true;
      const keyId = this.revokeTarget.id;
      try {
        const res = await fetch(`/api/admin/llm/keys/${keyId}`, { method: 'DELETE' });
        if (res.ok || res.status === 204) {
          toast('Key revoked', 'success');
          this.revokeTarget = null;
          this.loadKeys();
        } else {
          const data = await res.json().catch(() => ({}));
          toast(data.detail || 'Failed to revoke', 'error');
        }
      } finally {
        this.revoking = false;
      }
    },
  };
}
</script>