<template>
  <transition name="help-doc-fade">
    <div v-if="visible" class="help-doc-overlay">
      <div class="help-doc-panel">
        <!-- 头部 -->
        <header class="help-doc-header">
          <button
            v-if="selectedQuestion"
            class="help-doc-back"
            type="button"
            @click="selectedQuestion = null"
          >
            ← 返回问题列表
          </button>
          <button
            v-else
            class="help-doc-back"
            type="button"
            @click="handleBack"
          >
            ← 返回客服中心
          </button>
          <h2 class="help-doc-title">
            {{ selectedQuestion ? selectedQuestion.question : 'LinkMed 帮助文档' }}
          </h2>
        </header>

        <!-- 主体内容 -->
        <main class="help-doc-main">
          <!-- 问题详情视图 -->
          <template v-if="selectedQuestion">
            <div class="help-doc-answer">
              <p
                v-for="(para, idx) in selectedQuestion.answer"
                :key="idx"
                class="help-doc-answer-text"
              >
                {{ para }}
              </p>
              <ol v-if="selectedQuestion.steps?.length" class="help-doc-steps">
                <li
                  v-for="(step, idx) in selectedQuestion.steps"
                  :key="idx"
                  class="help-doc-step-item"
                >
                  {{ step }}
                </li>
              </ol>
            </div>
          </template>

          <!-- 问题列表视图 -->
          <template v-else>
            <section class="help-doc-section">
              <h3 class="help-doc-section-title">快速上手 LinkMed</h3>
              <p class="help-doc-section-text">
                在这里，您可以查看如何创建知识库、管理工作区、上传与编辑文档等常见操作的详细步骤说明。点击下方问题即可查看解答。
              </p>
            </section>

            <section
              v-for="category in faqCategories"
              :key="category.title"
              class="help-doc-section"
            >
              <h3 class="help-doc-section-title">{{ category.title }}</h3>
              <ul class="help-doc-list">
                <li
                  v-for="(item, idx) in category.items"
                  :key="idx"
                  class="help-doc-list-item help-doc-list-item-clickable"
                  @click="selectedQuestion = item"
                >
                  <span class="help-doc-list-item-text">{{ item.question }}</span>
                  <span class="help-doc-list-item-arrow">›</span>
                </li>
              </ul>
            </section>
          </template>
        </main>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { ref } from 'vue';

export interface FAQItem {
  question: string;
  answer: string[];
  steps?: string[];
}

const props = defineProps<{
  visible: boolean;
}>();

const emit = defineEmits<{
  (e: 'back'): void;
}>();

const selectedQuestion = ref<FAQItem | null>(null);

const handleBack = () => {
  selectedQuestion.value = null;
  emit('back');
};

