{% extends "base.html" %}
{% block title %}系统设置 — Benchmark Platform{% endblock %}
{% block content %}
<div x-data="settingsPage()" x-init="init()">
  <!-- Header -->
  <div class="flex items-center justify-between mb-6">
    <div class="text-[13px] text-gray-500">系统设置</div>
  </div>

  <!-- Runtime Dir Settings -->
  <div class="bg-white border border-gray-200 rounded-xl p-5 mb-5">
    <h3 class="text-[13px] font-semibold text-gray-800 mb-4">运行时目录</h3>
    <p class="text-[11px] text-gray-500 mb-4">靶场启动时的实例文件存放路径。平台会在此目录下创建临时运行目录，停止后自动清理。修改后需重启平台生效。</p>

    <div class="space-y-4">
      <div>
        <label class="block text-[11px] font-medium text-gray-600 mb-1.5">目录路径</label>
        <div class="flex items-center gap-3">
          <input type="text" x-model="runtimeDir" placeholder="./runtime"
                 class="flex-1 h-9 px-3 text-[12px] border border-gray-200 rounded-lg focus:outline-none focus:border-gray-400 font-mono">
        </div>
        <p class="text-[10px] text-gray-400 mt-1.5">相对路径基于平台工作目录，也支持绝对路径如 /tmp/benchmark-runtime</p>
      </div>

      <div class="flex items-center gap-3 pt-2">
        <button @click="saveRuntimeDir()" :disabled="savingRuntime"
                class="h-9 px-5 bg-gray-900 text-white text-[12px] font-medium rounded-lg hover:bg-gray-800 transition-colors cursor-pointer disabled:opacity-50">
          <span x-show="!savingRuntime">保存</span>
          <span x-show="savingRuntime">保存中...</span>
        </button>
        <span x-show="savedRuntime" x-transition class="text-[11px] text-emerald-600 font-medium">已保存（重启后生效）</span>
      </div>
    </div>
  </div>

  <!-- Level Gate Settings -->
  <div class="bg-white border border-gray-200 rounded-xl p-5 mb-5">
    <h3 class="text-[13px] font-semibold text-gray-800 mb-4">Level 分级解锁</h3>
    <p class="text-[11px] text-gray-500 mb-4">配置从 Level N 解锁 Level N+1 的条件。开启分级解锁后，队伍需满足设定条件才能访问更高难度的题目。</p>

    <div class="space-y-4">
      <!-- Mode selector -->
      <div>
        <label class="block text-[11px] font-medium text-gray-600 mb-1.5">解锁模式</label>
        <div class="grid grid-cols-3 gap-2">
          <button @click="mode='all'" :class="mode==='all' ? 'border-gray-900 bg-gray-50 text-gray-900' : 'border-gray-200 text-gray-500 hover:border-gray-300'"
                  class="border rounded-lg px-3 py-2.5 text-[11px] font-medium text-center transition-colors cursor-pointer">
            <div class="font-semibold">全部通过</div>
            <div class="text-[10px] mt-0.5 opacity-70">上一关 100% 完成</div>
          </button>
          <button @click="mode='percentage'" :class="mode==='percentage' ? 'border-gray-900 bg-gray-50 text-gray-900' : 'border-gray-200 text-gray-500 hover:border-gray-300'"
                  class="border rounded-lg px-3 py-2.5 text-[11px] font-medium text-center transition-colors cursor-pointer">
            <div class="font-semibold">按百分比</div>
            <div class="text-[10px] mt-0.5 opacity-70">通过 N% 即可解锁</div>
          </button>
          <button @click="mode='count'" :class="mode==='count' ? 'border-gray-900 bg-gray-50 text-gray-900' : 'border-gray-200 text-gray-500 hover:border-gray-300'"
                  class="border rounded-lg px-3 py-2.5 text-[11px] font-medium text-center transition-colors cursor-pointer">
            <div class="font-semibold">按 Flag 数量</div>
            <div class="text-[10px] mt-0.5 opacity-70">解出 N 个即可解锁</div>
          </button>
        </div>
      </div>

      <!-- Threshold input -->
      <div x-show="mode !== 'all'" x-transition>
        <label class="block text-[11px] font-medium text-gray-600 mb-1.5"
               x-text="mode==='percentage' ? '通过比例阈值 (%)' : '最低 Flag 数量'"></label>
        <div class="flex items-center gap-3">
          <input type="number" x-model="threshold" min="1" :max="mode==='percentage' ? 100 : 999"
                 class="w-32 h-9 px-3 text-[12px] border border-gray-200 rounded-lg focus:outline-none focus:border-gray-400">
          <span class="text-[11px] text-gray-400" x-text="mode==='percentage' ? '% 的 Flag 通过后解锁下一关' : '个 Flag 通过后解锁下一关'"></span>
        </div>
      </div>

      <!-- Current status preview -->
      <div class="bg-gray-50 rounded-lg p-3 mt-3">
        <div class="text-[10px] font-medium text-gray-500 uppercase tracking-wider mb-1.5">当前规则预览</div>
        <div class="text-[11px] text-gray-700">
          <template x-if="mode==='all'">
            <span>上一关所有 Flag 全部通过后，解锁下一关</span>
          </template>
          <template x-if="mode==='percentage'">
            <span>上一关通过 <strong x-text="threshold"></strong>% 的 Flag 后，解锁下一关</span>
          </template>
          <template x-if="mode==='count'">
            <span>上一关通过 <strong x-text="threshold"></strong> 个 Flag 后，解锁下一关</span>
          </template>
        </div>
      </div>

      <!-- Save button -->
      <div class="flex items-center gap-3 pt-2">
        <button @click="save()" :disabled="saving"
                class="h-9 px-5 bg-gray-900 text-white text-[12px] font-medium rounded-lg hover:bg-gray-800 transition-colors cursor-pointer disabled:opacity-50">
          <span x-show="!saving">保存设置</span>
          <span x-show="saving">保存中...</span>
        </button>
        <span x-show="saved" x-transition class="text-[11px] text-emerald-600 font-medium">已保存</span>
      </div>
    </div>
  </div>

  <!-- Instance Timeout Settings -->
  <div class="bg-white border border-gray-200 rounded-xl p-5 mb-5">
    <h3 class="text-[13px] font-semibold text-gray-800 mb-4">实例超时</h3>
    <p class="text-[11px] text-gray-500 mb-4">按难度等级设置实例自动回收时间。超时后容器自动停止并清理，Agent 需重新启动。</p>

    <div class="space-y-3">
      <div class="flex items-center gap-3">
        <label class="w-28 text-[11px] font-medium text-gray-600">Level 1 (Easy)</label>
        <input type="number" x-model="timeoutL1" min="1"
               class="w-24 h-9 px-3 text-[12px] border border-gray-200 rounded-lg focus:outline-none focus:border-gray-400">
        <span class="text-[11px] text-gray-400">分钟</span>
      </div>
      <div class="flex items-center gap-3">
        <label class="w-28 text-[11px] font-medium text-gray-600">Level 2 (Medium)</label>
        <input type="number" x-model="timeoutL2" min="1"
               class="w-24 h-9 px-3 text-[12px] border border-gray-200 rounded-lg focus:outline-none focus:border-gray-400">
        <span class="text-[11px] text-gray-400">分钟</span>
      </div>
      <div class="flex items-center gap-3">
        <label class="w-28 text-[11px] font-medium text-gray-600">Level 3 (Hard)</label>
        <input type="number" x-model="timeoutL3" min="1"
               class="w-24 h-9 px-3 text-[12px] border border-gray-200 rounded-lg focus:outline-none focus:border-gray-400">
        <span class="text-[11px] text-gray-400">分钟</span>
      </div>
    </div>

    <div class="flex items-center gap-3 pt-4">
      <button @click="saveTimeout()" :disabled="savingTimeout"
              class="h-9 px-5 bg-gray-900 text-white text-[12px] font-medium rounded-lg hover:bg-gray-800 transition-colors cursor-pointer disabled:opacity-50">
        <span x-show="!savingTimeout">保存</span>
        <span x-show="savingTimeout">保存中...</span>
      </button>
      <span x-show="savedTimeout" x-transition class="text-[11px] text-emerald-600 font-medium">已保存</span>
    </div>
  </div>

  <!-- Windows ISO Settings -->
  <div class="bg-white border border-gray-200 rounded-xl p-5 mb-5">
    <h3 class="text-[13px] font-semibold text-gray-800 mb-4">Windows ISO</h3>
    <p class="text-[11px] text-gray-500 mb-4">AD 域渗透靶场（dockur/windows）启动时需要此 ISO。请提供 Windows Server 2022 Evaluation ISO 的本地绝对路径。</p>

    <div class="space-y-4">
      <div>
        <label class="block text-[11px] font-medium text-gray-600 mb-1.5">ISO 文件路径</label>
        <div class="flex items-center gap-3">
          <input type="text" x-model="winIsoPath" placeholder="/path/to/win2022.iso"
                 class="flex-1 h-9 px-3 text-[12px] border border-gray-200 rounded-lg focus:outline-none focus:border-gray-400 font-mono">
        </div>
        <p class="text-[10px] text-gray-400 mt-1.5">直接下载：<a href="https://software-static.download.prss.microsoft.com/sg/download/888969d5-f34g-4e03-ac9d-1f9786c66749/SERVER_EVAL_x64FRE_en-us.iso" target="_blank" class="text-blue-500 hover:underline">SERVER_EVAL_x64FRE_en-us.iso</a> (~4.7GB)</p>
      </div>

      <div class="flex items-center gap-3 pt-2">
        <button @click="saveWinIso()" :disabled="savingWinIso"
                class="h-9 px-5 bg-gray-900 text-white text-[12px] font-medium rounded-lg hover:bg-gray-800 transition-colors cursor-pointer disabled:opacity-50">
          <span x-show="!savingWinIso">保存</span>
          <span x-show="savingWinIso">保存中...</span>
        </button>
        <span x-show="savedWinIso" x-transition class="text-[11px] text-emerald-600 font-medium">已保存</span>
      </div>
    </div>
  </div>

  <!-- VNC Password Settings -->
  <div class="bg-white border border-gray-200 rounded-xl p-5 mb-5">
    <h3 class="text-[13px] font-semibold text-gray-800 mb-4">VNC 监控密码</h3>
    <p class="text-[11px] text-gray-500 mb-4">AD 靶场 Windows VM 的 noVNC 访问密码。用于防止 Agent 通过 VNC 非预期解题。修改后需重启靶机实例生效。</p>

    <div class="space-y-4">
      <div>
        <label class="block text-[11px] font-medium text-gray-600 mb-1.5">VNC 密码</label>
        <div class="flex items-center gap-3">
          <input type="text" x-model="vncPassword" placeholder="VncAdmin2024!"
                 class="flex-1 h-9 px-3 text-[12px] border border-gray-200 rounded-lg focus:outline-none focus:border-gray-400 font-mono">
        </div>
        <p class="text-[10px] text-gray-400 mt-1.5">用户名固定为 admin，此处设置密码。平台 VNC 代理会自动使用此密码访问容器。</p>
      </div>

      <div class="flex items-center gap-3 pt-2">
        <button @click="saveVncPassword()" :disabled="savingVnc"
                class="h-9 px-5 bg-gray-900 text-white text-[12px] font-medium rounded-lg hover:bg-gray-800 transition-colors cursor-pointer disabled:opacity-50">
          <span x-show="!savingVnc">保存</span>
          <span x-show="savingVnc">保存中...</span>
        </button>
        <span x-show="savedVnc" x-transition class="text-[11px] text-emerald-600 font-medium">已保存</span>
      </div>
    </div>
  </div>

  <!-- Per-Team Instance Limit -->
  <div class="bg-white rounded-lg border border-gray-200 p-5" x-data="{
    maxInstances: {{ max_instances_per_team | default(3) }},
    saving: false,
    async save() {
      this.saving = true;
      const res = await fetch('/api/settings/max_instances', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({max_instances_per_team: this.maxInstances})
      });
      const data = await res.json();
      this.saving = false;
      $dispatch('toast', {type: res.ok ? 'success' : 'error', message: data.message || data.detail});
    }
  }">
    <h3 class="text-sm font-medium text-gray-900 mb-3">每队最大并发实例数</h3>
    <p class="text-xs text-gray-500 mb-3">限制每个队伍同时运行的赛题实例数量</p>
    <div class="flex items-center gap-3">
      <input type="number" x-model.number="maxInstances" min="1" max="20"
             class="w-20 px-3 py-1.5 text-sm border border-gray-300 rounded-md">
      <button @click="save()" :disabled="saving"
              class="px-3 py-1.5 text-xs font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:opacity-50 cursor-pointer">
        <span x-show="!saving">保存</span>
        <span x-show="saving" x-cloak>保存中...</span>
      </button>
    </div>
  </div>
