<script setup lang="ts">
import { CheckCircle2, Save, UploadCloud } from "lucide-vue-next";

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

<template>
  <section class="split wide-split">
    <section class="panel page-stack">
      <div class="section-head">
        <h2>发布包</h2>
        <span class="badge">{{ ctx.releasePackages.length }} 个文件</span>
      </div>
      <section class="nested-card upload-card">
        <div class="section-head">
          <h3>上传最新版本包</h3>
          <span class="badge neutral">保存到下载目录</span>
        </div>
        <div class="form-grid">
          <label class="wide">安装包<input type="file" accept=".exe,.msix,.appinstaller,.msi,.zip,.7z" @change="ctx.onPackageSelected" /></label>
          <label>版本号<input v-model="ctx.uploadDraft.version" placeholder="2.0.6.31" /></label>
          <label>平台<select v-model="ctx.uploadDraft.platform"><option value="windows">Windows</option><option value="linux">Linux</option></select></label>
          <label>架构<select v-model="ctx.uploadDraft.arch"><option value="x64">x64</option><option value="x86">x86</option><option value="arm64">arm64</option></select></label>
          <label>通道<select v-model="ctx.uploadDraft.channel"><option value="stable">stable</option><option value="beta">beta</option></select></label>
          <label class="wide">发布说明<textarea v-model="ctx.uploadDraft.notes" rows="3"></textarea></label>
          <label class="checkbox wide"><input v-model="ctx.uploadDraft.updateManifest" type="checkbox" />上传后同步更新兼容 update-info.json</label>
        </div>
        <div v-if="ctx.uploadDraft.file || ctx.uploadDraft.uploading || ctx.uploadDraft.status" class="upload-progress">
          <div class="upload-progress-head">
            <strong>{{ ctx.uploadDraft.status || "等待上传" }}</strong>
            <span>{{ ctx.uploadDraft.progress || 0 }}%</span>
          </div>
          <div class="progress-track">
            <span :style="{ width: `${ctx.uploadDraft.progress || 0}%` }"></span>
          </div>
          <small>
            {{ ctx.uploadDraft.file?.name || "发布包" }}
            <template v-if="ctx.uploadDraft.totalBytes">
              · {{ ctx.formatBytes(ctx.uploadDraft.loadedBytes || 0) }} / {{ ctx.formatBytes(ctx.uploadDraft.totalBytes || 0) }}
            </template>
          </small>
        </div>
        <button class="btn primary" :disabled="ctx.uploadDraft.uploading" @click="ctx.uploadPackage"><UploadCloud :size="16" />{{ ctx.uploadDraft.uploading ? "上传中" : "上传发布包" }}</button>
      </section>
      <table>
        <thead><tr><th>文件</th><th>版本</th><th>平台</th><th>大小</th><th>SHA256</th></tr></thead>
        <tbody>
          <tr v-for="pkg in ctx.releasePackages" :key="pkg.fileName || pkg.url">
            <td>{{ pkg.fileName || pkg.name }}</td>
            <td>{{ pkg.version || ctx.releases?.app_version || "-" }}</td>
            <td>{{ pkg.platform || "-" }}/{{ pkg.arch || "-" }}</td>
            <td>{{ ctx.formatBytes(pkg.sizeBytes || pkg.size || 0) }}</td>
            <td class="hash">{{ pkg.sha256 || "-" }}</td>
          </tr>
          <tr v-if="ctx.releasePackages.length === 0"><td colspan="5">暂无可见发布包。</td></tr>
        </tbody>
      </table>
    </section>
    <aside class="panel editor-panel compact-side">
      <div class="section-head">
        <div>
          <h2>版本日志</h2>
          <p class="muted">以 update-info.json 模板为基础动态生成更新信息。</p>
        </div>
      </div>
      <div class="revision-list">
        <button v-for="item in ctx.releaseNotices" :key="item.version" :class="{ active: ctx.noticeDraft.version === item.version }" @click="ctx.openNotice(item.version)">
          <strong>{{ item.version }}</strong><small>{{ item.title || item.updatedAt }}</small>
        </button>
        <div v-if="ctx.releaseNotices.length === 0" class="empty-state compact">暂无版本日志，可直接填写版本和 Raw JSON 后保存。</div>
      </div>
      <label>版本<input v-model="ctx.noticeDraft.version" placeholder="1.0.0" /></label>
      <label>Raw JSON<textarea v-model="ctx.noticeDraft.raw" class="code-editor compact-editor"></textarea></label>
      <label>备注<input v-model="ctx.noticeDraft.note" /></label>
      <div class="button-row">
        <button class="btn ghost" @click="ctx.validateNotice"><CheckCircle2 :size="16" />校验</button>
        <button class="btn primary" @click="ctx.saveNotice"><Save :size="16" />保存日志</button>
      </div>
      <details v-if="ctx.selectedNotice?.revisions?.length">
        <summary>历史版本</summary>
        <div class="revision-list">
          <button v-for="revision in ctx.selectedNotice.revisions" :key="revision.id" @click="ctx.restoreNotice(revision.id)">#{{ revision.id }} {{ revision.createdAt }}</button>
        </div>
      </details>
    </aside>
  </section>
</template>
