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

const state = usePortalState();
</script>

<template>
  <section class="page-heading">
    <p class="eyebrow">Releases</p>
    <h1>发布版本</h1>
    <p>展示客户端可见的发布包、下载入口和版本日志。</p>
  </section>

  <section class="content-grid">
    <article class="panel wide">
      <div class="section-head"><h2>发布包</h2><span class="badge">{{ state.packages.value.length }} 个可用包</span></div>
      <table>
        <thead><tr><th>文件</th><th>版本</th><th>平台</th><th>大小</th><th></th></tr></thead>
        <tbody>
          <tr v-for="pkg in state.packages.value" :key="pkg.fileName || pkg.url">
            <td>{{ pkg.fileName || pkg.name || "-" }}</td>
            <td>{{ pkg.version || state.appVersion.value }}</td>
            <td>{{ pkg.platform || "-" }}/{{ pkg.arch || "-" }}</td>
            <td>{{ state.formatBytes(pkg.sizeBytes || pkg.size || 0) }}</td>
            <td><a :href="pkg.url || state.downloadUrl.value">下载</a></td>
          </tr>
          <tr v-if="state.loading.value"><td colspan="5">正在读取发布包...</td></tr>
          <tr v-else-if="state.packages.value.length === 0"><td colspan="5">暂无可见发布包。</td></tr>
        </tbody>
      </table>
      <p v-if="state.error.value && state.packages.value.length === 0" class="empty">发布信息读取失败：{{ state.error.value }}</p>
    </article>

    <article class="panel wide">
      <div class="section-head"><h2>版本日志</h2><span class="badge good">自动同步</span></div>
      <div class="notice-list">
        <section v-for="notice in state.notices.value" :key="notice.version" class="notice-card">
          <BookOpenText :size="22" />
          <div>
            <strong>{{ notice.title || notice.version }}</strong>
            <p>{{ notice.message || notice.releaseNotes || notice.release_notes || "暂无详细说明。" }}</p>
            <span>{{ notice.publishedAt || notice.published_at || notice.updatedAt || notice.updated_at || "-" }}</span>
          </div>
        </section>
        <p v-if="state.loading.value" class="empty">正在读取版本日志...</p>
        <p v-else-if="state.notices.value.length === 0" class="empty">暂无版本日志。</p>
      </div>
    </article>
  </section>
</template>
