{% extends "base.html" %}
{% block title %}镜像预热 — {{ brand_name }}{% endblock %}
{% block content %}
<div x-data="prebuildPage()" x-init="init()">
  <!-- Stats bar -->
  <div class="flex items-center justify-between mb-6">
    <div class="text-[13px] text-gray-500">
      <span class="text-emerald-600 font-medium">已缓存 <span x-text="cachedCount">{{ cached_count }}</span></span> /
      总共 <span x-text="totalCount">{{ total_count }}</span>
    </div>
    <div class="flex items-center gap-3">
      <!-- Concurrency selector -->
      <template x-if="!building">
        <div class="flex items-center gap-2">
          <span class="text-[12px] text-gray-500">并发数:</span>
          <select x-model.number="concurrency"
                  class="h-8 px-2 text-[12px] border border-gray-200 rounded-lg bg-white focus:outline-none focus:ring-1 focus:ring-gray-300">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
        </div>
      </template>

      <!-- Quick-select buttons -->
      <template x-if="!building">
        <div class="flex items-center gap-2">
          <button @click="selectByStatus('pending')"
                  class="h-8 px-3 text-[12px] text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
            选择未缓存
          </button>
          <button @click="selectByStatus('failed')"
                  class="h-8 px-3 text-[12px] text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
            选择失败
          </button>
        </div>
      </template>

      <!-- Start button -->
      <template x-if="!building">
        <button @click="startBuild()"
                class="h-9 px-4 bg-gray-900 text-white text-[12px] font-medium rounded-lg hover:bg-gray-800 transition-colors cursor-pointer">
          <span x-text="selectedCount > 0 ? '构建选中 (' + selectedCount + ')' : '全部构建'"></span>
        </button>
      </template>

      <!-- Clean all button -->
      <template x-if="!building && cachedCount > 0">
        <button @click="removeAll()"
                class="h-9 px-4 text-red-600 bg-white border border-red-200 text-[12px] font-medium rounded-lg hover:bg-red-50 transition-colors cursor-pointer">
          清理所有镜像
        </button>
      </template>

      <!-- Remove selected button -->
      <template x-if="!building && selectedCount > 0 && challenges.some(c => selected[c.code] && c.status === 'cached')">
        <button @click="removeSelected()"
                class="h-9 px-4 text-red-600 bg-white border border-red-200 text-[12px] font-medium rounded-lg hover:bg-red-50 transition-colors cursor-pointer">
          <span x-text="'删除选中 (' + challenges.filter(c => selected[c.code] && c.status === 'cached').length + ')'"></span>
        </button>
      </template>

      <!-- Stop button -->
      <template x-if="building">
        <button @click="stopBuild()"
                class="h-9 px-4 bg-red-500 text-white text-[12px] font-medium rounded-lg hover:bg-red-600 transition-colors cursor-pointer">
          停止
        </button>
      </template>
    </div>
  </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>

  <!-- Table -->
  <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
    <table class="w-full">
      <thead class="bg-gray-50 border-b border-gray-100">
        <tr>
          <th class="px-4 py-3 text-left w-10" x-show="!building">
            <input type="checkbox" :checked="allSelected" @change="toggleSelectAll()"
                   class="rounded border-gray-300 text-gray-900 focus:ring-gray-300 cursor-pointer">
          </th>
          <th class="px-4 py-3 text-left text-[12px] font-medium text-gray-500">Benchmark ID</th>
          <th class="px-4 py-3 text-left text-[12px] font-medium text-gray-500">名称</th>
          <th class="px-4 py-3 text-left text-[12px] font-medium text-gray-500">状态</th>
          <th class="px-4 py-3 text-right text-[12px] font-medium text-gray-500">操作</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-100">
        <template x-for="item in filteredChallenges" :key="item.code">
          <tr>
            <td colspan="5" class="p-0">
              <div>
                <!-- Row -->
                <div class="flex items-center hover:bg-gray-50 transition-colors px-4 py-3"
                     :class="item.status === 'unsupported' ? 'opacity-50' : ''">
                  <div class="w-10 flex-shrink-0" x-show="!building">
                    <input type="checkbox" x-model="selected[item.code]"
                           :disabled="item.status === 'unsupported'"
                           class="rounded border-gray-300 text-gray-900 focus:ring-gray-300 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed">
                  </div>
                  <div @click="toggle(item.code)" class="flex-1 text-[12px] text-gray-700 font-mono cursor-pointer" x-text="item.benchmark_id"></div>
                  <div @click="toggle(item.code)" class="flex-1 text-[12px] text-gray-700 cursor-pointer" x-text="item.name"></div>
                  <div @click="toggle(item.code)" class="flex-1 cursor-pointer">
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium"
                          :class="statusClass(item.status)" x-text="statusLabel(item.status)"></span>
                    <span x-show="item.status === 'unsupported'" class="ml-1 text-[10px] text-amber-600" x-text="item.unsupported_reason"></span>
                  </div>
                  <div class="w-16 text-right">
                    <button x-show="item.status === 'cached'" @click.stop="removeOne(item.code)"
                            class="text-[11px] text-red-500 hover:text-red-700 cursor-pointer">删除</button>
                  </div>
                </div>
                <!-- Expandable log -->
                <div x-show="expanded[item.code]" x-collapse
                     class="border-t border-gray-100 bg-gray-900 px-4 py-3 max-h-60 overflow-y-auto"
                     :id="'log-' + item.code"
                     x-effect="if(expanded[item.code]) scrollLog(item.code)">
                  <template x-if="item.log_lines.length === 0">
                    <p class="text-gray-500 text-[11px] font-mono">暂无日志</p>
                  </template>
                  <template x-for="(line, idx) in item.log_lines" :key="idx">
                    <div class="text-[11px] font-mono text-gray-300 leading-5 whitespace-pre-wrap" x-text="line"></div>
                  </template>
                </div>
              </div>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</div>

