{% extends "base.html" %}
{% block title %}Installed — 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);
  }
</style>
{% endblock %}

{% block body %}
<div
  class="min-h-screen"
  x-data="installedPage()"
  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">
      <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>
      <span class="text-white font-semibold text-sm shrink-0">Installed</span>
      <span class="text-xs text-slate-500 hidden md:inline">Your active skills — from the marketplace and your own Playground</span>
    </div>
  </div>

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

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

    <!-- Loading state -->
    <template x-if="loading">
      <p class="text-sm text-slate-500 py-8 text-center">Loading…</p>
    </template>

    <!-- Empty state -->
    <template x-if="!loading && skills.length === 0">
      <div class="border border-dashed border-border rounded-2xl p-10 text-center">
        <div class="text-3xl mb-3">📦</div>
        <p class="text-sm text-slate-300 mb-1">Nothing installed yet</p>
        <p class="text-xs text-slate-500 mb-4">
          Browse the marketplace to install a community skill — or open the Playground
          to author your own and install one of your tagged versions.
        </p>
        <div class="flex items-center justify-center gap-2">
          <a href="/skills"
            class="px-3 py-1.5 text-sm font-medium bg-accent text-white rounded-lg hover:bg-accent/90 transition-colors">
            Browse marketplace
          </a>
          <a href="/skills/playground"
            class="px-3 py-1.5 text-sm font-medium text-slate-400 hover:text-white">
            Open playground
          </a>
        </div>
      </div>
    </template>

    <!-- Skill cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" x-show="!loading && skills.length > 0">
      <template x-for="skill in skills" :key="skill.id">
        <div class="skill-card bg-panel border border-border rounded-2xl p-5 flex flex-col">

          <!-- Header: icon + name + version -->
          <div class="flex items-start gap-3 mb-3">
            <div class="text-2xl shrink-0" x-text="skill.icon || '🔧'"></div>
            <div class="min-w-0 flex-1">
              <p class="text-sm font-semibold text-white truncate" x-text="skill.name"></p>
              <p class="text-[11px] text-slate-500 truncate" x-text="'v' + (skill.version || '?')"></p>
            </div>
            <span class="px-1.5 py-0.5 text-[9px] font-medium rounded uppercase shrink-0"
                  :class="{
                    'bg-green-500/15 text-green-300':   skill.author_type === 'verified',
                    'bg-purple-500/15 text-purple-300': skill.author_type === 'platform',
                    'bg-slate-500/15 text-slate-400':   skill.author_type === 'community',
                    'bg-teal-500/15 text-teal-300':     skill.author_type === 'local',
                    'bg-orange-500/20 text-orange-300': skill.author_type === 'sideloaded',
                  }"
                  :title="skill.author_type === 'sideloaded'
                    ? 'Imported from a .ags file — publisher signature not verified by the marketplace. Only install if you trust the source.'
                    : ''"
                  x-text="skill.author_type || 'community'"></span>
          </div>

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

          <!-- 5E.6a sideload note: small inline hint that this came from
               a file import. Helps the user remember why this card has
               an orange pill without having to hover. -->
          <template x-if="skill.is_sideloaded">
            <p class="text-[11px] text-orange-300/80 mb-2 flex items-start gap-1">
              <span class="shrink-0">⚠</span>
              <span>
                Sideloaded from
                <code class="text-orange-200" x-text="skill.sideload_filename || 'a .ags file'"></code>
                — not verified by the marketplace.
              </span>
            </p>
          </template>

          <!-- Footer: author + actions -->
          <div class="flex items-center justify-between pt-3 mt-auto border-t border-border/40 text-[11px]">
            <span class="text-slate-500 truncate"
              x-text="(typeof skill.author === 'string') ? skill.author : (skill.author && skill.author.name) || 'anon'"></span>
            <div class="flex items-center gap-2 shrink-0">
              <button type="button"
                @click="openClearModal(skill)"
                class="text-slate-400 hover:text-white transition-colors"
                title="Clear per-agent data for this skill"
              >Clear data</button>
              <button type="button"
                @click="confirmUninstall(skill)"
                :disabled="uninstalling === skill.id"
                class="text-red-300 hover:text-red-200 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                title="Uninstall this skill"
              >
                <span x-show="uninstalling !== skill.id">Uninstall</span>
                <span x-show="uninstalling === skill.id">…</span>
              </button>
            </div>
          </div>
        </div>
      </template>
    </div>

    <!-- Error -->
    <template x-if="loadError">
      <p class="text-sm text-red-400 py-4" x-text="loadError"></p>
    </template>
  </div>

  <!-- Clear-data modal (lifted from /skills) -->
  <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-[11px] text-slate-500 mt-0.5">
          Resets per-agent state for this skill. Won't uninstall.
        </p>
      </div>

      <div class="flex-1 overflow-y-auto px-5 py-4">
        <template x-if="clearModal.loading">
          <p class="text-sm text-slate-500 py-2">Loading agents…</p>
        </template>
        <template x-if="!clearModal.loading && clearModal.agents.length === 0">
          <p class="text-sm text-slate-500 py-2">No agents have data for this skill.</p>
        </template>
        <template x-for="agent in clearModal.agents" :key="agent.agent_id">
          <div class="flex items-center justify-between py-1.5 border-b border-border/40 last:border-b-0">
            <span class="text-sm text-slate-300" x-text="agent.agent_name"></span>
            <button type="button" @click="clearAgentData(agent)"
              :disabled="clearModal.clearing[agent.agent_id]"
              class="text-xs text-red-300 hover:text-red-200 disabled:opacity-40">
              <span x-show="!clearModal.clearing[agent.agent_id]">Clear</span>
              <span x-show="clearModal.clearing[agent.agent_id]">…</span>
            </button>
          </div>
        </template>
      </div>

      <div class="px-5 py-3 border-t border-border flex justify-end">
        <button type="button" @click="clearModal.open = false"
          class="px-3 py-1 text-xs text-slate-400 hover:text-white">Close</button>
      </div>
    </div>
  </div>

