<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { NButton, NCard, NCollapse, NCollapseItem, NIcon, NInput, NResult, NTabPane, NTabs } from 'naive-ui'
import { api } from '../../api/client'
import { useAuthStore } from '../../stores/auth'
import { useToast } from '../../composables/useToast'
import { SendOutline } from '@vicons/ionicons5'

const route = useRoute()
const toast = useToast()
const auth = useAuthStore()
const feedbackText = ref('')
const feedbackSending = ref(false)
const feedbackSent = ref(false)
const apiDocsUrl = computed(() => {
  // Vite dev 使用 proxy（http://localhost:5173/docs → http://localhost:8000/docs）
  // 生产环境 docs 仅在 DEBUG=true 时启用（此时 nginx 或前端代理 /docs）
  return `${window.location.origin}/docs`
})

const helpFaq = [
  { q: '如何设置关注领域？', a: '注册后直接进入「设置关注领域」页面。选择你关注的癌种、靶点、治疗方式和研究类型，系统会根据你的选择自动匹配文献。也可以随时在侧边栏 → 设置 → 编辑关注领域 中修改。' },
  { q: '每天推送多少篇文献？', a: '取决于你的关注标签数量。一般每天 20-60 篇，分为三个级别：必读（与核心标签高度匹配的顶刊文献，5-10篇）、推荐（部分匹配或专科期刊文献，15-30篇）、相关（领域相关的其他文献，10-20篇）。' },
  { q: '和 Zotero 有什么区别？', a: 'Zotero 是本地文献管理工具——你需要自己去 PubMed 搜索、手动导入、手动打标签。OncoLit 是自动化的：PubMed 全量文献 → 自动 MeSH 打标 → 精准推送到你面前。早上查房前 5 分钟看完今天最重要的文献。' },
  { q: '数据从哪里来？', a: '文献元数据来自 PubMed（NCBI/NLM），通过 E-utilities API 和 FTP 批量获取。标签体系基于 MeSH（Medical Subject Headings）2025 版，补充了靶点、临床分期等临床维度标签。' },
  { q: '如何导出引用？', a: '支持四种格式：BibTeX、RIS、EndNote、CSV。单篇可在文献详情页导出，批量可在搜索/Feed 页面勾选后导出。BibTeX 文件可直接导入 Zotero / Mendeley / JabRef。' },
  { q: '如何邀请同事加入科室？', a: '需要 Team 及以上方案。侧边栏「科室团队」→ 点击「+ 邀请成员」→ 输入同事邮箱 → 发送邀请。同事点击邮件中的链接即可加入。' },
  { q: '如何升级方案？', a: '侧边栏「设置」→ 查看当前方案 → 点击「升级方案」。Free 用户可升级到 Pro（¥35/月）或 Team（¥70/人/月）。' },
  { q: '数据安全吗？', a: '每个租户的数据通过 PostgreSQL Row-Level Security 完全隔离。你的笔记、收藏、关注偏好仅你自己和科室成员可见。平台管理员无法查看用户私有笔记。' },
]

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

async function submitFeedback() {
  if (!feedbackText.value.trim()) return
  feedbackSending.value = true
  try {
    await api.post('/settings/feedback', { feedback_type: 'suggestion', detail: feedbackText.value })
    feedbackSent.value = true; feedbackText.value = ''
  } catch (e) { toast.apiError(e, "提交反馈失败") } finally { feedbackSending.value = false }
}
</script>

