<template>
  <view class="relative w-full min-h-screen bg-[#F9FAFB] pb-[200rpx]">
    <NavHeader title="帮助中心" />

    <!-- Content Section -->
    <view class="px-[32rpx] mt-[32rpx]">
      <!-- Search Bar -->
      <view class="mb-[32rpx]">
        <SearchBar
          v-model="searchKeyword"
          placeholder="搜索问题或关键词"
          variant="rounded"
          :show-clear="true"
        />
      </view>

      <!-- Contact Service -->
      <view
        class="flex items-center justify-between w-full bg-white rounded-[24rpx] p-[32rpx] mb-[40rpx] shadow-sm relative overflow-hidden"
        @tap="showContactPopup = true"
      >
        <view class="flex items-center z-10">
          <view class="w-[80rpx] h-[80rpx] rounded-[16rpx] bg-blue-50 flex items-center justify-center mr-[24rpx]">
            <IconFont name="service" size="24" color="#2563EB" />
          </view>
          <text class="text-[32rpx] text-gray-900 font-medium">联系客服</text>
        </view>
        <view class="z-10">
          <IconFont name="rect-right" class="text-gray-400" size="16" />
        </view>
      </view>

      <!-- Important Questions -->
      <view>
        <text class="block text-[32rpx] text-gray-900 font-bold mb-[24rpx]">重点问题</text>
        <view class="bg-white rounded-[24rpx] shadow-sm overflow-hidden">
          <view v-if="filteredQuestions.length > 0">
            <view v-for="(item, index) in filteredQuestions" :key="index"
              class="flex items-center justify-between p-[32rpx] border-b border-gray-100 last:border-b-0 active:bg-gray-50 transition-colors"
              @tap="handleQuestionClick(item)">
              <view class="flex items-center">
                <view class="w-[12rpx] h-[12rpx] rounded-full bg-blue-600 mr-[24rpx]"></view>
                <text class="text-[28rpx] text-gray-800">{{ item.title }}</text>
              </view>
              <IconFont name="rectRight" class="text-gray-400" size="16" />
            </view>
          </view>
          <view v-else class="p-[64rpx] text-center">
            <text class="text-[28rpx] text-gray-400">未找到相关问题</text>
          </view>
        </view>
      </view>
    </view>

    <!-- Contact Service Popup -->
    <nut-popup
      v-model:visible="showContactPopup"
      position="bottom"
      round
      :style="{ height: 'auto', paddingBottom: '40rpx' }"
    >
      <view class="p-[40rpx]">
        <!-- Header -->
        <view class="flex items-center justify-between mb-[48rpx]">
          <view>
            <text class="block text-[40rpx] font-bold text-gray-900 mb-[8rpx]">联系我们</text>
            <text class="text-[24rpx] text-gray-500">遇到问题？请通过以下方式联系我们</text>
          </view>
          <view class="w-[64rpx] h-[64rpx] bg-gray-100 rounded-full flex items-center justify-center" @tap="showContactPopup = false">
            <IconFont name="close" size="18" color="#6B7280" />
          </view>
        </view>

        <!-- Contact Methods List -->
        <view class="flex flex-col gap-[24rpx]">
          <view
            v-for="(item, index) in contactMethods"
            :key="index"
            class="flex items-center p-[32rpx] bg-white border border-gray-100 rounded-[24rpx] shadow-sm active:bg-gray-50 transition-colors"
          >
            <view
              class="w-[88rpx] h-[88rpx] rounded-full flex items-center justify-center mr-[24rpx] flex-shrink-0"
              :style="{ backgroundColor: `${item.color}15` }"
            >
              <IconFont :name="item.icon" size="24" :color="item.color" />
            </view>
            <view class="flex-1">
              <view class="flex items-center justify-between mb-[8rpx]">
                <text class="text-[28rpx] text-gray-500">{{ item.label }}</text>
              </view>
              <text class="block text-[32rpx] font-bold text-gray-900 mb-[4rpx]">{{ item.value }}</text>
              <text class="text-[22rpx] text-gray-400">{{ item.desc }}</text>
            </view>
          </view>
        </view>
      </view>
    </nut-popup>

    <!-- Question Detail Popup -->
    <nut-popup
      v-model:visible="showQuestionPopup"
      position="bottom"
      :style="{ width: '100%', height: '90vh' }"
    >
      <view class="h-full flex flex-col bg-white">
        <!-- Header -->
        <view class="flex-shrink-0 px-[32rpx] py-[20rpx] bg-white border-b border-gray-100 flex items-center">
          <view class="w-[64rpx] h-[64rpx] flex items-center justify-center -ml-[16rpx]" @tap="showQuestionPopup = false">
            <IconFont name="close" size="20" color="#374151" />
          </view>
          <text class="flex-1 text-[34rpx] font-bold text-gray-900 text-center pr-[48rpx] truncate">{{ currentQuestion?.title }}</text>
        </view>

        <!-- Content -->
        <scroll-view scroll-y class="flex-1 w-full">
          <view class="p-[40rpx]">
            <view class="rich-text-container text-[30rpx] leading-[1.8] text-gray-800" v-html="currentQuestion?.content"></view>
          </view>
        </scroll-view>
      </view>
    </nut-popup>

    <!-- <TabBar current="me" /> -->
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import NavHeader from '@/components/navigation/NavHeader.vue'
import IconFont from '@/components/icons/IconFont.vue'
import SearchBar from '@/components/forms/SearchBar.vue'

