import React from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import { useScrollHeight } from '@/hooks/useScrollHeight'

definePageConfig({
  navigationBarTitleText: '积分规则',
})

const PointsRulesPage: React.FC = () => {
  const scrollHeight = useScrollHeight(44)

  return (
    <View className='min-h-screen bg-gray-50'>
      <ScrollView scrollY style={{ height: scrollHeight }}>
        {/* 积分获取规则 */}
        <View className='mx-3 mt-3 bg-white rounded-xl p-4'>
          <Text className='text-base font-medium text-gray-800 mb-3 block'>积分获取</Text>
          
          <View className='mb-4'>
            <View className='flex items-center gap-2 mb-2'>
              <Text className='text-lg'>📅</Text>
              <Text className='text-sm font-medium text-gray-700'>每日签到</Text>
            </View>
            <View className='text-xs text-gray-500 leading-5 pl-6'>
              <Text className='block'>• 每日签到可获得 5 积分</Text>
              <Text className='block'>• 连续签到 7 天额外获得 50 积分</Text>
              <Text className='block'>• 连续签到 30 天额外获得 200 积分</Text>
            </View>
          </View>

          <View className='mb-4'>
            <View className='flex items-center gap-2 mb-2'>
              <Text className='text-lg'>🛍️</Text>
              <Text className='text-sm font-medium text-gray-700'>购物获得</Text>
            </View>
            <View className='text-xs text-gray-500 leading-5 pl-6'>
              <Text className='block'>• 每消费 1 元可获得 1 积分</Text>
              <Text className='block'>• 使用积分抵扣金额不获得积分</Text>
              <Text className='block'>• 退款时扣除相应积分</Text>
            </View>
          </View>

          <View className='mb-4'>
            <View className='flex items-center gap-2 mb-2'>
              <Text className='text-lg'>✍️</Text>
              <Text className='text-sm font-medium text-gray-700'>评价获得</Text>
            </View>
            <View className='text-xs text-gray-500 leading-5 pl-6'>
              <Text className='block'>• 订单完成后评价可获得 10 积分</Text>
              <Text className='block'>• 上传图片评价额外获得 5 积分</Text>
              <Text className='block'>• 每条订单仅限评价一次</Text>
            </View>
          </View>

          <View>
            <View className='flex items-center gap-2 mb-2'>
              <Text className='text-lg'>🎁</Text>
              <Text className='text-sm font-medium text-gray-700'>活动赠送</Text>
            </View>
            <View className='text-xs text-gray-500 leading-5 pl-6'>
              <Text className='block'>• 注册赠送 50 积分</Text>
              <Text className='block'>• 完善个人信息赠送 20 积分</Text>
              <Text className='block'>• 节日活动、生日赠送等</Text>
            </View>
          </View>
        </View>

        {/* 积分使用规则 */}
        <View className='mx-3 mt-3 bg-white rounded-xl p-4'>
          <Text className='text-base font-medium text-gray-800 mb-3 block'>积分使用</Text>
          
          <View className='mb-4'>
            <View className='flex items-center gap-2 mb-2'>
              <Text className='text-lg'>💰</Text>
              <Text className='text-sm font-medium text-gray-700'>抵扣金额</Text>
            </View>
            <View className='text-xs text-gray-500 leading-5 pl-6'>
              <Text className='block'>• 100 积分可抵扣 1 元</Text>
              <Text className='block'>• 最高可抵扣订单金额的 10%</Text>
              <Text className='block'>• 抵扣金额不可超过订单实付金额</Text>
            </View>
          </View>

          <View className='mb-4'>
            <View className='flex items-center gap-2 mb-2'>
              <Text className='text-lg'>🎫</Text>
              <Text className='text-sm font-medium text-gray-700'>兑换优惠券</Text>
            </View>
            <View className='text-xs text-gray-500 leading-5 pl-6'>
              <Text className='block'>• 可在积分商城兑换各类优惠券</Text>
              <Text className='block'>• 兑换后不可撤销</Text>
            </View>
          </View>

          <View>
            <View className='flex items-center gap-2 mb-2'>
              <Text className='text-lg'>🎁</Text>
              <Text className='text-sm font-medium text-gray-700'>兑换商品</Text>
            </View>
            <View className='text-xs text-gray-500 leading-5 pl-6'>
              <Text className='block'>• 可在积分商城兑换实物商品</Text>
              <Text className='block'>• 兑换后不可撤销</Text>
              <Text className='block'>• 商品兑换需支付邮费</Text>
            </View>
          </View>
        </View>

        {/* 积分有效期规则 */}
        <View className='mx-3 mt-3 bg-white rounded-xl p-4'>
          <Text className='text-base font-medium text-gray-800 mb-3 block'>积分有效期</Text>
          
          <View className='text-xs text-gray-500 leading-5'>
            <Text className='block mb-2'>• 积分有效期为获得之日起 1 年</Text>
            <Text className='block mb-2'>• 过期积分将自动扣除</Text>
            <Text className='block mb-2'>• 可在"积分明细"中查看即将过期的积分</Text>
            <Text className='block'>• 建议使用即将过期的积分</Text>
          </View>
        </View>

        {/* 积分等级规则 */}
        <View className='mx-3 mt-3 bg-white rounded-xl p-4'>
          <Text className='text-base font-medium text-gray-800 mb-3 block'>会员等级</Text>
          
          <View className='mb-3'>
            <View className='flex justify-between py-2 border-b border-gray-50'>
              <Text className='text-sm text-gray-600'>普通会员</Text>
              <Text className='text-xs text-gray-400'>0-999 积分</Text>
            </View>
            <View className='flex justify-between py-2 border-b border-gray-50'>
              <Text className='text-sm text-gray-600'>银卡会员</Text>
              <Text className='text-xs text-gray-400'>1000-4999 积分</Text>
            </View>
            <View className='flex justify-between py-2 border-b border-gray-50'>
              <Text className='text-sm text-gray-600'>金卡会员</Text>
              <Text className='text-xs text-gray-400'>5000-9999 积分</Text>
            </View>
            <View className='flex justify-between py-2'>
              <Text className='text-sm text-gray-600'>钻石会员</Text>
              <Text className='text-xs text-gray-400'>10000 积分以上</Text>
            </View>
          </View>

          <View className='text-xs text-gray-400 leading-5'>
            <Text className='block'>• 会员等级根据历史累计获得积分计算</Text>
            <Text className='block'>• 等级越高，享受的折扣和特权越多</Text>
            <Text className='block'>• 会员等级每月 1 号更新</Text>
          </View>
        </View>

        {/* 其他说明 */}
        <View className='mx-3 mt-3 mb-3 bg-white rounded-xl p-4'>
          <Text className='text-base font-medium text-gray-800 mb-3 block'>其他说明</Text>
          
          <View className='text-xs text-gray-500 leading-5'>
            <Text className='block mb-2'>1. 积分不可转让、不可兑现</Text>
            <Text className='block mb-2'>2. 账户注销后积分将清零</Text>
            <Text className='block mb-2'>3. 如有疑问，请联系客服</Text>
            <Text className='block'>4. 平台保留最终解释权</Text>
          </View>
        </View>

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

export default PointsRulesPage