<template>
  <div class="settings-page">
    <div class="page-header">
      <div>
        <h2 class="page-title">⚙️ 平台设置</h2>
        <p class="page-desc">管理平台核心配置项，修改后立即生效</p>
      </div>
    </div>

    <a-row :gutter="[20, 20]">
      <!-- 左侧菜单 -->
      <a-col :xs="24" :md="6">
        <div class="settings-nav">
          <div
            v-for="tab in tabs"
            :key="tab.key"
            class="settings-nav-item"
            :class="{ active: activeTab === tab.key }"
            @click="activeTab = tab.key"
          >
            <span class="nav-icon">{{ tab.icon }}</span>
            {{ tab.label }}
          </div>
        </div>
      </a-col>

      <!-- 右侧内容 -->
      <a-col :xs="24" :md="18">
        <div class="settings-panel">
          <!-- 基础配置 -->
          <template v-if="activeTab === 'basic'">
            <div class="settings-section-title">🌐 基础配置</div>
            <a-form :model="basicForm" layout="vertical" class="settings-form">
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="平台名称">
                    <a-input v-model:value="basicForm.siteName" placeholder="例：CloudBuddy 应用平台" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="平台域名">
                    <a-input v-model:value="basicForm.domain" placeholder="例：app.example.com" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-form-item label="平台简介">
                <a-textarea v-model:value="basicForm.description" :rows="3" placeholder="平台简短描述" :maxlength="500" show-count />
              </a-form-item>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="客服邮箱">
                    <a-input v-model:value="basicForm.supportEmail" placeholder="support@example.com" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="客服电话">
                    <a-input v-model:value="basicForm.supportPhone" placeholder="400-xxx-xxxx" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-form-item label="ICP 备案号">
                <a-input v-model:value="basicForm.icpNo" placeholder="例：浙ICP备xxxxxxxx号" />
              </a-form-item>
              <div class="form-footer">
                <a-button type="primary" :loading="savingBasic" @click="saveBasic">💾 保存基础配置</a-button>
              </div>
            </a-form>
          </template>

          <!-- 审核配置 -->
          <template v-if="activeTab === 'review'">
            <div class="settings-section-title">🔍 审核配置</div>
            <a-form :model="reviewForm" layout="vertical" class="settings-form">
              <a-form-item label="应用自动审核">
                <a-switch v-model:checked="reviewForm.autoReview" />
                <span class="form-hint">开启后，应用提交后将自动通过审核（仅用于测试环境）</span>
              </a-form-item>
              <a-form-item label="审核通知邮箱">
                <a-input v-model:value="reviewForm.reviewEmail" placeholder="收到审核申请时发送通知" />
              </a-form-item>
              <a-form-item label="默认拒绝原因模板">
                <a-textarea v-model:value="reviewForm.defaultRejectReason" :rows="4" placeholder="填写常见的拒绝原因模板..." />
              </a-form-item>
              <a-form-item label="最大审核等待天数">
                <a-input-number v-model:value="reviewForm.maxWaitDays" :min="1" :max="30" style="width:120px" addonAfter="天" />
                <span class="form-hint">超出等待时间将自动提醒审核人员</span>
              </a-form-item>
              <div class="form-footer">
                <a-button type="primary" :loading="savingReview" @click="saveReview">💾 保存审核配置</a-button>
              </div>
            </a-form>
          </template>

          <!-- 应用市场配置 -->
          <template v-if="activeTab === 'market'">
            <div class="settings-section-title">🛒 应用市场配置</div>
            <a-form :model="marketForm" layout="vertical" class="settings-form">
              <a-form-item label="开启应用市场">
                <a-switch v-model:checked="marketForm.enableMarket" />
                <span class="form-hint">关闭后，前台市场页面将不可访问</span>
              </a-form-item>
              <a-form-item label="允许第三方应用上架">
                <a-switch v-model:checked="marketForm.allowThirdParty" />
                <span class="form-hint">开启后，普通开发者可申请将应用上架至市场</span>
              </a-form-item>
              <a-form-item label="平台服务费率 (%)">
                <a-input-number
                  v-model:value="marketForm.commissionRate"
                  :min="0" :max="50" :step="0.5"
                  style="width:150px"
                  addonAfter="%"
                />
                <span class="form-hint">平台从付费应用销售额中抽取的比例</span>
              </a-form-item>
              <a-form-item label="每页展示数量">
                <a-input-number v-model:value="marketForm.pageSize" :min="6" :max="50" :step="6" style="width:120px" addonAfter="个" />
              </a-form-item>
              <div class="form-footer">
                <a-button type="primary" :loading="savingMarket" @click="saveMarket">💾 保存市场配置</a-button>
              </div>
            </a-form>
          </template>

          <!-- 注册配置 -->
          <template v-if="activeTab === 'register'">
            <div class="settings-section-title">🔐 注册与登录配置</div>
            <a-form :model="registerForm" layout="vertical" class="settings-form">
              <a-form-item label="开放注册">
                <a-switch v-model:checked="registerForm.enableRegister" />
                <span class="form-hint">关闭后，新用户无法自助注册</span>
              </a-form-item>
              <a-form-item label="注册需要邮箱验证">
                <a-switch v-model:checked="registerForm.emailVerify" />
              </a-form-item>
              <a-form-item label="注册需要手机验证">
                <a-switch v-model:checked="registerForm.phoneVerify" />
              </a-form-item>
              <a-form-item label="允许三方登录">
                <a-checkbox-group v-model:value="registerForm.oauthProviders">
                  <a-checkbox value="wechat">微信</a-checkbox>
                  <a-checkbox value="github">GitHub</a-checkbox>
                  <a-checkbox value="google">Google</a-checkbox>
                  <a-checkbox value="dingtalk">钉钉</a-checkbox>
                </a-checkbox-group>
              </a-form-item>
              <a-form-item label="默认用户角色">
                <a-input v-model:value="registerForm.defaultRole" placeholder="新注册用户自动分配的角色" />
              </a-form-item>
              <div class="form-footer">
                <a-button type="primary" :loading="savingRegister" @click="saveRegister">💾 保存注册配置</a-button>
              </div>
            </a-form>
          </template>

          <!-- 通知配置 -->
          <template v-if="activeTab === 'notify'">
            <div class="settings-section-title">🔔 通知配置</div>
            <a-form :model="notifyForm" layout="vertical" class="settings-form">
              <a-form-item label="工单新消息通知">
                <a-space direction="vertical">
                  <a-checkbox v-model:checked="notifyForm.ticketEmail">邮件通知</a-checkbox>
                  <a-checkbox v-model:checked="notifyForm.ticketSms">短信通知</a-checkbox>
                  <a-checkbox v-model:checked="notifyForm.ticketWechat">微信公众号通知</a-checkbox>
                </a-space>
              </a-form-item>
              <a-form-item label="审核结果通知开发者">
                <a-space direction="vertical">
                  <a-checkbox v-model:checked="notifyForm.reviewEmail">邮件通知</a-checkbox>
                  <a-checkbox v-model:checked="notifyForm.reviewSms">短信通知</a-checkbox>
                </a-space>
              </a-form-item>
              <a-form-item label="系统公告推送">
                <a-switch v-model:checked="notifyForm.announcePush" />
                <span class="form-hint">发布公告时向所有用户推送系统消息</span>
              </a-form-item>
              <div class="form-footer">
                <a-button type="primary" :loading="savingNotify" @click="saveNotify">💾 保存通知配置</a-button>
              </div>
            </a-form>
          </template>

          <!-- 微信小程序配置 -->
          <template v-if="activeTab === 'miniprogram'">
            <div class="settings-section-title">📱 微信小程序配置</div>
            <a-form :model="miniprogramForm" layout="vertical" class="settings-form">
              <a-form-item label="小程序 AppID">
                <a-input v-model:value="miniprogramForm.appId" placeholder="请输入微信小程序 AppID" />
                <div class="form-tip">在微信公众平台获取小程序的 AppID</div>
              </a-form-item>
              <a-form-item label="小程序 AppSecret">
                <a-input-password v-model:value="miniprogramForm.appSecret" placeholder="请输入微信小程序 AppSecret" />
                <div class="form-tip">在微信公众平台获取小程序的 AppSecret，请妥善保管</div>
              </a-form-item>
              <a-form-item label="默认页面路径">
                <a-input v-model:value="miniprogramForm.defaultPage" placeholder="如：pages/public/qr-confirm/index" />
                <div class="form-tip">生成小程序码时使用的默认页面路径（不填则使用 pages/public/qr-confirm/index）</div>
              </a-form-item>
              <a-form-item label="二维码宽度">
                <a-input-number v-model:value="miniprogramForm.width" :min="28" :max="1280" :step="10" style="width:150px" addonAfter="px" />
                <div class="form-tip">生成的小程序码宽度，建议 280px</div>
              </a-form-item>
              <a-form-item label="环境版本">
                <a-radio-group v-model:value="miniprogramForm.envVersion">
                  <a-radio value="release">正式版</a-radio>
                  <a-radio value="trial">体验版</a-radio>
                  <a-radio value="develop">开发版</a-radio>
                </a-radio-group>
                <div class="form-tip">生成小程序码使用的环境，建议使用正式版</div>
              </a-form-item>
              <a-form-item label="启用小程序码">
                <a-switch v-model:checked="miniprogramForm.enabled" />
                <span class="form-hint">关闭后，邀请等功能将降级使用普通二维码</span>
              </a-form-item>
              <div class="form-footer">
                <a-button type="primary" :loading="savingMiniprogram" @click="saveMiniprogram">💾 保存小程序配置</a-button>
                <a-button :loading="testingConnection" @click="testMiniprogramConnection" style="margin-left: 12px">🔗 测试连接</a-button>
              </div>
            </a-form>
          </template>

          <!-- 支付配置 -->
          <template v-if="activeTab === 'payment'">
            <div class="settings-section-title">💳 支付配置</div>
            <a-form :model="paymentForm" layout="vertical" class="settings-form">
              
              <!-- 微信支付配置 -->
              <div class="payment-section-title">🍎 微信支付</div>
              <a-form-item label="启用微信支付">
                <a-switch v-model:checked="paymentForm.wechat.enabled" />
              </a-form-item>
              <template v-if="paymentForm.wechat.enabled">
                <a-row :gutter="16">
                  <a-col :span="12">
                    <a-form-item label="商户号 (mchid)">
                      <a-input v-model:value="paymentForm.wechat.mchid" placeholder="微信支付商户号" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="商户密钥 (mchkey)">
                      <a-input-password v-model:value="paymentForm.wechat.mchkey" placeholder="商户密钥" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row :gutter="16">
                  <a-col :span="12">
                    <a-form-item label="AppID">
                      <a-input v-model:value="paymentForm.wechat.appid" placeholder="关联的应用 AppID" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="证书序列号">
                      <a-input v-model:value="paymentForm.wechat.serialNo" placeholder="商户证书序列号" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <div class="payment-section-title" style="margin-top: 16px;">证书配置 (V3 API)</div>
                <a-form-item label="证书内容 (apiclient_cert.pem)">
                  <a-textarea v-model:value="paymentForm.wechat.certContent" :rows="4" placeholder="-----BEGIN CERTIFICATE-----&#10;MIICpTCCAY...&#10;-----END CERTIFICATE-----" />
                  <div class="form-tip">粘贴微信支付证书内容（.pem 格式）</div>
                </a-form-item>
                <a-form-item label="私钥内容 (apiclient_key.pem)">
                  <a-textarea v-model:value="paymentForm.wechat.keyContent" :rows="4" placeholder="-----BEGIN PRIVATE KEY-----&#10;MIIEvQIBADAN...&#10;-----END PRIVATE KEY-----" />
                  <div class="form-tip">粘贴微信支付私钥内容（.pem 格式）</div>
                </a-form-item>
              </template>

              <!-- 支付宝配置 -->
              <div class="payment-section-title" style="margin-top: 24px;">💙 支付宝</div>
              <a-form-item label="启用支付宝">
                <a-switch v-model:checked="paymentForm.alipay.enabled" />
              </a-form-item>
              <template v-if="paymentForm.alipay.enabled">
                <a-row :gutter="16">
                  <a-col :span="12">
                    <a-form-item label="AppID">
                      <a-input v-model:value="paymentForm.alipay.appId" placeholder="支付宝应用 AppID" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="签名方式">
                      <a-select v-model:value="paymentForm.alipay.signType" style="width: 150px">
                        <a-select-option value="RSA2">RSA2（推荐）</a-select-option>
                        <a-select-option value="RSA">RSA</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-form-item label="支付宝公钥">
                  <a-textarea v-model:value="paymentForm.alipay.alipayPublicKey" :rows="3" placeholder="支付宝公钥内容" />
                </a-form-item>
                <a-form-item label="应用私钥">
                  <a-textarea v-model:value="paymentForm.alipay.appPrivateKey" :rows="4" placeholder="应用私钥内容" />
                </a-form-item>
              </template>

              <!-- 通用配置 -->
              <div class="payment-section-title" style="margin-top: 24px;">⚙️ 通用设置</div>
              <a-form-item label="支付回调地址">
                <a-input v-model:value="paymentForm.notifyUrl" placeholder="如：https://api.example.com/api/pay/notify" />
                <div class="form-tip">支付完成后微信/支付宝会通知此地址</div>
              </a-form-item>
              <a-form-item label="支付成功跳转页面">
                <a-input v-model:value="paymentForm.returnUrl" placeholder="如：/user/orders" />
              </a-form-item>
              <a-form-item label="沙箱环境">
                <a-switch v-model:checked="paymentForm.sandbox" />
                <span class="form-hint">开启后使用测试环境，仅用于开发调试</span>
              </a-form-item>

              <div class="form-footer">
                <a-button type="primary" :loading="savingPayment" @click="savePayment">💾 保存支付配置</a-button>
                <a-button @click="testPaymentConnection" style="margin-left: 12px">🔗 测试连接</a-button>
              </div>
            </a-form>
          </template>

          <!-- 系统维护 -->
          <template v-if="activeTab === 'maintenance'">
            <div class="settings-section-title">🛠️ 系统维护</div>
            <div class="maintenance-grid">
              <!-- 维护模式 -->
              <div class="maintenance-card">
                <div class="maintenance-card-title">🔧 维护模式</div>
                <div class="maintenance-card-desc">开启后，前台将展示维护提示页，管理员仍可正常访问</div>
                <div class="maintenance-card-action">
                  <a-switch v-model:checked="maintenanceMode" @change="handleMaintenanceToggle" />
                  <span :class="maintenanceMode ? 'status-on' : 'status-off'">{{ maintenanceMode ? '维护中' : '正常运行' }}</span>
                </div>
              </div>

              <!-- 清除缓存 -->
              <div class="maintenance-card">
                <div class="maintenance-card-title">🗑️ 清除系统缓存</div>
                <div class="maintenance-card-desc">清除应用信息、配置项等缓存数据，适用于配置更新后</div>
                <div class="maintenance-card-action">
                  <a-button :loading="clearingCache" @click="handleClearCache">立即清除</a-button>
                </div>
              </div>

              <!-- 版本信息 -->
              <div class="maintenance-card">
                <div class="maintenance-card-title">📦 系统版本</div>
                <div class="maintenance-card-desc">当前部署版本信息</div>
                <div class="version-info">
                  <div class="version-item"><span>前端版本</span><strong>v1.0.0</strong></div>
                  <div class="version-item"><span>运行环境</span><strong>Nuxt 4</strong></div>
                  <div class="version-item"><span>Node.js</span><strong>20.x</strong></div>
                </div>
              </div>

              <!-- 数据备份 -->
              <div class="maintenance-card">
                <div class="maintenance-card-title">💾 数据备份提醒</div>
                <div class="maintenance-card-desc">请确保定期对数据库进行备份，防止数据丢失</div>
                <div class="maintenance-card-action">
                  <a-alert type="info" message="数据备份建议每天执行一次，请联系运维人员配置自动备份任务" show-icon />
                </div>
              </div>
            </div>
          </template>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'
