{% extends "base.html" %}
{% block title %}Create a skill — Ageri{% endblock %}

{% block head %}
<style>
  .create-card {
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
  }
  .create-card:hover:not(.disabled) {
    border-color: rgb(var(--color-accent) / 0.5);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  }
  .create-card.disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
  .file-drop {
    border: 1.5px dashed rgb(var(--color-border));
    border-radius: 12px;
    transition: border-color 0.15s, background-color 0.15s;
  }
  .file-drop.dragging,
  .file-drop:hover {
    border-color: rgb(var(--color-accent) / 0.7);
    background-color: rgb(var(--color-accent) / 0.06);
  }
  .manifest-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px 16px;
    padding: 6px 0;
    border-bottom: 1px solid rgb(var(--color-border) / 0.4);
    font-size: 13px;
  }
  .manifest-row:last-child { border-bottom: none; }
  .manifest-key { color: #94a3b8; font-weight: 500; }
  .manifest-val { color: #e2e8f0; word-break: break-word; }
  .cli-snippet {
    background: rgb(var(--color-panel));
    border: 1px solid rgb(var(--color-border));
    border-radius: 8px;
    padding: 12px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: #cbd5e1;
    overflow-x: auto;
    white-space: pre;
  }
</style>
{% endblock %}

{% block body %}
<div
  class="min-h-screen"
  x-data="createSkillPage()"
  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-4xl 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"
        title="Back to your agents">
        <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">Create a skill</span>
    </div>
  </div>

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

    <!-- Header -->
    <div class="mb-6">
      <h1 class="text-xl font-semibold text-white mb-1">Create a new skill</h1>
      <p class="text-sm text-slate-400">
        Pick how you want to author the skill. All three paths produce the same `.ags` bundle ready for the marketplace.
      </p>
    </div>

    <!-- Author-profile warning — surfaced once, dismissible. -->
    <template x-if="!authorProfile && !authorWarningDismissed">
      <div class="mb-6 p-4 bg-amber-500/10 border border-amber-500/30 rounded-lg flex items-start gap-3">
        <svg class="w-5 h-5 text-amber-400 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.5-1.67 1.73-3L13.73 4c-.77-1.33-2.69-1.33-3.46 0L3.34 16c-.77 1.33.19 3 1.73 3z"/>
        </svg>
        <div class="flex-1">
          <p class="text-sm text-amber-300 font-medium mb-1">No marketplace author registered</p>
          <p class="text-xs text-slate-400 mb-2">
            You can scaffold + author a skill locally, but publishing to the marketplace requires registration first. Run:
          </p>
          <div class="cli-snippet text-xs mb-2">python -m ageri skill author-register --id &lt;handle&gt; --namespace &lt;your.ageri.ai&gt; --name "&lt;display name&gt;"</div>
          <button @click="authorWarningDismissed = true" class="text-xs text-amber-300/80 hover:text-amber-200 underline">Dismiss for now</button>
        </div>
      </div>
    </template>

    <!-- ── Three branch cards ─────────────────────────────────────────────── -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">

      <!-- BRANCH 1: Import existing .ags -->
      <button
        type="button"
        class="create-card text-left bg-panel border border-border rounded-2xl p-5"
        :class="branch === 'import' ? 'border-accent/60' : ''"
        @click="branch = 'import'; resetImportState()"
      >
        <div class="w-10 h-10 rounded-xl bg-accent/15 flex items-center justify-center mb-3">
          <svg class="w-5 h-5 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5-5m0 0l5 5m-5-5v12"/>
          </svg>
        </div>
        <h3 class="text-white font-medium text-sm mb-1">Import existing <code class="text-xs">.ags</code></h3>
        <p class="text-xs text-slate-400 leading-relaxed">
          Already packed a skill locally? Upload the bundle, preview the manifest, publish to the marketplace.
        </p>
      </button>

      <!-- BRANCH 2: Record (browser) -->
      <button
        type="button"
        class="create-card text-left bg-panel border border-border rounded-2xl p-5"
        :class="branch === 'record' ? 'border-accent/60' : ''"
        @click="branch = 'record'"
      >
        <div class="w-10 h-10 rounded-xl bg-teal/15 flex items-center justify-center mb-3">
          <svg class="w-5 h-5 text-teal" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"/>
            <circle cx="12" cy="12" r="4" fill="currentColor"/>
          </svg>
        </div>
        <h3 class="text-white font-medium text-sm mb-1">Record (browser)</h3>
        <p class="text-xs text-slate-400 leading-relaxed">
          Demonstrate a website workflow once; Ageri captures + synthesises the skill. Best for form-fill + scraping.
        </p>
      </button>

      <!-- BRANCH 3: From CLI -->
      <button
        type="button"
        class="create-card text-left bg-panel border border-border rounded-2xl p-5"
        :class="branch === 'cli' ? 'border-accent/60' : ''"
        @click="branch = 'cli'"
      >
        <div class="w-10 h-10 rounded-xl bg-purple/15 flex items-center justify-center mb-3"
          style="background-color: rgba(168, 85, 247, 0.15);">
          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
            style="color: rgb(168, 85, 247);">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
          </svg>
        </div>
        <h3 class="text-white font-medium text-sm mb-1">From CLI</h3>
        <p class="text-xs text-slate-400 leading-relaxed">
          Scaffold + edit + publish via `ageri skill init`. For developers who prefer the terminal — or use Claude / Cursor.
        </p>
      </button>
    </div>

    <!-- ── Selected branch — body ─────────────────────────────────────────── -->

    <!-- IMPORT branch body -->
    <template x-if="branch === 'import'">
      <div class="bg-panel border border-border rounded-2xl p-6">

        <!-- Step 1: file upload -->
        <template x-if="importStep === 'upload'">
          <div>
            <h2 class="text-white font-medium text-base mb-2">Upload your <code class="text-sm">.ags</code> bundle</h2>
            <p class="text-xs text-slate-400 mb-4">
              We'll validate the manifest first and show you a preview before anything ships to the marketplace.
            </p>

            <label
              class="file-drop block p-6 text-center cursor-pointer"
              :class="dragging ? 'dragging' : ''"
              @dragover.prevent="dragging = true"
              @dragleave.prevent="dragging = false"
              @drop.prevent="dragging = false; handleFile($event.dataTransfer.files[0])"
            >
              <svg class="w-8 h-8 text-slate-500 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.9 5 5 0 019.9-1A5.002 5.002 0 0117 16M9 19l3-3m0 0l3 3m-3-3v6"/>
              </svg>
              <p class="text-sm text-slate-300 mb-1">
                <template x-if="!selectedFile">
                  <span>Drop a <code class="text-xs">.ags</code> bundle here, or click to browse</span>
                </template>
                <template x-if="selectedFile">
                  <span class="text-accent" x-text="selectedFile.name"></span>
                </template>
              </p>
              <p class="text-[11px] text-slate-500" x-show="!selectedFile">
                50 MB max per spec §2
              </p>
              <input
                type="file"
                accept=".ags,application/gzip,application/x-tar"
                class="hidden"
                @change="handleFile($event.target.files[0])"
              >
            </label>

            <template x-if="importError">
              <p class="mt-3 text-xs text-red-400" x-text="importError"></p>
            </template>

            <div class="mt-4 flex items-center justify-end gap-2">
              <button
                type="button"
                @click="previewBundle()"
                :disabled="!selectedFile || previewing"
                class="px-4 py-1.5 text-sm font-medium bg-accent text-white rounded-lg
                       hover:bg-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
              >
                <span x-show="!previewing">Validate + preview</span>
                <span x-show="previewing">Validating…</span>
              </button>
            </div>
          </div>
        </template>

        <!-- Step 2: preview manifest -->
        <template x-if="importStep === 'preview'">
          <div>
            <h2 class="text-white font-medium text-base mb-2">Preview — review before publishing</h2>
            <p class="text-xs text-slate-400 mb-4">
              The manifest was validated successfully. Confirm the details below match what you want to publish.
            </p>

            <div class="bg-surface/60 border border-border rounded-lg p-4 mb-4">
              <template x-for="row in manifestRows" :key="row.key">
                <div class="manifest-row">
                  <div class="manifest-key" x-text="row.key"></div>
                  <div class="manifest-val" x-text="row.val"></div>
                </div>
              </template>
            </div>

            <template x-if="!authorProfile">
              <div class="mb-4 p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg">
                <p class="text-xs text-amber-300">
                  No author registered — you can preview but not publish until you run
                  <code class="text-[11px]">ageri skill author-register</code>.
                </p>
              </div>
            </template>

            <template x-if="uploadError">
              <p class="mb-3 text-xs text-red-400" x-text="uploadError"></p>
            </template>

            <div class="flex items-center justify-between gap-2">
              <button
                type="button"
                @click="resetImportState()"
                class="px-3 py-1.5 text-sm text-slate-400 hover:text-white"
              >
                ← Pick a different file
              </button>
              <button
                type="button"
                @click="uploadBundle()"
                :disabled="!authorProfile || uploading"
                class="px-4 py-1.5 text-sm font-medium bg-accent text-white rounded-lg
                       hover:bg-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
              >
                <span x-show="!uploading">Publish to marketplace</span>
                <span x-show="uploading">Uploading…</span>
              </button>
            </div>
          </div>
        </template>

        <!-- Step 3: success -->
        <template x-if="importStep === 'success'">
          <div class="text-center py-6">
            <div class="w-12 h-12 mx-auto mb-3 rounded-full bg-green-500/15 flex items-center justify-center">
              <svg class="w-6 h-6 text-green-400" 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>
            <h2 class="text-white font-medium text-base mb-1">Published</h2>
            <p class="text-xs text-slate-400 mb-4">
              Your skill is now installable from the marketplace.
            </p>
            <p class="text-[11px] text-slate-500 mb-5" x-show="uploadResult && uploadResult.marketplace_uri">
              Install with:
              <code class="text-slate-300" x-text="uploadResult ? ('python -m ageri skill install ' + uploadResult.marketplace_uri) : ''"></code>
            </p>
            <div class="flex items-center justify-center gap-2">
              <button
                type="button"
                @click="resetImportState()"
                class="px-3 py-1.5 text-sm text-slate-400 hover:text-white"
              >
                Upload another
              </button>
              <a
                href="/"
                class="px-4 py-1.5 text-sm font-medium bg-accent text-white rounded-lg hover:bg-accent/90 transition-colors"
              >
                Back
              </a>
            </div>
          </div>
        </template>
      </div>
    </template>

    <!-- RECORD branch body -->
    <template x-if="branch === 'record'">
      <div class="space-y-4">

        <!-- Top section: launch a new recording -->
        <div class="bg-panel border border-border rounded-2xl p-6">
          <h2 class="text-white font-medium text-base mb-2">Record a workflow</h2>
          <p class="text-sm text-slate-400 mb-4">
            The recorder watches you do a workflow on a website once, then synthesises a working skill from what it saw. Best for skills that drive forms, dashboards, or vendor portals.
          </p>
          <p class="text-xs text-slate-500 mb-5">
            Recording happens inside the Ageri chat (Ageri agent walks you through it). Come back to this page when the recording is done to publish.
          </p>
          <div class="flex items-center justify-end">
            <a
              href="/?action=create_skill"
              class="px-4 py-1.5 text-sm font-medium bg-teal text-white rounded-lg hover:bg-teal/90 transition-colors"
            >
              Start recording
            </a>
          </div>
        </div>

        <!-- Bottom section: previously recorded skills, ready to publish -->
        <div class="bg-panel border border-border rounded-2xl p-6">
          <div class="flex items-center justify-between mb-3">
            <h2 class="text-white font-medium text-base">Ready to publish</h2>
            <button
              type="button"
              @click="loadRecordedSkills()"
              class="text-xs text-slate-400 hover:text-slate-200"
              :disabled="loadingRecorded"
            >
              <span x-show="!loadingRecorded">↻ Refresh</span>
              <span x-show="loadingRecorded">Loading…</span>
            </button>
          </div>

          <template x-if="!loadingRecorded && recordedSkills.length === 0">
            <p class="text-xs text-slate-500 py-4 text-center">
              No recorded skills found yet. Start a recording above; finished
              recordings land in <code class="text-[11px]">~/ageri/skills/local/</code>
              and show up here.
            </p>
          </template>

          <template x-if="recordedSkills.length > 0">
            <div class="space-y-2">
              <template x-for="skill in recordedSkills" :key="skill.id">
                <div class="border border-border rounded-lg p-3 bg-surface/40">

                  <!-- Skill row header -->
                  <div class="flex items-start justify-between gap-3">
                    <div class="flex-1 min-w-0">
                      <p class="text-sm text-white font-medium" x-text="skill.name"></p>
                      <p class="text-[11px] text-slate-500 mt-0.5">
                        <code x-text="skill.id"></code>
                        <span x-show="skill.modified_at"
                              x-text="' — modified ' + (skill.modified_at || '').slice(0, 16).replace('T', ' ')"></span>
                      </p>
                      <p class="text-xs text-slate-400 mt-1.5" x-show="skill.description" x-text="skill.description"></p>
                    </div>
                    <button
                      type="button"
                      @click="openPublishForm(skill)"
                      :disabled="!authorProfile"
                      class="px-3 py-1 text-xs font-medium bg-accent text-white rounded
                             hover:bg-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors shrink-0"
                    >
                      Publish
                    </button>
                  </div>

                  <!-- Inline publish form (one open at a time) -->
                  <template x-if="publishingSkillId === skill.id">
                    <div class="mt-3 pt-3 border-t border-border/60 space-y-3">
                      <p class="text-[11px] text-slate-500">
                        We'll synthesise a publishable manifest from the fields below + your
                        registered author profile, then pack + upload to skills.ageri.ai.
                      </p>
                      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div>
                          <label class="text-[11px] text-slate-400 mb-1 block">Display name</label>
                          <input type="text" x-model="publishForm.name"
                            class="w-full px-2.5 py-1.5 text-sm bg-surface border border-border rounded text-slate-200 focus:border-accent/60">
                        </div>
                        <div>
                          <label class="text-[11px] text-slate-400 mb-1 block">Version</label>
                          <input type="text" x-model="publishForm.version" placeholder="0.1.0"
                            class="w-full px-2.5 py-1.5 text-sm bg-surface border border-border rounded text-slate-200 focus:border-accent/60">
                        </div>
                        <div>
                          <label class="text-[11px] text-slate-400 mb-1 block">Category</label>
                          <select x-model="publishForm.category"
                            class="w-full px-2.5 py-1.5 text-sm bg-surface border border-border rounded text-slate-200 focus:border-accent/60">
                            <template x-for="c in categoryOptions" :key="c">
                              <option :value="c" x-text="c"></option>
                            </template>
                          </select>
                        </div>
                        <div>
                          <label class="text-[11px] text-slate-400 mb-1 block">License (SPDX)</label>
                          <select x-model="publishForm.license"
                            class="w-full px-2.5 py-1.5 text-sm bg-surface border border-border rounded text-slate-200 focus:border-accent/60">
                            <template x-for="l in licenseOptions" :key="l">
                              <option :value="l" x-text="l"></option>
                            </template>
                          </select>
                        </div>
                      </div>
                      <div>
                        <label class="text-[11px] text-slate-400 mb-1 block">Description</label>
                        <textarea x-model="publishForm.description" rows="2"
                          class="w-full px-2.5 py-1.5 text-sm bg-surface border border-border rounded text-slate-200 focus:border-accent/60"></textarea>
                      </div>

                      <template x-if="publishError">
                        <p class="text-xs text-red-400" x-text="publishError"></p>
                      </template>

                      <div class="flex items-center justify-between gap-2 pt-1">
                        <button
                          type="button"
                          @click="publishingSkillId = ''; publishError = ''"
                          class="px-3 py-1 text-xs text-slate-400 hover:text-white"
                        >
                          Cancel
                        </button>
                        <button
                          type="button"
                          @click="submitPublish(skill.id)"
                          :disabled="publishingNow || !publishForm.version"
                          class="px-3 py-1 text-xs font-medium bg-accent text-white rounded
                                 hover:bg-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                        >
                          <span x-show="!publishingNow">Publish to marketplace</span>
                          <span x-show="publishingNow">Publishing…</span>
                        </button>
                      </div>
                    </div>
                  </template>

                  <!-- Success row -->
                  <template x-if="publishedSkills[skill.id]">
                    <div class="mt-3 pt-3 border-t border-green-500/40 text-xs text-green-300">
                      ✓ Published.
                      <span class="text-slate-400" x-show="publishedSkills[skill.id].marketplace_uri">
                        Install with
                        <code class="text-slate-300"
                          x-text="'python -m ageri skill install ' + publishedSkills[skill.id].marketplace_uri"></code>
                      </span>
                    </div>
                  </template>

                </div>
              </template>
            </div>
          </template>

          <template x-if="!authorProfile">
            <p class="mt-4 text-[11px] text-amber-300/80">
              The Publish button is disabled until you register a marketplace
              author (see the banner above the cards).
            </p>
          </template>
        </div>
      </div>
    </template>

    <!-- CLI branch body -->
    <template x-if="branch === 'cli'">
      <div class="bg-panel border border-border rounded-2xl p-6">
        <h2 class="text-white font-medium text-base mb-2">Author from the CLI</h2>
        <p class="text-sm text-slate-400 mb-4">
          Five commands take you from blank to published. Run them in any shell where Ageri is installed.
        </p>

        <div class="space-y-3 mb-5">
          <div>
            <p class="text-[11px] text-slate-500 mb-1">1. Scaffold from a template</p>
            <div class="cli-snippet">python -m ageri skill init my-skill --template cognitive</div>
          </div>
          <div>
            <p class="text-[11px] text-slate-500 mb-1">2. Edit <code class="text-[11px]">~/ageri/skills/local/my-skill/boss.py</code> in your editor — or paste this to Claude CLI:</p>
            <div class="cli-snippet">Read https://docs.ageri.ai/llms.txt and help me build an Ageri skill from scratch.</div>
          </div>
          <div>
            <p class="text-[11px] text-slate-500 mb-1">3. Validate</p>
            <div class="cli-snippet">python -m ageri skill test my-skill</div>
          </div>
          <div>
            <p class="text-[11px] text-slate-500 mb-1">4. Pack into a bundle (after bumping version to <code class="text-[11px]">0.1.0</code> in skill.json)</p>
            <div class="cli-snippet">python -m ageri skill pack ~/ageri/skills/local/my-skill</div>
          </div>
          <div>
            <p class="text-[11px] text-slate-500 mb-1">5. Upload to the marketplace</p>
            <div class="cli-snippet">python -m ageri skill upload my-skill-0.1.0.ags</div>
          </div>
        </div>

        <p class="text-xs text-slate-500">
          Full author guide:
          <a href="https://docs.ageri.ai/getting-started/first-skill/"
            class="text-accent hover:underline" target="_blank" rel="noopener">
            docs.ageri.ai
          </a>
        </p>
      </div>
    </template>

  </div>
</div>

<script>
function createSkillPage() {
  return {
    branch: 'import',       // 'import' | 'record' | 'cli'
    authorProfile: null,
    authorWarningDismissed: false,

    // ── Import-branch state ────────────────────────────────────────────
    importStep: 'upload',   // 'upload' | 'preview' | 'success'
    selectedFile: null,
    dragging: false,
    previewing: false,
    uploading: false,
    importError: '',
    uploadError: '',
    manifestRows: [],
    uploadResult: null,

    // ── Record-branch state (step 6: post-recording publish) ──────────
    recordedSkills: [],
    loadingRecorded: false,
    publishingSkillId: '',       // currently-open inline form (only one at a time)
    publishingNow: false,
    publishError: '',
    publishForm: {
      name: '',
      description: '',
      version: '0.1.0',
      category: 'Other',
      license: 'MIT',
    },
    publishedSkills: {},         // {skill_id: {marketplace_uri, ...}} — success markers
    categoryOptions: [
      'Automation', 'Communication', 'Productivity', 'Knowledge',
      'Finance', 'Health', 'Entertainment', 'Education', 'Developer', 'Other',
    ],
    licenseOptions: [
      'MIT', 'Apache-2.0', 'BSD-2-Clause', 'BSD-3-Clause',
      'MPL-2.0', 'CC0-1.0', 'Unlicense', 'ISC', 'proprietary',
    ],

    async init() {
      try {
        const r = await fetch('/api/skills/create/author');
        if (r.ok) {
          const data = await r.json();
          this.authorProfile = data.author || null;
        }
      } catch (e) { /* ignore — defaults to no profile */ }
      // Pre-load recorded skills so the Record branch is populated when
      // the user clicks into it.
      this.loadRecordedSkills();
    },

    async loadRecordedSkills() {
      this.loadingRecorded = true;
      try {
        const r = await fetch('/api/skills/create/record/recent');
        if (r.ok) {
          const data = await r.json();
          this.recordedSkills = data.skills || [];
        }
      } catch (e) { /* leave list as-is on failure */ }
      finally {
        this.loadingRecorded = false;
      }
    },

    openPublishForm(skill) {
      this.publishingSkillId = skill.id;
      this.publishError = '';
      // Pre-fill from the recorded manifest so the user only edits gaps.
      this.publishForm = {
        name: skill.name || skill.id,
        description: skill.description || '',
        version: '0.1.0',
        category: 'Other',
        license: 'MIT',
      };
    },

    async submitPublish(skillId) {
      this.publishingNow = true;
      this.publishError = '';
      try {
        const r = await fetch('/api/skills/create/record/publish', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            skill_id: skillId,
            name: this.publishForm.name,
            description: this.publishForm.description,
            version: this.publishForm.version,
            category: this.publishForm.category,
            license: this.publishForm.license,
          }),
        });
        const data = await r.json();
        if (!r.ok) {
          let msg = data.error || ('Server returned ' + r.status);
          if (Array.isArray(data.details) && data.details.length) {
            msg += ': ' + data.details.join('; ');
          }
          this.publishError = msg;
          return;
        }
        this.publishedSkills[skillId] = data;
        this.publishingSkillId = '';
      } catch (e) {
        this.publishError = 'Network error: ' + (e.message || e);
      } finally {
        this.publishingNow = false;
      }
    },

    resetImportState() {
      this.importStep = 'upload';
      this.selectedFile = null;
      this.dragging = false;
      this.previewing = false;
      this.uploading = false;
      this.importError = '';
      this.uploadError = '';
      this.manifestRows = [];
      this.uploadResult = null;
    },

    handleFile(file) {
      this.importError = '';
      if (!file) return;
      if (!file.name.toLowerCase().endsWith('.ags')) {
        this.importError = 'File must be a .ags bundle.';
        return;
      }
      // 50 MB cap matches the bundle spec §2.
      if (file.size > 50 * 1024 * 1024) {
        this.importError = 'Bundle exceeds the 50 MB size cap.';
        return;
      }
      this.selectedFile = file;
    },

    async previewBundle() {
      if (!this.selectedFile) return;
      this.previewing = true;
      this.importError = '';
      try {
        const fd = new FormData();
        fd.append('bundle', this.selectedFile);
        const r = await fetch('/api/skills/create/import/preview', {
          method: 'POST', body: fd,
        });
        const data = await r.json();
        if (!r.ok) {
          this.importError = data.error || ('Server returned ' + r.status);
          return;
        }
        // Build the manifest preview rows from the parsed manifest.
        const m = data.manifest || {};
        this.manifestRows = [
          { key: 'id', val: m.id || '' },
          { key: 'name', val: m.name || '' },
          { key: 'version', val: m.version || '' },
          { key: 'author', val: m.author ?
              (m.author.id + (m.author.namespace ? ' (' + m.author.namespace + ')' : '')) : '' },
          { key: 'category', val: m.category || '—' },
          { key: 'license', val: m.license || 'proprietary (default)' },
          { key: 'trust_level', val: m.trust_level || '' },
          { key: 'description', val: m.description || '' },
          { key: 'pricing', val: m.pricing && m.pricing.model ? m.pricing.model : 'free' },
        ];
        this.importStep = 'preview';
      } catch (e) {
        this.importError = 'Network error: ' + (e.message || e);
      } finally {
        this.previewing = false;
      }
    },

    async uploadBundle() {
      if (!this.selectedFile || !this.authorProfile) return;
      this.uploading = true;
      this.uploadError = '';
      try {
        const fd = new FormData();
        fd.append('bundle', this.selectedFile);
        const r = await fetch('/api/skills/create/import/upload', {
          method: 'POST', body: fd,
        });
        const data = await r.json();
        if (!r.ok) {
          this.uploadError = data.error || ('Upload failed (' + r.status + ')');
          return;
        }
        this.uploadResult = data;
        this.importStep = 'success';
      } catch (e) {
        this.uploadError = 'Network error: ' + (e.message || e);
      } finally {
        this.uploading = false;
      }
    },
  };
}
</script>
{% endblock %}