import {useEffect, useState} from "react";
import {
  Image,
  Button,
  Cell,
  CellGroup,
  Input,
  Space,
  ActionSheet,
  Popup,
  InputNumber,
  ConfigProvider
} from '@nutui/nutui-react-taro'
import {Location, ArrowRight} from '@nutui/icons-react-taro'
import Taro, {useDidShow} from '@tarojs/taro'
import {ShopGoods} from "@/api/shop/shopGoods/model";
import {getShopGoods} from "@/api/shop/shopGoods";
import {View, Text} from '@tarojs/components';
import {listShopUserAddress} from "@/api/shop/shopUserAddress";
import {ShopUserAddress} from "@/api/shop/shopUserAddress/model";
import './index.scss'
import Gap from "@/components/Gap";
import {selectPayment} from "@/api/system/payment";
import {Payment} from "@/api/system/payment/model";
import {PaymentHandler, PaymentType, buildSingleGoodsOrder} from "@/utils/payment";
import OrderConfirmSkeleton from "@/components/OrderConfirmSkeleton";
import CouponList from "@/components/CouponList";
import {CouponCardProps} from "@/components/CouponCard";
import {getMyAvailableCoupons} from "@/api/shop/shopUserCoupon";
import {
  transformCouponData,
  calculateCouponDiscount,
  isCouponUsable,
  getCouponUnusableReason,
  sortCoupons,
  filterUsableCoupons,
  filterUnusableCoupons
} from "@/utils/couponUtils";


