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

{% block title %}Add LLM key — cmdop admin{% endblock %}

{% block content %}
{# Plan 61/2b W2 — Add LLM key wizard.

   Five steps, single Alpine component:
     1. Pick provider — tile picker
     2. Paste API key — masked input + format hint
     3. Inline verify — live probe (POST /api/admin/wizards/add-llm-key/verify)
     4. Set as default + spend cap
     5. Done — success screen

   Reuses Wave 2a substrate macros (page_header step/step_total,
   card kind='roomy', tooltip). State lives in component-local
   memory + Redis (server-side, 30min TTL via the wizard cookie).
#}
{% from 'admin/components/ui.html' import card, input, page_header, tooltip %}

{# tojson is HTML-safe by default (escapes " to "), so the attribute
   parses cleanly. |safe strips that escaping and breaks Alpine for the
   whole page. #}
<div x-data='wizardAddLlmKey({{ providers_meta|tojson }})' x-init="init()" class="space-y-6">

  {{ page_header(
    title='Add an LLM key',
    subtitle='Five quick steps. The key is encrypted before it ever touches disk.',
    eyebrow='Wizards',
    step=1,
    step_total=5,
    help_anchor='architecture',
    actions=[
      {'label': 'Back to Model routing', 'kind': 'ghost', 'icon': 'arrow-left',
       'href': '/admin/llm?tab=keys'},
    ]
  ) }}

  {# Step indicator strip — the page_header `step`/`step_total` only
     prints "Step N of M"; we still want a horizontal progress bar with
     all five label dots. #}
  <ol class="flex items-stretch gap-2 text-[11px] uppercase tracking-wider"
      aria-label="Wizard steps">
    <template x-for="(s, idx) in stepLabels" :key="idx">
      <li class="flex-1 rounded-md border px-3 py-2 transition-colors"
          :class="step === idx + 1
            ? 'border-cmdop-400/50 bg-cmdop-500/[0.06] text-ink-100'
            : (step > idx + 1
              ? 'border-emerald-500/30 bg-emerald-500/[0.04] text-emerald-300'
              : 'border-white/[0.06] text-ink-500')">
        <span class="font-mono mr-1" x-text="idx + 1"></span>
        <span x-text="s"></span>
      </li>
    </template>
  </ol>

  {# Step 1 — Provider tile picker. ──────────────────────────────────── #}
  <div x-show="step === 1" x-cloak>
    {% call card(kind='roomy') %}
      <h2 class="text-headline text-ink-100 mb-3">Pick a provider</h2>
      <p class="text-footnote mb-5">
        Where will the gateway dispatch requests?
        {{ tooltip('Each provider supplies one API key; the same provider can hold multiple keys (e.g. dev + prod), one of them flagged as default.') }}
      </p>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
        <template x-for="p in providers" :key="p.id">
          <button type="button"
                  @click="form.provider = p.id"
                  class="text-left card p-4 hover:border-cmdop-500/30 cursor-pointer transition-colors"
                  :class="form.provider === p.id ? 'border-cmdop-500/60 bg-cmdop-500/[0.04]' : ''">
            <div class="flex items-center gap-2 mb-2">
              <span class="w-2.5 h-2.5 rounded-full" :class="providerDot(p.id)"></span>
              <h3 class="text-[14px] font-semibold text-ink-100" x-text="p.label"></h3>
              <template x-if="p.tested">
                <span class="ml-auto badge badge-success">
                  <i data-lucide="badge-check" class="w-3 h-3"></i>
                  tested by cmdop
                </span>
              </template>
            </div>
            <p class="text-footnote font-mono text-[11px]" x-text="p.supported_models"></p>
          </button>
        </template>
      </div>
    {% endcall %}
    <div class="flex justify-end mt-4">
      <button type="button" @click="next()"
              :disabled="!form.provider"
              class="btn btn-primary btn-md">
        Continue
        <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
      </button>
    </div>
  </div>

  {# Step 2 — Paste API key. ─────────────────────────────────────────── #}
  <div x-show="step === 2" x-cloak>
    {% call card(kind='roomy') %}
      <h2 class="text-headline text-ink-100 mb-1">Paste the <span x-text="currentProvider.label"></span> key</h2>
      <p class="text-footnote mb-5" x-text="currentProvider.key_format_hint"></p>
      <div class="space-y-3 max-w-xl">
        <div>
          {{ input("api_key", label="API key", type="password", required=true,
                   attrs='x-model="form.api_key" :placeholder="currentProvider.key_format" autocomplete="off" spellcheck="false"') }}
          <p class="text-[11px] text-amber-300/80 mt-1">
            Saved encrypted via Fernet at rest. You won't see the full value again after submit.
          </p>
        </div>
        <div>
          {{ input("name", label="Name", placeholder="primary", required=true, attrs='x-model="form.name"') }}
          <p class="text-footnote mt-1">Human-readable label. Multiple keys per provider allowed.</p>
        </div>
        <div>
          {{ input("base_url", label="Base URL (optional)", attrs='x-model="form.base_url" :placeholder="currentProvider.default_base_url"') }}
          <p class="text-footnote mt-1">Leave empty to use the provider default.</p>
        </div>
        <p class="text-footnote">
          <a :href="currentProvider.docs_url" target="_blank" rel="noopener"
             class="text-cmdop-400 hover:text-cmdop-300 underline">
            Where do I find this key? →
          </a>
        </p>
      </div>
    {% endcall %}
    <div class="flex justify-between mt-4">
      <button type="button" @click="prev()" class="btn btn-ghost btn-md">
        <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
        Back
      </button>
      <button type="button" @click="next()"
              :disabled="!form.api_key || !form.name"
              class="btn btn-primary btn-md">
        Continue
        <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
      </button>
    </div>
  </div>

  {# Step 3 — Verify. ─────────────────────────────────────────────────── #}
  <div x-show="step === 3" x-cloak>
    {% call card(kind='roomy') %}
      <h2 class="text-headline text-ink-100 mb-1">Verify the key</h2>
      <p class="text-footnote mb-5">
        We'll make one cheap live call to confirm the key reaches the provider.
        No request is recorded against your spend ledger.
      </p>
      <div class="space-y-4">
        <button type="button" @click="verify()"
                :disabled="verifying"
                class="btn btn-secondary btn-md">
          <i data-lucide="zap" class="w-3.5 h-3.5"
             :class="verifying ? 'animate-pulse' : ''"></i>
          <span x-text="verifying ? 'Probing…' : (form.verified ? 'Re-test' : 'Test key')"></span>
        </button>

        <template x-if="form.verifyResult && form.verifyResult.ok">
          <div class="card p-3 border border-emerald-500/30 bg-emerald-500/[0.04]">
            <div class="flex items-center gap-2 text-[13px]">
              <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-300"></i>
              <span class="text-ink-100 font-medium">Key works.</span>
              <span class="text-ink-500 text-[12px] ml-2">
                <span x-show="form.verifyResult.latency_ms != null">
                  <span class="font-mono" x-text="form.verifyResult.latency_ms"></span>ms
                </span>
                <span x-show="form.verifyResult.models_seen != null" class="ml-2">
                  <span class="font-mono" x-text="form.verifyResult.models_seen"></span> models visible
                </span>
              </span>
            </div>
          </div>
        </template>

        <template x-if="form.verifyResult && !form.verifyResult.ok">
          <div class="card p-3 border border-red-500/30 bg-red-500/[0.04]">
            <div class="flex items-start gap-2 text-[13px]">
              <i data-lucide="x-circle" class="w-4 h-4 text-red-300 mt-0.5"></i>
              <div>
                <p class="text-ink-100 font-medium">Probe failed.</p>
                <p class="text-ink-400 text-[12px]" x-text="form.verifyResult.reason || 'unknown error'"></p>
                <p class="text-ink-500 text-[11px] mt-1">
                  Double-check the key on
                  <a :href="currentProvider.docs_url" target="_blank" rel="noopener"
                     class="text-cmdop-400 hover:text-cmdop-300 underline">
                    the provider console
                  </a>
                  and try again.
                </p>
              </div>
            </div>
          </div>
        </template>
      </div>
    {% endcall %}
    <div class="flex justify-between mt-4">
      <button type="button" @click="prev()" class="btn btn-ghost btn-md">
        <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
        Back
      </button>
      <button type="button" @click="next()"
              :disabled="!form.verified"
              class="btn btn-primary btn-md">
        Continue
        <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
      </button>
    </div>
  </div>

  {# Step 4 — Defaults + spend cap. ──────────────────────────────────── #}
  <div x-show="step === 4" x-cloak>
    {% call card(kind='roomy') %}
      <h2 class="text-headline text-ink-100 mb-1">Default and spend cap</h2>
      <p class="text-footnote mb-5">
        Optional tweaks. Either can be changed later from
        <a href="/admin/llm?tab=keys" class="text-cmdop-400 hover:text-cmdop-300 underline">Provider keys</a>.
      </p>
      <div class="space-y-4 max-w-xl">
        <label class="flex items-start gap-3 cursor-pointer">
          <input type="checkbox" x-model="form.is_default"
                 class="mt-1 rounded border-white/[0.12] bg-black text-cmdop-500 focus:ring-cmdop-500/30">
          <span>
            <span class="text-[13px] text-ink-100 font-medium">Make default for this provider</span>
            {{ tooltip('Used for any model from this provider unless an alias overrides.') }}
            <p class="text-footnote">Only one default per provider — the current default will be demoted.</p>
          </span>
        </label>

        <div>
          <label class="block text-caption text-ink-500 mb-1.5">
            Monthly spend cap (USD, optional)
            {{ tooltip('Soft hint logged on save; provider budgets are managed per-fleet under /admin/llm and applied at dispatch time.') }}
          </label>
          <input type="number" min="0" step="0.01"
                 x-model.number="form.spend_cap_usd"
                 placeholder="e.g. 200"
                 class="input max-w-[200px]" />
        </div>
      </div>
    {% endcall %}
    <div class="flex justify-between mt-4">
      <button type="button" @click="prev()" class="btn btn-ghost btn-md">
        <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
        Back
      </button>
      <button type="button" @click="save()"
              :disabled="saving"
              class="btn btn-primary btn-md">
        <i data-lucide="check" class="w-3.5 h-3.5"></i>
        <span x-text="saving ? 'Saving…' : 'Save key'"></span>
      </button>
    </div>
  </div>

  {# Step 5 — Done. ──────────────────────────────────────────────────── #}
  <div x-show="step === 5" x-cloak>
    {% call card(kind='roomy') %}
      <div class="text-center py-8">
        <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-emerald-500/[0.08] border border-emerald-500/30 mb-4">
          <i data-lucide="check" class="w-6 h-6 text-emerald-300"></i>
        </div>
        <h2 class="text-display text-ink-100 mb-1">Key saved</h2>
        <p class="text-footnote mb-6 max-w-md mx-auto">
          The gateway picked it up — health probe will refresh automatically.
        </p>
        <div class="flex flex-wrap items-center justify-center gap-3">
          <a href="/admin/llm?tab=keys" class="btn btn-primary btn-md">
            <i data-lucide="key" class="w-3.5 h-3.5"></i>
            View provider keys
          </a>
          <a href="/admin/llm?tab=models" class="btn btn-secondary btn-md">
            <i data-lucide="cpu" class="w-3.5 h-3.5"></i>
            See available models
          </a>
          <button type="button" @click="restart()" class="btn btn-ghost btn-md">
            <i data-lucide="plus" class="w-3.5 h-3.5"></i>
            Add another
          </button>
        </div>
      </div>
    {% endcall %}
  </div>
</div>

<script>
function wizardAddLlmKey(providersMeta) {
  return {
    step: 1,
    stepLabels: ['Provider', 'API key', 'Verify', 'Defaults', 'Done'],
    providers: providersMeta || [],
    verifying: false,
    saving: false,
    form: {
      provider: 'openai',
      name: '',
      api_key: '',
      base_url: '',
      is_default: false,
      spend_cap_usd: null,
      verified: false,
      verifyResult: null,
    },

    async init() {
      try {
        const res = await fetch('/api/admin/wizards/add-llm-key/state', { credentials: 'same-origin' });
        if (res.ok) {
          const s = await res.json();
          if (s && s.provider) this.form.provider = s.provider;
          if (s && s.name) this.form.name = s.name;
          if (typeof s.is_default === 'boolean') this.form.is_default = s.is_default;
          if (typeof s.spend_cap_usd === 'number') this.form.spend_cap_usd = s.spend_cap_usd;
        }
      } catch (e) { /* offline / no redis — start fresh */ }
      this.$nextTick(() => window.lucide && window.lucide.createIcons());
    },

    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';
    },

    next() {
      if (this.step < this.stepLabels.length) {
        this.step += 1;
        this.$nextTick(() => window.lucide && window.lucide.createIcons());
      }
    },

    prev() {
      if (this.step > 1) {
        this.step -= 1;
        // Wipe verify when stepping back so step 3 forces a fresh probe.
        if (this.step <= 2) {
          this.form.verified = false;
          this.form.verifyResult = null;
        }
        this.$nextTick(() => window.lucide && window.lucide.createIcons());
      }
    },

    async verify() {
      if (this.verifying) return;
      this.verifying = true;
      this.form.verifyResult = null;
      this.form.verified = false;
      try {
        const res = await fetch('/api/admin/wizards/add-llm-key/verify', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          credentials: 'same-origin',
          body: JSON.stringify({
            provider: this.form.provider,
            api_key: this.form.api_key,
            base_url: this.form.base_url || null,
          }),
        });
        const body = await res.json().catch(() => ({ ok: false, reason: 'no JSON body' }));
        this.form.verifyResult = body;
        this.form.verified = !!body.ok;
      } catch (e) {
        this.form.verifyResult = { ok: false, reason: (e && e.message) || 'network error' };
      } finally {
        this.verifying = false;
        this.$nextTick(() => window.lucide && window.lucide.createIcons());
      }
    },

    async save() {
      if (this.saving) return;
      this.saving = true;
      try {
        const res = await fetch('/api/admin/wizards/add-llm-key/save', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          credentials: 'same-origin',
          body: JSON.stringify({
            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,
            spend_cap_usd: this.form.spend_cap_usd || null,
          }),
        });
        if (!res.ok) {
          const data = await res.json().catch(() => ({}));
          if (window.toast) toast(data.detail || 'Save failed', 'error');
          return;
        }
        this.step = 5;
        this.$nextTick(() => window.lucide && window.lucide.createIcons());
      } finally {
        this.saving = false;
      }
    },

    restart() {
      this.step = 1;
      this.form = {
        provider: 'openai', name: '', api_key: '', base_url: '',
        is_default: false, spend_cap_usd: null, verified: false, verifyResult: null,
      };
      this.$nextTick(() => window.lucide && window.lucide.createIcons());
    },
  };
}
</script>
{% endblock %}