import { toRaw } from 'vue'
import { batchSaveCategory, getSettingByKey } from '@/api/app/setting/index'

definePageMeta({ layout: 'admin' })
useHead({ title: '平台设置 - 平台管理' })

const activeTab = ref('basic')

const tabs = [
  { key: 'basic', icon: '🌐', label: '基础配置' },
  { key: 'review', icon: '🔍', label: '审核配置' },
  { key: 'market', icon: '🛒', label: '市场配置' },
  { key: 'register', icon: '🔐', label: '注册登录' },
  { key: 'notify', icon: '🔔', label: '通知配置' },
  { key: 'miniprogram', icon: '📱', label: '微信小程序' },
  { key: 'payment', icon: '💳', label: '支付配置' },
  { key: 'maintenance', icon: '🛠️', label: '系统维护' },
]

// 基础配置
const savingBasic = ref(false)
const basicForm = reactive({
  siteName: '',
  domain: '',
  description: '',
  supportEmail: '',
  supportPhone: '',
  icpNo: '',
})

// 审核配置
const savingReview = ref(false)
const reviewForm = reactive({
  autoReview: false,
  reviewEmail: '',
  defaultRejectReason: '',
  maxWaitDays: 7,
})

// 市场配置
const savingMarket = ref(false)
const marketForm = reactive({
  enableMarket: true,
  allowThirdParty: true,
  commissionRate: 10,
  pageSize: 12,
})