const OrderConfirm = () => {
  const [goods, setGoods] = useState<ShopGoods | null>(null);
  const [address, setAddress] = useState<ShopUserAddress>()
  const [payments, setPayments] = useState<any[]>([])
  const [payment, setPayment] = useState<Payment>()
  const [isVisible, setIsVisible] = useState<boolean>(false)
  const [quantity, setQuantity] = useState<number>(1)
  const [orderRemark, setOrderRemark] = useState<string>('')
  const [loading, setLoading] = useState<boolean>(true)
  const [error, setError] = useState<string>('')
  const [payLoading, setPayLoading] = useState<boolean>(false)

  // InputNumber 主题配置
  const customTheme = {
    nutuiInputnumberButtonWidth: '28px',
    nutuiInputnumberButtonHeight: '28px',
    nutuiInputnumberInputWidth: '40px',
    nutuiInputnumberInputHeight: '28px',
    nutuiInputnumberInputBorderRadius: '4px',
    nutuiInputnumberButtonBorderRadius: '4px',
  }

  // 优惠券相关状态
  const [selectedCoupon, setSelectedCoupon] = useState<CouponCardProps | null>(null)
  const [couponVisible, setCouponVisible] = useState<boolean>(false)
  const [availableCoupons, setAvailableCoupons] = useState<CouponCardProps[]>([])
  const [couponLoading, setCouponLoading] = useState<boolean>(false)

  const router = Taro.getCurrentInstance().router;
  const goodsId = router?.params?.goodsId;

  // 计算商品总价
  const getGoodsTotal = () => {
    if (!goods) return 0
    return parseFloat(goods.price || '0') * quantity
  }

  // 计算优惠券折扣
  const getCouponDiscount = () => {
    if (!selectedCoupon || !goods) return 0
    const total = getGoodsTotal()
    return calculateCouponDiscount(selectedCoupon, total)
  }

  // 计算实付金额
  const getFinalPrice = () => {
    const total = getGoodsTotal()
    const discount = getCouponDiscount()
    return Math.max(0, total - discount)
  }


  const handleSelect = (item: any) => {
    setPayment(payments.find(payment => payment.name === item.name))
    setIsVisible(false)
  }

  // 处理数量变化
  const handleQuantityChange = (value: string | number) => {
    const newQuantity = typeof value === 'string' ? parseInt(value) || 1 : value
    const finalQuantity = Math.max(1, Math.min(newQuantity, goods?.stock || 999))
    setQuantity(finalQuantity)

    // 数量变化时，重新排序优惠券并检查当前选中的优惠券是否还可用
    if (availableCoupons.length > 0) {
      const newTotal = parseFloat(goods?.price || '0') * finalQuantity
      const sortedCoupons = sortCoupons(availableCoupons, newTotal)
      setAvailableCoupons(sortedCoupons)

      // 检查当前选中的优惠券是否还可用
      if (selectedCoupon && !isCouponUsable(selectedCoupon, newTotal)) {
        setSelectedCoupon(null)
        Taro.showToast({
          title: '当前优惠券不满足使用条件，已自动取消',
          icon: 'none'
        })
      }
    }
  }

  // 处理优惠券选择
  const handleCouponSelect = (coupon: CouponCardProps) => {
    const total = getGoodsTotal()

    // 检查是否可用
    if (!isCouponUsable(coupon, total)) {
      const reason = getCouponUnusableReason(coupon, total)
      Taro.showToast({
        title: reason || '优惠券不可用',
        icon: 'none'
      })
      return
    }

    setSelectedCoupon(coupon)
    setCouponVisible(false)
    Taro.showToast({
      title: '优惠券选择成功',
      icon: 'success'
    })
  }

  // 取消选择优惠券
  const handleCouponCancel = () => {
    setSelectedCoupon(null)
    Taro.showToast({
      title: '已取消使用优惠券',
      icon: 'success'
    })
  }

  // 加载用户优惠券
  const loadUserCoupons = async () => {
    try {
      setCouponLoading(true)

      // 使用新的API获取可用优惠券
      const res = await getMyAvailableCoupons()

      if (res && res.length > 0) {
        // 转换数据格式
        const transformedCoupons = res.map(transformCouponData)

        // 按优惠金额排序
        const total = getGoodsTotal()
        const sortedCoupons = sortCoupons(transformedCoupons, total)

        setAvailableCoupons(sortedCoupons)

        console.log('加载优惠券成功:', {
          originalData: res,
          transformedData: transformedCoupons,
          sortedData: sortedCoupons
        })
      } else {
        setAvailableCoupons([])
        console.log('暂无可用优惠券')
      }
    } catch (error) {
      console.error('加载优惠券失败:', error)
      setAvailableCoupons([])
      Taro.showToast({
        title: '加载优惠券失败',
        icon: 'none'
      })
    } finally {
      setCouponLoading(false)
    }
  }

  /**
   * 统一支付入口
   */
  const onPay = async (goods: ShopGoods) => {
    try {
      setPayLoading(true)

      // 基础校验
      if (!address) {
        Taro.showToast({
          title: '请选择收货地址',
          icon: 'error'
        })
        return;
      }

      if (!payment) {
        Taro.showToast({
          title: '请选择支付方式',
          icon: 'error'
        })
        return;
      }

      // 库存校验
      if (goods.stock !== undefined && quantity > goods.stock) {
        Taro.showToast({
          title: '商品库存不足',
          icon: 'error'
        })
        return;
      }

      // 构建订单数据
      const orderData = buildSingleGoodsOrder(
        goods.goodsId!,
        quantity,
        address.id,
        {
          comments: goods.name,
          deliveryType: 0,
          buyerRemarks: orderRemark,
          couponId: selectedCoupon ? selectedCoupon.id : undefined
        }
      );

      // 根据支付方式选择支付类型
      const paymentType = payment.type === 0 ? PaymentType.BALANCE : PaymentType.WECHAT;

      // 执行支付
      await PaymentHandler.pay(orderData, paymentType);

      Taro.showToast({
        title: '支付成功',
        icon: 'success'
      })
    } catch (error) {
      console.error('支付失败:', error)
      Taro.showToast({
        title: '支付失败，请重试',
        icon: 'error'
      })
    } finally {
      setPayLoading(false)
    }
  };

  // 统一的数据加载函数
  const loadAllData = async () => {
    try {
      setLoading(true)
      setError('')

      // 分别加载数据，避免类型推断问题
      let goodsRes: ShopGoods | null = null
      if (goodsId) {
        goodsRes = await getShopGoods(Number(goodsId))
      }

      const [addressRes, paymentRes] = await Promise.all([
        listShopUserAddress({isDefault: true}),
        selectPayment({})
      ])

      // 设置商品信息
      if (goodsRes) {
        setGoods(goodsRes)
      }

      // 设置默认收货地址
      if (addressRes && addressRes.length > 0) {
        setAddress(addressRes[0])
      }

      // 设置支付方式
      if (paymentRes && paymentRes.length > 0) {
        setPayments(paymentRes.map((d) => ({
          type: d.type,
          name: d.name
        })))
        setPayment(paymentRes[0])
      }

      // 加载优惠券（在商品信息加载完成后）
      if (goodsRes) {
        await loadUserCoupons()
      }
    } catch (err) {
      console.error('加载数据失败:', err)
      setError('加载数据失败，请重试')
    } finally {
      setLoading(false)
    }
  }

  useDidShow(() => {
    loadAllData()
  })

  useEffect(() => {
    loadAllData()
  }, [goodsId]);

  // 重新加载数据
  const handleRetry = () => {
    loadAllData()
  }

  // 错误状态
  if (error) {
    return (
      <View className="order-confirm-page">
        <View className="error-state">
          <Text className="error-text">{error}</Text>
          <Button onClick={handleRetry}>重新加载</Button>
        </View>
      </View>
    )
  }

  // 加载状态
  if (loading || !goods) {
    return <OrderConfirmSkeleton/>
  }

  return (
    <div className={'order-confirm-page'}>
      <CellGroup>
        {
          address && (
            <Cell className={'address-bottom-line'} onClick={() => Taro.navigateTo({url: '/user/address/index'})}>
              <Space>
                <Location className={'text-gray-500'}/>
                <View className={'flex flex-col w-full justify-between items-start'}>
                  <Space className={'flex flex-row w-full'}>
                    <View className={'flex-wrap text-nowrap whitespace-nowrap text-gray-500'}>送至</View>
                    <View className={'font-medium text-sm flex items-center w-full'}>
                      <View
                        style={{width: '64%'}}>{address.province} {address.city} {address.region} {address.address}</View>
                      <ArrowRight className={'text-gray-400'} size={14}/>
                    </View>
                  </Space>
                  <View className={'pt-1 pb-3 text-gray-500'}>{address.name} {address.phone}</View>
                </View>
              </Space>
            </Cell>
          )
        }
        {!address && (
          <Cell className={''} onClick={() => Taro.navigateTo({url: '/user/address/index'})}>
            <Space>
              <Location/>
              添加收货地址
            </Space>
          </Cell>
        )}
      </CellGroup>

      <CellGroup>
        <Cell key={goods.goodsId}>
          <View className={'flex w-full justify-between gap-3'}>
            <View>
              <Image src={goods.image} mode={'aspectFill'} style={{
                width: '80px',
                height: '80px',
              }} lazyLoad={false}/>
            </View>
            <View className={'flex flex-col w-full'} style={{width: '100%'}}>
              <Text className={'font-medium w-full'}>{goods.name}</Text>
              <Text className={'number text-gray-400 text-sm py-2'}>80g/袋</Text>
              <View className={'flex justify-between items-center'}>
                <Text className={'text-red-500'}>￥{goods.price}</Text>
                <View className={'flex flex-col items-end gap-1'}>
                  <ConfigProvider theme={customTheme}>
                    <InputNumber
                      value={quantity}
                      min={1}
                      max={goods.stock || 999}
                      disabled={goods.canBuyNumber != 0}
                      onChange={handleQuantityChange}
                    />
                  </ConfigProvider>
                  {goods.stock !== undefined && (
                    <Text className={'text-xs text-gray-400'}>
                      库存 {goods.stock} 件
                    </Text>
                  )}
                </View>
              </View>
            </View>
          </View>
        </Cell>
      </CellGroup>

      <CellGroup>
        <Cell
          title={'支付方式'}
          extra={(
            <View className={'flex items-center gap-2'}>
              <View className={'text-gray-900'}>{payment?.name}</View>
              <ArrowRight className={'text-gray-400'} size={14}/>
            </View>
          )}
          onClick={() => setIsVisible(true)}
        />
      </CellGroup>

      <CellGroup>
        <Cell
          title={`商品总价（共${quantity}件）`}
          extra={<View className={'font-medium'}>￥{getGoodsTotal().toFixed(2)}</View>}
        />
        <Cell
          title={'优惠券'}
          extra={(
            <View className={'flex justify-between items-center'}>
              <View className={'text-red-500 text-sm mr-1'}>
                {selectedCoupon ? `-￥${getCouponDiscount().toFixed(2)}` : '暂未使用'}
              </View>
              <ArrowRight className={'text-gray-400'} size={14}/>
            </View>
          )}
          onClick={() => setCouponVisible(true)}
        />
        <Cell title={'配送费'} extra={'￥0.00'}/>
        <Cell extra={(
          <View className={'flex items-end gap-2'}>
            <Text>已优惠</Text>
            <Text className={'text-red-500 text-sm'}>￥{getCouponDiscount().toFixed(2)}</Text>
            <Text className={'ml-2'}>实付</Text>
            <Text className={'text-gray-700 font-bold'} style={{fontSize: '18px'}}>￥{getFinalPrice().toFixed(2)}</Text>
          </View>
        )}/>
      </CellGroup>

      <CellGroup>
        <Cell title={'订单备注'} extra={(
          <Input
            placeholder={'选填，请先和商家协商一致'}
            style={{padding: '0'}}
            value={orderRemark}
            onChange={(value) => setOrderRemark(value)}
            maxLength={100}
          />
        )}/>
      </CellGroup>

      {/* 支付方式选择 */}
      <ActionSheet
        visible={isVisible}
        options={payments}
        onSelect={handleSelect}
        onCancel={() => setIsVisible(false)}
      />

      {/* 优惠券选择弹窗 */}
      <Popup
        visible={couponVisible}
        position="bottom"
        onClose={() => setCouponVisible(false)}
        style={{height: '60vh'}}
      >
        <View className="coupon-popup">
          <View className="coupon-popup__header">
            <Text className="text-sm">选择优惠券</Text>
            <Button
              size="small"
              fill="none"
              onClick={() => setCouponVisible(false)}
            >
              关闭
            </Button>
          </View>

          <View className="coupon-popup__content">
            {couponLoading ? (
              <View className="coupon-popup__loading">
                <Text>加载优惠券中...</Text>
              </View>
            ) : (
              <>
                {selectedCoupon && (
                  <View className="coupon-popup__current">
                    <Text className="coupon-popup__current-title font-medium">当前使用</Text>
                    <View className="coupon-popup__current-item">
                      <Text>{selectedCoupon.title} -￥{calculateCouponDiscount(selectedCoupon, getGoodsTotal()).toFixed(2)}</Text>
                      <Button size="small" onClick={handleCouponCancel}>取消使用</Button>
                    </View>
                  </View>
                )}

                {(() => {
                  const total = getGoodsTotal()
                  const usableCoupons = filterUsableCoupons(availableCoupons, total)
                  const unusableCoupons = filterUnusableCoupons(availableCoupons, total)

                  return (
                    <>
                      <CouponList
                        title={`可用优惠券 (${usableCoupons.length})`}
                        coupons={usableCoupons}
                        layout="vertical"
                        onCouponClick={handleCouponSelect}
                        showEmpty={usableCoupons.length === 0}
                        emptyText="暂无可用优惠券"
                      />

                      {unusableCoupons.length > 0 && (
                        <CouponList
                          title={`不可用优惠券 (${unusableCoupons.length})`}
                          coupons={unusableCoupons.map(coupon => ({
                            ...coupon,
                            status: 2 as const
                          }))}
                          layout="vertical"
                          showEmpty={false}
                        />
                      )}
                    </>
                  )
                })()}
              </>
            )}
          </View>
        </View>
      </Popup>

      <Gap height={50}/>

      <div className={'fixed z-50 bg-white w-full bottom-0 left-0 pt-4 pb-10'} style={{
        boxShadow: '0 -2px 4px 0 rgba(0,0,0,0.10)'
      }}>
        <View className={'btn-bar flex justify-between items-center'}>
          <div className={'flex flex-col justify-center items-start mx-4'}>
            <View className={'flex items-center gap-2'}>
              <span className={'total-price text-sm text-gray-500'}>实付金额：</span>
              <span className={'text-red-500 text-xl font-bold'}>￥{getFinalPrice().toFixed(2)}</span>
            </View>
            {selectedCoupon && (
              <View className={'text-xs text-gray-400'}>
                已优惠 ￥{getCouponDiscount().toFixed(2)}
              </View>
            )}
          </div>
          <div className={'buy-btn mx-4'}>
            <Button
              type="success"
              size="large"
              loading={payLoading}
              onClick={() => onPay(goods)}
            >
              {payLoading ? '支付中...' : '立即付款'}
            </Button>
          </div>
        </View>
      </div>
    </div>
  );
};

export default OrderConfirm;