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

definePageConfig({
  navigationBarTitleText: '消息详情',
})

const MessageDetailPage: React.FC = () => {
  const [message, setMessage] = useState({
    id: 1,
    type: 1,
    title: '欢迎注册鑫龙家电',
    content: '感谢您注册鑫龙家电，让我们一起开启美好购物体验！\n\n在鑫龙家电，您可以：\n• 浏览精选商品\n• 享受会员专属优惠\n• 参与精彩活动\n• 获得积分奖励\n\n如有任何问题，欢迎联系客服。',
    time: '2026-05-12 10:30:00',
    isRead: true,
  })

  // 模拟获取消息详情
  useEffect(() => {
    const params = Taro.getCurrentInstance().router?.params
    if (params?.id) {
      // 这里应该调用API获取消息详情
      console.log('消息ID:', params.id)
      // 标记为已读
      Taro.showToast({ title: '已标记为已读', icon: 'none' })
    }
  }, [])

  // 获取类型图标
  const getTypeIcon = (type: number) => {
    const iconMap: Record<number, string> = {
      1: '🔔',
      2: '📦',
      3: '🎁',
    }
    return iconMap[type] || '📋'
  }

  // 获取类型名称
  const getTypeName = (type: number) => {
    const nameMap: Record<number, string> = {
      1: '系统通知',
      2: '订单通知',
      3: '活动通知',
    }
    return nameMap[type] || '其他'
  }

  // 格式化时间
  const formatTime = (timeStr: string) => {
    const date = new Date(timeStr)
    const year = date.getFullYear()
    const month = (date.getMonth() + 1).toString().padStart(2, '0')
    const day = date.getDate().toString().padStart(2, '0')
    const hour = date.getHours().toString().padStart(2, '0')
    const minute = date.getMinutes().toString().padStart(2, '0')
    return `${year}-${month}-${day} ${hour}:${minute}`
  }

  // 删除消息
  const handleDelete = () => {
    Taro.showModal({
      title: '提示',
      content: '确定删除该消息吗？',
      confirmColor: '#0e932e',
      success: (res) => {
        if (res.confirm) {
          Taro.showToast({ title: '删除成功', icon: 'success' })
          setTimeout(() => {
            Taro.navigateBack()
          }, 1500)
        }
      }
    })
  }

  return (
    <View className='min-h-screen bg-gray-50 flex flex-col'>
      <ScrollView scrollY className='flex-1'>
        {/* 消息头部 */}
        <View className='bg-white p-4 mb-3'>
          <View className='flex items-center gap-2 mb-3'>
            <Text className='text-2xl'>{getTypeIcon(message.type)}</Text>
            <View className='flex-1'>
              <Text className='text-lg font-bold text-gray-800 block mb-1'>
                {message.title}
              </Text>
              <View className='flex items-center gap-2'>
                <Text className='text-xs text-gray-400'>
                  {formatTime(message.time)}
                </Text>
                <View className='bg-gray-100 px-2 py-1 rounded'>
                  <Text className='text-xs text-gray-500'>
                    {getTypeName(message.type)}
                  </Text>
                </View>
              </View>
            </View>
          </View>
        </View>

        {/* 消息内容 */}
        <View className='bg-white p-4 mb-3'>
          <Text className='text-sm text-gray-700 leading-7 block whitespace-pre-wrap'>
            {message.content}
          </Text>
        </View>

        {/* 相关操作 */}
        <View className='bg-white p-4'>
          <Text className='text-sm font-medium text-gray-800 mb-3 block'>相关操作</Text>

          <View className='flex flex-col gap-3'>
            <View
              className='flex items-center justify-between py-2 border-b border-gray-50'
              onClick={() => Taro.navigateTo({ url: '/pages/user/user' })}
            >
              <Text className='text-sm text-gray-600'>查看个人中心</Text>
              <Text className='text-gray-400'>→</Text>
            </View>

            <View
              className='flex items-center justify-between py-2 border-b border-gray-50'
              onClick={() => Taro.switchTab({ url: '/pages/index/index' })}
            >
              <Text className='text-sm text-gray-600'>返回首页</Text>
              <Text className='text-gray-400'>→</Text>
            </View>

            <View
              className='flex items-center justify-between py-2'
              onClick={handleDelete}
            >
              <Text className='text-sm text-red-500'>删除此消息</Text>
              <Text className='text-gray-400'>→</Text>
            </View>
          </View>
        </View>

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

export default MessageDetailPage