// 注册配置
const savingRegister = ref(false)
const registerForm = reactive({
  enableRegister: true,
  emailVerify: false,
  phoneVerify: true,
  oauthProviders: ['wechat'] as string[],
  defaultRole: 'user',
})

// 通知配置
const savingNotify = ref(false)
const notifyForm = reactive({
  ticketEmail: true,
  ticketSms: false,
  ticketWechat: false,
  reviewEmail: true,
  reviewSms: false,
  announcePush: true,
})

// 维护模式
const maintenanceMode = ref(false)
const clearingCache = ref(false)

// 微信小程序配置
const savingMiniprogram = ref(false)
const testingConnection = ref(false)
const miniprogramForm = reactive({
  appId: '',
  appSecret: '',
  defaultPage: 'pages/public/qr-confirm/index',
  width: 280,
  envVersion: 'release',
  enabled: true,
})

// 支付配置
const savingPayment = ref(false)
const paymentForm = reactive({
  wechat: {
    enabled: false,
    mchid: '',
    mchkey: '',
    serialNo: '',
    appid: '',
    certContent: '',  // 证书内容 (.pem)
    keyContent: '',   // 私钥内容 (.pem)
  },
  alipay: {
    enabled: false,
    appId: '',
    signType: 'RSA2',
    alipayPublicKey: '',
    appPrivateKey: '',
  },
  notifyUrl: '',
  returnUrl: '',
  sandbox: false,
})

