{% extends "base.html" %}
{% block title %}靶场管理 — Benchmark Platform{% endblock %}
{% block content %}
<div x-data="storePage()" x-init="init()">
  <!-- Header -->
  <div class="flex items-center justify-between mb-6">
    <div class="text-[13px] text-gray-500">
      可用：<span x-text="tabChallenges.length" class="font-medium text-gray-700">0</span> 个
      · 已下载：<span x-text="tabDownloadedCount" class="font-medium text-emerald-600">0</span> 个
      <template x-if="tabUpdateCount > 0">
        <span>· 可更新：<span x-text="tabUpdateCount" class="font-medium text-amber-600"></span> 个</span>
      </template>
    </div>
    <div class="flex items-center gap-2">
      {% if show_public_links %}
      <a href="https://github.com/wgpsec/benchmark-challenges" target="_blank"
         class="h-8 px-3 border border-gray-200 text-gray-600 text-[11px] font-medium rounded-lg hover:bg-gray-50 transition-colors inline-flex items-center gap-1">
        <svg class="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor">
          <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
        </svg>
        仓库
      </a>
      {% endif %}
      <button @click="refreshManifest(true)"
              :disabled="loading"
              class="h-8 px-3 border border-gray-200 text-gray-700 text-[11px] font-medium rounded-lg hover:bg-gray-50 transition-colors cursor-pointer disabled:opacity-50">
        刷新
      </button>
      <button @click="downloadAll()"
              :disabled="loading || downloading"
              x-show="!downloading"
              class="h-8 px-3 bg-gray-900 text-white text-[11px] font-medium rounded-lg hover:bg-gray-800 transition-colors cursor-pointer disabled:opacity-50">
        全部下载
      </button>
      <button @click="deleteAllDownloaded()"
              :disabled="loading || downloading"
              x-show="!downloading && tabDownloadedCount > 0"
              class="h-8 px-3 border border-red-200 text-red-600 text-[11px] font-medium rounded-lg hover:bg-red-50 transition-colors cursor-pointer disabled:opacity-50">
        批量删除
      </button>
      {% if show_import_actions %}
      <button x-show="!downloading"
              @click="showImportModal = true"
              class="h-8 px-3 border border-emerald-200 text-emerald-700 text-[11px] font-medium rounded-lg hover:bg-emerald-50 transition-colors cursor-pointer inline-flex items-center gap-1">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5-5m0 0l5 5m-5-5v12"/>
        </svg>
        导入
      </button>
      {% endif %}
      <button @click="cancelDownload()"
              x-show="downloading"
              class="h-8 px-3 bg-red-600 text-white text-[11px] font-medium rounded-lg hover:bg-red-700 transition-colors cursor-pointer">
        取消 (<span x-text="downloadProgress"></span>)
      </button>
    </div>
  </div>

  <!-- Tabs -->
  <div class="flex items-center gap-1 mb-5 border-b border-gray-100">
    <button @click="activeTab = 'ctf'"
            :class="activeTab === 'ctf' ? 'border-gray-900 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700'"
            class="px-4 py-2 text-[12px] font-medium border-b-2 -mb-px transition-colors cursor-pointer">
      CTF 靶场
    </button>
    <button @click="activeTab = 'quiz'"
            :class="activeTab === 'quiz' ? 'border-gray-900 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700'"
            class="px-4 py-2 text-[12px] font-medium border-b-2 -mb-px transition-colors cursor-pointer">
      知识评测
    </button>
  </div>

  <!-- Error -->
  <div x-show="error" class="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-[12px] text-red-700" x-text="error"></div>

  <!-- Tag filter bar -->
  <template x-if="allTags.length > 0">
    <div class="mb-4">
      <div class="flex items-center gap-2 mb-2">
        <input type="text" x-model="tagSearch" placeholder="搜索标签..."
               class="h-7 w-36 px-2.5 text-[11px] bg-gray-50 border border-gray-200 rounded-full text-gray-700 placeholder-gray-400 focus:ring-1 focus:ring-gray-300 focus:outline-none">
        <button x-show="selectedTags.length > 0" x-cloak
                @click="selectedTags = []"
                class="text-[11px] px-2.5 py-1 rounded-full text-red-500 hover:bg-red-50 whitespace-nowrap cursor-pointer transition-colors">
          清除筛选
        </button>
      </div>
      <div class="flex flex-wrap items-center gap-1.5">
        <template x-for="tag in visibleTags" :key="tag">
          <button @click="toggleTag(tag)"
                  :class="selectedTags.includes(tag) ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'"
                  class="text-[11px] px-2.5 py-1 rounded-full whitespace-nowrap cursor-pointer transition-colors"
                  x-text="tag">
          </button>
        </template>
        <button x-show="!showAllTags && tagSearch === '' && allTags.length > 10" x-cloak
                @click="showAllTags = true"
                class="text-[11px] px-2.5 py-1 rounded-full text-blue-600 hover:bg-blue-50 border border-blue-200 whitespace-nowrap cursor-pointer transition-colors"
                x-text="'更多 (' + (allTags.length - 10) + ')'">
        </button>
        <button x-show="showAllTags && tagSearch === '' && allTags.length > 10" x-cloak
                @click="showAllTags = false"
                class="text-[11px] px-2.5 py-1 rounded-full text-gray-500 hover:bg-gray-100 whitespace-nowrap cursor-pointer transition-colors">
          收起
        </button>
      </div>
    </div>
  </template>

  <!-- Loading -->
  <div x-show="loading && !challenges.length" class="text-center py-12 text-[12px] text-gray-500">
    正在获取靶场列表...
  </div>

  <!-- Category groups -->
  <template x-for="cat in categories" :key="cat">
    <div class="mb-6">
      <div class="flex items-center justify-between mb-3 px-1">
        <h3 class="text-[12px] font-semibold text-gray-500 uppercase tracking-wider" x-text="cat"></h3>
        <div class="flex items-center gap-2">
          <span class="text-[10px] text-gray-400"
                x-text="challengesByCategory(cat).filter(c=>c.downloaded).length + '/' + challengesByCategory(cat).length + ' 已下载'"></span>
          <button @click="downloadCategory(cat)"
                  :disabled="downloading"
                  x-show="challengesByCategory(cat).some(c=>!c.downloaded || c.has_update)"
                  class="text-[10px] px-2 py-1 border border-gray-200 text-gray-600 font-medium rounded hover:bg-gray-50 transition-colors cursor-pointer disabled:opacity-50">
            下载本分类
          </button>
          <button @click="deleteCategory(cat)"
                  :disabled="downloading"
                  x-show="challengesByCategory(cat).some(c=>c.downloaded)"
                  class="text-[10px] px-2 py-1 border border-red-200 text-red-600 font-medium rounded hover:bg-red-50 transition-colors cursor-pointer disabled:opacity-50">
            删除本分类
          </button>
        </div>
      </div>
      <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead class="bg-gray-50/80 border-b border-gray-100">
              <tr>
                <th class="px-3 py-2.5 text-left text-[10px] font-medium text-gray-400 uppercase tracking-wider w-[130px]">名称</th>
                <th class="px-3 py-2.5 text-left text-[10px] font-medium text-gray-400 uppercase tracking-wider">描述</th>
                <th class="px-3 py-2.5 text-left text-[10px] font-medium text-gray-400 uppercase tracking-wider w-[60px]">难度</th>
                <th class="px-3 py-2.5 text-left text-[10px] font-medium text-gray-400 uppercase tracking-wider w-[40px]" x-text="activeTab === 'quiz' ? '题数' : 'Flag'"></th>
                <th class="px-3 py-2.5 text-left text-[10px] font-medium text-gray-400 uppercase tracking-wider w-[55px]">大小</th>
                <th class="px-3 py-2.5 text-left text-[10px] font-medium text-gray-400 uppercase tracking-wider w-[60px]">状态</th>
                <th class="px-3 py-2.5 text-left text-[10px] font-medium text-gray-400 uppercase tracking-wider w-[70px]">操作</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
              <template x-for="ch in challengesByCategory(cat)" :key="ch.name">
                <tr class="hover:bg-gray-50/50 transition-colors">
                  <td class="px-3 py-2 text-[11px] text-gray-900 font-medium truncate" x-text="ch.name" :title="ch.name"></td>
                  <td class="px-3 py-2 text-[11px] text-gray-500 break-words" x-text="ch.description || '-'"></td>
                  <td class="px-3 py-2">
                    <span class="text-[10px] px-1.5 py-0.5 whitespace-nowrap"
                          :class="difficultyClass(ch.difficulty)"
                          x-text="ch.difficulty || '-'"></span>
                  </td>
                  <td class="px-3 py-2 text-[11px] text-gray-600" x-text="ch.flag_count || 1"></td>
                  <td class="px-3 py-2 text-[10px] text-gray-400 whitespace-nowrap" x-text="formatSize(ch.size)"></td>
                  <td class="px-3 py-2">
                    <span x-show="ch.downloaded && !ch.has_update" class="inline-flex items-center gap-1 text-[10px] text-emerald-600 font-medium whitespace-nowrap">
                      <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> 已下载
                    </span>
                    <span x-show="ch.downloaded && ch.has_update" class="inline-flex items-center gap-1 text-[10px] text-amber-600 font-medium whitespace-nowrap">
                      <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span> 有更新
                    </span>
                    <span x-show="!ch.downloaded && !ch._downloading" class="inline-flex items-center gap-1 text-[10px] text-gray-400 whitespace-nowrap">
                      <span class="w-1.5 h-1.5 rounded-full bg-gray-300"></span> 未下载
                    </span>
                    <span x-show="ch._downloading" class="inline-flex items-center gap-1 text-[10px] text-blue-500 whitespace-nowrap">
                      <span class="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse"></span> 下载中
                    </span>
                  </td>
                  <td class="px-3 py-2 whitespace-nowrap">
                    <button x-show="!ch.downloaded && !ch._downloading"
                            @click="downloadOne(ch)"
                            class="text-[10px] text-blue-600 hover:text-blue-800 cursor-pointer">下载</button>
                    <button x-show="ch.downloaded && ch.has_update && !ch._downloading"
                            @click="downloadOne(ch)"
                            class="text-[10px] text-amber-600 hover:text-amber-800 cursor-pointer">更新</button>
                    <button x-show="ch.downloaded && !ch._downloading"
                            @click="deleteOne(ch)"
                            class="text-[10px] text-red-500 hover:text-red-700 cursor-pointer ml-1">删除</button>
                    <span x-show="ch._downloading" class="text-[10px] text-gray-400">...</span>
                  </td>
                </tr>
              </template>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </template>
  {% if show_import_actions %}
  <!-- Import Modal -->
  <div x-show="showImportModal" x-cloak
       class="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
       @click.self="showImportModal = false" @keydown.escape.window="showImportModal = false">
    <div class="bg-white rounded-xl shadow-xl w-[560px] max-h-[80vh] overflow-y-auto" @click.stop>
      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
        <h3 class="text-[14px] font-semibold text-gray-900">导入本地靶场</h3>
        <button @click="showImportModal = false" class="text-gray-400 hover:text-gray-600 cursor-pointer">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>
      <div class="px-5 py-4 space-y-4">
        {% if show_authoring_docs %}
        <!-- File spec -->
        <div class="bg-gray-50 rounded-lg p-3 text-[11px] text-gray-600 space-y-2">
          <div class="font-semibold text-gray-700 text-[12px]">靶场文件规范</div>
          <div class="space-y-1.5">
            <p><span class="font-medium text-gray-700">文件命名：</span><code class="bg-white px-1 py-0.5 rounded text-[10px]">分类--名称.zip</code>（如 <code class="bg-white px-1 py-0.5 rounded text-[10px]">xbow--sql-injection.zip</code>）</p>
            <p><span class="font-medium text-gray-700">默认分类：</span>文件名中不含 <code class="bg-white px-1 py-0.5 rounded text-[10px]">--</code> 时自动归入 <code class="bg-white px-1 py-0.5 rounded text-[10px]">custom</code> 分类</p>
            <p class="font-medium text-gray-700 pt-1">zip 内必须包含：</p>
            <ul class="list-disc list-inside pl-1 space-y-0.5">
              <li><code class="bg-white px-1 py-0.5 rounded text-[10px]">docker-compose.yml</code> — 容器编排文件</li>
              <li><code class="bg-white px-1 py-0.5 rounded text-[10px]">benchmark.json</code> — 靶场元数据（name, description, level, points）</li>
            </ul>
            <p class="font-medium text-gray-700 pt-1">可选文件：</p>
            <ul class="list-disc list-inside pl-1 space-y-0.5">
              <li><code class="bg-white px-1 py-0.5 rounded text-[10px]">benchmark.yaml</code> — flag 定义（多 flag 场景）</li>
              <li><code class="bg-white px-1 py-0.5 rounded text-[10px]">.env</code> — 环境变量配置</li>
              <li><code class="bg-white px-1 py-0.5 rounded text-[10px]">src/</code> — 源码目录（需要 build 的靶场）</li>
            </ul>
          </div>
          <div class="pt-2 border-t border-gray-100 mt-2">
            <p class="text-[10px] text-gray-500">
              完整规范：<a href="https://github.com/wgpsec/benchmark-challenges/blob/main/docs/challenge-spec.md" target="_blank" class="text-blue-600 hover:underline">docs/challenge-spec.md</a>
              · 用 AI 生成靶场：<a href="https://github.com/wgpsec/benchmark-challenges/blob/main/.claude/skills/create-challenge.md" target="_blank" class="text-blue-600 hover:underline">Claude Code Skill</a>
            </p>
          </div>
        </div>
        <!-- AI Prompt -->
        <div class="bg-blue-50 rounded-lg p-3 text-[11px] text-gray-600 space-y-2">
          <div class="flex items-center justify-between">
            <div class="font-semibold text-gray-700 text-[12px]">用 AI 生成靶场</div>
            <button @click="copyAIPrompt()"
                    class="text-[10px] px-2 py-0.5 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors cursor-pointer">
              复制 Prompt
            </button>
          </div>
          <p class="text-[10px] text-gray-500">复制以下 Prompt 发送给任意 AI（ChatGPT / Claude / 通义千问等），描述你想要的漏洞场景，AI 会生成符合平台规范的靶场文件：</p>
          <div class="bg-white rounded border border-blue-100 p-2 text-[10px] text-gray-700 font-mono leading-relaxed max-h-[120px] overflow-y-auto whitespace-pre-wrap" x-ref="aiPrompt">请帮我创建一个 CTF 靶场，要求严格符合 Benchmark Platform 的格式规范。

