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

definePageConfig({
  navigationBarTitleText: '购买礼品卡',
})

const GiftCardPurchasePage: React.FC = () => {
  const [amount, setAmount] = useState('')
  const [showCustom, setShowCustom] = useState(false)
  const scrollHeight = useScrollHeight(60)


  // 预设金额
  const presetAmounts = [100, 200, 500, 1000]

  // 处理金额选择
  const handleAmountSelect = (value: number) => {
    setAmount(value.toString())
    setShowCustom(false)
  }

  // 处理自定义金额
  const handleCustomAmount = (value: string) => {
    setAmount(value)
  }

  // 处理购买
  const handlePurchase = () => {
    Taro.showModal({
      title: '提示',
      content: '礼品卡购买功能暂未开放，请使用兑换功能。',
      showCancel: true,
      confirmText: '去兑换',
      success: (res) => {
        if (res.confirm) {
          Taro.redirectTo({ url: '/pages/gift-card/exchange' })
        }
      }
    })
  }

  return (
    <View className='min-h-screen bg-gray-50'>
      <ScrollView scrollY style={{ height: scrollHeight }}>
        {/* 礼品卡预览 */}
        <View className='mx-3 mt-3 rounded-xl p-6 text-white relative overflow-hidden' style={{ background: 'linear-gradient(to right, #c084fc, #f472b6)' }}>
          <View className='absolute rounded-full' style={{ top: '-20px', right: '-20px', width: '80px', height: '80px', backgroundColor: 'rgba(255,255,255,0.2)' }} />
          <View className='absolute rounded-full' style={{ bottom: '-32px', left: '-32px', width: '96px', height: '96px', backgroundColor: 'rgba(255,255,255,0.2)' }} />

          <Text className='text-sm opacity-80 block mb-2'>鑫龙家电礼品卡</Text>
          <Text className='text-4xl font-bold block mb-3'>
            ¥ {amount || '0'}
          </Text>
          <View className='flex items-center gap-1'>
            <View className='w-6 h-px' style={{ backgroundColor: 'rgba(255,255,255,0.5)' }} />
            <Text className='text-xs opacity-60'>送给他/她一份惊喜</Text>
            <View className='w-6 h-px' style={{ backgroundColor: 'rgba(255,255,255,0.5)' }} />
          </View>
        </View>

        {/* 选择金额 */}
        <View className='bg-white mx-3 mt-3 rounded-xl p-4'>
          <Text className='text-base font-medium text-gray-800 mb-3 block'>选择金额</Text>

          <View className='flex flex-wrap gap-3 mb-3'>
            {presetAmounts.map(amt => (
              <View
                key={amt}
                className={`flex-1 min-w-20 py-3 text-center rounded-lg border-2 ${
                  amount === amt.toString() && !showCustom
                    ? 'border-purple-500 bg-purple-50'
                    : 'border-gray-200'
                }`}
                onClick={() => handleAmountSelect(amt)}
              >
                <Text className={`text-lg font-bold ${
                  amount === amt.toString() && !showCustom ? 'text-purple-500' : 'text-gray-700'
                }`}>
                  ¥{amt}
                </Text>
              </View>
            ))}
          </View>

          {/* 自定义金额 */}
          <View
            className={`py-3 text-center rounded-lg border-2 ${
              showCustom ? 'border-purple-500 bg-purple-50' : 'border-gray-200'
            }`}
            onClick={() => {
              setShowCustom(true)
              setAmount('')
            }}
          >
            {showCustom ? (
              <View className='flex items-center justify-center gap-1'>
                <Text className='text-lg font-bold text-purple-500'>¥</Text>
                <Input
                  type='digit'
                  value={amount}
                  onInput={(e) => handleCustomAmount(e.detail.value)}
                  placeholder='输入金额'
                  className='text-center text-lg font-bold text-purple-500'
                  style={{ width: '120px' }}
                />
              </View>
            ) : (
              <Text className='text-lg text-gray-700'>自定义金额</Text>
            )}
          </View>
        </View>

        {/* 购买说明 */}
        <View className='bg-white mx-3 mt-3 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-6'>
            <Text className='block'>1. 礼品卡购买功能暂未开放</Text>
            <Text className='block'>2. 请使用兑换功能兑换礼品卡</Text>
            <Text className='block'>3. 如有问题，请联系客服</Text>
          </View>
        </View>

        <View className='h-24' />
      </ScrollView>

      {/* 购买按钮 */}
      <View className='bg-white p-3 shadow-lg' style={{ paddingBottom: '20px' }}>
        <View
          className='text-center py-3 rounded-full text-white font-bold'
          style={{ background: 'linear-gradient(to right, #a855f7, #ec4899)' }}
          onClick={handlePurchase}
        >
          <Text className='text-white text-base font-bold'>
            礼品卡兑换
          </Text>
        </View>
      </View>
    </View>
  )
}

export default GiftCardPurchasePage