</div>

<script>
function installedPage() {
  return {
    loading: true,
    loadError: '',
    skills: [],
    uninstalling: null,    // skill.id while a delete is in flight
    clearModal: {
      open: false, loading: false,
      skillKey: '', skillName: '',
      agents: [], clearing: {},
    },

    async init() {
      await this.loadInstalled();
    },

    async loadInstalled() {
      this.loading = true;
      this.loadError = '';
      try {
        const r = await fetch('/api/skills/installed');
        if (!r.ok) {
          this.loadError = `Server returned ${r.status}`;
          return;
        }
        const data = await r.json();
        this.skills = data.skills || [];
      } catch (e) {
        this.loadError = 'Network error: ' + (e.message || e);
      } finally { this.loading = false; }
    },

    async confirmUninstall(skill) {
      // 5E.4: copy + behaviour split by source.
      // - local: clear _active.txt. Source dirs stay so the user can keep
      //   editing in the playground and re-install later.
      // - community / verified / platform: rmtree the install dir.
      //   Re-install requires going back to the marketplace.
      const isLocal = skill.is_local || skill.author_type === 'local';
      const prompt = isLocal
        ? `Uninstall ${skill.name || skill.id}?\n\n` +
          "This deactivates the skill — your agents lose access on next restart. " +
          "Source files (snapshot + tagged versions) stay in the Playground so you can keep editing or re-install."
        : `Uninstall ${skill.name || skill.id}?\n\n` +
          "This removes the skill from your machine. Re-installing later " +
          "fetches it again from the marketplace. Per-agent memory rows are kept — " +
          "use Clear data first if you want a fully clean slate.";
      if (!window.confirm(prompt)) return;
      this.uninstalling = skill.id;
      try {
        const r = await fetch(
          '/api/skills/installed/' + encodeURIComponent(skill.id),
          {method: 'DELETE'},
        );
        const data = await r.json();
        if (!r.ok) {
          alert(data.error || `Server returned ${r.status}`);
          return;
        }
        await this.loadInstalled();
      } catch (e) {
        alert('Network error: ' + (e.message || e));
      } finally { this.uninstalling = null; }
    },

    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 || [];
      } catch (e) { /* leave list empty */ }
      finally { this.clearModal.loading = false; }
    },

    async clearAgentData(agent) {
      this.clearModal.clearing[agent.agent_id] = true;
      try {
        await fetch(`/api/skills/${encodeURIComponent(this.clearModal.skillKey)}/clear`, {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({profile_id: agent.agent_id}),
        });
        // Refresh agent list — entry might drop off if data is gone
        const r = await fetch(`/api/skills/${encodeURIComponent(this.clearModal.skillKey)}/users`);
        const d = await r.json();
        if (d.ok) this.clearModal.agents = d.agents || [];
      } catch (e) { /* surface inline later */ }
      finally { this.clearModal.clearing[agent.agent_id] = false; }
    },
  };
}
</script>
{% endblock %}