<template>
  <div>
    <div class="page-header">
      <div>
        <h2>接入文档</h2>
        <p class="subtitle">按平台查看最短接入路径和常用调用方式。</p>
      </div>
      <el-button @click="openDocs">打开文档站</el-button>
    </div>

    <el-row :gutter="16">
      <el-col :xs="24" :md="8">
        <el-card shadow="hover" class="doc-card">
          <template #header>React Native</template>
          <pre class="code-block">import { XuqmSDK } from '@xuqm/rn-sdk'

await XuqmSDK.initialize({ appKey })
await XuqmSDK.login({
  userId,
  userSig,
})</pre>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="8">
        <el-card shadow="hover" class="doc-card">
          <template #header>Android / iOS</template>
          <pre class="code-block">XuqmSDK.initialize(appKey)
XuqmSDK.login(userId, userSig)
PushSDK.initialize(userId)</pre>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="8">
        <el-card shadow="hover" class="doc-card">
          <template #header>服务端</template>
          <pre class="code-block">POST /api/im/admin/users/{userId}/usersig
POST /api/im/admin/users/{userId}/usersig/verify
POST /api/im/auth/login?userSig=...
POST /api/ops/service-requests/{id}/approve</pre>
        </el-card>
      </el-col>
    </el-row>

    <el-card style="margin-top: 16px">
      <template #header>接入步骤</template>
      <el-steps :active="3" align-center finish-status="success">
        <el-step title="创建应用" description="在应用列表创建 AppKey 和基础信息" />
        <el-step title="开启服务" description="在应用详情开启 IM / Push / Update" />
        <el-step title="接入 SDK" description="按平台文档完成登录和消息能力接入" />
      </el-steps>
      <el-alert
        title="IM 登录使用 userSig；平台事件账号会使用预先注册的 admin / platform 用户，服务端 SDK / REST API 仅面向管理员账号。"
        type="info"
        :closable="false"
        show-icon
        style="margin-top:16px"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
function openDocs() {
  window.open('/docs/', '_blank', 'noopener,noreferrer')
}
</script>

<style scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.subtitle {
  margin: 6px 0 0;
  color: #606266;
}
.doc-card {
  height: 100%;
}
.code-block {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #303133;
}
</style>
