<template>
  <div class="mx-auto max-w-screen-md px-4 py-12">
    <a-spin v-if="pending" />

    <a-result
      v-else-if="loadError"
      status="error"
      title="页面加载失败"
      :sub-title="loadError.message"
    >
      <template #extra>
        <a-space>
          <a-button type="primary" @click="refresh()">重试</a-button>
          <a-button @click="navigateTo('/')">返回首页</a-button>
        </a-space>
      </template>
    </a-result>

    <a-result
      v-else-if="!navigation"
      status="404"
      title="页面不存在"
      sub-title="未找到对应的页面内容。"
    >
      <template #extra>
        <a-space>
          <a-button type="primary" @click="navigateTo('/')">返回首页</a-button>
        </a-space>
      </template>
    </a-result>

    <template v-else>
      <a-typography-title :level="1" class="!mb-6">{{ pageTitle }}</a-typography-title>
      <a-alert v-if="!pageContent" class="mb-6" type="info" show-icon message="暂无内容" />
      <RichText v-else :content="pageContent" />
    </template>
  </div>
</template>

<script setup lang="ts">
import { getCmsNavigation } from '@/api/cms/cmsNavigation'
import type { CmsNavigation } from '@/api/cms/cmsNavigation/model'
import { usePageSeo } from '@/composables/usePageSeo'

const route = useRoute()

const id = computed(() => {
  const raw = route.params.id
  const text = Array.isArray(raw) ? raw[0] : raw
  const n = Number(text)
  return Number.isFinite(n) ? n : NaN
})

const {
  data: navigation,
  pending,
  error: loadError,
  refresh
} = await useAsyncData<CmsNavigation | null>(
  () => `cms-navigation-${String(route.params.id)}`,
  async () => {
    if (!Number.isFinite(id.value)) return null
    return await getCmsNavigation(id.value)
  },
  { watch: [id] }
)

function pickString(obj: Record<string, unknown>, key: string) {
  const v = obj[key]
  return typeof v === 'string' ? v.trim() : ''
}

function coerceContent(value: unknown): string {
  if (typeof value === 'string') return value
  if (value && typeof value === 'object') {
    try {
      return JSON.stringify(value)
    } catch {
      return String(value)
    }
  }
  return ''
}

const pageTitle = computed(() => {
  const nav = navigation.value as unknown as Record<string, unknown> | null
  if (!nav) return '页面'
  return pickString(nav, 'title') || pickString(nav, 'label') || `页面 ${String(route.params.id)}`
})

const pageContent = computed(() => {
  const nav = navigation.value as unknown as Record<string, unknown> | null
  if (!nav) return ''

  // Different CMS deployments may store content under different keys.
  const candidates = [
    'content',
    'html',
    'body',
    'text',
    'pageContent',
    'articleContent',
    'suffix',
    'comments',
    'meta',
    'style'
  ]

  for (const k of candidates) {
    const val = nav[k]
    const text = coerceContent(val).trim()
    if (text) return text
  }

  return ''
})

usePageSeo({
  title: pageTitle.value,
  description: pageContent.value ? pageContent.value.slice(0, 120) : `${pageTitle.value} - 页面内容`,
  path: route.path
})
</script>