// Popup 状态
const showContactPopup = ref(false)
const showQuestionPopup = ref(false)
const currentQuestion = ref(null)

// 搜索关键字
const searchKeyword = ref('')

// Contact methods data
const contactMethods = [
  {
    icon: 'location',
    label: '客服热线',
    value: '400-888-9999',
    desc: '工作时间：周一至周五 9:00-18:00',
    color: '#2563EB' // blue-600
  },
  {
    icon: 'service',
    label: '微信公众号',
    value: 'manulife',
    desc: '搜索"manulife"关注我们',
    color: '#16A34A' // green-600
  },
  {
    icon: 'edit',
    label: '邮箱',
    value: 'service@manulife.com',
    desc: '我们会在24小时内回复您的邮件',
    color: '#EA580C' // orange-600
  }
]

// 不同类型的问题内容模板
const createPlanbookContent = `
<div class="rich-text-content">
  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">创建计划书步骤：</h3>

  <div style="margin-bottom: 8px; color: #374151;">
    <span style="color: #2563EB; font-weight: 500;">步骤 1：</span>
    <span>在产品详情页或产品卡片上，点击"计划书"或"生成计划书"按钮</span>
  </div>

  <div style="margin-bottom: 8px; color: #374151;">
    <span style="color: #2563EB; font-weight: 500;">步骤 2：</span>
    <span>系统自动打开表单弹窗，直接填写相关信息</span>
  </div>

  <div style="margin-bottom: 8px; color: #374151;">
    <span style="color: #2563EB; font-weight: 500;">步骤 3：</span>
    <span>填写申请人信息和保障方案相关内容（如保额、保障期限等）</span>
  </div>

  <div style="margin-bottom: 12px; color: #374151;">
    <span style="color: #2563EB; font-weight: 500;">步骤 4：</span>
    <span>点击"生成计划书"按钮，系统将生成计划书</span>
  </div>

  <div style="background-color: #EFF6FF; border-left: 4px solid #2563EB; padding: 12px; margin: 16px 0; border-radius: 4px;">
    <span style="font-size: 12px; color: #1E40AF;">💡 提示：提交后的计划书状态为"生成中"，通常在1-2分钟内完成生成。可以在"我的计划书"页面查看生成进度。</span>
  </div>

  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin: 16px 0 12px;">常见问题：</h3>

  <div style="margin-bottom: 12px;">
    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：如何修改已提交的计划书？</div>
    <div style="color: #4B5563;">A：目前计划书提交后暂不支持修改，如需调整请联系客服处理。</div>
  </div>

  <div style="margin-bottom: 12px;">
    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：生成需要多长时间？</div>
    <div style="color: #4B5563;">A：通常在1-2分钟内完成。如超过5分钟仍在"生成中"状态，请联系客服。</div>
  </div>

  <div style="margin-bottom: 12px;">
    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：在哪里查看已创建的计划书？</div>
    <div style="color: #4B5563;">A：进入"我的计划书"页面，可以查看所有已创建的计划书及其状态。</div>
  </div>
</div>
`