// 常见问题数据：基于 LinkMed 产品功能整理
const faqCategories = [
  {
    title: '知识库',
    items: [
      {
        question: '如何新建和管理文件夹？',
        answer: [
          '在知识库页面左侧，您可以创建多级文件夹来组织文档。',
        ],
        steps: [
          '进入「知识库」页面，在左侧文件夹树顶部点击「新建文件夹」',
          '输入文件夹名称后确认，新文件夹会出现在当前选中的目录下',
          '右键点击任意文件夹，可进行「新建子文件夹」「重命名」「删除」等操作',
          '也可在文件夹树区域右键空白处创建顶级文件夹',
        ],
      },
      {
        question: '如何上传文件到知识库？',
        answer: [
          'LinkMed 支持将本地文件上传到知识库，方便后续编辑与 AI 协作。',
        ],
        steps: [
          '在知识库左侧点击「上传文件」按钮，或右键目标文件夹选择上传',
          '选择要上传的文件（支持 Word、Excel、PPT、PDF、Markdown 等常见格式）',
          '上传过程中可在进度弹窗中查看进度，支持重试失败项',
          '上传完成后，文件会出现在对应文件夹中',
        ],
      },
      {
        question: '如何新建文档？',
        answer: [
          '您可以在知识库中直接创建新文档，无需从本地上传。',
        ],
        steps: [
          '在知识库左侧右键目标文件夹，选择「新建文件」',
          '或在右侧文件列表区域点击「新建文件」按钮',
          '选择文档类型（如 Markdown、富文本等）后即可开始编辑',
          '新建的文件会保存在当前选中的文件夹下',
        ],
      },
      {
        question: '如何恢复回收站中的文件？',
        answer: [
          '误删的文件会进入回收站，您可以在回收站中恢复或永久删除。',
        ],
        steps: [
          '在知识库左侧底部点击「回收站」进入回收站视图',
          '勾选需要恢复的文件或文件夹',
          '点击「还原」按钮，文件将恢复到删除前所在的位置',
          '如需永久删除，可选中后点击「永久删除」',
        ],
      },
      {
        question: '支持哪些文件格式？',
        answer: [
          'LinkMed 支持多种常见办公与文档格式。',
        ],
        steps: [
          '文档：Word（.docx）、Markdown（.md）、纯文本（.txt）',
          '表格：Excel（.xlsx、.xls）',
          '演示：PowerPoint（.pptx）',
          '其他：PDF、图片等可预览与引用',
          '具体编辑能力以实际页面提示为准',
        ],
      },
    ] as FAQItem[],
  },
  {
    title: '工作台与编辑',
    items: [
      {
        question: '如何在工作台中打开并编辑文档？',
        answer: [
          '工作台是编辑文档的主要区域，支持多种文档类型的在线编辑。',
        ],
        steps: [
          '在知识库中点击要编辑的文件',
          '文件会在工作台中央打开，根据格式自动选择合适的编辑器',
          '编辑完成后，更改会自动保存',
          '左侧可切换知识库、参考文献等面板',
        ],
      },
      {
        question: '如何使用 AI 智能面板辅助写作？',
        answer: [
          '工作台右侧的智能面板可帮助您润色、续写、总结文档内容。',
        ],
        steps: [
          '在工作台中选中要处理的文本',
          '在右侧智能面板中选择对应功能（如润色、续写、总结等）',
          'AI 会基于选中的内容生成建议，您可复制或插入到文档中',
          '若智能面板被折叠，可点击边缘展开',
        ],
      },
      {
        question: '文档编辑时卡顿或加载慢怎么办？',
        answer: [
          '大文件或复杂格式可能导致加载变慢，可按以下方式排查：',
        ],
        steps: [
          '检查网络是否稳定，刷新页面后重试',
          '关闭其他占用内存较大的标签页或应用',
          '若文件体积很大，可尝试拆分为多个小文件',
          '若问题持续，可联系客服协助排查',
        ],
      },
    ] as FAQItem[],
  },
  {
    title: '设置与账号',
    items: [
      {
        question: '如何修改个人资料和账号信息？',
        answer: [
          '在设置中可修改昵称、头像等个人信息。',
        ],
        steps: [
          '点击侧边栏底部「设置」进入设置页',
          '选择「账号信息」或「个人资料」标签',
          '修改昵称、头像等信息后保存',
        ],
      },
      {
        question: '如何管理认证信息（邮箱、手机等）？',
        answer: [
          '认证信息用于登录与找回密码，可在设置中绑定或更换。',
        ],
        steps: [
          '进入「设置」→「信息认证」',
          '按提示绑定邮箱、手机号等',
          '更换绑定前需验证原绑定方式',
          '完成认证可提升账号安全与找回便利性',
        ],
      },
      {
        question: '如何查看充值记录和会员状态？',
        answer: [
          '充值、消费记录及会员状态可在设置中查看。',
        ],
        steps: [
          '进入「设置」→「充值中心」',
          '可查看余额、充值记录、消费明细',
          '会员相关权益与到期时间会在此展示',
        ],
      },
    ] as FAQItem[],
  },
  {
    title: '登录与认证',
    items: [
      {
        question: '忘记密码怎么办？',
        answer: [
          '可通过邮箱或手机号重置密码。',
        ],
        steps: [
          '在登录页点击「忘记密码」',
          '输入注册时使用的邮箱或手机号',
          '按提示完成验证后设置新密码',
          '使用新密码重新登录',
        ],
      },
      {
        question: '账号未激活无法登录怎么办？',
        answer: [
          '新注册账号需完成激活才能正常登录。',
        ],
        steps: [
          '在登录页点击「账号未激活」或对应入口',
          '输入注册邮箱，系统会发送激活链接',
          '点击邮件中的链接完成激活',
          '激活后即可使用邮箱和密码登录',
        ],
      },
      {
        question: '如何通过微信登录？',
        answer: [
          'LinkMed 支持微信扫码登录，使用前需先绑定微信。',
        ],
        steps: [
          '在登录页选择「微信登录」',
          '使用微信扫描页面上的二维码',
          '在手机上确认登录',
          '若首次使用微信登录，会创建新账号或绑定已有账号',
        ],
      },
      {
        question: '登录后提示 token 失效或需要重新登录？',
        answer: [
          '长时间未操作或 token 过期时，系统会要求重新登录。',
        ],
        steps: [
          '直接在登录页重新输入账号密码登录',
          '若开启了「记住我」，可减少频繁登录',
          '若频繁出现，可尝试清除浏览器缓存后重试',
          '确认网络稳定，避免请求超时导致 token 异常',
        ],
      },
    ] as FAQItem[],
  },
];
</script>

