import React, { useState } from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import EmptyState from '@/components/common/EmptyState'

definePageConfig({
  navigationBarTitleText: '帮助中心',
})

interface HelpCategory {
  id: number
  title: string
  icon: string
  questions: HelpQuestion[]
}

interface HelpQuestion {
  id: number
  title: string
  content: string
}

const helpData: HelpCategory[] = [
  {
    id: 1,
    title: '购物指南',
    icon: '🛍️',
    questions: [
      { id: 101, title: '如何下单购买商品？', content: '您可以在商品详情页点击"立即购买"或"加入购物车"进行购买。支持微信支付、余额支付等多种支付方式。' },
      { id: 102, title: '购物车有什么用？', content: '购物车可以临时存放您想要购买的商品，您可以随时调整商品数量、删除商品或去结算。' },
      { id: 103, title: '如何查看我的订单？', content: '在"我的"页面点击"我的订单"即可查看所有订单，包括待付款、待发货、待收货等不同状态的订单。' },
    ]
  },
  {
    id: 2,
    title: '支付与退款',
    icon: '💰',
    questions: [
      { id: 201, title: '支持哪些支付方式？', content: '我们支持微信支付、支付宝支付（如有）、货到付款、积分抵扣等多种支付方式。' },
      { id: 202, title: '如何申请退款？', content: '在订单详情页点击"申请退款"按钮，填写退款原因和说明，提交后等待商家审核。' },
      { id: 203, title: '退款多久到账？', content: '退款审核通过后，原路退回您的支付账户。微信支付一般1-3个工作日到账，余额支付即时到账。' },
    ]
  },
  {
    id: 3,
    title: '配送与物流',
    icon: '🚚',
    questions: [
      { id: 301, title: '订单多久发货？', content: '一般情况下，订单会在24小时内发货。特殊情况下可能会延迟，我们会及时通知您。' },
      { id: 302, title: '如何查看物流信息？', content: '在订单详情页可以看到"查看物流"按钮，点击即可查看详细的物流配送信息。' },
      { id: 303, title: '可以指定送货时间吗？', content: '目前暂不支持指定送货时间，但您可以在订单备注中说明您的配送偏好，我们会尽量安排。' },
    ]
  },
  {
    id: 4,
    title: '会员与积分',
    icon: '⭐',
    questions: [
      { id: 401, title: '如何获得积分？', content: '您可以通过每日签到、购物消费、邀请好友等方式获得积分。积分可以在积分商城兑换商品或抵扣现金。' },
      { id: 402, title: '会员有什么特权？', content: '不同等级的会员享受不同的折扣优惠、专属客服、生日礼物等特权。会员等级越高，享受的特权越多。' },
      { id: 403, title: '积分会过期吗？', content: '积分有效期为一年，到期后未使用的积分将自动清零。请及时使用您的积分。' },
    ]
  },
  {
    id: 5,
    title: '账户与安全',
    icon: '🔒',
    questions: [
      { id: 501, title: '如何修改密码？', content: '在"我的"->"设置"->"修改密码"中，输入原密码和新密码即可完成修改。' },
      { id: 502, title: '忘记密码怎么办？', content: '在登录页面点击"忘记密码"，通过手机号验证后可以重置密码。' },
      { id: 503, title: '如何保护账户安全？', content: '建议您设置复杂的密码、开启登录验证、不要将账户信息透露给他人，定期修改密码。' },
    ]
  }
]

const HelpCenterPage: React.FC = () => {
  const [expandedId, setExpandedId] = useState<number | null>(null)

  const handleQuestionClick = (question: HelpQuestion) => {
    Taro.navigateTo({
      url: `/pages/user/help-detail?id=${question.id}&title=${encodeURIComponent(question.title)}&content=${encodeURIComponent(question.content)}`
    })
  }

  const toggleCategory = (categoryId: number) => {
    setExpandedId(expandedId === categoryId ? null : categoryId)
  }

  return (
    <View className='min-h-screen bg-gray-50'>
      <ScrollView scrollY className='h-screen'>
        <View className='p-3'>
          {/* 搜索框（预留） */}
          <View className='bg-white rounded-lg p-3 mb-3 flex items-center'>
            <Text className='text-gray-400 text-sm'>🔍 搜索问题...</Text>
          </View>

          {/* 分类列表 */}
          {helpData.map(category => (
            <View key={category.id} className='bg-white rounded-lg mb-3 overflow-hidden'>
              <View
                className='p-4 flex items-center justify-between'
                onClick={() => toggleCategory(category.id)}
              >
                <View className='flex items-center gap-2'>
                  <Text className='text-xl'>{category.icon}</Text>
                  <Text className='text-base font-medium text-gray-800'>{category.title}</Text>
                </View>
                <Text className='text-gray-400'>
                  {expandedId === category.id ? '▲' : '▼'}
                </Text>
              </View>

              {expandedId === category.id && (
                <View className='border-t border-gray-100'>
                  {category.questions.map((question, index) => (
                    <View
                      key={question.id}
                      className={`p-4 ${index < category.questions.length - 1 ? 'border-b border-gray-50' : ''}`}
                      onClick={() => handleQuestionClick(question)}
                    >
                      <Text className='text-sm text-gray-600'>{question.title}</Text>
                    </View>
                  ))}
                </View>
              )}
            </View>
          ))}

          {/* 联系客服入口 */}
          <View
            className='bg-white rounded-lg p-4 flex items-center justify-center gap-2 mt-3'
            onClick={() => Taro.navigateTo({ url: '/pages/user/customer-service' })}
          >
            <Text className='text-xl'>📞</Text>
            <Text className='text-sm text-blue-500'>联系在线客服</Text>
          </View>

          <View className='h-4'></View>
        </View>
      </ScrollView>
    </View>
  )
}

export default HelpCenterPage