<template>
  <div v-if="app">
    <el-page-header @back="$router.back()" :content="app.name" style="margin-bottom:24px" />

    <el-card class="info-card" style="margin-bottom:16px">
      <el-descriptions :column="isMobile ? 1 : 2" border>
        <el-descriptions-item label="应用名称">{{ app.name }}</el-descriptions-item>
        <el-descriptions-item label="Android 包名">{{ app.packageName }}</el-descriptions-item>
        <el-descriptions-item label="iOS Bundle ID">{{ app.iosBundleId ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="鸿蒙 Bundle Name">{{ app.harmonyBundleName ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="AppKey">
          <el-text class="mono">{{ app.appKey }}</el-text>
          <el-button link @click="copy(app.appKey)"><el-icon><CopyDocument /></el-icon></el-button>
        </el-descriptions-item>
        <el-descriptions-item label="AppSecret">
          <el-text class="mono">{{ revealedSecret ?? '••••••••••••••••' }}</el-text>
          <el-button link @click="openVerifyDialog('REVEAL_SECRET')" title="查看">
            <el-icon><View /></el-icon>
          </el-button>
          <el-button v-if="revealedSecret" link @click="copy(revealedSecret!)">
            <el-icon><CopyDocument /></el-icon>
          </el-button>
          <el-button link type="warning" @click="openVerifyDialog('RESET_SECRET')">重置</el-button>
        </el-descriptions-item>
        <el-descriptions-item label="简述" :span="2">{{ app.description ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="Config 文件">
          <el-button size="small" type="primary" plain @click="downloadConfigFile">下载</el-button>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="info-card" style="margin-bottom:16px">
      <template #header>即时通讯服务</template>
      <div class="service-grid">
        <el-card class="service-card">
          <div class="service-header">
            <span class="service-name">{{ serviceLabel('IM') }}</span>
            <el-switch :model-value="imEnabled" @change="(val: boolean) => onToggleService('IM', val)" />
          </div>
          <template v-if="imService">
            <div style="margin-top:10px;display:flex;gap:8px;flex-wrap:wrap">
              <el-button size="small" @click="$router.push({ path: `/apps/${app.appKey}/im`, query: { appKey: app.appKey } })">
                即时通讯管理 →
              </el-button>
              <el-button size="small" type="primary" plain @click="$router.push(`/apps/${app.appKey}/im-config`)">
                服务配置 →
              </el-button>
            </div>
          </template>
          <template v-else>
            <div style="margin-top:10px">
              <el-button size="small" type="primary" plain @click="openActivationRequest('IM')">
                申请开通
              </el-button>
            </div>
          </template>
        </el-card>
      </div>
    </el-card>

    <el-card class="info-card">
      <template #header>离线推送</template>
      <div class="service-grid">
        <el-card class="service-card">
          <div class="service-header">
            <div class="service-title-block">
              <span class="service-name">{{ serviceLabel('PUSH') }}</span>
              <span class="service-help">{{ serviceHelp('PUSH') }}</span>
            </div>
            <el-switch
              :model-value="isServiceEnabled('PUSH')"
              @change="(val: boolean) => onToggleService('PUSH', val)"
            />
          </div>
          <div class="service-status-row">
            <el-tag :type="isServiceEnabled('PUSH') ? 'success' : 'info'" size="small">
              {{ isServiceEnabled('PUSH') ? '已开通' : '未开通' }}
            </el-tag>
            <span class="service-status-text">
              推送服务开通后即可在终端接收设备级推送。
            </span>
          </div>
          <div class="service-actions">
            <template v-if="isServiceEnabled('PUSH')">
              <el-button size="small" type="primary" plain @click="$router.push(`/apps/${app.appKey}/push-config`)">
                推送配置 →
              </el-button>
              <el-button size="small" @click="$router.push(`/apps/${app.appKey}/push-management`)">
                推送管理 →
              </el-button>
            </template>
            <el-button v-else size="small" type="primary" plain @click="openActivationRequest('PUSH')">
              申请开通
            </el-button>
          </div>
        </el-card>
      </div>
    </el-card>

    <el-card class="info-card" style="margin-top:16px">
      <template #header>版本管理</template>
      <div class="service-grid">
        <el-card class="service-card">
          <div class="service-header">
            <div class="service-title-block">
              <span class="service-name">{{ serviceLabel('UPDATE') }}</span>
              <span class="service-help">{{ serviceHelp('UPDATE') }}</span>
            </div>
            <el-switch
              :model-value="isServiceEnabled('UPDATE')"
              @change="(val: boolean) => onToggleService('UPDATE', val)"
            />
          </div>
          <div class="service-status-row">
            <el-tag :type="isServiceEnabled('UPDATE') ? 'success' : 'info'" size="small">
              {{ isServiceEnabled('UPDATE') ? '已开通' : '未开通' }}
            </el-tag>
            <span class="service-status-text">
              Android 整包版本在版本管理页上传；iOS / 鸿蒙仅记录版本号和市场跳转页。商店配置与发布配置都在版本管理页。
            </span>
          </div>
          <div class="service-actions">
            <el-button v-if="isServiceEnabled('UPDATE')" size="small" type="primary" plain @click="$router.push(`/apps/${app.appKey}/update`)">
              版本管理 →
            </el-button>
            <el-button v-else size="small" type="primary" plain @click="openActivationRequest('UPDATE')">
              申请开通
            </el-button>
          </div>
        </el-card>
      </div>
    </el-card>

    <el-card class="info-card" style="margin-top:16px">
      <template #header>授权管理</template>
      <div class="service-grid">
        <el-card class="service-card">
          <div class="service-header">
            <div class="service-title-block">
              <span class="service-name">{{ serviceLabel('LICENSE') }}</span>
              <span class="service-help">{{ serviceHelp('LICENSE') }}</span>
            </div>
            <el-switch
              :model-value="isServiceEnabled('LICENSE')"
              @change="(val: boolean) => onToggleService('LICENSE', val)"
            />
          </div>
          <div class="service-status-row">
            <el-tag :type="isServiceEnabled('LICENSE') ? 'success' : 'info'" size="small">
              {{ isServiceEnabled('LICENSE') ? '已开通' : '未开通' }}
            </el-tag>
            <span class="service-status-text">
              管理 PAD 设备的授权注册与验证。
            </span>
          </div>
          <div class="service-actions">
            <el-button v-if="isServiceEnabled('LICENSE')" size="small" type="primary" plain @click="$router.push(`/apps/${app.appKey}/license`)">
              授权管理 →
            </el-button>
            <el-button v-else size="small" type="primary" plain @click="openActivationRequest('LICENSE')">
              申请开通
            </el-button>
          </div>
        </el-card>
      </div>
    </el-card>

    <!-- Email Verify Dialog (reveal or reset) -->
    <el-dialog v-model="showVerifyDialog" :title="verifyPurpose === 'REVEAL_SECRET' ? '查看 AppSecret' : '重置 AppSecret'" :width="dialogWidth">
      <div v-if="!codeSent">
        <p style="color:#555;margin-bottom:16px">
          {{ verifyPurpose === 'REVEAL_SECRET'
            ? '为保护账号安全，查看 AppSecret 需要通过邮箱验证。'
            : '重置后旧 AppSecret 立即失效，请确认后继续。' }}
        </p>
        <el-button type="primary" :loading="sendingCode" @click="sendVerifyCode">
          发送验证码到邮箱
        </el-button>
      </div>
      <div v-else>
        <p style="color:#555;margin-bottom:16px">验证码已发送至您的注册邮箱，请查收并输入：</p>
        <el-input v-model="verifyCode" placeholder="6位验证码" maxlength="6" style="margin-bottom:12px" />
        <div style="display:flex;gap:8px">
          <el-button @click="sendVerifyCode" :loading="sendingCode" size="small">重新发送</el-button>
        </div>
      </div>
      <template #footer>
        <el-button @click="showVerifyDialog = false">取消</el-button>
        <el-button v-if="codeSent" type="primary" :loading="submittingVerify" @click="submitVerify">
          {{ verifyPurpose === 'REVEAL_SECRET' ? '查看' : '确认重置' }}
        </el-button>
      </template>
    </el-dialog>

    <!-- Activation Request Dialog -->
    <el-dialog v-model="showActivationDialog" title="申请开通服务" :width="dialogWidth">
      <el-form label-width="80px">
        <el-form-item label="服务">{{ serviceLabel(activationForm.serviceType) }}</el-form-item>
        <el-form-item label="申请理由">
          <el-input v-model="activationForm.reason" type="textarea" :rows="3" placeholder="请描述您的业务场景" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showActivationDialog = false">取消</el-button>
        <el-button type="primary" :loading="submittingActivation" @click="submitActivationRequest">提交申请</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { View } from '@element-plus/icons-vue'
import { appApi, type App, type FeatureService } from '@/api/app'
import client from '@/api/client'
import {
  connectServiceActivationRealtime,
  disconnectServiceActivationRealtime,
} from '@/services/storeReviewRealtime'

const route = useRoute()
const app = ref<App | null>(null)
const services = ref<FeatureService[]>([])
const imService = computed(() => services.value.find(s => s.serviceType === 'IM') ?? null)
const imEnabled = computed(() => imService.value?.enabled ?? false)
const isMobile = ref(false)
const dialogWidth = computed(() => (isMobile.value ? 'calc(100vw - 24px)' : '420px'))

const revealedSecret = ref<string | null>(null)

const showVerifyDialog = ref(false)
const verifyPurpose = ref<'REVEAL_SECRET' | 'RESET_SECRET'>('REVEAL_SECRET')
const codeSent = ref(false)
const sendingCode = ref(false)
const verifyCode = ref('')
const submittingVerify = ref(false)

const showActivationDialog = ref(false)
const submittingActivation = ref(false)
const activationForm = ref({ platform: '', serviceType: '', reason: '' })

function isServiceEnabled(svcType: string) {
  return services.value.some(s => s.serviceType === svcType && s.enabled)
}

function serviceLabel(type: string) {
  return { IM: '即时通讯 (IM)', PUSH: '离线推送', UPDATE: '版本管理', LICENSE: '授权管理' }[type] ?? type
}

function serviceHelp(type: string) {
  return {
    IM: 'IM 服务独立开通后，在管理页配置回调和消息能力。',
    PUSH: '一次开通后，可在推送配置页按厂商维护配置。',
    UPDATE: '一次开通后，版本管理页独立管理版本上传、商店配置和灰度发布。',
    LICENSE: '管理 PAD 设备的授权注册与验证。',
  }[type] ?? ''
}

function getServiceRepresentative(svcType: string) {
  return services.value.find(s => s.serviceType === svcType) ?? null
}

async function loadData() {
  const appKey = route.params.appKey as string
  const [appRes, svcRes] = await Promise.all([
    appApi.get(appKey), appApi.getServices(appKey),
  ])
  app.value = appRes.data.data
  services.value = svcRes.data.data
  revealedSecret.value = null
}

async function onToggleService(svcType: string, enable: boolean) {
  if (enable) {
    openActivationRequest(svcType)
  } else {
    await ElMessageBox.confirm(`确认关闭 ${serviceLabel(svcType)} 服务？`, '关闭服务', {
      type: 'warning', confirmButtonText: '确认关闭', cancelButtonText: '取消',
    })
    const platform = getServiceRepresentative(svcType)?.platform ?? 'ANDROID'
    await appApi.toggleService(app.value?.appKey ?? (route.params.appKey as string), platform, svcType, false)
    ElMessage.success('已关闭')
    loadData()
  }
}

function openActivationRequest(svcType: string) {
  activationForm.value = { platform: 'ANDROID', serviceType: svcType, reason: '' }
  showActivationDialog.value = true
}

async function submitActivationRequest() {
  if (!activationForm.value.reason.trim()) {
    return ElMessage.warning('请填写申请理由')
  }
  submittingActivation.value = true
  try {
    await client.post(`/apps/${app.value?.appKey ?? (route.params.appKey as string)}/services/request-activation`, null, {
      params: {
        platform: activationForm.value.platform,
        serviceType: activationForm.value.serviceType,
        applyReason: activationForm.value.reason,
      },
    })
    ElMessage.success('申请已提交，等待运营审核')
    showActivationDialog.value = false
  } finally {
    submittingActivation.value = false
  }
}

function openVerifyDialog(purpose: 'REVEAL_SECRET' | 'RESET_SECRET') {
  verifyPurpose.value = purpose
  codeSent.value = false
  verifyCode.value = ''
  showVerifyDialog.value = true
}

async function sendVerifyCode() {
  sendingCode.value = true
  try {
    await appApi.requestSecretVerify(app.value?.appKey ?? (route.params.appKey as string), verifyPurpose.value)
    codeSent.value = true
    ElMessage.success('验证码已发送')
  } catch {
    ElMessage.error('发送失败，请稍后重试')
  } finally {
    sendingCode.value = false
  }
}

async function submitVerify() {
  if (verifyCode.value.length !== 6) return ElMessage.warning('请输入6位验证码')
  submittingVerify.value = true
  try {
    const appKey = app.value?.appKey ?? (route.params.appKey as string)
    if (verifyPurpose.value === 'REVEAL_SECRET') {
      const res = await appApi.revealSecret(appKey, verifyCode.value)
      revealedSecret.value = res.data.data.appSecret
      ElMessage.success('AppSecret 已显示，请妥善保管')
    } else {
      const res = await appApi.resetSecret(appKey, verifyCode.value)
      revealedSecret.value = res.data.data.appSecret
      ElMessage.success('AppSecret 已重置，旧密钥立即失效')
    }
    showVerifyDialog.value = false
  } catch {
    ElMessage.error('验证码错误或已过期')
  } finally {
    submittingVerify.value = false
  }
}

async function downloadConfigFile() {
  const current = app.value
  if (!current) return
  const res = await appApi.downloadConfigFile(current.appKey)
  const disposition = res.headers['content-disposition'] as string | undefined
  const filename = parseFilename(disposition) ?? `${current.name || current.appKey}.xuqmconfig`
  const url = URL.createObjectURL(res.data)
  const link = document.createElement('a')
  link.href = url
  link.download = filename
  document.body.appendChild(link)
  link.click()
  link.remove()
  URL.revokeObjectURL(url)
}

function parseFilename(disposition?: string) {
  if (!disposition) return null
  const encoded = disposition.match(/filename\*=UTF-8''([^;]+)/i)?.[1]
  if (encoded) return decodeURIComponent(encoded)
  const plain = disposition.match(/filename="?([^";]+)"?/i)?.[1]
  return plain ? decodeURIComponent(plain) : null
}

function copy(text: string) {
  navigator.clipboard.writeText(text)
  ElMessage.success('已复制')
}

function updateViewport() {
  isMobile.value = window.innerWidth < 768
}

onMounted(() => {
  const appKey = route.params.appKey as string
  loadData()
  updateViewport()
  window.addEventListener('resize', updateViewport)
  void connectServiceActivationRealtime(appKey, (event) => {
    if (event.status === 'APPROVED') {
      ElMessage.success(`${serviceLabel(event.serviceType)} 已审核通过`)
      loadData()
    } else if (event.status === 'REJECTED') {
      ElMessage.error(`${serviceLabel(event.serviceType)} 审核未通过：${event.reviewNote || '请联系运营'}`)
      loadData()
    }
  })
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', updateViewport)
  disconnectServiceActivationRealtime()
})
</script>

<style scoped>
.mono { font-family: monospace; font-size: 12px; }
.info-card :deep(.el-descriptions__body) {
  overflow-x: auto;
}
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.service-card { border: 1px solid #e8e8e8; }
.service-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-weight: 500; }
.service-name { font-size: 15px; }
.service-title-block { display: flex; flex-direction: column; gap: 4px; }
.service-help { font-size: 12px; color: #6b7280; line-height: 1.4; }
.service-status-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.service-status-text { font-size: 13px; color: #6b7280; line-height: 1.5; }
.service-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 767px) {
  .service-grid {
    grid-template-columns: 1fr;
  }

  .service-header {
    flex-direction: column;
  }

  .service-actions {
    flex-direction: column;
  }

  .service-actions :deep(.el-button) {
    width: 100%;
  }

  .info-card :deep(.el-descriptions__table) {
    min-width: 100%;
  }
}
</style>