<style scoped>
.help-doc-overlay {
  pointer-events: auto;
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.25);
  z-index: 3999;
}

.help-doc-panel {
  width: 760px;
  max-width: calc(100vw - 80px);
  height: 480px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.help-doc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid #ebeef5;
  background: #ffffff;
}

.help-doc-back {
  border: none;
  background: #f2f3f5;
  color: #606266;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.help-doc-back:hover {
  background: #e4e7ed;
}

.help-doc-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-doc-main {
  padding: 20px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  background: #f5f7fa;
}

.help-doc-section {
  background: #ffffff;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.help-doc-section-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.help-doc-section-text {
  margin: 0;
  font-size: 13px;
  color: #606266;
  line-height: 1.6;
}

.help-doc-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: 13px;
  color: #606266;
}

.help-doc-list-item {
  margin-top: 0;
}

.help-doc-list-item-clickable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.help-doc-list-item-clickable:hover {
  background: #f0f2f5;
}

.help-doc-list-item-clickable + .help-doc-list-item-clickable {
  margin-top: 4px;
}

.help-doc-list-item-text {
  flex: 1;
}

.help-doc-list-item-arrow {
  color: #909399;
  font-size: 16px;
  margin-left: 8px;
}

/* 问题详情样式 */
.help-doc-answer {
  background: #ffffff;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.help-doc-answer-text {
  margin: 0 0 10px;
  font-size: 13px;
  color: #606266;
  line-height: 1.6;
}

.help-doc-answer-text:last-of-type {
  margin-bottom: 0;
}

.help-doc-steps {
  margin: 12px 0 0;
  padding-left: 20px;
  font-size: 13px;
  color: #606266;
  line-height: 1.7;
}

.help-doc-step-item {
  margin-top: 6px;
}

.help-doc-step-item:first-child {
  margin-top: 0;
}

/* 动画 */
.help-doc-fade-enter-active,
.help-doc-fade-leave-active {
  transition: opacity 0.18s ease;
}

.help-doc-fade-enter-from,
.help-doc-fade-leave-to {
  opacity: 0;
}

@media (max-width: 1024px) {
  .help-doc-panel {
    width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
  }
}

@media (max-width: 768px) {
  .help-doc-panel {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .help-doc-title {
    font-size: 14px;
  }
}
</style>