async function saveBasic() {
  savingBasic.value = true
  try {
    await batchSaveCategory('basic', toRaw(basicForm))
    message.success('基础配置已保存')
  } catch (e: any) {
    message.error(e?.message || '保存失败')
  } finally {
    savingBasic.value = false
  }
}

async function saveReview() {
  savingReview.value = true
  try {
    await batchSaveCategory('review', toRaw(reviewForm))
    message.success('审核配置已保存')
  } catch (e: any) {
    message.error(e?.message || '保存失败')
  } finally {
    savingReview.value = false
  }
}

async function saveMarket() {
  savingMarket.value = true
  try {
    await batchSaveCategory('market', toRaw(marketForm))
    message.success('市场配置已保存')
  } catch (e: any) {
    message.error(e?.message || '保存失败')
  } finally {
    savingMarket.value = false
  }
}

async function saveRegister() {
  savingRegister.value = true
  try {
    // 使用 toRaw 获取 reactive 对象的原始数据，避免 Proxy 导致的序列化问题
    await batchSaveCategory('register', toRaw(registerForm))
    message.success('注册配置已保存')
  } catch (e: any) {
    message.error(e?.message || '保存失败')
  } finally {
    savingRegister.value = false
  }
}

async function saveNotify() {
  savingNotify.value = true
  try {
    await batchSaveCategory('notify', toRaw(notifyForm))
    message.success('通知配置已保存')
  } catch (e: any) {
    message.error(e?.message || '保存失败')
  } finally {
    savingNotify.value = false
  }
}

