{% set diff_badge = {'easy': 'bg-emerald-50 text-emerald-600 border border-emerald-100', 'medium': 'bg-amber-50 text-amber-600 border border-amber-100', 'hard': 'bg-red-50 text-red-600 border border-red-100', 'ad': 'bg-purple-50 text-purple-600 border border-purple-100'} %}
{% set diff_label = {'easy': 'Easy', 'medium': 'Medium', 'hard': 'Hard', 'ad': 'AD'} %}

<div class="bg-white rounded-xl {{ 'border-emerald-200/60' if card.solved else 'border-blue-200/60' if card.instance_status in ('running', 'unhealthy') else 'border-gray-100' }} border p-5 flex flex-col gap-3 transition-all relative overflow-hidden{% if not card.enabled %} opacity-50 grayscale{% elif card.unsupported %} opacity-50{% endif %}"
     id="card-{{ card.benchmark_id }}"
     x-data="{ enabled: {{ 'true' if card.enabled else 'false' }}, toggling: false }">
  {% if card.solved %}
  <div class="absolute top-0 left-0 w-1 h-full bg-gradient-to-b from-emerald-400 to-emerald-500 rounded-l-xl"></div>
  {% elif card.instance_status in ('running', 'unhealthy') %}
  <div class="absolute top-0 left-0 w-1 h-full bg-gradient-to-b from-blue-400 to-blue-500 rounded-l-xl"></div>
  {% endif %}
  <!-- Header -->
  <div class="flex items-start justify-between gap-2">
    <div class="min-w-0">
      <div class="text-[11px] text-gray-400 font-mono">{{ card.benchmark_id }}</div>
      <div class="text-[15px] font-medium text-gray-900 truncate">{{ card.name }}</div>
    </div>
    <div class="flex flex-col items-end gap-1.5 flex-shrink-0 ml-2">
      <span class="px-2.5 py-1 text-[11px] font-medium rounded-full {{ diff_badge.get(card.difficulty, '') }}">
        {{ diff_label.get(card.difficulty, card.difficulty) }}
      </span>
      <!-- Agent visibility toggle -->
      <label class="flex items-center gap-1.5 cursor-pointer select-none" :title="enabled ? '已对 Agent 开放，点击关闭' : '已对 Agent 关闭，点击开启'">
        <span class="text-[10px] font-medium" :class="enabled ? 'text-emerald-600' : 'text-gray-400'"
              x-text="enabled ? '对 Agent 开放' : '已关闭'"></span>
        <button type="button"
          :disabled="toggling"
          @click.stop="
            toggling = true;
            const next = !enabled;
            fetch('/api/challenges/visibility', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({code:'{{ card.challenge_code }}', enabled: next})})
            .then(r => r.json())
            .then(data => {
              if (data.code === 0) {
                enabled = next;
                $dispatch('toast', {type:'success', message: data.message || (next ? '已开启' : '已关闭')});
                fetch('/web/partials/challenge_card?benchmark_id={{ card.benchmark_id }}').then(r=>r.text()).then(html => {
                  document.getElementById('card-{{ card.benchmark_id }}').outerHTML = html;
                });
              } else {
                $dispatch('toast', {type:'error', message: data.message || '切换失败'});
              }
            })
            .catch(() => $dispatch('toast', {type:'error', message:'切换失败'}))
            .finally(() => { toggling = false; });
          "
          class="relative inline-flex h-4 w-7 items-center rounded-full transition-colors disabled:opacity-60 disabled:cursor-wait cursor-pointer"
          :class="enabled ? 'bg-emerald-500' : 'bg-gray-300'">
          <span class="inline-block h-3 w-3 transform rounded-full bg-white shadow transition-transform"
                :class="enabled ? 'translate-x-3.5' : 'translate-x-0.5'"></span>
        </button>
      </label>
    </div>
  </div>

  <!-- Description -->
  <p class="text-[12px] text-gray-500 line-clamp-2">{{ card.description }}</p>

  <!-- Tags -->
  {% if card.tags %}
  <div class="flex flex-wrap gap-1">
    {% for tag in card.tags %}
    <span class="text-[10px] px-2 py-0.5 rounded-full bg-gray-100 text-gray-600 border border-gray-200/60">{{ tag }}</span>
    {% endfor %}
  </div>
  {% endif %}

  {% if card.requires_windows_iso and not card.unsupported %}
  <p class="text-[11px] text-amber-600">⏱ 首次启动需安装 Windows，预计 15-30 分钟</p>
  {% endif %}

  <!-- Stats row -->
  <div class="flex items-center gap-3 text-[12px]">
    <span class="font-semibold text-gray-900">{{ card.solved_count }}/{{ card.flag_count }} flags</span>
    {% if card.instance_status == 'running' %}
    <span class="text-emerald-600 flex items-center gap-1.5">
      <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> running
    </span>
    {% elif card.instance_status == 'unhealthy' %}
    <span class="text-amber-600 flex items-center gap-1.5">
      <span class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span> 异常
    </span>
    {% elif card.instance_status == 'starting' %}
    <span class="text-emerald-600 flex items-center gap-1.5">
      <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> 启动中…
    </span>
    {% elif card.instance_status == 'stopping' %}
    <span class="text-gray-500 flex items-center gap-1.5">
      <span class="w-2 h-2 rounded-full bg-gray-400 animate-pulse"></span> 停止中…
    </span>
    {% else %}
    <span class="text-gray-400 flex items-center gap-1.5">
      <span class="w-2 h-2 rounded-full bg-gray-300"></span> stopped
    </span>
    {% endif %}
    <span class="text-gray-500 font-medium">{{ card.points }} pts</span>
    {% if card.emulated %}
    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium bg-purple-50 text-purple-600">x86 模拟</span>
    {% endif %}
    {% if card.unsupported %}
    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium bg-amber-50 text-amber-600">不支持</span>
    {% endif %}
    {% if card.solved %}
    <span class="ml-auto inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium bg-emerald-50 text-emerald-600 border border-emerald-100">
      <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
      已完成
    </span>
    {% endif %}
  </div>

  <!-- Multi-flag progress bar -->
  {% if card.flag_count > 1 %}
  <div class="flex gap-1">
    {% for fs in card.flag_states %}
    <div class="h-1.5 flex-1 rounded-full {{ 'bg-emerald-400' if fs.solved else 'bg-gray-200' }}"></div>
    {% endfor %}
  </div>
  {% endif %}

  <!-- Entrypoint links -->
  {% if card.entrypoint %}
  <div class="flex flex-wrap gap-2">
    {% for ep in card.entrypoint %}
    <a href="http://{{ ep }}" target="_blank"
       class="text-[11px] font-mono text-blue-600 hover:text-blue-700 hover:underline">
      {{ ep }}
    </a>
    {% endfor %}
  </div>
  {% endif %}

  <!-- Actions -->
  <div class="flex items-center gap-2 pt-2 border-t border-gray-100" x-data="{loading: false}">
    {% if card.unsupported %}
    <span class="text-[12px] text-amber-600">当前环境不支持（{{ card.unsupported_reason }}）</span>
    {% elif not card.enabled %}
    <span class="text-[12px] text-gray-400">该题目已对 Agent 关闭</span>
    {% elif card.solved %}
    <span class="text-[12px] text-gray-400">全部完成</span>
    {% elif card.instance_status in ('starting', 'stopping') %}
    <button disabled
      class="h-8 px-3 text-gray-400 bg-gray-100 border border-gray-200 text-[12px] font-medium rounded-lg cursor-not-allowed">
      {{ '启动中…' if card.instance_status == 'starting' else '停止中…' }}
    </button>
    {% if card.requires_windows_iso and card.instance_status == 'starting' %}
    <div x-data="{ vncVms: [], enabling: false }">
      <button
        :disabled="enabling"
        x-show="vncVms.length === 0"
        @click="
          enabling = true;
          fetch('/api/vnc/enable', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({benchmark_id:'{{ card.benchmark_id }}'})})
          .then(r => r.json())
          .then(data => {
            if(data.code === 0) { vncVms = data.data.vms; }
            else { $dispatch('toast', {type:'error', message: data.message || '开启失败'}); }
          })
          .catch(() => $dispatch('toast', {type:'error', message:'开启失败'}))
          .finally(() => { enabling = false; });
        "
        class="h-8 px-3 text-purple-600 bg-purple-50 border border-purple-200 hover:bg-purple-100 text-[12px] font-medium rounded-lg transition-colors cursor-pointer disabled:opacity-60 disabled:cursor-wait">
        VNC 监控
      </button>
      <template x-for="vm in vncVms" :key="vm.service">
        <a :href="vm.url" target="_blank"
           class="h-8 px-3 inline-flex items-center text-purple-600 bg-purple-50 border border-purple-200 hover:bg-purple-100 text-[12px] font-medium rounded-lg transition-colors">
          VNC: <span x-text="vm.service.toUpperCase()" class="ml-1"></span>
        </a>
      </template>
    </div>
    {% endif %}
    {% elif card.instance_status in ('running', 'unhealthy') %}
    <button
      :disabled="loading"
      @click="
        loading = true;
        fetch('/api/stop_challenge', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({code:'{{ card.challenge_code }}'})})
        .then(r => {
          if(r.ok) {
            $dispatch('toast', {type:'success', message:'靶机已停止'});
          } else {
            return r.json().then(d => { $dispatch('toast', {type:'error', message: d.message || d.detail?.message || '停止失败'}); });
          }
        })
        .catch(() => $dispatch('toast', {type:'error', message:'停止失败'}))
        .finally(() => {
          fetch('/web/partials/challenge_card?benchmark_id={{ card.benchmark_id }}').then(r=>r.text()).then(html => {
            document.getElementById('card-{{ card.benchmark_id }}').outerHTML = html;
          });
        });
      "
      class="h-8 px-3 text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 text-[12px] font-medium rounded-lg transition-colors cursor-pointer disabled:opacity-60 disabled:cursor-wait">
      <span x-show="!loading">停止</span>
      <span x-show="loading" x-cloak class="flex items-center gap-1.5">
        <svg class="w-3.5 h-3.5 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>
    </button>
    {% if card.requires_windows_iso %}
    <div x-data="{ vncVms: [], enabling: false }">
      <button
        :disabled="enabling"
        x-show="vncVms.length === 0"
        @click="
          enabling = true;
          fetch('/api/vnc/enable', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({benchmark_id:'{{ card.benchmark_id }}'})})
          .then(r => r.json())
          .then(data => {
            if(data.code === 0) { vncVms = data.data.vms; }
            else { $dispatch('toast', {type:'error', message: data.message || '开启失败'}); }
          })
          .catch(() => $dispatch('toast', {type:'error', message:'开启失败'}))
          .finally(() => { enabling = false; });
        "
        class="h-8 px-3 text-purple-600 bg-purple-50 border border-purple-200 hover:bg-purple-100 text-[12px] font-medium rounded-lg transition-colors cursor-pointer disabled:opacity-60 disabled:cursor-wait">
        VNC
      </button>
      <template x-for="vm in vncVms" :key="vm.service">
        <a :href="vm.url" target="_blank"
           class="h-8 px-3 inline-flex items-center text-purple-600 bg-purple-50 border border-purple-200 hover:bg-purple-100 text-[12px] font-medium rounded-lg transition-colors">
          VNC: <span x-text="vm.service.toUpperCase()" class="ml-1"></span>
        </a>
      </template>
    </div>
    {% endif %}
    {% if card.expires_at %}
    <span class="ml-auto text-[11px] font-mono"
          x-data="countdown('{{ card.expires_at }}')"
          :class="remaining < 600 ? 'text-red-500 font-semibold' : 'text-gray-400'">
      <span x-text="display"></span>
    </span>
    {% endif %}
    <button
      @click="$dispatch('open-submit-modal', {code: '{{ card.challenge_code }}', name: '{{ card.name }}', solved_count: {{ card.solved_count }}, flag_count: {{ card.flag_count }}})"
      class="h-8 px-3 bg-red-600 text-white text-[12px] font-medium rounded-lg hover:bg-red-700 transition-colors cursor-pointer">
      提交 Flag
    </button>
    <button
      @click="
        fetch('/api/hint', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({code:'{{ card.challenge_code }}'})})
        .then(r => r.json())
        .then(data => {
          if(data.data && data.data.hint_content) {
            $dispatch('toast', {type:'info', message: data.data.hint_content});
          } else if(data.detail) {
            $dispatch('toast', {type:'error', message: data.detail.message || '获取提示失败'});
          }
          fetch('/web/partials/challenge_card?benchmark_id={{ card.benchmark_id }}').then(r=>r.text()).then(html => {
            document.getElementById('card-{{ card.benchmark_id }}').outerHTML = html;
          });
        })
        .catch(() => $dispatch('toast', {type:'error', message:'获取提示失败'}));
      "
      class="h-8 px-3 text-gray-500 hover:text-gray-700 text-[12px] font-medium rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
      查看提示
    </button>
    {% else %}
    {% if card.requires_windows_iso %}
    <button
      :disabled="loading"
      @click="
        loading = true;
        fetch('/api/start_challenge', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({code:'{{ card.challenge_code }}'})})
        .then(r => r.json())
        .then(data => {
          if(data.code === 0) {
            $dispatch('toast', {type:'success', message: data.message || '启动请求已提交'});
          } else {
            $dispatch('toast', {type:'error', message: data.message || '启动失败'});
          }
        })
        .catch(() => $dispatch('toast', {type:'error', message:'启动失败'}))
        .finally(() => {
          fetch('/web/partials/challenge_card?benchmark_id={{ card.benchmark_id }}').then(r=>r.text()).then(html => {
            document.getElementById('card-{{ card.benchmark_id }}').outerHTML = html;
          });
        });
      "
      class="h-8 px-3 bg-gray-900 text-white text-[12px] font-medium rounded-lg hover:bg-gray-800 transition-colors cursor-pointer disabled:opacity-60 disabled:cursor-wait">
      <span x-show="!loading">启动</span>
      <span x-show="loading" x-cloak class="flex items-center gap-1.5">
        <svg class="w-3.5 h-3.5 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>
    </button>
    {% else %}
    <button
      :disabled="loading"
      @click="
        loading = true;
        fetch('/api/start_challenge', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({code:'{{ card.challenge_code }}'})})
        .then(r => {
          if(r.ok) {
            $dispatch('toast', {type:'success', message:'靶机启动成功'});
          } else {
            return r.json().then(d => { $dispatch('toast', {type:'error', message: d.message || d.detail?.message || '启动失败'}); });
          }
        })
        .catch(() => $dispatch('toast', {type:'error', message:'启动失败'}))
        .finally(() => {
          fetch('/web/partials/challenge_card?benchmark_id={{ card.benchmark_id }}').then(r=>r.text()).then(html => {
            document.getElementById('card-{{ card.benchmark_id }}').outerHTML = html;
          });
        });
      "
      class="h-8 px-3 bg-gray-900 text-white text-[12px] font-medium rounded-lg hover:bg-gray-800 transition-colors cursor-pointer disabled:opacity-60 disabled:cursor-wait">
      <span x-show="!loading">启动</span>
      <span x-show="loading" x-cloak class="flex items-center gap-1.5">
        <svg class="w-3.5 h-3.5 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>
    </button>
    {% endif %}
    {% endif %}
  </div>

  <!-- Log panel for AD challenges (requires_windows_iso) -->
  {% if card.requires_windows_iso and card.instance_status in ('starting', 'stopping') %}
  <div class="mt-2" x-data="composeLogPanel('{{ card.benchmark_id }}', '{{ card.instance_status }}')">
    <div class="bg-gray-900 rounded-lg p-3 max-h-48 overflow-y-auto font-mono text-[11px] text-gray-300 leading-relaxed"
         x-ref="logContainer">
      <template x-for="(line, idx) in lines" :key="idx">
        <div x-text="line"></div>
      </template>
      <div x-show="lines.length === 0" class="text-gray-500">等待日志输出...</div>
    </div>
  </div>
  {% endif %}
