<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { NButton, NCard, NGrid, NGridItem, NIcon } from 'naive-ui'
import { CheckmarkOutline } from '@vicons/ionicons5'

const router = useRouter()

const plans = [
  {
    name: '个人免费版',
    price: '¥0',
    period: '/月',
    features: [
      '每日 50 篇文献推送',
      '基础检索与浏览',
      '收藏最多 100 篇',
      '个人标签管理',
    ],
    color: '#999',
    recommended: false,
  },
  {
    name: '个人专业版',
    price: '¥35',
    period: '/月',
    features: [
      '每日 200+ 篇精准推送',
      'AI 摘要与深度分析',
      '收藏不限量',
      '阅读周报与学术画像',
      'Meta 分析工具',
      'PDF 全文获取',
    ],
    color: '#2080f0',
    recommended: true,
  },
  {
    name: '团队版',
    price: '¥70',
    period: '/人/月',
    features: [
      '含个人专业版全部功能',
      '科室共享收藏夹',
      '团队活动动态',
      'Journal Club 排期管理',
      'MDT 协作空间',
      '管理员后台',
      'SSO 单点登录',
    ],
    color: '#18a058',
    recommended: false,
  },
]

const faqItems = [
  { q: '免费版和付费版主要区别是什么？', a: '免费版适合个人入门体验，每日推送量和收藏数有限制。专业版解锁 AI 摘要、Meta 分析等深度功能。' },
  { q: '团队版最少需要几人？', a: '团队版 2 人起订，按人头计费。所有成员共享科室收藏夹和协作空间。' },
  { q: '支持对公转账或发票吗？', a: '团队版支持对公转账和增值税专用发票。个人版支持支付宝/微信支付，可开电子普通发票。' },
  { q: '可以免费试用专业版吗？', a: '注册后自动享受 7 天专业版试用，无任何功能限制。到期后自动恢复为免费版。' },
  { q: '如何升级或降级方案？', a: '在「帐户设置 → 方案管理」中可随时升级。降级将在当前计费周期结束后生效。' },
  { q: '数据安全如何保障？', a: '所有数据传输采用 TLS 加密，数据库每日自动备份。' },
]

const openIdx = ref<number | null>(null)
function toggleFaq(i: number) {
  openIdx.value = openIdx.value === i ? null : i
}

// GEO: FAQPage structured data
import { onMounted } from 'vue'
onMounted(() => {
  const existing = document.getElementById('schema-faq-pricing')
  if (existing) return
  const script = document.createElement('script')
  script.id = 'schema-faq-pricing'
  script.type = 'application/ld+json'
  script.textContent = JSON.stringify({
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: faqItems.map((faq: { q: string; a: string }) => ({
      '@type': 'Question',
      name: faq.q,
      acceptedAnswer: { '@type': 'Answer', text: faq.a },
    })),
  })
  document.head.appendChild(script)
})
</script>

<template>
  <div class="pricing-page">
    <!-- Hero -->
    <section class="pricing-hero">
      <h1>选择适合您的方案</h1>
      <p class="hero-sub">为肿瘤临床与科研工作者量身定制</p>
    </section>

    <!-- 方案对比 -->
    <section class="plans-section">
      <n-grid :cols="3" :x-gap="16" responsive="screen">
        <n-grid-item v-for="plan in plans" :key="plan.name">
          <n-card
            size="small"
            :class="['plan-card', { recommended: plan.recommended }]"
            :style="plan.recommended ? `border-color: ${plan.color}` : ''"
          >
            <div v-if="plan.recommended" class="recommend-badge">推荐</div>
            <div class="plan-name">{{ plan.name }}</div>
            <div class="plan-price">
              <span class="price-num">{{ plan.price }}</span>
              <span class="price-period">{{ plan.period }}</span>
            </div>
            <ul class="plan-features">
              <li v-for="f in plan.features" :key="f" class="feature-item">✓ {{ f }}</li>
            </ul>
            <div class="plan-action">
              <NButton
                :type="plan.recommended ? 'primary' : 'default'"
                :ghost="!plan.recommended"
                block
                @click="router.push('/auth/register')"
               class="sky-btn">
                <template #icon><NIcon size="14"><CheckmarkOutline /></NIcon></template>
                开始使用
              </NButton>
            </div>
          </n-card>
        </n-grid-item>
      </n-grid>
    </section>

    <!-- 功能对比表 -->
    <section class="compare-section">
      <h2 class="section-title">功能详细对比</h2>
      <div class="compare-table-wrap">
        <table class="compare-table">
          <thead>
            <tr>
              <th>功能</th>
              <th>免费版</th>
              <th>专业版</th>
              <th>团队版</th>
            </tr>
          </thead>
          <tbody>
            <tr><td>每日推送上限</td><td>50 篇</td><td>200+ 篇</td><td>不限</td></tr>
            <tr><td>AI 摘要</td><td>—</td><td>✓</td><td>✓</td></tr>
            <tr><td>Meta 分析工具</td><td>—</td><td>✓</td><td>✓</td></tr>
            <tr><td>收藏上限</td><td>100 篇</td><td>不限</td><td>不限</td></tr>
            <tr><td>阅读周报</td><td>—</td><td>✓</td><td>✓</td></tr>
            <tr><td>PDF 全文</td><td>—</td><td>✓</td><td>✓</td></tr>
            <tr><td>科室共享收藏</td><td>—</td><td>—</td><td>✓</td></tr>
            <tr><td>Journal Club</td><td>—</td><td>—</td><td>✓</td></tr>
            <tr><td>MDT 协作</td><td>—</td><td>—</td><td>✓</td></tr>
            <tr><td>SSO 单点登录</td><td>—</td><td>—</td><td>✓</td></tr>
            <tr><td>管理员后台</td><td>—</td><td>—</td><td>✓</td></tr>
            <tr><td>API 接口</td><td>—</td><td>—</td><td>✓</td></tr>
          </tbody>
        </table>
      </div>
    </section>

    <!-- FAQ -->
    <section class="faq-section">
      <h2 class="section-title">常见问题</h2>
      <div class="faq-list">
        <div v-for="(faq, i) in faqItems" :key="i" class="faq-item" :class="{ open: openIdx === i }">
          <div class="faq-q" @click="toggleFaq(i)">
            <span>{{ faq.q }}</span>
            <span class="faq-arrow">{{ openIdx === i ? '▾' : '▸' }}</span>
          </div>
          <div v-if="openIdx === i" class="faq-a">{{ faq.a }}</div>
        </div>
      </div>
    </section>

    <!-- CTA -->
    <section class="cta-section">
      <n-card class="cta-card">
        <h3>随时可以升级</h3>
        <p>7 天免费试用，无理由退款</p>
        <NButton type="primary" size="large" @click="router.push('/auth/register')" class="sky-btn"><template #icon><NIcon size="14"><CheckmarkOutline /></NIcon></template>免费开始使用</NButton>
      </n-card>
    </section>
  </div>