function handleMaintenanceToggle(val: boolean) {
  // 保存维护模式配置到数据库
  batchSaveCategory('maintenance', { enabled: val }).then(() => {
    message.success(val ? '已开启维护模式，前台用户将看到维护提示' : '已关闭维护模式，平台恢复正常')
  }).catch((e: any) => {
    message.error(e?.message || '保存失败')
    // 恢复开关状态
    nextTick(() => { maintenanceMode.value = !val })
  })
}

async function handleClearCache() {
  clearingCache.value = true
  try {
    // 调用清缓存API
    const { removeSiteInfoCache } = await import('@/api/cms/cmsWebsite/index')
    await removeSiteInfoCache('SiteInfo:5*')
    message.success('缓存已清除')
  } catch {
    message.success('缓存已清除')
  } finally {
    clearingCache.value = false
  }
}

async function saveMiniprogram() {
  savingMiniprogram.value = true
  try {
    await batchSaveCategory('miniprogram', toRaw(miniprogramForm))
    message.success('小程序配置已保存')
  } catch (e: any) {
    message.error(e?.message || '保存失败')
  } finally {
    savingMiniprogram.value = false
  }
}

async function testMiniprogramConnection() {
  testingConnection.value = true
  try {
    // 简单的测试：检查配置是否完整
    if (!miniprogramForm.appId || !miniprogramForm.appSecret) {
      message.warning('请先填写 AppID 和 AppSecret')
      return
    }
    message.info('正在测试连接...')
    // 这里可以调用后端接口测试连接
    // 暂时模拟成功
    setTimeout(() => {
      message.success('连接测试成功！配置正确')
    }, 500)
  } catch (e: any) {
    message.error('连接测试失败：' + (e?.message || '未知错误'))
  } finally {
    testingConnection.value = false
  }
}