</div>
<script>
function countdown(expiresAt) {
  return {
    remaining: 0,
    display: '',
    interval: null,
    init() {
      this.tick();
      this.interval = setInterval(() => this.tick(), 1000);
    },
    tick() {
      const exp = new Date(expiresAt).getTime();
      const now = Date.now();
      this.remaining = Math.max(0, Math.floor((exp - now) / 1000));
      if (this.remaining <= 0) {
        this.display = '已超时';
        if (this.interval) clearInterval(this.interval);
        return;
      }
      const h = Math.floor(this.remaining / 3600);
      const m = Math.floor((this.remaining % 3600) / 60);
      const s = this.remaining % 60;
      this.display = h > 0
        ? `${h}h ${m.toString().padStart(2,'0')}m`
        : `${m}m ${s.toString().padStart(2,'0')}s`;
    },
    destroy() {
      if (this.interval) clearInterval(this.interval);
    }
  };
}

function composeLogPanel(benchmarkId, mode) {
  return {
    lines: [],
    offset: 0,
    interval: null,
    failed: false,
    init() {
      this.fetchLogs();
      this.interval = setInterval(() => this.fetchLogs(), 2000);
    },
    fetchLogs() {
      fetch(`/api/instance_logs?benchmark_id=${benchmarkId}&offset=${this.offset}`)
        .then(r => r.json())
        .then(data => {
          if (data.code !== 0) return;
          const d = data.data;
          if (d.total < this.offset) {
            this.lines = [];
            this.offset = 0;
            return;
          }
          if (d.logs && d.logs.length > 0) {
            this.lines = this.lines.concat(d.logs);
            this.offset = d.total;
            this.$nextTick(() => {
              const container = this.$refs.logContainer;
              if (container) container.scrollTop = container.scrollHeight;
            });
          }
          if (d.status === 'running') {
            if (this.interval) clearInterval(this.interval);
            setTimeout(() => {
              fetch(`/web/partials/challenge_card?benchmark_id=${benchmarkId}`)
                .then(r => r.text())
                .then(html => {
                  const el = document.getElementById(`card-${benchmarkId}`);
                  if (el) el.outerHTML = html;
                });
            }, 500);
          } else if (d.status === 'stopped') {
            if (this.interval) clearInterval(this.interval);
            if (mode === 'stopping') {
              this.lines.push('--- 已停止 ---');
            } else {
              this.failed = true;
              this.lines.push('--- 启动失败 ---');
            }
            setTimeout(() => {
              fetch(`/web/partials/challenge_card?benchmark_id=${benchmarkId}`)
                .then(r => r.text())
                .then(html => {
                  const el = document.getElementById(`card-${benchmarkId}`);
                  if (el) el.outerHTML = html;
                });
            }, 1500);
          }
        })
        .catch(() => {});
    },
    destroy() {
      if (this.interval) clearInterval(this.interval);
    }
  };
}
</script>