XuqmGroup-Web/tenant-platform/src/views/update/VersionManagementView.vue

<template>
  <div>
    <el-page-header @back="$router.back()" :content="`版本管理 — ${pageTitle}`" style="margin-bottom:20px" />

    <el-card>
      <el-tabs v-model="activeTab">
        <!-- App Versions -->
        <el-tab-pane label="App 整包版本" name="app">
          <div class="toolbar">
            <el-radio-group v-model="appPlatform" @change="loadAppVersions" style="margin-right:12px">
              <el-radio-button value="ANDROID">Android</el-radio-button>
              <el-radio-button value="IOS">iOS</el-radio-button>
              <el-radio-button value="HARMONY">Harmony</el-radio-button>
            </el-radio-group>
            <el-button type="primary" @click="showUploadApp = true">上传新版本</el-button>
            <el-button @click="loadAppVersions" :loading="loadingApp">刷新</el-button>
          </div>

          <el-table :data="appVersions" v-loading="loadingApp" border stripe>
            <el-table-column prop="versionName" label="版本名" width="110" />
            <el-table-column prop="versionCode" label="版本码" width="90" />
            <el-table-column label="状态" width="140">
              <template #default="{row}">
                <el-tag :type="statusTagType(row)" size="small">{{ statusLabel(row) }}</el-tag>
                <el-tag v-if="row.scheduledPublishAt && row.publishStatus === 'DRAFT'" type="warning" size="small" style="margin-left:4px">
                  定时 {{ formatTime(row.scheduledPublishAt) }}
                </el-tag>
                <el-tag v-if="row.grayEnabled" type="warning" size="small" style="margin-left:4px">
                  灰度 {{ row.grayPercent }}%
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="应用商店" width="220" show-overflow-tooltip>
              <template #default="{row}">
                <template v-if="parseStoreReview(row.storeReviewStatus).length">
                  <el-tag
                    v-for="item in parseStoreReview(row.storeReviewStatus)"
                    :key="item.store"
                    :type="reviewTagType(item.state)"
                    size="small"
                    style="margin:2px"
                  >{{ storeLabel(item.store) }} · {{ reviewLabel(item.state) }}</el-tag>
                </template>
                <span v-else class="text-muted">—</span>
              </template>
            </el-table-column>
            <el-table-column prop="forceUpdate" label="强制" width="70">
              <template #default="{row}">
                <el-tag :type="row.forceUpdate ? 'danger' : 'info'" size="small">
                  {{ row.forceUpdate ? '是' : '否' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="changeLog" label="更新说明" show-overflow-tooltip />
            <el-table-column prop="createdAt" label="上传时间" width="160">
              <template #default="{row}">{{ formatTime(row.createdAt) }}</template>
            </el-table-column>
            <el-table-column label="操作" width="220" fixed="right">
              <template #default="{row}">
                <el-button
                  v-if="row.publishStatus === 'DRAFT'"
                  link type="success" size="small"
                  @click="openPublishDialog(row, 'app')">发布</el-button>
                <el-button
                  v-if="row.publishStatus === 'DEPRECATED'"
                  link type="warning" size="small"
                  @click="openPublishDialog(row, 'app')">重新上架</el-button>
                <el-button
                  v-if="row.publishStatus === 'PUBLISHED'"
                  link type="warning" size="small"
                  @click="openGrayDialog(row, 'app')">灰度</el-button>
                <el-button
                  v-if="row.publishStatus === 'PUBLISHED'"
                  link type="danger" size="small"
                  @click="unpublishApp(row.id)">下架</el-button>
                <el-button
                  v-if="row.downloadUrl && row.publishStatus !== 'DEPRECATED'"
                  link type="primary" size="small"
                  @click="openSubmitStoreDialog(row)">提交市场</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- RN Bundles -->
        <el-tab-pane label="RN Bundle 热更新" name="rn">
          <div class="toolbar">
            <el-input
              v-model="rnModuleFilter"
              placeholder="模块ID（可选）"
              clearable
              style="width:180px;margin-right:8px"
              @change="loadRnBundles"
            />
            <el-radio-group v-model="rnPlatform" @change="loadRnBundles" style="margin-right:12px">
              <el-radio-button value="">全平台</el-radio-button>
              <el-radio-button value="ANDROID">Android</el-radio-button>
              <el-radio-button value="IOS">iOS</el-radio-button>
            </el-radio-group>
            <el-button type="primary" @click="showUploadRn = true">上传 Bundle</el-button>
            <el-button @click="loadRnBundles" :loading="loadingRn">刷新</el-button>
          </div>

          <el-table :data="rnBundles" v-loading="loadingRn" border stripe>
            <el-table-column prop="moduleId" label="模块ID" width="140" />
            <el-table-column prop="version" label="版本" width="100" />
            <el-table-column prop="platform" label="平台" width="90" />
            <el-table-column label="状态" width="140">
              <template #default="{row}">
                <el-tag :type="statusTagType(row)" size="small">{{ statusLabel(row) }}</el-tag>
                <el-tag v-if="row.scheduledPublishAt && row.publishStatus === 'DRAFT'" type="warning" size="small" style="margin-left:4px">
                  定时 {{ formatTime(row.scheduledPublishAt) }}
                </el-tag>
                <el-tag v-if="row.grayEnabled" type="warning" size="small" style="margin-left:4px">
                  灰度 {{ row.grayPercent }}%
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="minCommonVersion" label="最低 Common 版本" width="160" />
            <el-table-column prop="note" label="说明" show-overflow-tooltip />
            <el-table-column prop="createdAt" label="上传时间" width="160">
              <template #default="{row}">{{ formatTime(row.createdAt) }}</template>
            </el-table-column>
            <el-table-column label="操作" width="160" fixed="right">
              <template #default="{row}">
                <el-button v-if="row.publishStatus === 'DRAFT'" link type="success" size="small" @click="openPublishDialog(row, 'rn')">发布</el-button>
                <el-button v-if="row.publishStatus === 'DEPRECATED'" link type="warning" size="small" @click="openPublishDialog(row, 'rn')">重新上架</el-button>
                <el-button v-if="row.publishStatus === 'PUBLISHED'" link type="warning" size="small" @click="openGrayDialog(row, 'rn')">灰度</el-button>
                <el-button v-if="row.publishStatus === 'PUBLISHED'" link type="danger" size="small" @click="unpublishRn(row.id)">下架</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- App Store Config -->
        <el-tab-pane label="应用商店配置" name="store">
          <el-alert
            title="应用商店配置按渠道分别维护，App Store 和鸿蒙只填写跳转页，不再填写密钥。审核通知单独配置一次，所有市场共享。"
            type="info"
            show-icon
            :closable="false"
            style="margin-bottom:16px"
          />
          <el-tabs v-model="storeTab">
            <el-tab-pane label="凭据配置" name="configs">
              <div class="store-grid">
                <el-card
                  v-for="store in STORE_DEFS"
                  :key="store.type"
                  class="store-card"
                  shadow="hover"
                >
                  <div class="store-card-header">
                    <span class="store-card-name">{{ store.label }}</span>
                    <el-switch
                      :model-value="isStoreEnabled(store.type)"
                      :disabled="!getStoreConfig(store.type)"
                      @change="(val: boolean) => toggleStore(store.type, val)"
                    />
                  </div>
                  <div class="store-card-status">
                    <el-tag v-if="getStoreConfig(store.type)" type="success" size="small">已配置</el-tag>
                    <el-tag v-else type="info" size="small">未配置</el-tag>
                  </div>
                  <div class="store-card-meta">
                    <div v-if="getStoreConfig(store.type)">更新于 {{ formatTime(getStoreConfig(store.type)?.updatedAt ?? '') }}</div>
                    <div v-else>请先补齐 {{ store.shortLabel }} 的配置</div>
                  </div>
                  <div class="store-card-footer">
                    <el-button size="small" @click="openStoreConfigDialog(store)">
                      {{ getStoreConfig(store.type) ? '编辑配置' : '配置' }}
                    </el-button>
                    <el-button
                      v-if="getStoreConfig(store.type)"
                      size="small" type="danger"
                      @click="removeStoreConfig(store.type)"
                    >删除</el-button>
                  </div>
                </el-card>
              </div>
            </el-tab-pane>
            <el-tab-pane label="应用配置指引" name="guide">
              <el-alert
                title="这里说明各商店配置项与跳转页的获取方式。App Store 和鸿蒙只需要跳转页；审核通知只配一次，所有市场共享。"
                type="info"
                :closable="false"
                show-icon
                style="margin-bottom:16px"
              />
              <div class="guide-grid">
                <el-card v-for="store in STORE_DEFS" :key="store.type" class="guide-card" shadow="never">
                  <div class="guide-card-title-row">
                    <div>
                      <div class="guide-card-title">{{ store.label }}</div>
                      <div class="guide-card-subtitle">{{ store.guideSubtitle }}</div>
                    </div>
                    <el-tag size="small" type="info">{{ store.shortLabel }}</el-tag>
                  </div>
                  <el-steps direction="vertical" :active="store.guideSteps.length" finish-status="success" style="margin:12px 0 8px">
                    <el-step v-for="step in store.guideSteps" :key="step.title" :title="step.title" :description="step.description" />
                  </el-steps>
                  <el-image
                    v-if="store.guideImage"
                    :src="store.guideImage"
                    fit="cover"
                    class="guide-image"
                    preview-teleported
                  />
                  <div class="guide-hint">{{ store.guideHint }}</div>
                  <el-divider />
                  <div class="guide-link-title">应用跳转链接的获取方式</div>
                  <div class="guide-link-hint">{{ store.jumpLinkHint }}</div>
                  <el-link :href="store.guideUrl" target="_blank" type="primary">查看官方文档</el-link>
                </el-card>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>

        <!-- Publish Config -->
        <el-tab-pane label="发布配置" name="publish-config">
          <el-alert
            title="这里配置灰度默认模式以及成员同步 / 选择回调。发布时仍然会让你最后确认。"
            type="info"
            show-icon
            :closable="false"
            style="margin-bottom:16px"
          />
          <div class="toolbar">
            <el-button @click="loadPublishConfig" :loading="loadingPublishConfig">刷新</el-button>
            <el-button type="primary" @click="savePublishConfig" :loading="savingPublishConfig">保存配置</el-button>
          </div>

          <el-form :model="publishConfigForm" label-width="170px" class="release-config-form">
            <el-form-item label="默认灰度模式">
              <el-radio-group v-model="publishConfigForm.grayMode">
                <el-radio-button value="PERCENT">比例</el-radio-button>
                <el-radio-button value="MEMBERS" :disabled="!hasAnyGrayCallback">成员</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="publishConfigForm.grayMode === 'PERCENT'" label="默认灰度比例">
              <el-slider v-model="publishConfigForm.defaultGrayPercent" :min="1" :max="100" show-input />
            </el-form-item>
            <template v-if="publishConfigForm.grayMode === 'MEMBERS'">
              <el-form-item label="成员选择回调">
                <el-input v-model="publishConfigForm.graySelectCallbackUrl" placeholder="选择成员时调用的回调地址" />
              </el-form-item>
              <el-form-item label="成员目录同步回调">
                <el-input v-model="publishConfigForm.grayDirectorySyncCallbackUrl" placeholder="同步所有成员时调用的回调地址" />
              </el-form-item>
              <el-form-item label="成员选择方式">
                <el-radio-group v-model="publishConfigForm.graySelectionSource">
                  <el-radio-button value="LOCAL" :disabled="!hasGrayDirectorySyncCallback">同步后本地选择</el-radio-button>
                  <el-radio-button value="CALLBACK" :disabled="!hasGraySelectCallback">回调直接返回成员</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button @click="syncGrayMembers" :loading="loadingGrayMembers" :disabled="!hasGrayDirectorySyncCallback">同步成员</el-button>
              </el-form-item>
            </template>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- Publish Dialog -->
    <el-dialog v-model="showPublish" title="发布 / 重新上架" width="520px">
      <el-form label-width="120px">
        <el-form-item label="发布方式">
          <el-radio-group v-model="publishForm.publishImmediately">
            <el-radio-button :value="true">立即发布</el-radio-button>
            <el-radio-button :value="false">定时发布</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="!publishForm.publishImmediately" label="计划发布时间">
          <el-date-picker
            v-model="publishForm.scheduledPublishAt"
            type="datetime"
            placeholder="选择发布时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DDTHH:mm:ss"
            clearable
          />
        </el-form-item>
        <el-form-item v-if="publishTarget?.type === 'app'" label="强制更新">
          <el-switch v-model="publishForm.forceUpdate" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showPublish = false">取消</el-button>
        <el-button type="primary" @click="submitPublish" :loading="submittingPublish">确认</el-button>
      </template>
    </el-dialog>

    <!-- Gray Release Dialog -->
    <el-dialog v-model="showGray" title="灰度发布配置" width="920px">
      <el-form label-width="110px">
        <el-form-item label="开启灰度"><el-switch v-model="grayForm.enabled" /></el-form-item>
        <el-form-item label="灰度方式" v-if="grayForm.enabled">
          <el-radio-group v-model="grayForm.grayMode">
            <el-radio-button value="PERCENT">比例灰度</el-radio-button>
            <el-radio-button value="MEMBERS">指定成员</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="灰度比例" v-if="grayForm.enabled && grayForm.grayMode === 'PERCENT'">
          <el-slider v-model="grayForm.percent" :min="1" :max="100" show-input />
        </el-form-item>
        <template v-else-if="grayForm.enabled && grayForm.grayMode === 'MEMBERS'">
          <el-form-item label="成员来源">
            <el-radio-group v-model="grayForm.selectionSource">
              <el-radio-button value="LOCAL">同步后本地选择</el-radio-button>
              <el-radio-button value="CALLBACK">回调直接返回成员</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="成员搜索" v-if="grayForm.selectionSource === 'LOCAL'">
            <el-input
              v-model="grayMemberKeyword"
              placeholder="搜索 userId / name / 分组"
              clearable
              style="width: 320px"
              @change="loadGrayMembers"
            />
            <el-button style="margin-left: 8px" @click="syncGrayMembers" :loading="loadingGrayMembers">同步成员</el-button>
          </el-form-item>
          <el-alert
            v-if="grayForm.selectionSource === 'CALLBACK'"
            type="info"
            :closable="false"
            show-icon
            title="选择成员时将调用发布配置里的成员选择回调，由你的系统直接返回可参与灰度的成员列表。"
          />
          <div v-if="grayForm.selectionSource === 'LOCAL'" class="gray-member-groups">
            <el-empty v-if="!grayMembers.length" description="暂无成员数据，请先同步" />
            <el-collapse v-else>
              <el-collapse-item v-for="group in grayMembers" :key="group.groupName" :name="group.groupName">
                <template #title>
                  <div class="gray-group-title">
                    <span>{{ group.groupName }}</span>
                    <el-tag size="small">{{ group.members.length }}</el-tag>
                  </div>
                </template>
                <el-checkbox-group v-model="grayMemberIds">
                  <div v-for="member in group.members" :key="member.userId" class="gray-member-row">
                    <el-checkbox :value="member.userId">
                      <span class="gray-member-id">{{ member.userId }}</span>
                      <span class="gray-member-name">{{ member.name || '未命名' }}</span>
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
              </el-collapse-item>
            </el-collapse>
          </div>
        </template>
      </el-form>
      <template #footer>
        <el-button @click="showGray = false">取消</el-button>
        <el-button type="primary" @click="submitGray" :loading="submittingGray">保存</el-button>
      </template>
    </el-dialog>

    <!-- Submit to Store Dialog -->
    <el-dialog v-model="showSubmitStore" title="提交应用市场" width="620px">
      <div v-if="submitStoreVersion">
        <p style="margin-bottom:12px">
          版本 <strong>{{ submitStoreVersion.versionName }}</strong>
          将提交至以下已配置且启用的市场：
        </p>
        <el-form label-width="120px" style="margin-bottom:12px">
          <el-form-item label="上架方式">
            <el-radio-group v-model="submitStoreMode">
              <el-radio-button value="MANUAL">手动上架</el-radio-button>
              <el-radio-button value="AUTO_REVIEW">审核完成自动上架</el-radio-button>
              <el-radio-button value="SCHEDULED">定时上架</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="submitStoreMode === 'SCHEDULED'" label="计划时间">
            <el-date-picker
              v-model="submitStoreScheduledAt"
              type="datetime"
              placeholder="选择上架时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DDTHH:mm:ss"
              clearable
            />
          </el-form-item>
      </el-form>
        <el-checkbox-group v-model="selectedStores">
          <div v-for="store in submissionStoreDefs" :key="store.type" class="store-checkbox-row">
            <el-checkbox :value="store.type">{{ store.label }}</el-checkbox>
            <el-tag size="small" type="success" style="margin-left:8px">已配置</el-tag>
          </div>
        </el-checkbox-group>
        <el-alert
          v-if="!submissionStoreDefs.length"
          type="warning"
          show-icon
          :closable="false"
          title="当前应用暂未配置可用于上架的市场，请先在「应用商店配置」标签页中配置。"
          style="margin-top:12px"
        />
      </div>
      <template #footer>
        <el-button @click="showSubmitStore = false">取消</el-button>
        <el-button
          type="primary"
          :disabled="!selectedStores.length"
          @click="confirmSubmitToStores"
          :loading="submittingToStores"
        >提交审核</el-button>
      </template>
    </el-dialog>

    <!-- Store Credential Config Dialog -->
    <el-dialog
      v-model="showStoreConfig"
      :title="`配置 ${currentStoreDef?.label} 凭据`"
      width="720px"
    >
      <el-form v-if="currentStoreDef" :model="storeConfigForm" label-width="150px" class="store-config-form">
        <el-form-item label="启用">
          <el-switch v-model="storeConfigForm.enabled" />
        </el-form-item>
        <template v-for="field in currentStoreDef.fields" :key="field.key">
          <el-form-item :label="field.label">
            <el-input
              v-if="field.type === 'password'"
              v-model="storeConfigForm.values[field.key]"
              type="password"
              show-password
              :placeholder="field.placeholder"
            />
            <el-input
              v-else-if="field.type === 'textarea'"
              v-model="storeConfigForm.values[field.key]"
              type="textarea"
              :rows="4"
              :placeholder="field.placeholder"
            />
            <el-input
              v-else
              v-model="storeConfigForm.values[field.key]"
              :placeholder="field.placeholder"
            />
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <el-button @click="showStoreConfig = false">取消</el-button>
        <el-button type="primary" @click="saveStoreConfig" :loading="savingStoreConfig">保存</el-button>
      </template>
    </el-dialog>

    <!-- Upload App Version Dialog -->
    <el-dialog v-model="showUploadApp" title="上传 App 版本" width="680px">
      <el-form :model="appUploadForm" label-width="120px">
        <el-form-item label="平台">
          <el-select v-model="appUploadForm.platform" @change="appUploadForm.packageName = app?.packageName ?? appUploadForm.packageName">
            <el-option value="ANDROID" label="Android" />
            <el-option value="IOS" label="iOS" />
            <el-option value="HARMONY" label="Harmony" />
          </el-select>
        </el-form-item>
        <el-form-item label="包名 / Bundle ID">
          <el-input v-model="appUploadForm.packageName" readonly />
        </el-form-item>
        <el-form-item label="版本名称"><el-input v-model="appUploadForm.versionName" placeholder="选择文件后可自动填充" /></el-form-item>
        <el-form-item label="版本码"><el-input-number v-model="appUploadForm.versionCode" :min="1" /></el-form-item>
        <el-form-item label="更新说明"><el-input v-model="appUploadForm.changeLog" type="textarea" :rows="3" /></el-form-item>
        <el-form-item v-if="appUploadForm.platform === 'ANDROID'" label="包文件">
          <el-upload :auto-upload="false" :limit="1" :on-change="onAppPackageChange" accept=".apk">
            <el-button :loading="appPackageInspecting" :disabled="appPackageInspecting">
              {{ appPackageInspecting ? '上传中' : '选择文件' }}
            </el-button>
          </el-upload>
        </el-form-item>
        <el-alert
          v-if="appUploadForm.platform !== 'ANDROID'"
          type="warning"
          :closable="false"
          show-icon
          title="iOS 和鸿蒙只记录版本信息，不需要上传安装包。包名会自动回显当前应用包名。"
        />
        <el-alert
          v-if="appUploadForm.platform === 'ANDROID'"
          type="info"
          :closable="false"
          show-icon
          title="选中 APK 后会先上传到文件服务，再读取包名、版本名和版本码；若识别到的包名与当前应用不一致，会直接提示。"
        />
      </el-form>
      <template #footer>
        <el-button @click="showUploadApp = false">取消</el-button>
        <el-button type="primary" @click="submitAppUpload" :loading="uploadingApp">上传</el-button>
      </template>
    </el-dialog>

    <!-- Upload RN Bundle Dialog -->
    <el-dialog v-model="showUploadRn" title="上传 RN Bundle" width="760px">
      <el-form :model="rnUploadForm" label-width="120px">
        <el-form-item label="Bundle 文件">
          <el-upload :auto-upload="false" :limit="1" :on-change="onRnBundleChange" accept=".bundle,.js">
            <el-button>选择文件</el-button>
          </el-upload>
        </el-form-item>
        <el-alert
          type="info"
          :closable="false"
          show-icon
          title="推荐文件名格式：moduleId__ANDROID__1.0.0__1.0.0__com.example.app.bundle，系统会按命名自动识别模块、平台、版本、最低 Common 版本和包名。"
        />
        <el-form-item label="模块ID"><el-input v-model="rnUploadForm.moduleId" placeholder="可由文件名自动识别" /></el-form-item>
        <el-form-item label="平台">
          <el-select v-model="rnUploadForm.platform">
            <el-option value="ANDROID" label="Android" />
            <el-option value="IOS" label="iOS" />
            <el-option value="HARMONY" label="Harmony" />
          </el-select>
        </el-form-item>
        <el-form-item label="版本"><el-input v-model="rnUploadForm.version" placeholder="可由文件名自动识别" /></el-form-item>
        <el-form-item label="最低 Common 版本"><el-input v-model="rnUploadForm.minCommonVersion" placeholder="可由文件名自动识别" /></el-form-item>
        <el-form-item label="包名 / Bundle">
          <el-input v-model="rnUploadForm.packageName" placeholder="可选，建议与应用包名一致" />
        </el-form-item>
        <el-form-item label="说明"><el-input v-model="rnUploadForm.note" type="textarea" :rows="2" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showUploadRn = false">取消</el-button>
        <el-button type="primary" @click="submitRnUpload" :loading="uploadingRn">上传</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { appApi, type App } from '@/api/app'
import { fileApi } from '@/api/file'
import {
  updateAdminApi,
  type AppPackageInspectResult,
  type AppVersion,
  type GrayMemberGroup,
  type GrayMode,
  type GraySelectionSource,
  type PublishMode,
  type RnBundle,
  type RnBundleInspectResult,
  type StoreConfig,
  type StoreType,
} from '@/api/update'
import huaweiGuideImage from '@/assets/update-store/huawei/01.png'
import miGuideImage from '@/assets/update-store/mi/01.png'
import oppoGuideImage from '@/assets/update-store/oppo/01.png'
import vivoGuideImage from '@/assets/update-store/vivo/01.png'
import honorGuideImage from '@/assets/update-store/honor/01.png'

const route = useRoute()
const appId = route.params.appId as string
const app = ref<App | null>(null)
const pageTitle = computed(() => app.value?.name ?? appId)

const activeTab = ref('app')
const storeTab = ref<'configs' | 'guide'>('configs')
const appPlatform = ref<'ANDROID' | 'IOS' | 'HARMONY'>('ANDROID')
const rnPlatform = ref<'ANDROID' | 'IOS' | 'HARMONY' | ''>('')
const rnModuleFilter = ref('')

const appVersions = ref<AppVersion[]>([])
const loadingApp = ref(false)
const rnBundles = ref<RnBundle[]>([])
const loadingRn = ref(false)
const storeConfigs = ref<StoreConfig[]>([])
const loadingPublishConfig = ref(false)
const savingPublishConfig = ref(false)
const publishConfigForm = ref({
  defaultGrayPercent: 0,
  grayMode: 'PERCENT' as GrayMode,
  graySelectionSource: 'LOCAL' as GraySelectionSource,
  graySelectCallbackUrl: '',
  grayDirectorySyncCallbackUrl: '',
})
const grayMembers = ref<GrayMemberGroup[]>([])
const loadingGrayMembers = ref(false)
const grayMemberKeyword = ref('')
const grayMemberGroupFilter = ref('')
const grayMemberIds = ref<string[]>([])
const appPackageInspecting = ref(false)

const hasGraySelectCallback = computed(() => Boolean(publishConfigForm.value.graySelectCallbackUrl.trim()))
const hasGrayDirectorySyncCallback = computed(() => Boolean(publishConfigForm.value.grayDirectorySyncCallbackUrl.trim()))
const hasAnyGrayCallback = computed(() => hasGraySelectCallback.value || hasGrayDirectorySyncCallback.value)

type FieldDef = { key: string; label: string; type?: 'password' | 'textarea'; placeholder?: string }
type GuideStep = { title: string; description: string }
function marketUrlField(placeholder: string): FieldDef {
  return { key: 'marketUrl', label: '应用市场跳转页面', placeholder }
}
type StoreDef = {
  type: StoreType
  label: string
  shortLabel: string
  fields: FieldDef[]
  guideSubtitle: string
  guideUrl: string
  guideSteps: GuideStep[]
  jumpLinkHint: string
  guideHint: string
  guideImage?: string
}

const STORE_DEFS: StoreDef[] = [
  {
    type: 'HUAWEI',
    label: '华为应用市场',
    shortLabel: '华为',
    fields: [
      { key: 'clientId', label: 'Client ID', placeholder: 'AppGallery Connect Client ID' },
      { key: 'clientSecret', label: 'Client Secret', type: 'password', placeholder: 'AppGallery Connect Client Secret' },
      marketUrlField('华为应用市场详情页链接'),
    ],
    guideSubtitle: '在 AppGallery Connect 创建 Connect API 凭据',
    guideUrl: 'https://developer.huawei.com/consumer/cn/doc/AppGallery-connect-Guides/agcapi-getstarted-0000001111845114',
    guideSteps: [
      { title: '创建应用或进入应用管理', description: '在 AppGallery Connect 中找到目标应用。' },
      { title: '进入开发工具 / Connect API', description: '创建服务端凭据并选择 APP 管理员角色。' },
      { title: '复制客户端 ID 和密钥', description: '把 Client ID / Client Secret 填到这里。' },
    ],
    jumpLinkHint: '华为应用的详情页链接一般形如 appgallery.huawei.com/app/detail?id=包名，可直接在应用详情页复制。',
    guideHint: '与后端 submitToHuawei 读取逻辑一致：clientId / clientSecret + marketUrl。',
    guideImage: huaweiGuideImage,
  },
  {
    type: 'MI',
    label: '小米应用商店',
    shortLabel: '小米',
    fields: [
      { key: 'username', label: '用户名' },
      { key: 'publicKey', label: '公钥证书', type: 'textarea', placeholder: '-----BEGIN CERTIFICATE-----\n...' },
      { key: 'privateKey', label: 'RSA 私钥', type: 'textarea', placeholder: '-----BEGIN PRIVATE KEY-----\n...' },
      marketUrlField('小米应用商店详情页链接'),
    ],
    guideSubtitle: '在自动发布接口页面获取上传所需密钥',
    guideUrl: 'https://dev.mi.com/distribute/doc/details?pId=1134',
    guideSteps: [
      { title: '进入应用游戏管理', description: '在控制台选择目标应用。' },
      { title: '打开自动发布接口', description: '下载公钥文件并准备私钥。' },
      { title: '录入用户名和私钥', description: '这里保存的是服务端上传所需凭据。' },
    ],
    jumpLinkHint: '小米应用商店详情页可从应用的商店公开链接或发布页面复制，通常包含 appId 或 package 信息。',
    guideHint: '当前字段为 username / publicKey / privateKey，与后端服务一致。',
    guideImage: miGuideImage,
  },
  {
    type: 'OPPO',
    label: 'OPPO 软件商店',
    shortLabel: 'OPPO',
    fields: [
      { key: 'clientId', label: 'Client ID' },
      { key: 'clientSecret', label: 'Client Secret', type: 'password' },
      marketUrlField('OPPO 软件商店详情页链接'),
    ],
    guideSubtitle: '在我的 API 里创建服务端应用',
    guideUrl: 'https://open.oppomobile.com/new/developmentDoc/info?id=11119',
    guideSteps: [
      { title: '进入“我的 API”', description: '确认当前应用拥有服务端应用能力。' },
      { title: '新建服务端应用', description: '按平台要求创建接口凭据。' },
      { title: '保存 client_id / client_secret', description: '这两个值对应这里的 Client ID / Client Secret。' },
    ],
    jumpLinkHint: 'OPPO 详情页链接请填写应用在软件商店的公开详情页地址，便于发布记录跳转。',
    guideHint: '字段与后端 submitToOppo 读取逻辑一致。',
    guideImage: oppoGuideImage,
  },
  {
    type: 'VIVO',
    label: 'vivo 应用商店',
    shortLabel: 'vivo',
    fields: [
      { key: 'accessKey', label: 'Access Key' },
      { key: 'accessSecret', label: 'Access Secret', type: 'password' },
      marketUrlField('vivo 应用商店详情页链接'),
    ],
    guideSubtitle: '在 API 管理中复制 access_key / access_secret',
    guideUrl: 'https://dev.vivo.com.cn/documentCenter/doc/326',
    guideSteps: [
      { title: '进入 api 管理', description: '找到当前应用对应的接口管理入口。' },
      { title: '激活后再读取密钥', description: '首次启用后可能需要刷新页面。' },
      { title: '填入 Access Key / Access Secret', description: '与后端提交服务字段保持一致。' },
    ],
    jumpLinkHint: 'vivo 应用商店详情页链接可直接从商店发布后的公开详情页复制。',
    guideHint: '提交服务读取 accessKey / accessSecret。',
    guideImage: vivoGuideImage,
  },
  {
    type: 'HONOR',
    label: '荣耀应用市场',
    shortLabel: '荣耀',
    fields: [
      { key: 'clientId', label: 'Client ID', placeholder: 'AppGallery Connect Client ID' },
      { key: 'clientSecret', label: 'Client Secret', type: 'password' },
      marketUrlField('荣耀应用市场详情页链接'),
    ],
    guideSubtitle: '在管理中心申请凭证并复制 Client_id / 密钥',
    guideUrl: 'https://developer.honor.com/cn',
    guideSteps: [
      { title: '进入管理中心', description: '打开荣耀开发者后台并进入凭证页。' },
      { title: '申请凭证', description: '创建用于服务端上传的 API 凭据。' },
      { title: '保存 Client_id / 密钥', description: '与这里的 Client ID / Client Secret 对应。' },
    ],
    jumpLinkHint: '荣耀应用的详情页链接请填写应用在荣耀市场的公开详情页地址。',
    guideHint: '与后端 Honor 提交流程完全一致。',
    guideImage: honorGuideImage,
  },
  {
    type: 'APP_STORE',
    label: 'Apple App Store',
    shortLabel: 'App Store',
    fields: [
      marketUrlField('App Store 详情页链接'),
    ],
    guideSubtitle: 'App Store 只保留应用商店跳转链接',
    guideUrl: 'https://developer.apple.com/app-store/',
    guideSteps: [
      { title: '进入 App Store Connect', description: '打开对应应用的详情页或 App Store 公开页面。' },
      { title: '复制 App Store 页面链接', description: '这里只需要保存跳转页，不需要再填密钥。' },
      { title: '保存配置', description: '配置完成后可在版本提醒中直接跳转。' },
    ],
    jumpLinkHint: 'App Store 链接直接填写公开详情页 URL，通常以 apps.apple.com 开头。',
    guideHint: '不再配置 Team ID、Key ID 或私钥，发布侧只使用跳转链接。',
  },
  {
    type: 'GOOGLE_PLAY',
    label: 'Google Play',
    shortLabel: 'Google Play',
    fields: [
      { key: 'serviceAccountJson', label: '服务账号 JSON', type: 'textarea', placeholder: '{ "type": "service_account", ... }' },
      marketUrlField('Google Play 详情页链接'),
    ],
    guideSubtitle: '使用服务账号 JSON 授权上传',
    guideUrl: 'https://developer.android.com/google/play/developer-api',
    guideSteps: [
      { title: '创建服务账号', description: '从 Google Cloud 获取服务账号 JSON。' },
      { title: '授予 Play 管理权限', description: '把该服务账号绑定到目标应用。' },
      { title: '粘贴 JSON 内容', description: '这里保存的是上传服务端所需内容。' },
    ],
    jumpLinkHint: 'Google Play 链接直接填写商店公开详情页即可。',
    guideHint: '目前字段以 JSON 方式保存，方便服务端直接读取。',
  },
  {
    type: 'HARMONY_APP',
    label: '鸿蒙应用',
    shortLabel: '鸿蒙',
    fields: [
      marketUrlField('鸿蒙应用市场详情页链接'),
    ],
    guideSubtitle: '鸿蒙应用只保留市场跳转页',
    guideUrl: 'https://developer.huawei.com/consumer/cn/',
    guideSteps: [
      { title: '打开鸿蒙应用市场', description: '确认目标应用已在鸿蒙市场上架或待上架。' },
      { title: '复制详情页链接', description: '填写市场跳转页面，便于版本提醒直接跳转。' },
      { title: '保存配置', description: '配置完成后可在版本提醒里引用。' },
    ],
    jumpLinkHint: '鸿蒙应用市场通常使用 appgallery.huawei.com/app/detail?id=包名 的公开详情页链接。',
    guideHint: '这里只保存鸿蒙应用市场的独立跳转页，不参与 Android 审核提交。',
  },
  {
    type: 'REVIEW_WEBHOOK',
    label: '审核通知',
    shortLabel: '审核通知',
    fields: [
      { key: 'webhookUrl', label: '通知地址', placeholder: 'https://your.service/store/webhook' },
      { key: 'secret', label: '签名密钥', type: 'password', placeholder: '可选，用于回调验签' },
    ],
    guideSubtitle: '所有市场审核状态共用这一套通知配置',
    guideUrl: 'https://cloud.tencent.com/document/product/269/32431',
    guideSteps: [
      { title: '配置回调地址', description: '填写你的业务系统回调 URL。' },
      { title: '配置签名密钥', description: '如需验签，可同步设置 secret。' },
      { title: '保存并启用', description: '后续任何市场审核状态变化都会复用这一个通知。' },
    ],
    jumpLinkHint: '不涉及应用市场跳转页，仅配置回调地址。',
    guideHint: '该配置对所有市场共用，不再按渠道重复配置。',
  },
]

function getStoreConfig(type: StoreType): StoreConfig | undefined {
  return storeConfigs.value.find(c => c.storeType === type)
}

function isStoreEnabled(type: StoreType): boolean {
  return getStoreConfig(type)?.enabled ?? false
}

const enabledStores = computed(() => STORE_DEFS.filter(s =>
  !['APP_STORE', 'HARMONY_APP', 'REVIEW_WEBHOOK'].includes(s.type) && isStoreEnabled(s.type),
))

const submissionStoreDefs = computed(() => STORE_DEFS.filter(s =>
  !['APP_STORE', 'HARMONY_APP', 'REVIEW_WEBHOOK'].includes(s.type) && isStoreEnabled(s.type),
))

async function toggleStore(type: StoreType, enabled: boolean) {
  const cfg = getStoreConfig(type)
  if (!cfg) return
  try {
    await updateAdminApi.saveStoreConfig(appId, type, cfg.configJson ?? '{}', enabled)
    await loadStoreConfigs()
  } catch {
    ElMessage.error('操作失败')
  }
}

async function loadStoreConfigs() {
  try {
    const res = await updateAdminApi.getStoreConfigs(appId)
    storeConfigs.value = res.data.data
  } catch {
    storeConfigs.value = []
  }
}

async function loadApp() {
  const res = await appApi.get(appId)
  app.value = res.data.data
}

const showStoreConfig = ref(false)
const savingStoreConfig = ref(false)
const currentStoreDef = ref<StoreDef | null>(null)
const storeConfigForm = ref<{ enabled: boolean; values: Record<string, string> }>({
  enabled: true,
  values: {},
})

function openStoreConfigDialog(store: StoreDef) {
  currentStoreDef.value = store
  const existing = getStoreConfig(store.type)
  let values: Record<string, string> = {}
  if (existing?.configJson) {
    try {
      values = JSON.parse(existing.configJson)
    } catch {
      values = {}
    }
  }
  storeConfigForm.value = { enabled: existing?.enabled ?? true, values }
  showStoreConfig.value = true
}

async function saveStoreConfig() {
  if (!currentStoreDef.value) return
  if (currentStoreDef.value.type === 'REVIEW_WEBHOOK') {
    const webhookUrl = storeConfigForm.value.values.webhookUrl?.trim() ?? ''
    if (!webhookUrl) {
      ElMessage.warning('请填写审核通知地址')
      return
    }
  } else {
    const marketUrl = storeConfigForm.value.values.marketUrl?.trim() ?? ''
    if (!marketUrl) {
      ElMessage.warning('请填写应用市场跳转页面')
      return
    }
  }
  savingStoreConfig.value = true
  try {
    await updateAdminApi.saveStoreConfig(
      appId,
      currentStoreDef.value.type,
      JSON.stringify(storeConfigForm.value.values),
      storeConfigForm.value.enabled,
    )
    ElMessage.success('凭据已保存')
    showStoreConfig.value = false
    await loadStoreConfigs()
  } catch {
    ElMessage.error('保存失败')
  } finally {
    savingStoreConfig.value = false
  }
}

async function removeStoreConfig(type: StoreType) {
  await ElMessageBox.confirm('确认删除此应用商店凭据？', '提示', { type: 'warning' })
  try {
    await updateAdminApi.deleteStoreConfig(appId, type)
    ElMessage.success('已删除')
    await loadStoreConfigs()
  } catch {
    ElMessage.error('删除失败')
  }
}

function normalizePublishConfig(raw: Record<string, unknown> | null | undefined) {
  const grayMode = String(raw?.grayMode ?? 'PERCENT') as GrayMode
  const graySelectionSource = String(raw?.graySelectionSource ?? 'LOCAL') as GraySelectionSource
  return {
    defaultGrayPercent: Number((raw as Record<string, unknown>)?.defaultGrayPercent ?? 0),
    grayMode,
    graySelectionSource,
    graySelectCallbackUrl: String((raw as Record<string, unknown>)?.graySelectCallbackUrl ?? ''),
    grayDirectorySyncCallbackUrl: String((raw as Record<string, unknown>)?.grayDirectorySyncCallbackUrl ?? ''),
  }
}

function parsePublishConfig(config?: string | null) {
  if (!config) {
    return normalizePublishConfig({})
  }
  try {
    return normalizePublishConfig(JSON.parse(config) as Record<string, unknown>)
  } catch {
    return normalizePublishConfig({})
  }
}

async function loadPublishConfig() {
  loadingPublishConfig.value = true
  try {
    const res = await updateAdminApi.getPublishConfig(appId)
    publishConfigForm.value = parsePublishConfig(res.data.data.configJson)
    if (publishConfigForm.value.grayMode === 'MEMBERS' && !hasAnyGrayCallback.value) {
      publishConfigForm.value.grayMode = 'PERCENT'
    }
  } catch {
    publishConfigForm.value = normalizePublishConfig({})
  } finally {
    loadingPublishConfig.value = false
  }
}

async function savePublishConfig() {
  savingPublishConfig.value = true
  try {
    const payload = {
      ...publishConfigForm.value,
      defaultGrayPercent: Math.min(Math.max(Number(publishConfigForm.value.defaultGrayPercent || 0), 0), 100),
    }
    if (payload.grayMode === 'MEMBERS' && !hasAnyGrayCallback.value) {
      ElMessage.warning('成员模式至少需要配置一个回调地址')
      return
    }
    if (payload.grayMode === 'MEMBERS' && !hasGrayDirectorySyncCallback.value) {
      payload.graySelectionSource = 'CALLBACK'
    }
    await updateAdminApi.savePublishConfig(appId, payload)
    ElMessage.success('发布配置已保存')
  } catch {
    ElMessage.error('保存失败')
  } finally {
    savingPublishConfig.value = false
  }
}

const showSubmitStore = ref(false)
const submittingToStores = ref(false)
const submitStoreVersion = ref<AppVersion | null>(null)
const selectedStores = ref<StoreType[]>([])
const submitStoreMode = ref<PublishMode>('MANUAL')
const submitStoreScheduledAt = ref('')

function openSubmitStoreDialog(row: AppVersion) {
  submitStoreVersion.value = row
  selectedStores.value = enabledStores.value.map(s => s.type)
  submitStoreMode.value = row.storeSubmitMode ?? 'MANUAL'
  submitStoreScheduledAt.value = row.storeSubmitScheduledAt ?? ''
  showSubmitStore.value = true
}

async function confirmSubmitToStores() {
  if (!submitStoreVersion.value || !selectedStores.value.length) {
    ElMessage.warning('请选择至少一个可用市场')
    return
  }
  if (submitStoreMode.value === 'SCHEDULED' && !submitStoreScheduledAt.value) {
    ElMessage.warning('请选择定时上架时间')
    return
  }
  submittingToStores.value = true
  try {
    await updateAdminApi.executeSubmitToStores(
      submitStoreVersion.value.id,
      selectedStores.value,
      submitStoreMode.value,
      submitStoreScheduledAt.value || undefined,
      submitStoreMode.value === 'AUTO_REVIEW',
    )
    ElMessage.success('已提交，服务端正在向应用市场上传，审核状态将通过 Webhook 或刷新页面查看')
    showSubmitStore.value = false
    await loadAppVersions()
  } catch {
    ElMessage.error('提交失败')
  } finally {
    submittingToStores.value = false
  }
}

const showGray = ref(false)
const submittingGray = ref(false)
const grayTarget = ref<{ id: string; type: 'app' | 'rn' } | null>(null)
const grayForm = ref({
  enabled: true,
  grayMode: 'PERCENT' as GrayMode,
  percent: 10,
  selectionSource: 'LOCAL' as GraySelectionSource,
})

function openGrayDialog(row: { id: string }, type: 'app' | 'rn') {
  grayTarget.value = { id: row.id, type }
  grayForm.value = {
    enabled: true,
    grayMode: hasAnyGrayCallback.value ? publishConfigForm.value.grayMode : 'PERCENT',
    percent: publishConfigForm.value.defaultGrayPercent || 10,
    selectionSource: hasGrayDirectorySyncCallback.value
      ? publishConfigForm.value.graySelectionSource
      : (hasGraySelectCallback.value ? 'CALLBACK' : 'LOCAL'),
  }
  grayMemberIds.value = []
  grayMemberKeyword.value = ''
  grayMemberGroupFilter.value = ''
  grayMembers.value = []
  showGray.value = true
  if (grayForm.value.selectionSource === 'LOCAL' && hasGrayDirectorySyncCallback.value) {
    loadGrayMembers()
  }
}

async function loadGrayMembers() {
  if (!showGray.value || !hasGrayDirectorySyncCallback.value) return
  loadingGrayMembers.value = true
  try {
    const res = await updateAdminApi.listGrayMembers(appId, grayMemberKeyword.value || undefined, grayMemberGroupFilter.value || undefined)
    grayMembers.value = res.data.data
  } catch {
    grayMembers.value = []
  } finally {
    loadingGrayMembers.value = false
  }
}

async function syncGrayMembers() {
  if (!hasGrayDirectorySyncCallback.value) {
    ElMessage.warning('未配置成员目录同步回调，无法同步成员')
    return
  }
  loadingGrayMembers.value = true
  try {
    const res = await updateAdminApi.syncGrayMembers(appId)
    grayMembers.value = res.data.data
    ElMessage.success('成员已同步')
  } catch {
    ElMessage.error('同步失败')
  } finally {
    loadingGrayMembers.value = false
  }
}

async function submitGray() {
  if (!grayTarget.value) return
  if (grayForm.value.enabled && grayForm.value.grayMode === 'MEMBERS' && grayForm.value.selectionSource === 'LOCAL' && !hasGrayDirectorySyncCallback.value) {
    ElMessage.warning('未配置成员目录同步回调，无法选择本地成员')
    return
  }
  if (grayForm.value.enabled && grayForm.value.grayMode === 'MEMBERS' && grayForm.value.selectionSource === 'CALLBACK' && !hasGraySelectCallback.value) {
    ElMessage.warning('未配置成员选择回调，无法使用回调成员选择')
    return
  }
  if (grayForm.value.enabled && grayForm.value.grayMode === 'MEMBERS' && grayForm.value.selectionSource === 'LOCAL' && !grayMemberIds.value.length) {
    ElMessage.warning('请选择至少一个灰度成员')
    return
  }
  submittingGray.value = true
  try {
    const { id, type } = grayTarget.value
    const payload: {
      enabled: boolean
      grayMode: GrayMode
      percent?: number
      memberIds?: string[]
      selectionSource?: GraySelectionSource
    } = {
      enabled: grayForm.value.enabled,
      grayMode: grayForm.value.grayMode,
      selectionSource: grayForm.value.selectionSource,
    }
    if (grayForm.value.grayMode === 'PERCENT') {
      payload.percent = grayForm.value.percent
    } else {
      payload.memberIds = grayMemberIds.value
    }
    if (type === 'app') {
      await updateAdminApi.grayAppVersion(id, payload)
      await loadAppVersions()
    } else {
      await updateAdminApi.grayRnBundle(id, payload)
      await loadRnBundles()
    }
    ElMessage.success('灰度配置已保存')
    showGray.value = false
  } finally {
    submittingGray.value = false
  }
}

const showUploadApp = ref(false)
const uploadingApp = ref(false)
const appUploadForm = ref({
  platform: 'ANDROID' as 'ANDROID' | 'IOS' | 'HARMONY',
  packageName: '',
  versionName: '',
  versionCode: 1,
  changeLog: '',
  file: null as File | null,
  fileUrl: '',
})

async function onAppPackageChange(uploadFile: { raw?: File } | null) {
  const file = uploadFile?.raw ?? null
  appUploadForm.value.file = file
  appUploadForm.value.fileUrl = ''
  if (!file) return

  appPackageInspecting.value = true
  try {
    const uploaded = await fileApi.uploadFile(file)
    const fileInfo = uploaded.data.data
    appUploadForm.value.fileUrl = fileInfo.url
    const res = await updateAdminApi.inspectAppPackage(fileInfo.url)
    const inspected = res.data.data as AppPackageInspectResult
    const currentPackageName = app.value?.packageName?.trim() ?? ''
    if (currentPackageName && inspected.packageName && inspected.packageName !== currentPackageName) {
      await ElMessageBox.alert(
        `当前应用包名是 ${currentPackageName}，你选择的文件包名是 ${inspected.packageName}。请重新选择匹配的安装包。`,
        '包名不一致',
        { type: 'warning', confirmButtonText: '知道了' },
      )
      appUploadForm.value.file = null
      appUploadForm.value.fileUrl = ''
      return
    }
    if (inspected.platform) appUploadForm.value.platform = inspected.platform
    if (inspected.packageName) appUploadForm.value.packageName = inspected.packageName
    if (inspected.versionName) appUploadForm.value.versionName = inspected.versionName
    if (typeof inspected.versionCode === 'number') appUploadForm.value.versionCode = inspected.versionCode
  } catch {
    ElMessage.warning('已选择文件，但未能完整识别，请补全版本信息后上传')
  } finally {
    appPackageInspecting.value = false
  }
}

async function submitAppUpload() {
  const f = appUploadForm.value
  if (f.platform === 'ANDROID' && !f.fileUrl) return ElMessage.warning('请先选择 Android 安装包文件')
  if (!f.versionName || !f.versionCode) return ElMessage.warning('请填写版本信息')

  uploadingApp.value = true
  try {
    const fd = new FormData()
    fd.append('appId', appId)
    fd.append('platform', f.platform)
    fd.append('versionName', f.versionName)
    fd.append('versionCode', String(f.versionCode))
    if (f.packageName) fd.append('packageName', f.packageName)
    if (f.changeLog) fd.append('changeLog', f.changeLog)
    if (f.platform === 'ANDROID' && f.fileUrl) fd.append('apkUrl', f.fileUrl)
    await updateAdminApi.uploadAppVersion(fd)
    ElMessage.success('上传成功')
    showUploadApp.value = false
    await loadAppVersions()
  } finally {
    uploadingApp.value = false
  }
}

const showUploadRn = ref(false)
const uploadingRn = ref(false)
const rnUploadForm = ref({
  moduleId: '',
  platform: 'ANDROID' as 'ANDROID' | 'IOS' | 'HARMONY',
  version: '',
  minCommonVersion: '',
  packageName: '',
  note: '',
  file: null as File | null,
})

function parseRnBundleName(fileName: string): RnBundleInspectResult | null {
  const baseName = fileName.replace(/\.[^.]+$/, '')
  const parts = baseName.split('__')
  if (parts.length >= 4) {
    return {
      moduleId: parts[0],
      platform: parts[1].toUpperCase() as 'ANDROID' | 'IOS' | 'HARMONY',
      version: parts[2],
      minCommonVersion: parts[3],
      packageName: parts[4],
      fileName,
      detected: true,
    }
  }
  return null
}

async function onRnBundleChange(uploadFile: { raw?: File } | null) {
  const file = uploadFile?.raw ?? null
  rnUploadForm.value.file = file
  if (!file) return

  const local = parseRnBundleName(file.name)
  if (local) {
    if (local.moduleId) rnUploadForm.value.moduleId = local.moduleId
    if (local.platform) rnUploadForm.value.platform = local.platform
    if (local.version) rnUploadForm.value.version = local.version
    if (local.minCommonVersion) rnUploadForm.value.minCommonVersion = local.minCommonVersion
    if (local.packageName) rnUploadForm.value.packageName = local.packageName
    return
  }

  const formData = new FormData()
  formData.append('bundle', file)
  try {
    const res = await updateAdminApi.inspectRnBundle(formData)
    const inspected = res.data.data as RnBundleInspectResult
    if (inspected.moduleId) rnUploadForm.value.moduleId = inspected.moduleId
    if (inspected.platform) rnUploadForm.value.platform = inspected.platform
    if (inspected.version) rnUploadForm.value.version = inspected.version
    if (inspected.minCommonVersion) rnUploadForm.value.minCommonVersion = inspected.minCommonVersion
    if (inspected.packageName) rnUploadForm.value.packageName = inspected.packageName
  } catch {
    ElMessage.warning('已选择文件，但未能从文件名识别出 RN Bundle 元数据，请补全后上传')
  }
}

async function submitRnUpload() {
  const f = rnUploadForm.value
  if (!f.moduleId || !f.version || !f.file) return ElMessage.warning('请填写模块ID、版本和 Bundle 文件')
  uploadingRn.value = true
  try {
    const fd = new FormData()
    fd.append('appId', appId)
    fd.append('moduleId', f.moduleId)
    fd.append('platform', f.platform)
    fd.append('version', f.version)
    if (f.minCommonVersion) fd.append('minCommonVersion', f.minCommonVersion)
    if (f.packageName) fd.append('packageName', f.packageName)
    if (f.note) fd.append('note', f.note)
    fd.append('bundle', f.file)
    await updateAdminApi.uploadRnBundle(fd)
    ElMessage.success('Bundle 上传成功')
    showUploadRn.value = false
    await loadRnBundles()
  } finally {
    uploadingRn.value = false
  }
}

async function loadAppVersions() {
  loadingApp.value = true
  try {
    const res = await updateAdminApi.listAppVersions(appId, appPlatform.value)
    appVersions.value = res.data.data
  } catch {
    ElMessage.error('加载失败')
  } finally {
    loadingApp.value = false
  }
}

async function loadRnBundles() {
  loadingRn.value = true
  try {
    const res = await updateAdminApi.listRnBundles(appId, rnModuleFilter.value || undefined, rnPlatform.value || undefined)
    rnBundles.value = res.data.data
  } catch {
    ElMessage.error('加载失败')
  } finally {
    loadingRn.value = false
  }
}

const showPublish = ref(false)
const submittingPublish = ref(false)
const publishTarget = ref<{ id: string; type: 'app' | 'rn'; row?: AppVersion | RnBundle } | null>(null)
const publishForm = ref({
  publishImmediately: true,
  scheduledPublishAt: '',
  forceUpdate: false,
})

function openPublishDialog(row: AppVersion | RnBundle, type: 'app' | 'rn') {
  publishTarget.value = { id: row.id, type, row }
  publishForm.value = {
    publishImmediately: !row.scheduledPublishAt,
    scheduledPublishAt: row.scheduledPublishAt ?? '',
    forceUpdate: 'forceUpdate' in row ? Boolean((row as AppVersion).forceUpdate) : false,
  }
  showPublish.value = true
}

async function submitPublish() {
  if (!publishTarget.value) return
  if (!publishForm.value.publishImmediately && !publishForm.value.scheduledPublishAt) {
    ElMessage.warning('请选择计划发布时间')
    return
  }
  submittingPublish.value = true
  try {
    const body = {
      publishImmediately: publishForm.value.publishImmediately,
      scheduledPublishAt: publishForm.value.scheduledPublishAt || undefined,
      forceUpdate: publishForm.value.forceUpdate,
    }
    if (publishTarget.value.type === 'app') {
      await updateAdminApi.publishAppVersion(publishTarget.value.id, body)
      await loadAppVersions()
    } else {
      await updateAdminApi.publishRnBundle(publishTarget.value.id, body)
      await loadRnBundles()
    }
    ElMessage.success('已保存发布操作')
    showPublish.value = false
  } catch {
    ElMessage.error('发布失败')
  } finally {
    submittingPublish.value = false
  }
}

async function unpublishApp(id: string) {
  await updateAdminApi.unpublishAppVersion(id)
  ElMessage.success('已下架')
  await loadAppVersions()
}

async function unpublishRn(id: string) {
  await updateAdminApi.unpublishRnBundle(id)
  ElMessage.success('已下架')
  await loadRnBundles()
}

function formatTime(t: string) {
  return t ? new Date(t).toLocaleString('zh-CN') : '-'
}

function statusLabel(row: { publishStatus: string }) {
  return { DRAFT: '草稿', PUBLISHED: '已发布', DEPRECATED: '已下架' }[row.publishStatus] ?? row.publishStatus
}

function statusTagType(row: { publishStatus: string }) {
  return { DRAFT: '', PUBLISHED: 'success', DEPRECATED: 'info' }[row.publishStatus] ?? ''
}

function storeLabel(type: string) {
  return STORE_DEFS.find(s => s.type === type)?.label ?? type
}

function reviewLabel(state: string): string {
  return { PENDING: '待提交', UNDER_REVIEW: '审核中', APPROVED: '已通过', REJECTED: '已拒绝' }[state] ?? state
}

function reviewTagType(state: string): string {
  return { PENDING: 'info', UNDER_REVIEW: 'warning', APPROVED: 'success', REJECTED: 'danger' }[state] ?? ''
}

function parseStoreReview(json?: string): { store: string; state: string }[] {
  if (!json) return []
  try {
    const m = JSON.parse(json) as Record<string, string>
    return Object.entries(m).map(([store, state]) => ({ store, state }))
  } catch {
    return []
  }
}

watch(app, (value) => {
  if (value?.packageName) {
    appUploadForm.value.packageName = value.packageName
  }
})

watch([grayMemberKeyword, grayMemberGroupFilter], () => {
  if (showGray.value && grayForm.value.grayMode === 'MEMBERS' && grayForm.value.selectionSource === 'LOCAL') {
    loadGrayMembers()
  }
})

watch(grayForm, () => {
  if (showGray.value && grayForm.value.grayMode === 'MEMBERS' && grayForm.value.selectionSource === 'LOCAL') {
    loadGrayMembers()
  }
}, { deep: true })

onMounted(() => {
  loadApp()
  loadAppVersions()
  loadRnBundles()
  loadStoreConfigs()
  loadPublishConfig()
})
</script>

<style scoped>
.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.text-muted { color: var(--el-text-color-placeholder); font-size: 12px; }
.form-tip { font-size: 12px; color: var(--el-text-color-secondary); margin-left: 8px; }

/* Store config grid */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.store-card { cursor: default; }
.store-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.store-card-name { font-weight: 600; font-size: 14px; }
.store-card-status { margin-bottom: 12px; }
.store-card-footer { display: flex; gap: 8px; }

/* Submit store checkbox */
.store-checkbox-row { padding: 6px 0; }

.store-config-form {
  min-width: 0;
}

.release-config-form {
  max-width: 920px;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.guide-card {
  min-height: 100%;
}

.guide-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.guide-card-title {
  font-weight: 600;
  font-size: 14px;
}

.guide-card-subtitle {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin-top: 2px;
}

.guide-image {
  width: 100%;
  height: 160px;
  margin: 8px 0 12px;
  border-radius: 6px;
}

.guide-link-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
}

.guide-link-hint {
  color: var(--el-text-color-secondary);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 8px;
}

.guide-hint {
  color: var(--el-text-color-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.gray-member-groups {
  width: 100%;
}

.gray-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gray-member-row {
  padding: 6px 0;
}

.gray-member-id {
  font-weight: 600;
  margin-right: 8px;
}

.gray-member-name {
  color: var(--el-text-color-secondary);
}

.release-store-checkbox-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
</style>