<template>
  <div class="store-guide-page">
    <el-page-header @back="$router.back()" content="应用配置指引" />

    <!-- 平台选择 -->
    <div class="platform-selector">
      <div
        v-for="p in PLATFORMS"
        :key="p.key"
        class="platform-card"
        :class="{ active: activePlatform === p.key }"
        @click="activePlatform = p.key"
      >
        <div class="platform-icon">{{ p.icon }}</div>
        <div class="platform-label">{{ p.label }}</div>
        <div class="platform-desc">{{ p.desc }}</div>
      </div>
    </div>

    <!-- 商店指引列表 -->
    <div class="guide-list">
      <div v-for="store in currentStores" :key="store.type" class="guide-card">
        <div class="guide-card-left">
          <div class="guide-card-header">
            <h3 class="guide-card-title">{{ store.label }}</h3>
            <p class="guide-card-subtitle">{{ store.subtitle }}</p>
          </div>

          <div class="guide-steps">
            <div v-for="(step, i) in store.steps" :key="i" class="guide-step">
              <div class="guide-step-num">{{ i + 1 }}</div>
              <div class="guide-step-content">
                <div class="guide-step-title">{{ step.title }}</div>
                <div class="guide-step-desc">{{ step.description }}</div>
              </div>
            </div>
          </div>

          <div class="guide-hint" v-if="store.hint">
            <span class="guide-hint-icon">💡</span>
            {{ store.hint }}
          </div>

          <div class="guide-footer">
            <el-link :href="store.url" target="_blank" type="primary">
              {{ store.urlLabel }} →
            </el-link>
          </div>
        </div>

        <div class="guide-card-right" v-if="store.image">
          <img :src="store.image" :alt="store.label + ' 配置截图'" class="guide-screenshot" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { ref, computed } from 'vue'
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 appKey = route.params.appKey as string

interface StoreGuide {
  type: string
  label: string
  subtitle: string
  platform: string
  url: string
  urlLabel: string
  steps: { title: string; description: string }[]
  hint: string
  image?: string
}

const PLATFORMS = [
  { key: 'android', label: 'Android', icon: '🤖', desc: '华为 / 小米 / OPPO / vivo / 荣耀 / Google Play' },
  { key: 'ios', label: 'iOS', icon: '🍎', desc: 'Apple App Store' },
  { key: 'harmony', label: '鸿蒙', icon: '🔷', desc: 'HarmonyOS 应用市场' },
  { key: 'other', label: '通知配置', icon: '🔔', desc: '审核状态回调通知' },
]

