<template>
  <div class="help-container">
    <div class="help-header">
      <h1>使用帮助</h1>
      <el-button type="info" plain @click="openSwagger">
        <el-icon style="margin-right: 5px"><Link /></el-icon>
        API 文档 (Swagger)
      </el-button>
    </div>
    
    <div class="tab-selector">
      <el-select 
        v-model="activeTab" 
        placeholder="请选择帮助主题"
        size="large"
        style="width: 100%; max-width: 500px;"
      >
        <el-option
          v-for="tab in tabOptions"
          :key="tab.value"
          :label="tab.label"
          :value="tab.value"
        />
      </el-select>
    </div>

    <div class="tab-content">
      <IntegrationOverview v-if="activeTab === 'integration-overview'" />
      <FastIntegration v-if="activeTab === 'fast-integration'" />
      <CustomLogin v-if="activeTab === 'custom-login'" />
      <TicketExchange v-if="activeTab === 'ticket-exchange'" />
      <ApiComparison v-if="activeTab === 'api-comparison'" />
      <AccountSync v-if="activeTab === 'account-sync'" />
      <UserSyncPull v-if="activeTab === 'user-sync-pull'" />
      <MessageIntegration v-if="activeTab === 'message-integration'" />
      <MinIOFilePermissions v-if="activeTab === 'minio-file-permissions'" />
      <AccountManagement v-if="activeTab === 'account-management'" />
      <OidcIntegration v-if="activeTab === 'oidc-integration'" />
      <Tbd v-if="activeTab === 'tbd'" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Link } from '@element-plus/icons-vue'
import { useHelpDocs } from '../composables/useHelpDocs'

// Import new components
import IntegrationOverview from './help/IntegrationOverview.vue'
import FastIntegration from './help/FastIntegration.vue'
import CustomLogin from './help/CustomLogin.vue'
import TicketExchange from './help/TicketExchange.vue'
import ApiComparison from './help/ApiComparison.vue'
import AccountSync from './help/AccountSync.vue'
import UserSyncPull from './help/UserSyncPull.vue'
import MessageIntegration from './help/MessageIntegration.vue'
import MinIOFilePermissions from './help/MinIOFilePermissions.vue'
import AccountManagement from './help/AccountManagement.vue'
import OidcIntegration from './help/OidcIntegration.vue'
import Tbd from './help/Tbd.vue'

const activeTab = ref('integration-overview')
const { openSwagger } = useHelpDocs()

// Tab选项配置
const tabOptions = [
  { label: '平台对接概述', value: 'integration-overview' },
  { label: '快速对接 (Redirect)', value: 'fast-integration' },
  { label: '自定义登录页面', value: 'custom-login' },
  { label: '票据交互', value: 'ticket-exchange' },
  { label: '接口对比', value: 'api-comparison' },
  { label: '账号同步 (M2M)', value: 'account-sync' },
  { label: '全量用户同步', value: 'user-sync-pull' },
  { label: '消息中心对接', value: 'message-integration' },
  { label: '文件存储权限控制', value: 'minio-file-permissions' },
  { label: '平台账号管理', value: 'account-management' },
  { label: 'OIDC 集成指南', value: 'oidc-integration' },
  { label: '其他帮助 (待定)', value: 'tbd' }
]
</script>

<style scoped>
.help-container {
  padding: 30px;
  max-width: 1000px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 8px;
  min-height: 80vh;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.help-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eaecef;
  margin-bottom: 20px;
  padding-bottom: 15px;
}

.tab-selector {
  margin-bottom: 30px;
  display: flex;
  justify-content: flex-start;
}

.tab-content {
  margin-top: 20px;
}

h1 {
  font-size: 28px;
  color: #1f2f3d;
  font-weight: 600;
  margin: 0;
  padding: 0;
  border-bottom: none;
}
</style>
