/**
 * 帮助中心页
 */
import { View, Text } from '@tarojs/components'
import Taro, { useLoad } from '@tarojs/taro'
import { Cell } from '@taroify/core'
import { Arrow } from '@taroify/icons'
import './index.scss'

// 帮助问题列表
const helpQuestions = [
  { id: 1, title: '押金可退吗？' },
  { id: 2, title: '卡券可以退款吗？' },
  { id: 3, title: '购买的年卡/VIP会员可以退款吗？' },
  { id: 4, title: '问题列表标题问题列表标题问题列表标题问题标题问题标题' },
]

const HelpCenter = () => {
  useLoad(() => {
    console.log('帮助中心页面加载')
  })

  // 点击问题
  const handleQuestionClick = (question: { id: number; title: string }) => {
    console.log('点击问题', question)
    // TODO: 跳转到问题详情页
    Taro.showToast({
      title: '功能开发中',
      icon: 'none',
      duration: 2000
    })
  }

  // 拨打客服电话
  const handleCallService = () => {
    Taro.makePhoneCall({
      phoneNumber: '100-666-XXXX'
    })
  }

  return (
    <View className="help-center-page">
      {/* 问题列表 */}
      <View className="question-list">
        {helpQuestions.map((question) => (
          <Cell
            key={question.id}
            className="question-item"
            clickable
            isLink
            onClick={() => handleQuestionClick(question)}
          >
            <Text className="question-title">{question.title}</Text>
          </Cell>
        ))}
      </View>

      {/* 客服电话 */}
      <View className="service-phone">
        <Text className="phone-label">客服电话：</Text>
        <Text className="phone-number" onClick={handleCallService}>
          100-666-XXXX
        </Text>
      </View>
    </View>
  )
}

export default HelpCenter
