<script setup lang="ts">
import { useRoute } from 'vue-router'
import { computed } from 'vue'
import termsRaw    from '@/assets/docs/terms.md?raw'
import privacyRaw  from '@/assets/docs/privacy.md?raw'
import riskRaw     from '@/assets/docs/risk.md?raw'
import glossaryRaw from '@/assets/docs/glossary.md?raw'

type LegalType = 'terms' | 'privacy' | 'risk' | 'glossary'

const META: Record<LegalType, { title: string; content: string }> = {
  terms:    { title: '用户协议', content: termsRaw },
  privacy:  { title: '隐私政策', content: privacyRaw },
  risk:     { title: '风险提示', content: riskRaw },
  glossary: { title: '名词解释', content: glossaryRaw },
}

const route = useRoute()
const type = computed<LegalType>(() => {
  const t = route.params.type as string
  return (t in META ? t : 'terms') as LegalType
})
const title   = computed(() => META[type.value].title)
const content = computed(() => META[type.value].content)

/**
 * 简单的段落切分 + 标题识别：
 * - 中文章节 `一、` `二、` … → h2
 * - `X-Y` 段（例："1-10 订单与交易执行"） → h3
 * - 行首 `N.` / `N、` 的编号行 → 加粗，算作小标题
 * - 其它段落按空行切分为 <p>
 */
interface Block {
  type: 'h2' | 'h3' | 'num' | 'p'
  text: string
}

const CN_ORDINALS = '一二三四五六七八九十百千'
const blocks = computed<Block[]>(() => {
  const lines = content.value.split(/\r?\n/)
  const out: Block[] = []
  for (const rawLine of lines) {
    const line = rawLine.trim()
    if (!line) continue
    // h2: 一、xxx / 二、xxx
    if (new RegExp(`^[${CN_ORDINALS}]{1,3}、`).test(line)) {
      out.push({ type: 'h2', text: line })
      continue
    }
    // h3: "1-10 订单与交易执行"
    if (/^\d{1,2}-\d{1,3}\s+/.test(line)) {
      out.push({ type: 'h3', text: line })
      continue
    }
    // 编号行: "1." "1、" "1.5." 作为加粗小标题（短行）
    if (line.length < 80 && /^\d+[.\uff0e、]\s*\S/.test(line)) {
      out.push({ type: 'num', text: line })
      continue
    }
    out.push({ type: 'p', text: line })
  }
  return out
})
</script>

<template>
  <main class="page-main">
    <div class="page-container content">
      <!-- 内容卡片 -->
      <article class="article-card dark-card">
        <h1 class="article-title">{{ title }}</h1>
        <div class="article-divider" />
        <div class="article-body">
          <template v-for="(b, i) in blocks" :key="i">
            <h2 v-if="b.type === 'h2'" class="b-h2">{{ b.text }}</h2>
            <h3 v-else-if="b.type === 'h3'" class="b-h3">{{ b.text }}</h3>
            <p v-else-if="b.type === 'num'" class="b-num">{{ b.text }}</p>
            <p v-else class="b-p">{{ b.text }}</p>
          </template>
        </div>
      </article>
    </div>
  </main>
</template>

<style scoped>
.content {
  padding-top: var(--space-10);
  padding-bottom: var(--space-16);
  max-width: 900px;
}

.article-card {
  padding: var(--space-8) var(--space-10);
}

.article-title {
  font-size: var(--text-h1);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
}

.article-divider {
  height: 1px;
  background: var(--color-border);
  margin-bottom: var(--space-6);
}

.article-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.b-h2 {
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-primary);
}

.b-h3 {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  margin-top: var(--space-5);
  margin-bottom: var(--space-1);
}

.b-num {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-3);
}

.b-p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.9;
}

@media (max-width: 768px) {
  .article-card {
    padding: var(--space-6);
  }
  .article-title { font-size: 24px; }
}
</style>