<template>
  <div style="max-width:900px;margin:0 auto;padding:32px 24px">
    <h1 style="font-size:28px;margin-bottom:8px">📚 帮助中心</h1>
    <p style="color:var(--text-secondary);margin-bottom:32px">OncoLit 肿瘤科研文献速递使用指南</p>

    <NTabs type="line" :default-value="(route.query.tab as string) || 'faq'">
      <NTabPane name="faq" tab="❓ 常见问题">
        <NCollapse>
          <NCollapseItem title="如何设置关注领域？" name="1">
            <p>注册后直接进入"设置关注领域"页面。选择你关注的癌种、靶点、治疗方式和研究类型，系统会根据你的选择自动匹配文献。</p>
            <p style="margin-top:8px">也可以随时在侧边栏 → 设置 → 编辑关注领域 中修改。</p>
          </NCollapseItem>
          <NCollapseItem title="每天推送多少篇文献？" name="2">
            <p>取决于你的关注标签数量。一般每天 20-60 篇，分为三个级别：</p>
            <ul style="margin-top:8px;padding-left:20px">
              <li>🔴 <strong>必读</strong>：与核心标签高度匹配的顶刊文献（5-10篇）</li>
              <li>🟡 <strong>推荐</strong>：部分匹配或专科期刊文献（15-30篇）</li>
              <li>⚪ <strong>相关</strong>：领域相关的其他文献（10-20篇）</li>
            </ul>
          </NCollapseItem>
          <NCollapseItem title="和 Zotero 有什么区别？" name="3">
            <p>Zotero 是本地文献管理工具——你需要自己去 PubMed 搜索、手动导入、手动打标签。</p>
            <p style="margin-top:8px">OncoLit 肿瘤科研文献速递是自动化的：<strong>PubMed 全量文献 → 自动 MeSH 打标 → 精准推送到你面前</strong>。早上查房前 5 分钟看完今天最重要的文献。</p>
          </NCollapseItem>
          <NCollapseItem title="数据从哪里来？" name="4">
            <p>文献元数据来自 <strong>PubMed（NCBI/NLM）</strong>，通过 E-utilities API 和 FTP 批量获取。</p>
            <p style="margin-top:8px">标签体系基于 <strong>MeSH（Medical Subject Headings）</strong> 2025 版，补充了靶点、临床分期等临床维度标签。</p>
          </NCollapseItem>
          <NCollapseItem title="如何导出引用？" name="5">
            <p>支持四种格式：<strong>BibTeX、RIS、EndNote、CSV</strong>。单篇可在文献详情页导出，批量可在搜索/Feed 页面勾选后导出。</p>
            <p style="margin-top:8px">BibTeX 文件可直接导入 Zotero / Mendeley / JabRef。</p>
          </NCollapseItem>
          <NCollapseItem title="如何邀请同事加入科室？" name="6">
            <p>需要 <strong>Team 及以上方案</strong>。侧边栏"科室团队"→ 点"+ 邀请成员"→ 输入同事邮箱 → 发送邀请。同事点击邮件中的链接即可加入。</p>
          </NCollapseItem>
          <NCollapseItem title="如何升级方案？" name="7">
            <p>侧边栏"设置"→ 查看当前方案 → 点击"升级方案"。Free 用户可升级到 Pro(¥35/月) 或 Team(¥70/人/月)。</p>
          </NCollapseItem>
          <NCollapseItem title="数据安全吗？" name="8">
            <p>每个租户的数据通过 PostgreSQL Row-Level Security 完全隔离。你的笔记、收藏、关注偏好仅你自己和科室成员可见。平台管理员无法查看用户私有笔记。</p>
          </NCollapseItem>
        </NCollapse>
      </NTabPane>
      <NTabPane name="api" tab="🔌 API 文档">
        <NCard size="small" title="开发者 API">
          <p>完整的 RESTful API 文档：<a :href="apiDocsUrl" target="_blank" style="color:#1a5276">Swagger UI →</a></p>
          <p style="margin-top:16px;font-size:13px;color:var(--text-secondary)">
            API 使用 Bearer Token 认证。在设置页面生成 API Key 后即可调用。
            日调用量按方案限制（Free: 100次/天, Pro: 1000次/天, Team: 5000次/天）。
          </p>
        </NCard>
      </NTabPane>
      <NTabPane name="syntax" tab="🔍 搜索语法">
        <NCard size="small" title="搜索语法说明" style="line-height:1.8">
          <p>搜索文献（支持 [TI] [AU] [MH] 等 PubMed 语法）</p>
          <p>支持 AND/OR/NOT、引号短语、"lung cancer"[TI] 等 PubMed 查询语法</p>
          <h3 style="font-size:16px;margin:20px 0 8px">字段限定</h3>
          <ul style="padding-left:20px">
            <li><code>[TI]</code> — 标题搜索，如 <code>"lung cancer"[TI]</code></li>
            <li><code>[AU]</code> — 作者搜索，如 <code>smith[AU]</code></li>
            <li><code>[MH]</code> — MeSH 主题词，如 <code>neoplasms[MH]</code></li>
            <li><code>[PT]</code> — 发表类型，如 <code>review[PT]</code></li>
            <li><code>[DP]</code> — 发表日期，如 <code>2024[DP]</code></li>
          </ul>
          <h3 style="font-size:16px;margin:20px 0 8px">布尔运算符</h3>
          <ul style="padding-left:20px">
            <li><code>AND</code> — 同时匹配两个条件</li>
            <li><code>OR</code> — 匹配任一条件</li>
            <li><code>NOT</code> — 排除条件</li>
          </ul>
          <h3 style="font-size:16px;margin:20px 0 8px">示例</h3>
          <ul style="padding-left:20px">
            <li><code>lung cancer</code> — 简单关键词搜索</li>
            <li><code>"non-small cell lung cancer"</code> — 引号精确短语</li>
            <li><code>immunotherapy AND "lung cancer"[TI]</code> — 组合搜索</li>
            <li><code>10.1016/j.cell.2024.01.001</code> — DOI 精确搜索</li>
          </ul>
        </NCard>
      </NTabPane>
      <NTabPane name="feedback" tab="💬 意见反馈">
        <NCard size="small" title="提交反馈">
          <p style="color:var(--text-secondary);margin-bottom:16px">有功能建议、发现Bug、或需要帮助？请告诉我们。</p>
          <div v-if="!feedbackSent">
            <NInput v-model:value="feedbackText" type="textarea" placeholder="描述你的建议或问题..." :autosize="{minRows:4, maxRows:8}" style="margin-bottom:12px" />
            <NButton type="primary" :loading="feedbackSending" :disabled="!auth.isAuthenticated" @click="submitFeedback" class="sky-btn"><template #icon><NIcon size="14"><SendOutline /></NIcon></template>
              {{ auth.isAuthenticated ? '提交反馈' : '请先登录再提交反馈' }}
            </NButton>
          </div>
          <NResult v-else status="success" title="感谢反馈" description="我们会认真处理每条建议。" />
        </NCard>
      </NTabPane>
    </NTabs>
  </div>
</template>
