<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/NavHeader.vue'
import TabBar from '@/components/TabBar.vue'
import IconFont from '@/components/IconFont.vue'
import SearchBar from '@/components/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
  }
]

// Mock Rich Text Content
const mockRichText = `
<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: #EF4444; font-weight: 500;">步骤 1：</span>
    <span>登录系统后，点击左侧菜单的"计划书管理"</span>
  </div>

  <div style="margin-bottom: 8px; color: #374151;">
    <span style="color: #EF4444; font-weight: 500;">步骤 2：</span>
    <span>点击右上角"新建计划书"按钮</span>
  </div>

  <div style="margin-bottom: 8px; color: #374151;">
    <span style="color: #EF4444; font-weight: 500;">步骤 3：</span>
    <span>填写客户信息、保障方案等详细内容</span>
  </div>

  <div style="margin-bottom: 12px; color: #374151;">
    <span style="color: #EF4444; font-weight: 500;">步骤 4：</span>
    <span>点击"生成"按钮，系统将自动生成专业的计划书文档</span>
  </div>

  <div style="background-color: #FEFCE8; border-left: 4px solid #FACC15; padding: 12px; margin: 16px 0; border-radius: 4px;">
    <span style="font-size: 12px; color: #854D0E;">💡 小提示：生成后的计划书可以随时在"我的计划书"中查看和管理。</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：可以导出为PDF吗？</div>
    <div style="color: #4B5563;">A：可以的。在计划书详情页，点击"下载PDF"按钮即可导出高清PDF文件。</div>
  </div>
</div>
`

const questions = ref([
  {
    title: '如何创建新的计划书？',
    id: 1,
    content: mockRichText
  },
  {
    title: 'AI答疑如何使用？',
    id: 2,
    content: mockRichText
  },
  {
    title: '如何修改个人信息？',
    id: 3,
    content: mockRichText
  },
  {
    title: '数据如何同步到云端？',
    id: 4,
    content: mockRichText
  },
  {
    title: '忘记密码怎么办？',
    id: 5,
    content: mockRichText
  }
])

// 模糊匹配过滤问题列表
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>