<script setup lang="ts">
import { CheckCircle2 } from "lucide-vue-next";
import { usePortalState } from "../state";

const state = usePortalState();
</script>

<template>
  <section class="page-heading">
    <p class="eyebrow">Sources</p>
    <h1>接口源健康</h1>
    <p>客户端可见接口目录和最近健康状态汇总。</p>
  </section>

  <section class="panel wide">
    <div class="section-head"><h2>接口源可用性</h2><span class="badge">{{ state.sourceCount.value }} 个接口源</span></div>
    <div v-if="state.categories.value.length" class="source-board">
      <section v-for="cat in state.categories.value" :key="cat.id || cat.name" class="source-group">
        <div>
          <h3>{{ cat.name || cat.id }}</h3>
          <p>{{ cat.subcategories?.length || 0 }} 个数据源</p>
        </div>
        <div class="source-list">
          <span v-for="src in cat.subcategories || []" :key="src.id || src.sourceId" :class="['badge', state.statusTone(state.sourceStatus(src))]">
            <CheckCircle2 :size="13" />{{ src.name }}<small v-if="state.sourceStatus(src) === 'redirected'">重定向</small>
          </span>
        </div>
      </section>
    </div>
    <p v-else-if="state.loading.value" class="empty">正在读取接口源目录...</p>
    <p v-else-if="state.error.value" class="empty">接口源状态读取失败：{{ state.error.value }}</p>
    <p v-else class="empty">暂无客户端可见接口源。</p>
  </section>
</template>
