<script setup lang="ts">
import { Pencil, Trash2 } from "lucide-vue-next";

defineProps<{ ctx: any }>();
</script>

<template>
  <section class="panel page-stack">
    <div class="section-head">
      <div>
        <h2>客户端动态接口</h2>
        <p class="muted">删除接口后会由服务端重新生成兼容媒体源 JSON 和更新 JSON。</p>
      </div>
      <span class="badge">{{ ctx.visibleEndpointCount }} 可见 / {{ ctx.healthyEndpointCount }} 健康</span>
    </div>
    <table>
      <thead><tr><th>ID</th><th>分类</th><th>模式</th><th>健康</th><th>缓存</th><th>URL</th><th>操作</th></tr></thead>
      <tbody>
        <tr v-for="item in ctx.endpoints" :key="item.id || item.sourceId">
          <td class="mono">{{ item.id || item.sourceId }}</td>
          <td>{{ item.category || item.categoryId }}</td>
          <td>{{ item.proxyMode }}</td>
          <td>
            <span :class="['badge', ctx.statusTone(ctx.endpointStatus(item))]">{{ ctx.labelStatus(ctx.endpointStatus(item)) }}</span>
            <span v-if="ctx.endpointStatus(item) === 'redirected' || item.health?.meta?.redirected" class="badge warn">重定向接口</span>
          </td>
          <td>{{ item.cacheSeconds || 0 }}s</td>
          <td class="hash">{{ item.resolvedUrl || item.urlTemplate || item.apiUrl }}</td>
          <td>
            <div class="button-row">
              <button class="btn ghost compact" @click="ctx.copyEndpointToSource(item)"><Pencil :size="14" />编辑</button>
              <button class="btn ghost compact danger" @click="ctx.deleteEndpoint(item)"><Trash2 :size="14" />删除</button>
            </div>
          </td>
        </tr>
        <tr v-if="ctx.endpoints.length === 0"><td colspan="7">暂无客户端接口。</td></tr>
      </tbody>
    </table>
  </section>
</template>
