{# Plan 61/2b W2 — "Aliases" tab body of /admin/llm.
   Lifted from `admin/pages/llm_aliases.html` body. #}
{% from 'admin/components/ui.html' import card, input, textarea, modal, empty_state, tooltip %}

<div class="space-y-4" x-data="llmAliasesPage()">
  <div class="flex items-start justify-between gap-4">
    <div>
      <h2 class="text-headline text-ink-100">Aliases</h2>
      <p class="text-footnote mt-1 max-w-2xl">
        Named tier slots used by the resolver. Agents request a model as
        <span class="text-ink-200 font-mono">alias:&lt;name&gt;</span>; the gateway picks
        a concrete model from the alias's tier — explicit
        <span class="text-ink-200">fallback_order</span> first, then cheapest in tier.
      </p>
    </div>
    <button
      @click="startCreate()"
      class="inline-flex items-center gap-2 px-3 py-1.5 bg-white hover:bg-ink-100 text-black text-[13px] font-medium rounded-md whitespace-nowrap"
    >
      <i data-lucide="plus" class="w-4 h-4"></i>
      New alias
    </button>
  </div>

  {% call card() %}
  <div class="overflow-x-auto" x-show="!loading && 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">Name</th>
          <th class="px-4 py-3 font-medium">Tier</th>
          <th class="px-4 py-3 font-medium">
            <span class="inline-flex items-center gap-1">
              Fallback order
              {{ tooltip('Order in which providers are tried. First success wins; failures auto-fall-through.') }}
            </span>
          </th>
          <th class="px-4 py-3 font-medium">Resolves to</th>
          <th class="px-4 py-3 font-medium">Description</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="a in rows" :key="a.name">
          <tr class="hover:bg-white/[0.02] transition-colors">
            <td class="px-4 py-3 font-mono text-cmdop-300 text-[12px] truncate max-w-[14rem]" :title="`alias:${a.name}`" x-text="`alias:${a.name}`"></td>
            <td class="px-4 py-3">
              <span class="px-1.5 py-0.5 rounded text-[10px] font-mono uppercase border" :class="tierBadge(a.tier)" x-text="a.tier"></span>
            </td>
            <td class="px-4 py-3 text-[12px] text-ink-300 font-mono">
              <template x-if="a.fallback_order && a.fallback_order.length">
                <span class="truncate inline-block max-w-[20rem] align-bottom" :title="a.fallback_order.join(' → ')" x-text="a.fallback_order.join(' → ')"></span>
              </template>
              <template x-if="!a.fallback_order || !a.fallback_order.length">
                <span class="text-ink-600 italic">cheapest in tier</span>
              </template>
            </td>
            <td class="px-4 py-3 text-[12px] font-mono">
              <span x-text="resolveAlias(a)" :class="resolveAlias(a) === '—' ? 'text-ink-600 italic' : 'text-emerald-300'" :title="resolveExplain(a)"></span>
            </td>
            <td class="px-4 py-3 text-ink-400 text-[12px] truncate max-w-[16rem]" :title="a.description || ''" x-text="a.description || '—'"></td>
            <td class="px-4 py-3 text-right whitespace-nowrap">
              <button @click="startEdit(a)" class="text-[12px] text-ink-400 hover:text-ink-100 px-2 py-1">Edit</button>
              <button @click="askDelete(a.name)" class="text-[12px] text-red-400 hover:text-red-300 px-2 py-1">Delete</button>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>

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

  <div x-show="!loading && rows.length === 0" x-cloak>
    {{ empty_state(
      "No aliases yet",
      'Create one — agents will then call `alias:<name>` and the gateway picks a model from the alias tier.',
      icon="bookmark"
    ) }}
  </div>
  {% endcall %}

  <!-- Modal: create / edit ------------------------------------------------>
  <div @keydown.escape.window="cancel()">
  {% call modal('showCreate || editing', 'cancel()', width='max-w-xl') %}
      <div class="space-y-4">
        <div class="flex items-center justify-between">
          <h2 class="text-[15px] font-semibold text-ink-100 tracking-tight" x-text="editing ? `Edit alias:${form.name}` : 'New alias'"></h2>
          <button @click="cancel()" class="text-ink-500 hover:text-ink-200" type="button">✕</button>
        </div>

        <div class="space-y-3">
          <div>
            {{ input("name", label="Name", placeholder="chat, classifier, vision_chat, …", attrs='x-model="form.name" :disabled="editing"') }}
            <p class="text-[11px] text-ink-600 mt-1">Used by agents as <span class="font-mono">alias:&lt;name&gt;</span>. Lowercase, alnum + underscore.</p>
          </div>

          <div>
            <label class="block text-[11px] uppercase tracking-wider font-medium text-ink-500 mb-1.5">Tier</label>
            <div class="flex gap-2">
              <template x-for="t in ['cheap', 'mid', 'premium']" :key="t">
                <button
                  @click="form.tier = t"
                  type="button"
                  class="px-3 py-1 rounded text-[11px] uppercase tracking-wider font-medium border"
                  :class="form.tier === t ? tierBadge(t) : 'border-white/[0.08] text-ink-500 hover:text-ink-300 hover:border-white/[0.16]'"
                  x-text="t"
                ></button>
              </template>
            </div>
          </div>

          <div>
            <div class="flex items-center justify-between mb-1.5">
              <label class="block text-[11px] uppercase tracking-wider font-medium text-ink-500">
                <span class="inline-flex items-center gap-1">
                  Fallback order (optional)
                  {{ tooltip('Order in which providers are tried. First success wins; failures auto-fall-through.') }}
                </span>
              </label>
              <span class="text-[11px] text-ink-600 font-mono" x-text="`${form.fallback_order.length} entr${form.fallback_order.length === 1 ? 'y' : 'ies'}`"></span>
            </div>

            <!-- Reorderable list -->
            <div class="space-y-1.5 mb-2" x-show="form.fallback_order.length > 0">
              <template x-for="(m, idx) in form.fallback_order" :key="idx + ':' + m">
                <div class="flex items-center gap-2 bg-black border border-white/[0.08] rounded px-2 py-1.5">
                  <span class="font-mono text-[11px] text-ink-600 w-5 text-right" x-text="idx + 1"></span>
                  <span class="flex-1 font-mono text-[12px] text-ink-200 truncate" :title="m" x-text="m"></span>
                  <button type="button" @click="moveUp(idx)" :disabled="idx === 0"
                          class="text-ink-500 hover:text-ink-100 disabled:opacity-30 disabled:cursor-not-allowed p-0.5"
                          title="Move up">
                    <i data-lucide="arrow-up" class="w-3.5 h-3.5"></i>
                  </button>
                  <button type="button" @click="moveDown(idx)" :disabled="idx === form.fallback_order.length - 1"
                          class="text-ink-500 hover:text-ink-100 disabled:opacity-30 disabled:cursor-not-allowed p-0.5"
                          title="Move down">
                    <i data-lucide="arrow-down" class="w-3.5 h-3.5"></i>
                  </button>
                  <button type="button" @click="removeEntry(idx)"
                          class="text-red-400 hover:text-red-300 p-0.5"
                          title="Remove">
                    <i data-lucide="x" class="w-3.5 h-3.5"></i>
                  </button>
                </div>
              </template>
            </div>

            <!-- Add entry -->
            <div class="flex gap-2">
              <input type="text" x-model="newEntry" @keydown.enter.prevent="addEntry()"
                     placeholder="model_id (e.g. openai/gpt-4o-mini)"
                     list="alias-model-suggestions"
                     class="flex-1 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-[12px] font-mono placeholder-ink-600 focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 transition-colors" />
              <datalist id="alias-model-suggestions">
                <template x-for="m in modelSuggestions(form.tier)" :key="m">
                  <option :value="m"></option>
                </template>
              </datalist>
              <button type="button" @click="addEntry()" :disabled="!newEntry.trim()"
                      class="px-3 py-1.5 text-[12px] border border-white/[0.08] hover:border-white/[0.16] text-ink-300 hover:text-ink-100 rounded-md disabled:opacity-50">
                Add
              </button>
            </div>

            <p class="text-[11px] text-ink-600 mt-1.5">Resolver tries these in order; missing entries are silently skipped. Empty list = cheapest in tier.</p>
          </div>

          {{ input("description", label="Description", placeholder="(optional) what this alias is used for", attrs='x-model="form.description"') }}

          <div x-show="form.tier" class="text-[11px] text-ink-500 border-t border-white/[0.06] pt-3">
            <span class="text-ink-600 uppercase tracking-wider">Preview · </span>
            <span class="text-ink-300" x-text="resolveExplain({ tier: form.tier, fallback_order: form.fallback_order })"></span>
          </div>
        </div>

        <div class="flex items-center justify-end gap-2 pt-2 border-t border-white/[0.06]">
          <button type="button" @click="cancel()" class="px-3 py-1.5 text-[13px] text-ink-400 hover:text-ink-100">Cancel</button>
          <button
            type="button"
            @click="submit()"
            :disabled="busy || !form.name.trim()"
            class="px-3 py-1.5 bg-white hover:bg-ink-100 disabled:opacity-50 disabled:cursor-not-allowed text-black text-[13px] font-medium rounded-md"
            x-text="busy ? 'Saving…' : (editing ? 'Save' : 'Create')"
          ></button>
        </div>
      </div>
  {% endcall %}
  </div>

  <!-- Delete confirm -->
  {% call modal('deleteTarget !== null', 'deleteTarget = null', width='max-w-md') %}
    <div x-show="deleteTarget">
      <h3 class="text-[15px] font-semibold text-ink-100 tracking-tight mb-2">Delete alias?</h3>
      <p class="text-[12px] text-ink-400">
        <span class="font-mono text-ink-200" x-text="`alias:${deleteTarget}`"></span>
        will be removed. Agents requesting this alias will receive a 404 from the resolver.
      </p>
      <div class="flex justify-end gap-3 pt-4 mt-4 border-t border-white/[0.06]">
        <button type="button" @click="deleteTarget = null" class="px-3 py-1.5 text-[13px] text-ink-400 hover:text-ink-100">Cancel</button>
        <button type="button" @click="confirmDelete()" :disabled="deleting"
                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="deleting ? 'Deleting…' : 'Delete'"></span>
        </button>
      </div>
    </div>
  {% endcall %}
</div>

<script>
function llmAliasesPage() {
  return {
    rows: [],
    models: [],
    loading: true,
    busy: false,
    deleting: false,
    showCreate: false,
    editing: null,
    deleteTarget: null,
    newEntry: '',
    form: { name: '', tier: 'cheap', fallback_order: [], description: '' },
    _tierActive: {
      cheap:   'border-emerald-500/30 text-emerald-300',
      mid:     'border-cmdop-500/30 text-cmdop-300',
      premium: 'border-purple-500/30 text-purple-300',
    },

    async init() {
      await this.reload();
      this.loadModels();
    },

    async reload() {
      this.loading = true;
      try {
        const res = await fetch('/api/admin/llm/aliases?per_page=200');
        if (!res.ok) { toast('Failed to load aliases', 'error'); this.rows = []; return; }
        const body = await res.json();
        this.rows = (body && body.items) || [];
      } finally {
        this.loading = false;
      }
    },

    async loadModels() {
      try {
        const res = await fetch('/api/admin/llm/models?per_page=200');
        if (res.ok) {
          const body = await res.json();
          this.models = (body && body.items) || [];
        }
      } catch (e) { /* preview is best-effort */ }
    },

    tierBadge(tier) { return this._tierActive[tier] || 'border-white/[0.08] text-ink-500'; },

    modelsByTier(tier) {
      if (!this.models.length) return [];
      const inTier = this.models.filter(m => m.tier === tier);
      inTier.sort((a, b) => {
        if (b.priority !== a.priority) return b.priority - a.priority;
        const ap = parseFloat(a.price_prompt) || Infinity;
        const bp = parseFloat(b.price_prompt) || Infinity;
        return ap - bp;
      });
      return inTier;
    },

    modelSuggestions(tier) {
      return this.modelsByTier(tier).map(m => m.model_id);
    },

    resolveAlias(a) {
      const tier = a.tier;
      const order = a.fallback_order || [];
      const known = new Set(this.models.map(m => m.model_id));
      for (const m of order) if (known.has(m)) return m;
      const inTier = this.modelsByTier(tier);
      return inTier.length ? inTier[0].model_id : '—';
    },

    resolveExplain(a) {
      if (!this.models.length) return 'loading catalogue…';
      const tier = a.tier;
      const order = a.fallback_order || [];
      const known = new Set(this.models.map(m => m.model_id));
      for (const m of order) if (known.has(m)) return `picked from fallback_order: ${m}`;
      const inTier = this.modelsByTier(tier);
      if (!inTier.length) return `no model in tier "${tier}" — alias will 404 at dispatch`;
      const skipped = order.filter(m => !known.has(m));
      let msg = `cheapest in tier "${tier}": ${inTier[0].model_id}`;
      if (skipped.length) msg += ` (skipped unknown: ${skipped.join(', ')})`;
      return msg;
    },

    startCreate() {
      this.editing = null;
      this.showCreate = true;
      this.newEntry = '';
      this.form = { name: '', tier: 'cheap', fallback_order: [], description: '' };
    },

    cancel() {
      this.showCreate = false;
      this.editing = null;
      this.newEntry = '';
      this.form = { name: '', tier: 'cheap', fallback_order: [], description: '' };
    },

    startEdit(a) {
      this.editing = a.name;
      this.showCreate = false;
      this.newEntry = '';
      this.form = {
        name: a.name,
        tier: a.tier,
        fallback_order: [...(a.fallback_order || [])],
        description: a.description || '',
      };
    },

    addEntry() {
      const v = this.newEntry.trim();
      if (!v) return;
      if (this.form.fallback_order.includes(v)) { toast('Already in list', 'error'); return; }
      this.form.fallback_order.push(v);
      this.newEntry = '';
    },

    removeEntry(idx) {
      this.form.fallback_order.splice(idx, 1);
    },

    moveUp(idx) {
      if (idx === 0) return;
      const arr = this.form.fallback_order;
      [arr[idx - 1], arr[idx]] = [arr[idx], arr[idx - 1]];
    },

    moveDown(idx) {
      const arr = this.form.fallback_order;
      if (idx >= arr.length - 1) return;
      [arr[idx + 1], arr[idx]] = [arr[idx], arr[idx + 1]];
    },

    async submit() {
      if (this.busy) return;
      this.busy = true;
      try {
        const body = {
          tier: this.form.tier,
          fallback_order: this.form.fallback_order,
          description: this.form.description || null,
        };
        let res;
        if (this.editing) {
          res = await fetch(`/api/admin/llm/aliases/${encodeURIComponent(this.editing)}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(body),
          });
        } else {
          res = await fetch('/api/admin/llm/aliases', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ ...body, name: this.form.name.trim() }),
          });
        }
        if (!res.ok) {
          const err = await res.json().catch(() => ({}));
          toast(err.detail || 'Save failed', 'error');
          return;
        }
        toast(this.editing ? 'Saved' : 'Created', 'success');
        this.cancel();
        await this.reload();
      } finally {
        this.busy = false;
      }
    },

    askDelete(name) { this.deleteTarget = name; },

    async confirmDelete() {
      if (!this.deleteTarget || this.deleting) return;
      this.deleting = true;
      const name = this.deleteTarget;
      try {
        const res = await fetch(`/api/admin/llm/aliases/${encodeURIComponent(name)}`, { method: 'DELETE' });
        if (!res.ok) { toast('Delete failed', 'error'); return; }
        toast('Deleted', 'success');
        this.deleteTarget = null;
        await this.reload();
      } finally {
        this.deleting = false;
      }
    },
  };
}
</script>