{% extends "base.html" %}
{% block title %}Skills — Ageri{% endblock %}

{% block head %}
<style>
  .skill-card {
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .skill-card:hover {
    border-color: rgb(var(--color-accent) / 0.4);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  }
  .tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.6;
    background: rgb(var(--color-border) / 0.6);
    color: #94a3b8;
    white-space: nowrap;
  }
  .cat-tab {
    padding: 5px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
  }
  .cat-tab.active {
    background: rgb(var(--color-accent));
    color: #fff;
  }
  .cat-tab:not(.active) {
    color: #94a3b8;
  }
  .cat-tab:not(.active):hover {
    background: rgba(255,255,255,0.06);
    color: #e2e8f0;
  }
</style>
{% endblock %}

{% block body %}
<div
  class="min-h-screen"
  x-data="skillsPage()"
  x-init="init()"
>

  <!-- ── Top bar ─────────────────────────────────────────────────────────── -->
  <div class="sticky top-0 z-30 bg-surface/95 backdrop-blur border-b border-border">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 flex items-center gap-4 h-14">
      <!-- Back -->
      <a href="/"
        class="flex items-center gap-1.5 text-slate-400 hover:text-white transition-colors text-sm shrink-0">
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
        </svg>
        <span class="hidden sm:inline">Back</span>
      </a>

      <div class="w-px h-5 bg-border shrink-0"></div>

      <!-- Title -->
      <span class="text-white font-semibold text-sm shrink-0">Skills</span>

      <!-- Source indicator -->
      <template x-if="source === 'remote'">
        <span class="hidden sm:flex items-center gap-1 text-[10px] font-medium text-teal">
          <span class="w-1.5 h-1.5 rounded-full bg-teal inline-block"></span>
          skills.ageri.ai
        </span>
      </template>
      <template x-if="source === 'local'">
        <span class="hidden sm:flex items-center gap-1 text-[10px] font-medium text-slate-500"
          title="skills.ageri.ai is unreachable — showing local catalog">
          <span class="w-1.5 h-1.5 rounded-full bg-slate-500 inline-block"></span>
          Local catalog
        </span>
      </template>

      <div class="flex-1"></div>

      <!-- Search box -->
      <div class="relative w-full max-w-xs">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500 pointer-events-none"
          fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 1 0 5 11a6 6 0 0 0 12 0z"/>
        </svg>
        <input
          type="text"
          placeholder="Search skills…"
          x-model="query"
          class="w-full pl-9 pr-3 py-1.5 text-sm bg-panel border border-border rounded-lg text-slate-200 placeholder-slate-500 focus:border-accent/60"
        >
      </div>
    </div>
  </div>

  {% with active='marketplace' %}{% include "_skills_nav.html" %}{% endwith %}

  <!-- ── Main content ─────────────────────────────────────────────────────── -->
  <div class="max-w-5xl mx-auto px-4 sm:px-6 py-8">

    <!-- Header blurb -->
    <div class="mb-6 flex items-start justify-between gap-4">
      <div>
        <h1 class="text-xl font-semibold text-white mb-1">Skill Marketplace</h1>
        <p class="text-sm text-slate-400">Browse and install skills to extend what your agents can do.</p>
      </div>
      <!-- Marketplace = browse + install. Authoring lives in the
           playground; the Create button moved there 2026-05-14. -->
      <a
        href="/skills/playground"
        class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium
               text-teal bg-teal/10 border border-teal/30 rounded-lg
               hover:bg-teal/20 hover:border-teal/50 transition-colors flex-shrink-0"
        title="Author + iterate on local skills"
      >
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
        </svg>
        Playground
      </a>
    </div>

    <!-- Category tabs. "Installed" moved out of this row when
         /skills/installed became its own page — categories here are
         strictly topical now. -->
    <div class="flex items-center flex-wrap gap-1.5 mb-6">
      {% for cat in categories %}
      <button
        class="cat-tab"
        :class="activeCategory === '{{ cat }}' ? 'active' : ''"
        @click="activeCategory = '{{ cat }}'"
      >
        {{ cat }}
      </button>
      {% endfor %}
    </div>

    <!-- Loading state -->
    <template x-if="loading">
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <template x-for="i in 6" :key="i">
          <div class="bg-panel border border-border rounded-2xl p-5 animate-pulse">
            <div class="flex items-center gap-3 mb-3">
              <div class="w-10 h-10 rounded-xl bg-white/5"></div>
              <div>
                <div class="h-3.5 w-24 bg-white/5 rounded mb-1.5"></div>
                <div class="h-2.5 w-16 bg-white/5 rounded"></div>
              </div>
            </div>
            <div class="h-2.5 w-full bg-white/5 rounded mb-1.5"></div>
            <div class="h-2.5 w-3/4 bg-white/5 rounded"></div>
          </div>
        </template>
      </div>
    </template>

    <!-- Error state -->
    <template x-if="!loading && loadError">
      <div class="text-center py-16">
        <div class="text-3xl mb-3">⚠️</div>
        <p class="text-slate-400 text-sm" x-text="loadError"></p>
        <button @click="init()" class="mt-4 text-accent text-sm hover:underline">Try again</button>
      </div>
    </template>

    <!-- Skills grid -->
    <template x-if="!loading && !loadError">
      <div>
        <!-- Empty state -->
        <template x-if="filteredSkills.length === 0">
          <div class="text-center py-16">
            <div class="text-3xl mb-3">🔎</div>
            <p class="text-slate-400 text-sm">No skills match your search.</p>
            <button @click="query = ''; activeCategory = 'All'"
              class="mt-3 text-accent text-sm hover:underline">Clear filters</button>
          </div>
        </template>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <template x-for="skill in filteredSkills" :key="skill.id">
            <div class="skill-card bg-panel border border-border rounded-2xl p-5 flex flex-col">

              <!-- Header row: icon + name + badges -->
              <div class="flex items-start gap-3 mb-3">
                <!-- Icon -->
                <div class="w-10 h-10 rounded-xl bg-surface flex items-center justify-center text-xl flex-shrink-0 border border-border/60"
                  x-text="skill.icon"></div>

                <!-- Name + meta -->
                <div class="flex-1 min-w-0">
                  <div class="flex items-center gap-1.5 flex-wrap">
                    <span class="text-white font-semibold text-sm" x-text="skill.name"></span>
                    <!-- Version -->
                    <span class="text-[10px] text-slate-500 font-mono" x-text="'v' + skill.version"></span>
                    <!-- Trust badge -->
                    <template x-if="skill.trust_level === 'platform'">
                      <span class="text-[9px] font-semibold px-1.5 py-0.5 rounded bg-indigo-500/15 text-accent border border-accent/20 leading-none shrink-0">Platform</span>
                    </template>
                    <template x-if="skill.trust_level === 'verified'">
                      <span class="text-[9px] font-semibold px-1.5 py-0.5 rounded bg-teal/10 text-teal border border-teal/20 leading-none shrink-0">Verified</span>
                    </template>
                    <!-- License badge (Phase 5A.4 step 7) -->
                    <template x-if="skill.license && skill.license !== 'proprietary'">
                      <span
                        class="text-[9px] font-semibold px-1.5 py-0.5 rounded bg-slate-500/15 text-slate-400 border border-slate-500/30 leading-none shrink-0"
                        :title="'License: ' + skill.license"
                        x-text="skill.license"
                      ></span>
                    </template>
                  </div>
                  <!-- Author -->
                  <div class="flex items-center gap-1 mt-0.5">
                    <svg class="w-3 h-3 text-slate-500 shrink-0" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/>
                    </svg>
                    <span class="text-[11px] text-slate-500 truncate" x-text="skill.author"></span>
                  </div>
                </div>

                <!-- Installed check -->
                <template x-if="skill.installed">
                  <div class="w-6 h-6 rounded-full bg-teal/15 flex items-center justify-center flex-shrink-0 mt-0.5">
                    <svg class="w-3.5 h-3.5 text-teal" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                    </svg>
                  </div>
                </template>
              </div>

              <!-- Description -->
              <p class="text-sm text-slate-400 leading-relaxed mb-3 flex-1 line-clamp-3"
                x-text="skill.description"></p>

              <!-- Requirements — opens a modal with per-credential help.
                   Long lists (e.g. Google OAuth = 2 keys, AWS = 3 keys)
                   used to overflow the card; the compact "Requires (N)"
                   button keeps the card tidy while keeping the info
                   one click away. -->
              <template x-if="skill.requires && skill.requires.length > 0">
                <button
                  type="button"
                  @click="openRequiresModal(skill)"
                  class="flex items-center gap-1.5 mb-3 text-amber-400/80 hover:text-amber-300 transition-colors text-[11px]"
                >
                  <svg class="w-3.5 h-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 21H7l-2-4-4-2 1.257-2.257A6 6 0 0115 9z"/>
                  </svg>
                  <span>
                    Requires <span x-text="skill.requires.length"></span>
                    credential<span x-show="skill.requires.length > 1">s</span> ›
                  </span>
                </button>
              </template>

              <!-- Footer: tags + pricing + action -->
              <div class="flex items-end justify-between gap-2 mt-auto pt-2">
                <!-- Tags — labelled prefix so the pills aren't dangling
                     loose alongside the "Requires:" / version lines. -->
                <template x-if="(skill.tags || []).length > 0">
                  <div class="flex items-center flex-wrap gap-1.5 min-w-0">
                    <span class="text-[11px] text-slate-500 shrink-0">Tags:</span>
                    <template x-for="tag in skill.tags.slice(0, 3)" :key="tag">
                      <span class="tag-pill" x-text="tag"></span>
                    </template>
                  </div>
                </template>
                <template x-if="(skill.tags || []).length === 0">
                  <span></span>
                </template>

                <!-- Pricing + action -->
                <div class="flex items-center gap-2 flex-shrink-0">
                  <!-- Pricing pill -->
                  <span class="text-[10px] font-semibold text-slate-500" x-text="skill.pricing === 'free' ? 'Free' : skill.pricing"></span>

                  <!-- Action button -->
                  <template x-if="skill.installed">
                    <div class="flex items-center gap-2">
                      <span class="text-[11px] font-semibold text-teal">Installed</span>
                      <button
                        @click="openClearModal(skill)"
                        class="text-[11px] font-medium px-2 py-1 rounded-md bg-white/5 text-slate-400 hover:bg-red-500/15 hover:text-red-400 border border-border hover:border-red-500/40 transition-colors"
                        title="Clear per-agent data for this skill"
                      >Clear data</button>
                    </div>
                  </template>
                  <template x-if="!skill.installed">
                    <button
                      @click="installSkill(skill)"
                      :disabled="installing === skill.id"
                      class="text-[11px] font-semibold px-3 py-1.5 rounded-lg bg-accent/15 text-accent hover:bg-accent/25 border border-accent/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
                    >
                      <template x-if="installing !== skill.id">
                        <span>Install</span>
                      </template>
                      <template x-if="installing === skill.id">
                        <span class="flex items-center gap-1">
                          <svg class="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                          </svg>
                          <span>Installing…</span>
                        </span>
                      </template>
                    </button>
                  </template>
                </div>
              </div>

              <!-- Source + Fork actions (Phase 5A.4 step 7) — present
                   View source + Use-as-starting-point removed
                   2026-05-14: marketplace skills are publishers' IP;
                   the marketplace card surfaces only what the user
                   needs to decide whether to install (name, description,
                   declared tools, trust level, pricing). To read your
                   OWN local skills' source, open them in the
                   /skills/playground editor. -->
            </div>
          </template>
        </div>

        <!-- Footer note -->
        <template x-if="filteredSkills.length > 0">
          <p class="text-center text-xs text-slate-600 mt-8">
            <a href="https://github.com/ageri-platform/ageri-marketplace" class="hover:text-slate-400 transition-colors" target="_blank">Contribute a skill</a>
          </p>
        </template>
      </div>
    </template>

  </div>

  <!-- View source + Use-as-starting-point modals removed 2026-05-14
       per the publisher-source-protection policy. Marketplace cards
       expose what's needed to install, not the source. To read your
       own local skills' source, use /skills/playground. -->

  <!-- ── Requires modal — per-credential help ───────────────────────────── -->
  <div
    x-show="requiresModal.open"
    x-cloak
    class="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4"
    @click.self="requiresModal.open = false"
    @keydown.escape.window="requiresModal.open = false"
  >
    <div class="bg-slate-900 border border-border rounded-2xl w-full max-w-md shadow-2xl">
      <div class="px-5 py-3 border-b border-border">
        <p class="text-xs text-slate-500">Required credentials</p>
        <p class="text-sm font-semibold text-white truncate"
          x-text="requiresModal.skillName"></p>
      </div>
      <div class="p-5 space-y-3 max-h-[60vh] overflow-y-auto">
        <p class="text-[11px] text-slate-400 leading-relaxed">
          You'll be prompted for these after install, or you can pre-fill them
          via <code class="text-slate-300">skill.properties</code>.
        </p>
        <template x-for="req in requiresModal.entries" :key="req.key">
          <div class="border border-border rounded-lg p-3 bg-surface/40">
            <div class="flex items-start justify-between gap-2">
              <code class="text-xs font-mono text-amber-300/90 break-all" x-text="req.key"></code>
              <template x-if="req.docs_url">
                <a :href="req.docs_url" target="_blank" rel="noopener"
                  class="text-[10px] text-accent hover:underline shrink-0"
                  title="Open docs in a new tab"
                >Get →</a>
              </template>
            </div>
            <template x-if="req.description">
              <p class="text-[11px] text-slate-400 mt-1.5 leading-relaxed" x-text="req.description"></p>
            </template>
          </div>
        </template>
      </div>
      <div class="px-5 py-3 border-t border-border flex justify-end">
        <button type="button" @click="requiresModal.open = false"
          class="px-3 py-1.5 text-xs text-slate-400 hover:text-white">Close</button>
      </div>
    </div>
  </div>

  <!-- ── Clear skill data modal ───────────────────────────────────────────── -->
  <div
    x-show="clearModal.open"
    x-cloak
    class="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4"
    @click.self="clearModal.open = false"
  >
    <div class="bg-slate-900 border border-border rounded-2xl w-full max-w-md max-h-[80vh] flex flex-col shadow-2xl">
      <div class="px-5 py-4 border-b border-border">
        <h2 class="text-base font-semibold text-slate-200">
          Clear data — <span x-text="clearModal.skillName"></span>
        </h2>
        <p class="text-xs text-slate-500 mt-1">
          Click <span class="text-slate-400">×</span> on an agent to wipe this skill's data for them (browser sessions, caches, scoped memory). Doesn't uninstall the skill.
        </p>
      </div>

      <div class="flex-1 overflow-y-auto px-5 py-4">
        <template x-if="clearModal.loading">
          <div class="text-center text-sm text-slate-500 py-6">Loading agents…</div>
        </template>

        <template x-if="!clearModal.loading && clearModal.agents.length === 0">
          <div class="text-center text-sm text-slate-500 py-6">
            No agents have data for this skill.
          </div>
        </template>

        <template x-if="!clearModal.loading && clearModal.agents.length > 0">
          <div class="flex flex-wrap gap-1.5">
            <template x-for="agent in clearModal.agents" :key="agent.id">
              <div
                class="inline-flex items-center gap-1.5 pl-2.5 pr-1 py-1 rounded-full border text-xs transition-opacity"
                :class="clearModal.clearing[agent.id] === true ? 'opacity-50 border-border bg-white/3' : 'border-border bg-white/5 text-slate-300'"
              >
                <span class="font-medium" x-text="agent.name"></span>
                <span x-show="agent.assigned && !agent.has_data" class="text-[9px] uppercase tracking-wide text-slate-500">assigned</span>
                <span x-show="agent.has_data" class="text-[9px] uppercase tracking-wide text-amber-400">has data</span>
                <button
                  type="button"
                  :disabled="clearModal.clearing[agent.id] === true"
                  @click="clearAgentData(agent)"
                  class="w-5 h-5 rounded-full flex items-center justify-center text-slate-500 hover:text-red-400 hover:bg-red-500/15 transition-colors cursor-pointer disabled:cursor-wait"
                  :title="'Clear data for ' + agent.name"
                >
                  <svg x-show="clearModal.clearing[agent.id] !== true" class="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                  </svg>
                  <svg x-show="clearModal.clearing[agent.id] === true" class="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
                  </svg>
                </button>
              </div>
            </template>
          </div>
        </template>
      </div>

      <div class="px-5 py-3 border-t border-border flex items-center justify-end">
        <button
          @click="clearModal.open = false"
          class="text-sm text-slate-300 hover:text-white px-3 py-1.5 transition-colors"
        >Done</button>
      </div>
    </div>
  </div>

  <!-- ── Install result toast ─────────────────────────────────────────────── -->
  <div
    x-show="toast"
    x-cloak
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0 translate-y-2"
    x-transition:enter-end="opacity-100 translate-y-0"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100 translate-y-0"
    x-transition:leave-end="opacity-0 translate-y-2"
    class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 px-5 py-3 rounded-xl shadow-xl border text-sm font-medium max-w-sm w-full mx-4"
    :class="toast?.ok ? 'bg-teal/15 border-teal/30 text-teal' : 'bg-red-500/15 border-red-500/30 text-red-400'"
    x-text="toast?.message"
  ></div>