<script>
function prebuildPage() {
  return {
    challenges: [],
    building: false,
    concurrency: 1,
    cachedCount: {{ cached_count }},
    totalCount: {{ total_count }},
    expanded: {},
    selected: {},
    selectedTags: [],
    tagSearch: '',
    showAllTags: false,

    get allTags() {
      const counts = {};
      this.challenges.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 selectedCount() {
      return Object.values(this.selected).filter(Boolean).length;
    },

    get allSelected() {
      const pending = this.filteredChallenges.filter(c => c.status !== 'cached' && c.status !== 'unsupported');
      return pending.length > 0 && pending.every(c => this.selected[c.code]);
    },

    toggleSelectAll() {
      const pending = this.filteredChallenges.filter(c => c.status !== 'cached' && c.status !== 'unsupported');
      const allSel = this.allSelected;
      pending.forEach(c => { this.selected[c.code] = !allSel; });
    },

    selectByStatus(status) {
      this.challenges.forEach(c => { this.selected[c.code] = false; });
      this.challenges.filter(c => c.status === status).forEach(c => { this.selected[c.code] = true; });
    },

    pollTimer: null,

    init() {
      this.fetchStatus();
    },

    async fetchStatus() {
      try {
        const res = await fetch('/api/prebuild/status');
        const data = await res.json();
        if (data.code === 0) {
          this.challenges = data.data.challenges;
          this.cachedCount = data.data.cached_count;
          this.totalCount = data.data.total_count;
          this.building = data.data.building;

          if (this.building && !this.pollTimer) {
            this.startPolling();
          } else if (!this.building && this.pollTimer) {
            this.stopPolling();
          }
        }
      } catch (e) {
        console.error('fetchStatus error', e);
      }
    },

    startPolling() {
      this.pollTimer = setInterval(() => this.fetchStatus(), 2000);
    },

    stopPolling() {
      if (this.pollTimer) {
        clearInterval(this.pollTimer);
        this.pollTimer = null;
      }
    },

    async startBuild() {
      try {
        const body = { concurrency: this.concurrency };
        if (this.selectedCount > 0) {
          body.codes = this.challenges
            .filter(c => this.selected[c.code])
            .map(c => c.code);
        }
        const res = await fetch('/api/prebuild/start', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify(body),
        });
        const data = await res.json();
        if (data.code === 0) {
          this.building = true;
          this.selected = {};
          this.startPolling();
        }
      } catch (e) {
        console.error('startBuild error', e);
      }
    },

    async stopBuild() {
      try {
        await fetch('/api/prebuild/stop', {method: 'POST'});
      } catch (e) {
        console.error('stopBuild error', e);
      }
    },

    removeOne(code) {
      this.$dispatch('open-confirm-modal', {message: '确认删除该题目的镜像？', onConfirm: async () => {
        try {
          const res = await fetch('/api/prebuild/remove', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({code}),
          });
          const data = await res.json();
          if (data.code === 0) {
            this.$dispatch('toast', {type:'success', message: data.message});
            this.fetchStatus();
          } else {
            this.$dispatch('toast', {type:'error', message: data.detail?.message || '删除失败'});
          }
        } catch (e) {
          this.$dispatch('toast', {type:'error', message:'删除失败'});
        }
      }});
    },

    removeAll() {
      this.$dispatch('open-confirm-modal', {message: '确认清理所有已缓存的镜像？', onConfirm: async () => {
        try {
          const res = await fetch('/api/prebuild/remove_all', {method: 'POST'});
          const data = await res.json();
          if (data.code === 0) {
            this.$dispatch('toast', {type:'success', message: data.message});
            this.fetchStatus();
          } else {
            this.$dispatch('toast', {type:'error', message: '清理失败'});
          }
        } catch (e) {
          this.$dispatch('toast', {type:'error', message:'清理失败'});
        }
      }});
    },

    removeSelected() {
      const codes = this.challenges
        .filter(c => this.selected[c.code] && c.status === 'cached')
        .map(c => c.code);
      if (!codes.length) return;
      this.$dispatch('open-confirm-modal', {message: `确认删除选中的 ${codes.length} 个题目的镜像？`, onConfirm: async () => {
        try {
          const res = await fetch('/api/prebuild/remove_batch', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({codes}),
          });
          const data = await res.json();
          if (data.code === 0) {
            this.$dispatch('toast', {type:'success', message: data.message});
            this.selected = {};
            this.fetchStatus();
          } else {
            this.$dispatch('toast', {type:'error', message: '删除失败'});
          }
        } catch (e) {
          this.$dispatch('toast', {type:'error', message:'删除失败'});
        }
      }});
    },

    toggle(code) {
      this.expanded[code] = !this.expanded[code];
    },

    scrollLog(code) {
      this.$nextTick(() => {
        const el = document.getElementById('log-' + code);
        if (el) el.scrollTop = el.scrollHeight;
      });
    },

    statusClass(status) {
      switch(status) {
        case 'cached': return 'bg-emerald-50 text-emerald-700';
        case 'building': return 'bg-blue-50 text-blue-700';
        case 'failed': return 'bg-red-50 text-red-700';
        case 'unsupported': return 'bg-amber-50 text-amber-700';
        default: return 'bg-gray-100 text-gray-600';
      }
    },

    statusLabel(status) {
      switch(status) {
        case 'cached': return '已缓存';
        case 'building': return '构建中';
        case 'failed': return '失败';
        case 'unsupported': return '不支持';
        default: return '未缓存';
      }
    },
  };
}
</script>

{% include "components/modal_confirm.html" %}
{% endblock %}