完整规范参考（请先通过命令行下载到本地再阅读，按规范生成）：
- 格式规范：curl -o /tmp/challenge-spec.md https://raw.githubusercontent.com/wgpsec/benchmark-challenges/main/docs/challenge-spec.md
- 生成指南：curl -o /tmp/create-challenge.md https://raw.githubusercontent.com/wgpsec/benchmark-challenges/main/.claude/skills/create-challenge.md
请执行以上命令将文件下载到本地，然后阅读文件内容，严格按照规范生成靶场。

如果无法访问以上链接，请严格按以下核心规则生成：
1. 生成文件：docker-compose.yml、benchmark.json，多 flag 场景额外生成 benchmark.yaml
2. docker-compose.yml 端口映射必须用字符串格式（如 "80:80"），必须包含 healthcheck
3. benchmark.json 格式：{"id":"靶场ID", "name":"名称", "description":"场景描述", "hint":"技术方向提示（给方向不给答案，做题者查看会扣10%分数）", "level":难度(1=easy/2=medium/3=hard), "win_condition":"flag", "tags":["标签"], "canaries":["FLAG{...}"], "flag_count":flag数量}
4. Flag 使用 FLAG{描述性内容} 格式，必须同时硬编码在应用代码中和 benchmark.json 的 canaries 数组中
5. 漏洞必须真实可利用，有合理攻击路径，不能是假漏洞
6. Dockerfile 使用精简基础镜像（python:3.11-slim、node:20-slim 等），并使用国内镜像源加速：apt 换阿里云源（sed -i 's|deb.debian.org|mirrors.aliyun.com|g' /etc/apt/sources.list.d/debian.sources），pip 加 -i https://mirrors.aliyun.com/pypi/simple/，npm 设置 registry https://registry.npmmirror.com
7. hint 必须提供！好的 hint 示例："登录接口对引号处理不当"；坏的 hint："用 admin' OR '1'='1 登录"。多 flag 场景在 benchmark.yaml 的每个 flag 条目中也必须包含 hint 字段
8. 最终将所有文件打包为 分类--名称.zip（如 custom--MY-SQLI-01.zip），zip 内文件直接在根目录，不要多套一层文件夹