const loginAuthContent = `
<div class="rich-text-content">
  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">登录说明：</h3>

  <div style="margin-bottom: 12px; color: #374151;">
    <span style="font-weight: 500;">登录要求：</span>使用小程序前需要先完成登录，登录后将微信与公司账号绑定，之后即可正常使用所有功能。
  </div>

  <div style="margin-bottom: 12px; color: #374151;">
    <span style="font-weight: 500;">自动登录：</span>完成首次登录后，下次打开小程序会自动保持登录状态，无需重复操作。
  </div>

  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin: 16px 0 12px;">常见问题：</h3>

  <div style="margin-bottom: 12px;">
    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：为什么提示"需要重新登录"？</div>
    <div style="color: #4B5563;">A：可能是登录状态失效或账号绑定异常。请关闭小程序后重新打开，系统会自动尝试重新登录。如仍无法解决，请联系客服。</div>
  </div>

  <div style="margin-bottom: 12px;">
    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：无法正常使用功能？</div>
    <div style="color: #4B5563;">A：请尝试：1) 关闭小程序后重新打开；2) 检查网络连接是否正常；3) 确认微信是否正常登录。如仍无法解决，请联系客服。</div>
  </div>

  <div style="margin-bottom: 12px;">
    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：如何退出登录？</div>
    <div style="color: #4B5563;">A：进入"我的"页面，点击右上角设置图标，选择"退出登录"即可。</div>
  </div>
</div>
`

const productSearchContent = `
<div class="rich-text-content">
  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">产品搜索方法：</h3>

  <div style="margin-bottom: 12px; color: #374151;">
    <span style="font-weight: 500;">1) 首页搜索：</span>在首页顶部搜索框输入产品名称或关键词
  </div>

  <div style="margin-bottom: 12px; color: #374151;">
    <span style="font-weight: 500;">2) 搜索页：</span>点击"搜索"图标进入专门的搜索页面，支持按产品/资料分类筛选
  </div>

  <div style="margin-bottom: 12px; color: #374151;">
    <span style="font-weight: 500;">3) 分类浏览：</span>进入"产品中心"或"分类列表"按类别查找
  </div>

  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin: 16px 0 12px;">常见问题：</h3>

  <div style="margin-bottom: 12px;">
    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：搜索不到想要的产品？</div>
    <div style="color: #4B5563;">A：请尝试：1) 使用产品简称搜索；2) 检查是否选择了错误的分类（产品/资料）；3) 联系客服确认产品是否已上架。</div>
  </div>

  <div style="margin-bottom: 12px;">
    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：如何查看产品详情？</div>
    <div style="color: #4B5563;">A：点击产品卡片进入详情页，可查看产品介绍、保障范围、保费计算等信息。</div>
  </div>
</div>
`

const favoriteContent = `
<div class="rich-text-content">
  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">收藏功能说明：</h3>

  <div style="margin-bottom: 12px; color: #374151;">
    <span style="font-weight: 500;">收藏方法：</span>在产品或资料卡片上点击"收藏"图标（爱心形状）即可收藏。
  </div>

  <div style="margin-bottom: 12px; color: #374151;">
    <span style="font-weight: 500;">查看收藏：</span>进入"我的"页面，点击"我的收藏"查看所有收藏的内容。
  </div>

  <div style="margin-bottom: 12px; color: #374151;">
    <span style="font-weight: 500;">取消收藏：</span>在收藏列表或卡片上再次点击收藏图标即可取消。
  </div>

  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin: 16px 0 12px;">常见问题：</h3>

  <div style="margin-bottom: 12px;">
    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：收藏的内容在哪里查看？</div>
    <div style="color: #4B5563;">A：进入"我的"页面，点击"我的收藏"即可看到所有收藏的产品和资料。</div>
  </div>

  <div style="margin-bottom: 12px;">
    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：收藏后为什么会消失？</div>
    <div style="color: #4B5563;">A：可能原因：1) 该产品或资料已下架；2) 您已取消收藏；3) 显示临时异常。请下拉刷新重试。</div>
  </div>
</div>
`

const documentPreviewContent = `
<div class="rich-text-content">
  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">文档预览说明：</h3>

  <div style="margin-bottom: 12px; color: #374151;">
    <span style="font-weight: 500;">支持的文档格式：</span>PDF、Word、Excel、PowerPoint、图片、文本等
  </div>

  <div style="margin-bottom: 12px; color: #374151;">
    <span style="font-weight: 500;">预览方式：</span>点击资料卡片即可在线预览，无需下载
  </div>

  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin: 16px 0 12px;">常见问题：</h3>

  <div style="margin-bottom: 12px;">
    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：文档无法打开/显示空白？</div>
    <div style="color: #4B5563;">A：请尝试：1) 检查网络连接；2) 关闭小程序后重新打开；3) 确认文档是否为支持的格式；4) 联系客服反馈。</div>
  </div>

  <div style="margin-bottom: 12px;">
    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：Office文档建议使用什么方式查看？</div>
    <div style="color: #4B5563;">A：Word、Excel、PowerPoint文档建议使用电脑端查看以获得最佳体验。手机端预览可能存在格式差异。</div>
  </div>

  <div style="margin-bottom: 12px;">
    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：图片如何查看大图？</div>
    <div style="color: #4B5563;">A：点击资料卡片上的图片封面，即可进入全屏预览模式，支持缩放和保存。</div>
  </div>
</div>
`

