<script setup lang="ts">
defineProps<{ ctx: any }>();
</script>

<template>
  <section class="split">
    <section class="panel page-stack">
      <div class="section-head"><h2>媒体/数据源</h2><button class="btn primary" @click="ctx.checkSources">批量检测</button></div>
      <div v-for="cat in ctx.sourceCategories" :key="cat.id || cat.name" class="source-group">
        <h3>{{ cat.name || cat.id }} <span class="badge">{{ cat.subcategories?.length || 0 }}</span></h3>
        <table>
          <thead><tr><th>名称</th><th>模式</th><th>状态</th><th>延迟</th><th>URL</th></tr></thead>
          <tbody>
            <tr v-for="src in cat.subcategories || []" :key="src.id || src.sourceId">
              <td>{{ src.name }}</td>
              <td>{{ src.proxyMode || src.proxy_mode || "client_direct" }}</td>
              <td><span :class="['badge', ctx.statusTone(src.health?.status || src.lastStatus)]">{{ src.health?.status || src.lastStatus || "unknown" }}</span></td>
              <td>{{ src.health?.latency_ms || src.lastLatencyMs || 0 }}ms</td>
              <td class="hash">{{ src.api_url || src.urlTemplate || src.apiUrl }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-if="ctx.sourceCategories.length === 0" class="empty-state">暂无接口源，可从旧 media-types.json 导入或手动添加。</div>
    </section>
    <aside class="panel editor-panel">
      <h2>添加/覆盖接口</h2>
      <label>ID<input v-model="ctx.sourceDraft.sourceId" /></label>
      <label>名称<input v-model="ctx.sourceDraft.name" /></label>
      <label>分类 ID<input v-model="ctx.sourceDraft.categoryId" /></label>
      <label>分类名称<input v-model="ctx.sourceDraft.categoryName" /></label>
      <label>URL<input v-model="ctx.sourceDraft.apiUrl" /></label>
      <label>代理模式<select v-model="ctx.sourceDraft.proxyMode"><option>client_direct</option><option>server_proxy</option><option>disabled</option></select></label>
      <div class="two-col">
        <label>缓存秒数<input v-model.number="ctx.sourceDraft.cacheSeconds" type="number" /></label>
        <label>检测间隔<input v-model.number="ctx.sourceDraft.checkIntervalSec" type="number" /></label>
      </div>
      <label class="checkbox"><input v-model="ctx.sourceDraft.enabled" type="checkbox" />启用</label>
      <label class="checkbox"><input v-model="ctx.sourceDraft.clientVisible" type="checkbox" />客户端可见</label>
      <button class="btn primary" @click="ctx.saveSource">保存接口</button>
    </aside>
  </section>
</template>
