<script setup lang="ts">
import { Activity, ArrowDownToLine, Box, HeartPulse, Network, ShieldCheck } from "lucide-vue-next";
import { usePortalState } from "../state";

const state = usePortalState();
</script>

<template>
  <section class="hero">
    <div class="hero-copy">
      <p class="eyebrow">update.ymhut.cn</p>
      <h1>统一发布、反馈与接口源状态门户</h1>
      <p>统一展示 YMhut Box 的发布状态、反馈入口、接口源可用性与版本日志。新版客户端动态读取服务配置，旧客户端兼容能力继续保留。</p>
      <div class="actions">
        <a v-if="state.downloadUrl.value" class="button primary" :href="state.downloadUrl.value"><ArrowDownToLine :size="18" />下载最新版本</a>
        <RouterLink v-else class="button primary" to="/releases"><ArrowDownToLine :size="18" />查看发布状态</RouterLink>
        <RouterLink class="button" to="/sources"><ShieldCheck :size="18" />查看接口状态</RouterLink>
        <RouterLink class="button" to="/compatibility">兼容说明</RouterLink>
      </div>
      <div class="hero-tags">
        <span>Legacy JSON 兼容</span>
        <span>接口健康检测</span>
        <span>反馈状态追踪</span>
      </div>
      <p v-if="state.error.value && !state.hasPartialData.value" class="empty strong">暂时无法读取公开客户端接口，请稍后刷新。</p>
    </div>

    <aside class="release-card">
      <span class="live-dot">服务在线</span>
      <span>当前版本</span>
      <strong>{{ state.appVersion.value }}</strong>
      <p>{{ state.latestNotice.value?.title || state.releases.value?.title || "服务已启动，等待发布数据同步。" }}</p>
      <div class="release-meta">
        <span>{{ state.packages.value.length }} 个发布包</span>
        <span>{{ state.sourceCount.value }} 个接口源</span>
      </div>
    </aside>
  </section>

  <section class="metric-grid">
    <article class="metric"><Box :size="20" /><span>服务版本</span><strong>{{ state.serviceVersion.value }}</strong></article>
    <article class="metric"><Network :size="20" /><span>可见接口源</span><strong>{{ state.sourceCount.value }}</strong></article>
    <article class="metric"><HeartPulse :size="20" /><span>健康接口</span><strong>{{ state.healthyCount.value }}</strong></article>
    <article class="metric"><Activity :size="20" /><span>可用率</span><strong>{{ state.availability.value }}%</strong></article>
  </section>

  <section class="content-grid">
    <article class="panel">
      <div class="section-head"><h2>服务入口</h2><span class="badge good">运行中</span></div>
      <div class="route-list">
        <RouterLink to="/releases"><strong>发布版本</strong><span>下载包、版本公告和 update-notice 日志</span></RouterLink>
        <RouterLink to="/sources"><strong>接口源健康</strong><span>媒体源、数据源和动态客户端接口状态</span></RouterLink>
        <RouterLink to="/feedback"><strong>反馈查询</strong><span>按反馈码查看旧客户端反馈处理状态</span></RouterLink>
      </div>
    </article>
    <article class="panel">
      <div class="section-head"><h2>最新版本日志</h2><RouterLink to="/releases">查看全部</RouterLink></div>
      <div v-if="state.latestNotice.value" class="notice-card">
        <strong>{{ state.latestNotice.value.title || state.latestNotice.value.version }}</strong>
        <p>{{ state.latestNotice.value.message || state.latestNotice.value.releaseNotes || "暂无详细说明。" }}</p>
      </div>
      <p v-else-if="state.loading.value" class="empty">正在读取版本日志...</p>
      <p v-else class="empty">暂无可展示的版本日志。</p>
    </article>
  </section>
</template>