</div>

<script>
// Phase 5A.4 step 7 — canonical list of permissive SPDX licenses.
function skillsPage() {
  return {
    loading: true,
    loadError: null,
    allSkills: [],
    source: null,   // 'remote' | 'local'
    query: '',
    activeCategory: 'All',
    installing: null,
    toast: null,
    _toastTimer: null,

    // ── Requires popup state ───────────────────────────────────────────
    requiresModal: {
      open: false,
      skillName: '',
      entries: [],   // [{key, description, docs_url}, ...]
    },

    openRequiresModal(skill) {
      // Normalise the manifest's `requires` field — accepts either
      // ["KEY_A", "KEY_B"] (legacy) OR [{key, description, docs_url}].
      const raw = skill.requires || [];
      const entries = raw.map(item => {
        if (typeof item === 'string') {
          return {key: item, description: '', docs_url: ''};
        }
        return {
          key: item.key || '',
          description: item.description || '',
          docs_url: item.docs_url || '',
        };
      }).filter(e => e.key);
      this.requiresModal.entries = entries;
      this.requiresModal.skillName = skill.name || skill.id || '';
      this.requiresModal.open = true;
    },

    get installedCount() {
      return this.allSkills.filter(s => s.installed).length;
    },

    get filteredSkills() {
      let skills = this.allSkills;

      // Category filter (topical only — Installed moved to /skills/installed)
      if (this.activeCategory !== 'All') {
        skills = skills.filter(s => s.category === this.activeCategory);
      }

      // Text search — name, description, tags
      const q = this.query.trim().toLowerCase();
      if (q) {
        skills = skills.filter(s =>
          s.name.toLowerCase().includes(q) ||
          s.description.toLowerCase().includes(q) ||
          s.tags.some(t => t.toLowerCase().includes(q))
        );
      }

      // Sort: installed first, then alphabetical
      return [...skills].sort((a, b) => {
        if (a.installed !== b.installed) return a.installed ? -1 : 1;
        return a.name.localeCompare(b.name);
      });
    },

    async init() {
      this.loading = true;
      this.loadError = null;
      try {
        const r = await fetch('/api/marketplace/catalog');
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        const data = await r.json();
        this.allSkills = data.skills || [];
        this.source = data.source || 'local';
      } catch (e) {
        this.loadError = 'Could not load skill catalog. ' + e.message;
      } finally {
        this.loading = false;
      }
    },

    async installSkill(skill) {
      this.installing = skill.id;
      try {
        const r = await fetch(`/api/skills/install/${encodeURIComponent(skill.id)}`, {
          method: 'POST',
        });
        const d = await r.json();
        this._showToast(d.ok, d.ok ? `${skill.name} installed.` : (d.error || 'Install failed.'));
        if (d.ok) {
          skill.installed = true;
        }
      } catch (e) {
        this._showToast(false, 'Network error: ' + e.message);
      } finally {
        this.installing = null;
      }
    },

    // ── Clear per-agent skill data ────────────────────────────────────────
    clearModal: {
      open: false,
      loading: false,
      skillKey: '',
      skillName: '',
      agents: [],
      clearing: {},     // agent_id → true while the request is in flight
    },

    async openClearModal(skill) {
      this.clearModal.open = true;
      this.clearModal.loading = true;
      this.clearModal.skillKey = skill.id;
      this.clearModal.skillName = skill.name;
      this.clearModal.agents = [];
      this.clearModal.clearing = {};
      try {
        const r = await fetch(`/api/skills/${encodeURIComponent(skill.id)}/users`);
        const d = await r.json();
        if (d.ok) {
          this.clearModal.agents = d.agents || [];
        } else {
          this._showToast(false, d.error || 'Failed to load agents.');
          this.clearModal.open = false;
        }
      } catch (e) {
        this._showToast(false, 'Network error: ' + e.message);
        this.clearModal.open = false;
      } finally {
        this.clearModal.loading = false;
      }
    },

    async clearAgentData(agent) {
      if (this.clearModal.clearing[agent.id] === true) return;
      // Use object spread so Alpine detects the change; `delete` on a reactive
      // dict doesn't always re-trigger :disabled / x-show.
      this.clearModal.clearing = { ...this.clearModal.clearing, [agent.id]: true };
      try {
        const r = await fetch(`/api/skills/${encodeURIComponent(this.clearModal.skillKey)}/clear`, {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({profile_ids: [agent.id]}),
        });
        const d = await r.json();
        const res = (d && d.results && d.results[0]) || {ok: false};
        if (d.ok && res.ok) {
          this.clearModal.agents = this.clearModal.agents.filter(a => a.id !== agent.id);
          this._showToast(true, `Cleared data for ${agent.name}.`);
        } else {
          this._showToast(false, res.error || d.error || 'Clear failed.');
        }
      } catch (e) {
        this._showToast(false, 'Network error: ' + e.message);
      } finally {
        const next = { ...this.clearModal.clearing };
        delete next[agent.id];
        this.clearModal.clearing = next;
      }
    },

    _showToast(ok, message) {
      clearTimeout(this._toastTimer);
      this.toast = { ok, message };
      this._toastTimer = setTimeout(() => { this.toast = null; }, 4000);
    },
  };
}
</script>
{% endblock %}