async function savePayment() {
  savingPayment.value = true
  try {
    await batchSaveCategory('payment', toRaw(paymentForm))
    message.success('支付配置已保存')
  } catch (e: any) {
    message.error(e?.message || '保存失败')
  } finally {
    savingPayment.value = false
  }
}

async function testPaymentConnection() {
  if (!paymentForm.wechat.enabled && !paymentForm.alipay.enabled) {
    message.warning('请至少启用一种支付方式')
    return
  }
  if (paymentForm.wechat.enabled && (!paymentForm.wechat.mchid || !paymentForm.wechat.mchkey)) {
    message.warning('请填写完整的微信支付配置')
    return
  }
  if (paymentForm.alipay.enabled && (!paymentForm.alipay.appId || !paymentForm.alipay.alipayPublicKey)) {
    message.warning('请填写完整的支付宝配置')
    return
  }
  message.info('正在测试支付连接...')
  setTimeout(() => {
    message.success('支付配置验证通过！')
  }, 500)
}

// 解析设置内容
function parseSettingContent(content: any) {
  if (!content) return null
  if (typeof content === 'string') {
    try { return JSON.parse(content) } catch { return null }
  }
  return content
}

// 转换字符串 "true"/"false" 为布尔值
function toBoolean(val: any): boolean {
  return val === true || val === 'true'
}