我想要的靶场是：[在此描述你的漏洞场景、难度、技术栈偏好]</div>
        </div>
        {% endif %}
        <!-- Upload area -->
        <div class="border-2 border-dashed border-gray-200 rounded-lg p-6 text-center transition-colors"
             :class="{'border-emerald-400 bg-emerald-50': importDragover}"
             @dragover.prevent="importDragover = true"
             @dragleave.prevent="importDragover = false"
             @drop.prevent="importDragover = false; handleImportDrop($event)">
          <svg class="w-8 h-8 mx-auto text-gray-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
          </svg>
          <p class="text-[12px] text-gray-500 mb-1">拖拽 .zip 文件到此处，或</p>
          <label class="inline-block px-3 py-1.5 bg-emerald-600 text-white text-[11px] font-medium rounded-lg hover:bg-emerald-700 transition-colors cursor-pointer">
            选择文件
            <input type="file" accept=".zip" multiple class="hidden" @change="handleImportSelect($event)">
          </label>
          <p class="text-[10px] text-gray-400 mt-2">支持多选，仅接受 .zip 格式</p>
        </div>
        <!-- Import progress -->
        <div x-show="importResults.length > 0" class="space-y-1">
          <div class="text-[11px] font-medium text-gray-700">导入结果：</div>
          <template x-for="r in importResults" :key="r.name">
            <div class="flex items-center gap-2 text-[11px] px-2 py-1 rounded"
                 :class="r.status === 'ok' ? 'bg-emerald-50 text-emerald-700' : 'bg-red-50 text-red-700'">
              <span x-text="r.status === 'ok' ? '✓' : '✗'" class="font-bold"></span>
              <span x-text="r.name"></span>
              <span x-show="r.detail" class="text-gray-500" x-text="'— ' + r.detail"></span>
            </div>
          </template>
        </div>
      </div>
      <div class="px-5 py-3 border-t border-gray-100 flex justify-end">
        <button @click="showImportModal = false"
                class="h-8 px-4 text-[11px] font-medium text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
          关闭
        </button>
      </div>
    </div>
  </div>
  {% endif %}
