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

    <el-alert
      title="这里是应用商店配置的独立指引页。建议先完成凭据配置和市场跳转页，再回到版本管理页提交审核。Harmony 应用仅跳转应用市场，不做本地安装。"
      type="info"
      show-icon
      :closable="false"
      style="margin: 16px 0;"
    />

    <div class="guide-layout">
      <!-- 左侧厂商列表 -->
      <div class="guide-sidebar">
        <div
          v-for="store in STORE_GUIDES"
          :key="store.type"
          class="guide-sidebar-item"
          :class="{ active: activeStoreType === store.type }"
          @click="activeStoreType = store.type"
        >
          <span class="guide-sidebar-label">{{ store.label }}</span>
          <el-tag size="small" type="success" v-if="store.enabled">已接入</el-tag>
        </div>
      </div>

      <!-- 右侧内容区 -->
      <div class="guide-content" v-if="activeStore">
        <div class="guide-content-header">
          <div class="guide-content-title">
            <span>{{ activeStore.label }}</span>
            <el-tag size="small" type="success" v-if="activeStore.enabled">已接入</el-tag>
          </div>
          <p class="guide-subtitle">{{ activeStore.subtitle }}</p>
          <el-link :href="activeStore.url" target="_blank" type="primary">
            {{ activeStore.urlLabel }}
          </el-link>
        </div>

        <div class="guide-content-body">
          <!-- 左侧步骤 -->
          <div class="guide-steps">
            <el-steps direction="vertical" :active="activeStore.steps.length" finish-status="success">
              <el-step
                v-for="step in activeStore.steps"
                :key="step.title"
                :title="step.title"
                :description="step.description"
              />
            </el-steps>
            <p class="guide-hint">{{ activeStore.hint }}</p>
          </div>

          <!-- 右侧图片 -->
          <div class="guide-image-wrap" v-if="activeStore.image">
            <img :src="activeStore.image" :alt="activeStore.label + ' 配置截图'" class="guide-image" />
          </div>
        </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
  url: string
  urlLabel: string
  steps: { title: string; description: string }[]
  hint: string
  image?: string
  enabled: boolean
}