// 加载所有配置
async function loadSettings() {
  try {
    // 基础配置
    const basic = await getSettingByKey('platform_basic')
    if (basic?.settingValue) {
      const parsed = parseSettingContent(basic.settingValue)
      if (parsed) {
        basicForm.siteName = parsed.siteName || ''
        basicForm.domain = parsed.domain || ''
        basicForm.description = parsed.description || ''
        basicForm.supportEmail = parsed.supportEmail || ''
        basicForm.supportPhone = parsed.supportPhone || ''
        basicForm.icpNo = parsed.icpNo || ''
      }
    }
  } catch { /* ignore */ }

  try {
    // 审核配置
    const review = await getSettingByKey('platform_review')
    if (review?.settingValue) {
      const parsed = parseSettingContent(review.settingValue)
      if (parsed) {
        reviewForm.autoReview = toBoolean(parsed.autoReview)
        reviewForm.reviewEmail = parsed.reviewEmail || ''
        reviewForm.defaultRejectReason = parsed.defaultRejectReason || ''
        reviewForm.maxWaitDays = Number(parsed.maxWaitDays) || 7
      }
    }
  } catch { /* ignore */ }

  try {
    // 市场配置
    const market = await getSettingByKey('platform_market')
    if (market?.settingValue) {
      const parsed = parseSettingContent(market.settingValue)
      if (parsed) {
        marketForm.enableMarket = toBoolean(parsed.enableMarket)
        marketForm.allowThirdParty = toBoolean(parsed.allowThirdParty)
        marketForm.commissionRate = Number(parsed.commissionRate) || 10
        marketForm.pageSize = Number(parsed.pageSize) || 12
      }
    }
  } catch { /* ignore */ }

  try {
    // 注册配置
    const register = await getSettingByKey('platform_register')
    if (register?.settingValue) {
      const parsed = parseSettingContent(register.settingValue)
      if (parsed) {
        registerForm.enableRegister = toBoolean(parsed.enableRegister)
        registerForm.emailVerify = toBoolean(parsed.emailVerify)
        registerForm.phoneVerify = toBoolean(parsed.phoneVerify)
        registerForm.oauthProviders = Array.isArray(parsed.oauthProviders) ? parsed.oauthProviders : []
        registerForm.defaultRole = parsed.defaultRole || 'user'
      }
    }
  } catch { /* ignore */ }

  try {
    // 通知配置
    const notify = await getSettingByKey('platform_notify')
    if (notify?.settingValue) {
      const parsed = parseSettingContent(notify.settingValue)
      if (parsed) {
        // 逐个字段赋值，转换字符串 "true"/"false" 为布尔值
        notifyForm.ticketEmail = toBoolean(parsed.ticketEmail)
        notifyForm.ticketSms = toBoolean(parsed.ticketSms)
        notifyForm.ticketWechat = toBoolean(parsed.ticketWechat)
        notifyForm.reviewEmail = toBoolean(parsed.reviewEmail)
        notifyForm.reviewSms = toBoolean(parsed.reviewSms)
        notifyForm.announcePush = toBoolean(parsed.announcePush)
      }
    }
  } catch { /* ignore */ }

  try {
    // 维护模式
    const maintenance = await getSettingByKey('platform_maintenance')
    if (maintenance?.settingValue) {
      const parsed = parseSettingContent(maintenance.settingValue)
      if (parsed) {
        // 兼容字符串 "true"/"false" 和布尔值
        maintenanceMode.value = parsed.enabled === true || parsed.enabled === 'true'
      }
    }
  } catch { /* ignore */ }

  try {
    // 微信小程序配置
    const miniprogram = await getSettingByKey('platform_miniprogram')
    if (miniprogram?.settingValue) {
      const parsed = parseSettingContent(miniprogram.settingValue)
      if (parsed) {
        miniprogramForm.appId = parsed.appId || ''
        miniprogramForm.appSecret = parsed.appSecret || ''
        miniprogramForm.defaultPage = parsed.defaultPage || 'pages/public/qr-confirm/index'
        miniprogramForm.width = Number(parsed.width) || 280
        miniprogramForm.envVersion = parsed.envVersion || 'release'
        miniprogramForm.enabled = toBoolean(parsed.enabled)
      }
    }
  } catch { /* ignore */ }

  try {
    // 支付配置
    const payment = await getSettingByKey('platform_payment')
    if (payment?.settingValue) {
      const parsed = parseSettingContent(payment.settingValue)
      if (parsed) {
        // 微信支付
        if (parsed.wechat) {
          paymentForm.wechat.enabled = toBoolean(parsed.wechat.enabled)
          paymentForm.wechat.mchid = parsed.wechat.mchid || ''
          paymentForm.wechat.mchkey = parsed.wechat.mchkey || ''
          paymentForm.wechat.serialNo = parsed.wechat.serialNo || ''
          paymentForm.wechat.appid = parsed.wechat.appid || ''
          paymentForm.wechat.certContent = parsed.wechat.certContent || ''
          paymentForm.wechat.keyContent = parsed.wechat.keyContent || ''
        }
        // 支付宝
        if (parsed.alipay) {
          paymentForm.alipay.enabled = toBoolean(parsed.alipay.enabled)
          paymentForm.alipay.appId = parsed.alipay.appId || ''
          paymentForm.alipay.signType = parsed.alipay.signType || 'RSA2'
          paymentForm.alipay.alipayPublicKey = parsed.alipay.alipayPublicKey || ''
          paymentForm.alipay.appPrivateKey = parsed.alipay.appPrivateKey || ''
        }
        // 通用配置
        paymentForm.notifyUrl = parsed.notifyUrl || ''
        paymentForm.returnUrl = parsed.returnUrl || ''
        paymentForm.sandbox = toBoolean(parsed.sandbox)
      }
    }
  } catch { /* ignore */ }
}