</div>

<script>
function storePage() {
  return {
    challenges: [],
    loading: false,
    downloading: false,
    cancelled: false,
    downloadProgress: '',
    error: '',
    showImportModal: false,
    importDragover: false,
    importResults: [],
    importing: false,
    selectedTags: [],
    tagSearch: '',
    showAllTags: false,
    activeTab: 'ctf',

    _isQuiz(ch) {
      return ch.win_condition === 'mcq' || ch.category === 'quiz';
    },

    get tabChallenges() {
      if (this.activeTab === 'quiz') {
        return this.filteredChallenges.filter(c => this._isQuiz(c));
      }
      return this.filteredChallenges.filter(c => !this._isQuiz(c));
    },

    get tabDownloadedCount() {
      return this.tabChallenges.filter(c => c.downloaded).length;
    },

    get tabUpdateCount() {
      return this.tabChallenges.filter(c => c.has_update).length;
    },

    get allTags() {
      const counts = {};
      const items = this.activeTab === 'quiz'
        ? this.challenges.filter(c => this._isQuiz(c))
        : this.challenges.filter(c => !this._isQuiz(c));
      items.forEach(c => {
        (c.tags || []).forEach(t => { counts[t] = (counts[t] || 0) + 1; });
      });
      return Object.entries(counts).sort((a, b) => b[1] - a[1]).map(e => e[0]);
    },

    get visibleTags() {
      if (this.tagSearch) {
        const q = this.tagSearch.toLowerCase();
        return this.allTags.filter(t => t.includes(q));
      }
      return this.showAllTags ? this.allTags : this.allTags.slice(0, 10);
    },

    get filteredChallenges() {
      if (this.selectedTags.length === 0) return this.challenges;
      return this.challenges.filter(c => {
        const tags = c.tags || [];
        return this.selectedTags.some(t => tags.includes(t));
      });
    },

    toggleTag(tag) {
      const idx = this.selectedTags.indexOf(tag);
      if (idx >= 0) this.selectedTags.splice(idx, 1);
      else this.selectedTags.push(tag);
    },
    get categories() {
      return [...new Set(this.tabChallenges.map(c => c.category))].sort();
    },
    get downloadedCount() {
      return this.filteredChallenges.filter(c => c.downloaded).length;
    },
    get updateCount() {
      return this.filteredChallenges.filter(c => c.has_update).length;
    },
    challengesByCategory(cat) {
      return this.tabChallenges.filter(c => c.category === cat);
    },
    difficultyClass(d) {
      const map = {
        easy: 'bg-emerald-50 text-emerald-700 border border-emerald-100 rounded-full',
        medium: 'bg-amber-50 text-amber-700 border border-amber-100 rounded-full',
        hard: 'bg-red-50 text-red-700 border border-red-100 rounded-full',
      };
      return map[d] || 'bg-gray-50 text-gray-600 rounded-full';
    },
    formatSize(bytes) {
      if (!bytes) return '-';
      if (bytes < 1024) return bytes + ' B';
      if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(0) + ' KB';
      return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
    },
    async init() {
      await this.loadLocal();
      this.loadRemote();
      this.loadMissingSizes();
    },
    async loadLocal() {
      try {
        const resp = await fetch('/api/store/manifest?source=local');
        const data = await resp.json();
        if (data.code === 0) this.challenges = data.data.challenges || [];
      } catch (e) {}
    },
    async loadMissingSizes() {
      const missing = this.challenges.filter(c => !c.size && c.downloaded);
      if (!missing.length) return;
      try {
        const resp = await fetch('/api/store/sizes', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({items: missing.map(c => ({category: c.category, name: c.name}))})
        });
        const data = await resp.json();
        if (data.code === 0) {
          const sizes = data.data.sizes;
          this.challenges.forEach(c => {
            const key = c.category + '/' + c.name;
            if (sizes[key]) c.size = sizes[key];
          });
        }
      } catch (e) {}
    },
    async loadRemote() {
      this.loading = true;
      try {
        const resp = await fetch('/api/store/manifest?source=remote');
        const data = await resp.json();
        if (data.code !== 0) throw new Error(data.detail || 'Unknown error');
        const remote = data.data.challenges || [];
        this._mergeRemote(remote);
      } catch (e) {
        if (!this.challenges.length) {
          this.error = '获取远程靶场列表失败: ' + e.message;
        }
      } finally {
        this.loading = false;
      }
    },
    _mergeRemote(remote) {
      const localKeys = new Set(this.challenges.map(c => c.category + '/' + c.name));
      const remoteKeys = new Set(remote.map(c => c.category + '/' + c.name));
      const localOnly = this.challenges.filter(c => !remoteKeys.has(c.category + '/' + c.name));
      this.challenges = [...remote, ...localOnly];
    },
    async refreshManifest(force) {
      this.loading = true;
      this.error = '';
      try {
        const resp = await fetch('/api/store/manifest?source=all');
        const data = await resp.json();
        if (data.code !== 0) throw new Error(data.detail || 'Unknown error');
        this.challenges = data.data.challenges || [];
      } catch (e) {
        this.error = '获取靶场列表失败: ' + e.message;
      } finally {
        this.loading = false;
      }
    },
    async downloadOne(ch) {
      ch._downloading = true;
      try {
        const resp = await fetch('/api/store/download', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({category: ch.category, name: ch.name, asset: ch.asset, size: ch.size || 0, win_condition: ch.win_condition || ''})
        });
        const data = await resp.json();
        if (data.code !== 0) throw new Error(data.detail || 'Download failed');
        ch.downloaded = true;
        ch.has_update = false;
        this.$dispatch('toast', {type: 'success', message: ch.name + ' 下载完成'});
      } catch (e) {
        this.$dispatch('toast', {type: 'error', message: ch.name + ' 下载失败: ' + e.message});
      } finally {
        ch._downloading = false;
      }
    },
    deleteOne(ch) {
      this.$dispatch('open-confirm-modal', {message: `确定删除 ${ch.name}？`, onConfirm: async () => {
        try {
          const resp = await fetch('/api/store/delete', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({category: ch.category, name: ch.name, win_condition: ch.win_condition || ''})
          });
          const data = await resp.json();
          if (data.code !== 0) throw new Error(data.detail || 'Delete failed');
          ch.downloaded = false;
          ch.has_update = false;
          this.$dispatch('toast', {type: 'info', message: ch.name + ' 已删除'});
        } catch (e) {
          this.$dispatch('toast', {type: 'error', message: ch.name + ' 删除失败: ' + e.message});
        }
      }});
    },
    deleteAllDownloaded() {
      const downloaded = this.tabChallenges.filter(c => c.downloaded);
      this.$dispatch('open-confirm-modal', {message: `确定删除全部 ${downloaded.length} 个已下载项目？`, onConfirm: async () => {
        let done = 0;
        for (const ch of downloaded) {
          try {
            const resp = await fetch('/api/store/delete', {
              method: 'POST',
              headers: {'Content-Type': 'application/json'},
              body: JSON.stringify({category: ch.category, name: ch.name, win_condition: ch.win_condition || ''})
            });
            const data = await resp.json();
            if (data.code === 0) {
              ch.downloaded = false;
              ch.has_update = false;
              done++;
            }
          } catch (e) {}
        }
        this.$dispatch('toast', {type: 'info', message: `已删除 ${done} 个靶场`});
      }});
    },
    cancelDownload() {
      this.cancelled = true;
      if (this._abortController) {
        this._abortController.abort();
      }
    },
    async _downloadTask(ch) {
      ch._downloading = true;
      const maxRetries = 2;
      let attempt = 0;
      let success = false;

      while (attempt <= maxRetries && !success && !this.cancelled) {
        try {
          const resp = await fetch('/api/store/download', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({category: ch.category, name: ch.name, asset: ch.asset, size: ch.size || 0, win_condition: ch.win_condition || ''}),
            signal: this._abortController.signal
          });
          const data = await resp.json();
          if (data.code !== 0) throw new Error(data.detail || 'Download failed');
          ch.downloaded = true;
          ch.has_update = false;
          success = true;
          this.$dispatch('toast', {type: 'success', message: ch.name + ' 下载完成'});
        } catch (e) {
          if (this.cancelled || e.name === 'AbortError') break;
          attempt++;
          if (attempt > maxRetries) {
            this.$dispatch('toast', {type: 'error', message: ch.name + ' 下载失败（已重试' + maxRetries + '次）'});
          } else {
            await new Promise(r => setTimeout(r, 1000 * attempt));
          }
        }
      }

      ch._downloading = false;
      this._doneCount++;
      this.downloadProgress = `${this._doneCount}/${this._totalCount}`;
    },
    async downloadAll() {
      const pending = this.tabChallenges.filter(c => !c.downloaded || c.has_update);
      await this._batchDownload(pending);
    },
    async downloadCategory(cat) {
      const pending = this.challengesByCategory(cat).filter(c => !c.downloaded || c.has_update);
      if (!pending.length) return;
      await this._batchDownload(pending);
    },
    deleteCategory(cat) {
      const downloaded = this.challengesByCategory(cat).filter(c => c.downloaded);
      if (!downloaded.length) return;
      this.$dispatch('open-confirm-modal', {message: `确定删除 ${cat} 分类下全部 ${downloaded.length} 个已下载项目？`, onConfirm: async () => {
        let done = 0;
        for (const ch of downloaded) {
          try {
            const resp = await fetch('/api/store/delete', {
              method: 'POST',
              headers: {'Content-Type': 'application/json'},
              body: JSON.stringify({category: ch.category, name: ch.name, win_condition: ch.win_condition || ''})
            });
            const data = await resp.json();
            if (data.code === 0) {
              ch.downloaded = false;
              ch.has_update = false;
              done++;
            }
          } catch (e) {}
        }
        this.$dispatch('toast', {type: 'info', message: `已删除 ${cat} 分类 ${done} 个靶场`});
      }});
    },
    async _batchDownload(pending) {
      this.downloading = true;
      this.cancelled = false;
      this._abortController = new AbortController();
      this.error = '';
      this._doneCount = 0;
      this._totalCount = pending.length;
      this.downloadProgress = `0/${pending.length}`;

      const concurrency = 5;
      let idx = 0;

      const runNext = async () => {
        while (idx < pending.length) {
          if (this.cancelled) return;
          const ch = pending[idx++];
          await this._downloadTask(ch);
        }
      };

      const workers = Array.from({length: Math.min(concurrency, pending.length)}, () => runNext());
      await Promise.all(workers);

      if (this.cancelled) {
        this.$dispatch('toast', {type: 'info', message: `下载已取消，已完成 ${this._doneCount}/${this._totalCount}`});
      } else {
        this.$dispatch('toast', {type: 'success', message: `全部完成 (${this._doneCount}/${this._totalCount})`});
      }
      this.downloading = false;
    },
    async importFiles(fileList) {
      if (!fileList || !fileList.length) return;
      this.importing = true;
      this.importResults = [];
      const formData = new FormData();
      for (const f of fileList) {
        if (f.name.endsWith('.zip')) formData.append('files', f);
      }
      try {
        const resp = await fetch('/api/store/import', {method: 'POST', body: formData});
        const data = await resp.json();
        if (data.code !== 0) throw new Error(data.detail || 'Import failed');
        this.importResults = data.data;
        const ok = data.data.filter(r => r.status === 'ok').length;
        if (ok > 0) {
          this.$dispatch('toast', {type: 'success', message: `已导入 ${ok} 个靶场`});
          await this.refreshManifest();
        }
      } catch (e) {
        this.$dispatch('toast', {type: 'error', message: '导入失败: ' + e.message});
      }
      this.importing = false;
    },
    handleImportSelect(event) {
      this.importFiles(event.target.files);
      event.target.value = '';
    },
    handleImportDrop(event) {
      this.importFiles(event.dataTransfer.files);
    },
    copyAIPrompt() {
      const text = this.$refs.aiPrompt.innerText;
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text).then(() => {
          this.$dispatch('toast', {type: 'success', message: 'Prompt 已复制到剪贴板'});
        }).catch(() => {
          this._fallbackCopy(text);
        });
      } else {
        this._fallbackCopy(text);
      }
    },
    _fallbackCopy(text) {
      const ta = document.createElement('textarea');
      ta.value = text;
      ta.style.position = 'fixed';
      ta.style.opacity = '0';
      document.body.appendChild(ta);
      ta.select();
      try {
        document.execCommand('copy');
        this.$dispatch('toast', {type: 'success', message: 'Prompt 已复制到剪贴板'});
      } catch (e) {
        this.$dispatch('toast', {type: 'error', message: '复制失败，请手动选择复制'});
      }
      document.body.removeChild(ta);
    }
  };
}
</script>
{% include "components/modal_confirm.html" %}
{% endblock %}