</template>

<style scoped>
.pricing-page { max-width: 1100px; margin: 0 auto; padding: 0 20px 60px; }
.pricing-hero { text-align: center; padding: 40px 0 20px; }
.pricing-hero h1 { font-size: 28px; font-weight: 800; color: #1a5276; margin: 0 0 6px; }
.hero-sub { font-size: 15px; color: var(--text-secondary); margin: 0; }
.section-title { font-size: 22px; font-weight: 700; color: #1a5276; text-align: center; margin: 40px 0 20px; }

/* Plan cards */
.plans-section { padding: 16px 0 0; }
.plan-card { position: relative; text-align: center; }
.plan-card.recommended { border-width: 2px; }
.recommend-badge {
  position: absolute; top: -1px; right: 16px;
  background: #2080f0; color: #fff; font-size: 11px;
  padding: 2px 10px; border-radius: 0 0 6px 6px;
}
.plan-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.plan-price { margin-bottom: 16px; }
.price-num { font-size: 28px; font-weight: 800; color: #1a5276; }
.price-period { font-size: 13px; color: var(--text-muted); margin-left: 2px; }
.plan-features { list-style: none; padding: 0; margin: 0 0 16px; text-align: left; }
.feature-item { font-size: 13px; color: var(--text-secondary); padding: 4px 0; }
.plan-action { padding: 0 4px; }

/* Compare table */
.compare-section { padding: 0; }
.compare-table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.compare-table th, .compare-table td { padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--border-color); }
.compare-table th { background: var(--bg-page); font-weight: 600; color: var(--text-primary); font-size: 13px; }
.compare-table td:first-child { text-align: left; font-weight: 500; color: var(--text-secondary); }
.compare-table tr:hover td { background: var(--bg-hover); }

/* FAQ */
.faq-list { max-width: 700px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border-color); }
.faq-q { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--text-primary); }
.faq-q:hover { color: #1a5276; }
.faq-arrow { font-size: 12px; color: var(--text-muted); transition: transform .2s; }
.faq-item.open .faq-arrow { color: #1a5276; }
.faq-a { padding: 0 0 14px; font-size: 13px; color: var(--text-secondary); line-height: 1.7; }

/* CTA */
.cta-section { padding: 40px 0; }
.cta-card { text-align: center; background: var(--bg-hover); }
.cta-card h3 { margin: 0 0 6px; color: #1a5276; font-size: 20px; }
.cta-card p { margin: 0 0 16px; color: var(--text-secondary); font-size: 14px; }

@media (max-width: 768px) {
  .pricing-hero { padding: 24px 0 12px; }
  .pricing-hero h1 { font-size: 24px; }
  .section-title { font-size: 18px; margin: 24px 0 16px; }
  .price-num { font-size: 22px; }
  .compare-table { font-size: 12px; }
  .compare-table th, .compare-table td { padding: 8px 6px; }
}
</style>