const STORE_GUIDES: StoreGuide[] = [
  {
    type: 'HUAWEI',
    label: '华为应用市场',
    subtitle: 'AppGallery Connect Connect API 凭据',
    url: 'https://developer.huawei.com/consumer/cn/doc/AppGallery-connect-Guides/agcapi-getstarted-0000001111845114',
    urlLabel: '查看华为官方文档',
    steps: [
      { title: '创建应用', description: '在 AppGallery Connect 中打开目标应用。' },
      { title: '创建 Connect API 凭据', description: '保存 Client ID 和 Client Secret。' },
      { title: '回到版本管理页保存', description: '配置凭据后即可提交审核。' },
    ],
    hint: '适合上传 APK 并提交审核；支持回调跟踪审核状态。',
    image: huaweiGuideImage,
    enabled: true,
  },
  {
    type: 'MI',
    label: '小米应用商店',
    subtitle: '使用自动发布接口的账号与私钥',
    url: 'https://dev.mi.com/distribute/doc/details?pId=1134',
    urlLabel: '查看小米官方文档',
    steps: [
      { title: '进入应用管理', description: '定位到目标应用。' },
      { title: '准备自动发布接口密钥', description: '记录用户名、公钥证书和 RSA 私钥。' },
      { title: '保存到租户平台', description: '完成后可提交审核。' },
    ],
    hint: '字段按 username / publicKey / privateKey 保存。',
    image: miGuideImage,
    enabled: true,
  },
  {
    type: 'OPPO',
    label: 'OPPO 软件商店',
    subtitle: '我的 API 服务端应用凭据',
    url: 'https://open.oppomobile.com/new/developmentDoc/info?id=11119',
    urlLabel: '查看 OPPO 官方文档',
    steps: [
      { title: '进入我的 API', description: '确认当前应用可创建服务端应用。' },
      { title: '创建 client_id / client_secret', description: '完成服务端凭据申请。' },
      { title: '保存并提交审核', description: '配置完成后返回版本管理页。' },
    ],
    hint: '与后端 submitToOppo 的字段一致。',
    image: oppoGuideImage,
    enabled: true,
  },
  {
    type: 'VIVO',
    label: 'vivo 应用商店',
    subtitle: 'API 管理中的 access_key / access_secret',
    url: 'https://dev.vivo.com.cn/documentCenter/doc/326',
    urlLabel: '查看 vivo 官方文档',
    steps: [
      { title: '进入 API 管理', description: '找到当前应用对应入口。' },
      { title: '复制 access key 和 secret', description: '按服务端要求保存。' },
      { title: '保存后提交审核', description: '审核状态会通过 Webhook 回传。' },
    ],
    hint: '注意请求频率限制，状态拉取需做节流。',
    image: vivoGuideImage,
    enabled: true,
  },
  {
    type: 'HONOR',
    label: '荣耀应用市场',
    subtitle: '管理中心 API 凭据',
    url: 'https://developer.honor.com/cn',
    urlLabel: '查看荣耀官方文档',
    steps: [
      { title: '进入管理中心', description: '打开荣耀开发者后台。' },
      { title: '申请服务端凭据', description: '保存 Client ID / Client Secret。' },
      { title: '提交审核', description: '与华为同类流程接入。' },
    ],
    hint: 'Harmony 这条线仅跳转应用市场，不提供本地安装包。',
    image: honorGuideImage,
    enabled: true,
  },
  {
    type: 'HARMONY_APP',
    label: '鸿蒙应用',
    subtitle: '鸿蒙应用市场独立跳转页',
    url: 'https://developer.huawei.com/consumer/cn/',
    urlLabel: '查看鸿蒙官方文档',
    steps: [
      { title: '确认鸿蒙应用页', description: '准备独立的鸿蒙应用市场详情页。' },
      { title: '复制跳转链接', description: '如需市场跳转，再把详情页链接填写到应用商店配置。' },
      { title: '回到版本管理页', description: '鸿蒙版本仅记录版本号和跳转页，不填也可继续。' },
    ],
    hint: '鸿蒙应用配置只维护市场跳转页，不参与 Android 审核上传。',
    enabled: true,
  },
  {
    type: 'APP_STORE',
    label: 'Apple App Store',
    subtitle: 'App Store Connect API Key',
    url: 'https://developer.apple.com/documentation/appstoreconnectapi',
    urlLabel: '查看 Apple 官方文档',
    steps: [
      { title: '创建 API Key', description: '保存 Team ID / Key ID / p8 私钥。' },
      { title: '补充 Bundle ID', description: '回到版本管理页保存包名；链接可选。' },
      { title: '提交审核', description: '支持审核后自动发布，链接不填也能继续走流程。' },
    ],
    hint: 'iOS 的 App Store 链接可选填写，需要跳转时再补。',
    enabled: true,
  },
  {
    type: 'GOOGLE_PLAY',
    label: 'Google Play',
    subtitle: '服务账号 JSON 凭据',
    url: 'https://developer.android.com/google/play/developer-api',
    urlLabel: '查看 Google Play 官方文档',
    steps: [
      { title: '创建服务账号', description: '从 Google Cloud 获取 JSON。' },
      { title: '绑定 Play 权限', description: '授予对应应用的发布权限。' },
      { title: '保存服务账号 JSON', description: '回到版本管理页保存凭据。' },
    ],
    hint: '适合由服务端或脚本自动提交审核。',
    enabled: true,
  },
]

const activeStoreType = ref(STORE_GUIDES[0].type)
const activeStore = computed(() => STORE_GUIDES.find(s => s.type === activeStoreType.value) ?? STORE_GUIDES[0])
</script>

<style scoped>
.guide-layout {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.guide-sidebar {
  width: 200px;
  flex-shrink: 0;
  border: 1px solid var(--el-border-color-light);
  border-radius: 8px;
  overflow: hidden;
  background: var(--el-bg-color);
}

.guide-sidebar-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--el-border-color-lighter);
  transition: background 0.2s;
}

.guide-sidebar-item:last-child {
  border-bottom: none;
}

.guide-sidebar-item:hover {
  background: var(--el-fill-color-light);
}

.guide-sidebar-item.active {
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  border-left: 3px solid var(--el-color-primary);
}

.guide-sidebar-label {
  font-size: 14px;
}

.guide-content {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--el-border-color-light);
  border-radius: 8px;
  padding: 24px;
  background: var(--el-bg-color);
}

.guide-content-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.guide-content-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 8px;
}

.guide-subtitle {
  margin: 0 0 8px;
  color: var(--el-text-color-secondary);
}

.guide-content-body {
  display: flex;
  gap: 24px;
}

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

.guide-hint {
  color: var(--el-text-color-secondary);
  font-size: 13px;
  margin-top: 16px;
  padding: 12px;
  background: var(--el-fill-color-light);
  border-radius: 6px;
}

.guide-image-wrap {
  width: 420px;
  flex-shrink: 0;
}

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

@media (max-width: 992px) {
  .guide-layout {
    flex-direction: column;
  }
  .guide-sidebar {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: none;
    background: transparent;
  }
  .guide-sidebar-item {
    border: 1px solid var(--el-border-color-light);
    border-radius: 6px;
    flex: 1;
    min-width: 120px;
  }
  .guide-sidebar-item.active {
    border-left: none;
    border: 1px solid var(--el-color-primary);
  }
  .guide-content-body {
    flex-direction: column;
  }
  .guide-image-wrap {
    width: 100%;
  }
}
</style>