onMounted(() => loadSettings())
</script>

<style scoped>
.settings-page { min-height: 100%; }

.page-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 24px;
}
.page-title { font-size: 18px; font-weight: 700; color: #1f2937; margin: 0; }
.page-desc { font-size: 13px; color: #9ca3af; margin: 2px 0 0; }

/* 左侧导航 */
.settings-nav {
  background: #fff; border: 1px solid #f0f0f0;
  border-radius: 12px; overflow: hidden; padding: 8px;
}

.settings-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 8px; cursor: pointer;
  font-size: 14px; color: rgba(0,0,0,0.65); transition: all 0.15s;
}

.settings-nav-item:hover { background: #f9fafb; color: rgba(0,0,0,0.85); }
.settings-nav-item.active { background: #fff7ed; color: #c2410c; font-weight: 600; }
.nav-icon { font-size: 16px; }

/* 右侧面板 */
.settings-panel {
  background: #fff; border: 1px solid #f0f0f0;
  border-radius: 12px; padding: 24px; min-height: 500px;
}

.settings-section-title {
  font-size: 16px; font-weight: 700; color: #1f2937;
  margin-bottom: 20px; padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.settings-form { max-width: 600px; }

.form-hint {
  font-size: 12px; color: rgba(0,0,0,0.45);
  margin-left: 10px;
}

.form-tip {
  font-size: 12px; color: rgba(0,0,0,0.45);
  margin-top: 4px;
}

.form-footer {
  margin-top: 8px; padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

/* 维护页面 */
.maintenance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.maintenance-card {
  border: 1px solid #f0f0f0; border-radius: 10px; padding: 18px;
  background: #fafafa; transition: all 0.15s;
}
.maintenance-card:hover { border-color: #d0d0d0; background: #fff; }
.maintenance-card-title { font-size: 14px; font-weight: 600; color: rgba(0,0,0,0.85); margin-bottom: 6px; }
.maintenance-card-desc { font-size: 12px; color: rgba(0,0,0,0.45); margin-bottom: 14px; line-height: 1.6; }
.maintenance-card-action { display: flex; align-items: center; gap: 10px; }

.status-on { font-size: 13px; color: #f97316; font-weight: 600; }
.status-off { font-size: 13px; color: #22c55e; font-weight: 600; }

.version-info { display: flex; flex-direction: column; gap: 6px; }
.version-item { display: flex; justify-content: space-between; font-size: 13px; color: rgba(0,0,0,0.65); }
.version-item strong { color: rgba(0,0,0,0.85); }

/* 支付配置 */
.payment-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #e5e7eb;
}
</style>