const personalInfoContent = `
<div class="rich-text-content">
  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">个人信息管理：</h3>

  <h3 style="font-size: 14px; font-weight: bold; color: #374151; margin: 12px 0 8px;">修改头像：</h3>
  <div style="margin-bottom: 12px; color: #4B5563;">
    进入"我的"页面，点击头像→选择"更换头像"→从相册选择或拍照→确认上传
  </div>

  <h3 style="font-size: 14px; font-weight: bold; color: #374151; margin: 12px 0 8px;">修改昵称/手机号：</h3>
  <div style="margin-bottom: 12px; color: #4B5563;">
    进入"我的"页面→点击个人信息→点击对应字段→修改后保存
  </div>

  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin: 16px 0 12px;">常见问题：</h3>

  <div style="margin-bottom: 12px;">
    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：头像上传失败怎么办？</div>
    <div style="color: #4B5563;">A：请检查：1) 图片大小是否超过5MB；2) 网络是否正常；3) 是否授予了相册/相机权限。建议使用JPG/PNG格式，大小不超过2MB。</div>
  </div>

  <div style="margin-bottom: 12px;">
    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：手机号可以修改吗？</div>
    <div style="color: #4B5563;">A：可以。进入个人信息页面，点击手机号→通过短信验证后即可更换新手机号。</div>
  </div>
</div>
`

const performanceContent = `
<div class="rich-text-content">
  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">性能优化建议：</h3>

  <h3 style="font-size: 14px; font-weight: bold; color: #374151; margin: 12px 0 8px;">页面加载慢？</h3>
  <div style="margin-bottom: 12px; color: #4B5563;">
    1) 切换到更好的网络环境（WiFi或4G/5G）<br/>
    2) 关闭后台不使用的小程序<br/>
    3) 下拉刷新页面重新加载<br/>
    4) 删除小程序后重新添加
  </div>

  <h3 style="font-size: 14px; font-weight: bold; color: #374151; margin: 12px 0 8px;">图片无法显示？</h3>
  <div style="margin-bottom: 12px; color: #4B5563;">
    1) 检查网络连接是否正常<br/>
    2) 下拉刷新页面<br/>
    3) 确认图片链接是否有效（如已失效请联系客服）
  </div>

  <h3 style="font-size: 14px; font-weight: bold; color: #374151; margin: 12px 0 8px;">如何清除缓存？</h3>
  <div style="margin-bottom: 12px; color: #4B5563;">
    微信→发现→小程序→长按本小程序→删除→重新进入即可清除缓存
  </div>

  <div style="background-color: #FEF2F2; border-left: 4px solid #DC2626; padding: 12px; margin: 16px 0; border-radius: 4px;">
    <span style="font-size: 12px; color: #991B1B;">⚠️ 注意：清除缓存后需要重新登录，收藏记录会被清空，请谨慎操作。</span>
  </div>
</div>
`

const questions = ref([
  {
    title: '如何创建计划书？',
    id: 1,
    content: createPlanbookContent
  },
  {
    title: '为什么提示需要重新登录？',
    id: 2,
    content: loginAuthContent
  },
  {
    title: '如何搜索产品和资料？',
    id: 3,
    content: productSearchContent
  },
  {
    title: '收藏的内容在哪里查看？',
    id: 4,
    content: favoriteContent
  },
  {
    title: '文档无法打开怎么办？',
    id: 5,
    content: documentPreviewContent
  },
  {
    title: '如何修改个人信息和头像？',
    id: 6,
    content: personalInfoContent
  },
  {
    title: '页面加载慢怎么办？',
    id: 7,
    content: performanceContent
  }
])

// 模糊匹配过滤问题列表
const filteredQuestions = computed(() => {
  if (!searchKeyword.value) {
    return questions.value
  }
  const keyword = searchKeyword.value.toLowerCase()
  return questions.value.filter(q =>
    q.title.toLowerCase().includes(keyword)
  )
})

const handleQuestionClick = (item) => {
  currentQuestion.value = item
  showQuestionPopup.value = true
}
</script>