const STORE_GUIDES: StoreGuide[] = [
  {
    type: 'HUAWEI', label: '华为应用市场', platform: 'android',
    subtitle: 'AppGallery Connect API 凭据',
    url: 'https://developer.huawei.com/consumer/cn/doc/AppGallery-connect-Guides/agcapi-getstarted-0000001111845114',
    urlLabel: '查看华为官方文档',
    steps: [
      { title: '进入 AppGallery Connect', description: '在华为开发者平台（developer.huawei.com）找到目标应用。' },
      { title: '创建 Connect API 凭据', description: '进入"开发" → "API 管理" → 开启 Connect API，创建服务端凭据并选择 APP 管理员角色。' },
      { title: '复制 Client ID 和 Client Secret', description: '创建成功后复制凭据，保存到租户平台的"凭据配置"中。' },
    ],
    hint: '配置后可自动上传 APK 并提交审核，支持轮询跟踪审核状态。',
    image: huaweiGuideImage,
  },
  {
    type: 'MI', label: '小米应用商店', platform: 'android',
    subtitle: '自动发布接口的账号与私钥',
    url: 'https://dev.mi.com/distribute/doc/details?pId=1134',
    urlLabel: '查看小米官方文档',
    steps: [
      { title: '进入应用游戏管理', description: '在小米开放平台控制台选择目标应用。' },
      { title: '打开自动发布接口', description: '进入"版本管理" → "自动发布接口"，下载公钥文件并准备 RSA 私钥。' },
      { title: '录入用户名和私钥', description: '将用户名、公钥证书内容、RSA 私钥分别保存到凭据配置中。' },
    ],
    hint: '字段为 username / publicKey / privateKey，与后端上传服务一致。',
    image: miGuideImage,
  },
  {
    type: 'OPPO', label: 'OPPO 软件商店', platform: 'android',
    subtitle: '我的 API 服务端应用凭据',
    url: 'https://open.oppomobile.com/new/developmentDoc/info?id=11119',
    urlLabel: '查看 OPPO 官方文档',
    steps: [
      { title: '进入"我的 API"', description: '在 OPPO 开放平台确认当前应用拥有服务端应用能力。' },
      { title: '新建服务端应用', description: '点击"创建服务端应用"，按平台要求完成凭据申请。' },
      { title: '复制 Client ID 和 Client Secret', description: '创建成功后复制两个值，保存到凭据配置中。' },
    ],
    hint: '字段与后端 submitToOppo 读取逻辑一致。',
    image: oppoGuideImage,
  },
  {
    type: 'VIVO', label: 'vivo 应用商店', platform: 'android',
    subtitle: 'API 管理中的 access_key / access_secret',
    url: 'https://dev.vivo.com.cn/documentCenter/doc/326',
    urlLabel: '查看 vivo 官方文档',
    steps: [
      { title: '进入 API 管理', description: '在 vivo 开放平台找到当前应用对应的接口管理入口。' },
      { title: '激活并读取密钥', description: '首次启用 API 后需要刷新页面，然后复制 access_key 和 access_secret。' },
      { title: '保存到凭据配置', description: '将 Access Key 和 Access Secret 填入凭据配置中。' },
    ],
    hint: '注意请求频率限制，审核状态轮询已内置节流。',
    image: vivoGuideImage,
  },
  {
    type: 'HONOR', label: '荣耀应用市场', platform: 'android',
    subtitle: '管理中心 API 凭据',
    url: 'https://developer.honor.com/cn',
    urlLabel: '查看荣耀官方文档',
    steps: [
      { title: '进入管理中心', description: '打开荣耀开发者后台（developer.honor.com）并进入凭证页。' },
      { title: '申请服务端凭据', description: '创建用于服务端上传的 API 凭据。' },
      { title: '复制 Client ID 和 Client Secret', description: '与华为同类流程，复制凭据保存到配置中。' },
    ],
    hint: '与后端 Honor 提交流程完全一致；跳转页可选填写。',
    image: honorGuideImage,
  },
  {
    type: 'GOOGLE_PLAY', label: 'Google Play', platform: 'android',
    subtitle: '服务账号 JSON 凭据',
    url: 'https://developer.android.com/google/play/developer-api',
    urlLabel: '查看 Google Play 官方文档',
    steps: [
      { title: '创建服务账号', description: '从 Google Cloud 控制台创建服务账号并下载 JSON 密钥文件。' },
      { title: '授予 Play 管理权限', description: '在 Google Play Console 中将该服务账号绑定到目标应用，授予发布权限。' },
      { title: '粘贴 JSON 内容', description: '将完整的 JSON 文件内容保存到凭据配置中。' },
    ],
    hint: '适合由服务端或脚本自动提交审核。',
  },
  {
    type: 'APP_STORE', label: 'Apple App Store', platform: 'ios',
    subtitle: 'App Store Connect API Key',
    url: 'https://developer.apple.com/documentation/appstoreconnectapi',
    urlLabel: '查看 Apple 官方文档',
    steps: [
      { title: '创建 API Key', description: '进入 App Store Connect → 用户和访问 → 整合 → 点击"+"创建密钥，选择"管理"权限。' },
      { title: '下载 .p8 私钥', description: '创建后立即下载私钥文件（只能下载一次），用文本编辑器打开并复制完整内容。' },
      { title: '填写 Issuer ID / Key ID / 私钥', description: 'Issuer ID 在整合页面顶部，Key ID 在密钥列表中，私钥包含 BEGIN/END 标记。' },
    ],
    hint: '配置后可自动查询 App Store 审核状态。私钥为 .p8 文件的完整 PEM 内容。',
  },
  {
    type: 'HARMONY_APP', label: '鸿蒙应用市场', platform: 'harmony',
    subtitle: 'AppGallery Connect API 凭据',
    url: 'https://developer.huawei.com/consumer/cn/doc/AppGallery-connect-Guides/agcapi-getstarted-0000001111845114',
    urlLabel: '查看鸿蒙官方文档',
    steps: [
      { title: '进入 AppGallery Connect', description: '在华为开发者平台找到目标鸿蒙应用（与华为应用市场共用平台）。' },
      { title: '创建 Connect API 凭据', description: '进入"开发" → "API 管理" → 开启 Connect API，创建服务端凭据。' },
      { title: '复制 Client ID 和 Client Secret', description: '复制凭据信息保存到凭据配置中。' },
    ],
    hint: '鸿蒙应用审核流程与华为应用市场共用 AppGallery Connect 平台。配置后可自动查询审核状态。',
  },
]

const activePlatform = ref('android')
const currentStores = computed(() => STORE_GUIDES.filter(s => s.platform === activePlatform.value))
</script>

<style scoped>
.store-guide-page {
  padding: 20px 24px;
  max-width: 960px;
  margin: 0 auto;
}

/* ── 平台选择器 ── */
.platform-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 20px 0 28px;
}

.platform-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 12px;
  border: 2px solid var(--el-border-color-light);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--el-bg-color);
}

.platform-card:hover {
  border-color: var(--el-color-primary-light-5);
  background: var(--el-color-primary-light-9);
}

.platform-card.active {
  border-color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  box-shadow: 0 2px 8px rgba(var(--el-color-primary-rgb), 0.15);
}

.platform-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.platform-label {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.platform-desc {
  font-size: 11px;
  color: var(--el-text-color-secondary);
  text-align: center;
  line-height: 1.4;
}

/* ── 指引卡片列表 ── */
.guide-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.guide-card {
  display: flex;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--el-border-color-light);
  border-radius: 12px;
  background: var(--el-bg-color);
}

.guide-card-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.guide-card-header {
  margin-bottom: 20px;
}

.guide-card-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 4px;
}

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

/* ── 步骤 ── */
.guide-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.guide-step {
  display: flex;
  gap: 12px;
}

.guide-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--el-color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.guide-step-content {
  flex: 1;
  min-width: 0;
}

.guide-step-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.guide-step-desc {
  font-size: 13px;
  color: var(--el-text-color-regular);
  line-height: 1.5;
}

/* ── 提示 ── */
.guide-hint {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  line-height: 1.6;
  padding: 12px;
  background: var(--el-fill-color-light);
  border-radius: 8px;
  margin-bottom: 16px;
}

.guide-hint-icon {
  flex-shrink: 0;
}

/* ── 底部链接 ── */
.guide-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--el-border-color-lighter);
}

/* ── 截图 ── */
.guide-card-right {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
}

.guide-screenshot {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--el-border-color-light);
}

/* ── 响应式 ── */
@media (max-width: 768px) {
  .platform-selector {
    grid-template-columns: repeat(2, 1fr);
  }
  .guide-card {
    flex-direction: column;
  }
  .guide-card-right {
    width: 100%;
  }
}
</style>