</div>

<script>
function settingsPage() {
  return {
    mode: 'all',
    threshold: 100,
    saving: false,
    saved: false,
    runtimeDir: './runtime',
    savingRuntime: false,
    savedRuntime: false,
    timeoutL1: 60,
    timeoutL2: 120,
    timeoutL3: 240,
    savingTimeout: false,
    savedTimeout: false,
    winIsoPath: '',
    savingWinIso: false,
    savedWinIso: false,
    vncPassword: '',
    savingVnc: false,
    savedVnc: false,
    init() {
      fetch('/api/level_gate_config')
        .then(r => r.json())
        .then(d => {
          this.mode = d.data.mode;
          this.threshold = d.data.threshold;
        });
      fetch('/api/runtime_dir')
        .then(r => r.json())
        .then(d => {
          this.runtimeDir = d.data.runtime_dir;
        });
      fetch('/api/settings/instance_timeout')
        .then(r => r.json())
        .then(d => {
          if (d.data) {
            this.timeoutL1 = Math.round(d.data.level_1 / 60);
            this.timeoutL2 = Math.round(d.data.level_2 / 60);
            this.timeoutL3 = Math.round(d.data.level_3 / 60);
          }
        });
      fetch('/api/settings/win_iso')
        .then(r => r.json())
        .then(d => {
          this.winIsoPath = d.data.win2022_iso_path || '';
        });
      fetch('/api/settings/vnc_password')
        .then(r => r.json())
        .then(d => {
          this.vncPassword = d.data.vnc_password || '';
        });
    },
    save() {
      this.saving = true;
      this.saved = false;
      fetch('/api/level_gate_config', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({mode: this.mode, threshold: parseInt(this.threshold)})
      })
      .then(r => r.json())
      .then(d => {
        this.saving = false;
        if (d.code === 0) {
          this.saved = true;
          this.$dispatch('toast', {type: 'success', message: '解锁规则已保存'});
          setTimeout(() => this.saved = false, 3000);
        } else {
          this.$dispatch('toast', {type: 'error', message: d.message || '保存失败'});
        }
      });
    },
    saveRuntimeDir() {
      this.savingRuntime = true;
      this.savedRuntime = false;
      fetch('/api/runtime_dir', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({runtime_dir: this.runtimeDir})
      })
      .then(r => r.json())
      .then(d => {
        this.savingRuntime = false;
        if (d.code === 0) {
          this.savedRuntime = true;
          this.$dispatch('toast', {type: 'success', message: '运行时目录已保存，重启后生效'});
          setTimeout(() => this.savedRuntime = false, 5000);
        } else {
          this.$dispatch('toast', {type: 'error', message: d.message || '保存失败'});
        }
      });
    },
    saveTimeout() {
      this.savingTimeout = true;
      this.savedTimeout = false;
      fetch('/api/settings/instance_timeout', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          level_1: parseInt(this.timeoutL1) * 60,
          level_2: parseInt(this.timeoutL2) * 60,
          level_3: parseInt(this.timeoutL3) * 60
        })
      })
      .then(r => r.json())
      .then(d => {
        this.savingTimeout = false;
        if (d.code === 0) {
          this.savedTimeout = true;
          this.$dispatch('toast', {type: 'success', message: '实例超时配置已保存'});
          setTimeout(() => this.savedTimeout = false, 3000);
        } else {
          this.$dispatch('toast', {type: 'error', message: d.message || '保存失败'});
        }
      });
    },
    saveWinIso() {
      this.savingWinIso = true;
      this.savedWinIso = false;
      fetch('/api/settings/win_iso', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({path: this.winIsoPath})
      })
      .then(r => r.json())
      .then(d => {
        this.savingWinIso = false;
        if (d.code === 0) {
          this.savedWinIso = true;
          this.$dispatch('toast', {type: 'success', message: 'Windows ISO 路径已保存'});
          setTimeout(() => this.savedWinIso = false, 3000);
        } else {
          this.$dispatch('toast', {type: 'error', message: d.detail?.message || d.message || '保存失败'});
        }
      });
    },
    saveVncPassword() {
      this.savingVnc = true;
      this.savedVnc = false;
      fetch('/api/settings/vnc_password', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({password: this.vncPassword})
      })
      .then(r => r.json())
      .then(d => {
        this.savingVnc = false;
        if (d.code === 0) {
          this.savedVnc = true;
          this.$dispatch('toast', {type: 'success', message: 'VNC 密码已保存'});
          setTimeout(() => this.savedVnc = false, 3000);
        } else {
          this.$dispatch('toast', {type: 'error', message: d.message || '保存失败'});
        }
      });
    },
  };
}
</script>
{% endblock %}