import React from 'react'
import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useAddress } from '@/hooks/useAddress'
import AddressCard from '@/components/business/AddressCard'

definePageConfig({
  navigationBarTitleText: '确认兑换',
})

const ExchangePage: React.FC = () => {
  const { defaultAddress } = useAddress()

  return (
    <View className="bg-gray-100 flex flex-col" style={{ minHeight: '100vh' }}>
      <View className='flex-1'>
      {/* 收货地址 */}
      <View
        className="bg-white p-3"
        onClick={() => Taro.navigateTo({ url: '/pages/user/address-list' })}
      >
        {defaultAddress ? (
          <AddressCard address={defaultAddress} />
        ) : (
          <View className="flex items-center justify-center py-6">
            <Text className="text-sm text-gray-400">请点击添加收货地址</Text>
            <Text className="text-gray-300 ml-1">→</Text>
          </View>
        )}
      </View>

      {/* 商品信息（确认页需从上一页传递数据，此处为占位） */}
      <View className="bg-white mt-2 p-3">
        <View className="flex gap-3 py-2">
          <View className="w-16 h-16 rounded-md bg-orange-50 flex items-center justify-center">
            <Text className="text-xs text-gray-400">商品图</Text>
          </View>
          <View className="flex-1">
            <Text className="text-sm text-gray-700 block mb-1">积分兑换商品</Text>
            <Text className="text-xs text-gray-400 block">x1</Text>
          </View>
          <View className="flex items-center">
            <Text className="text-sm font-bold text-orange-500">500 积分</Text>
          </View>
        </View>
      </View>

      {/* 费用明细 */}
      <View className="bg-white mt-2 p-3">
        <Text className="text-sm font-medium text-gray-800 mb-2 block">费用明细</Text>
        <View className="flex justify-between py-1">
          <Text className="text-sm text-gray-500">商品积分</Text>
          <Text className="text-sm text-gray-700">500 积分</Text>
        </View>
        <View className="flex justify-between py-1">
          <Text className="text-sm text-gray-500">运费</Text>
          <Text className="text-sm text-green-600">包邮</Text>
        </View>
        <View className="flex justify-between py-1 mt-1 border-t border-gray-50">
          <Text className="text-sm font-medium text-gray-800">合计</Text>
          <Text className="text-sm font-bold text-orange-500">500 积分</Text>
        </View>
      </View>
      </View>

      {/* 底部栏 */}
      <View className="bg-white border-t border-gray-100 px-4 py-3 flex items-center justify-between" style={{ paddingBottom: '20px' }}>
        <View>
          <Text className="text-xs text-gray-500">需支付：</Text>
          <Text className="text-lg font-bold text-orange-500">500 积分</Text>
        </View>
        <View
          className="px-8 py-2 rounded-full"
          style={{ backgroundColor: '#f97316' }}
          onClick={() => {
            Taro.showToast({ title: '兑换成功', icon: 'success' })
            setTimeout(() => Taro.navigateTo({ url: '/pages/order-list' }), 1500)
          }}
        >
          <Text className="text-white font-medium text-sm">确认兑换</Text>
        </View>
      </View>
    </View>
  )
}

export default ExchangePage