import { useCallback, useEffect, useRef, useState } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import { View, Text, Image, Textarea, ScrollView } from '@tarojs/components'
import { Button, Empty, Icon, Popup, Stepper } from '@antmjs/vantui'
import useAuthStore from '@/stores/auth/useAuthStore'
import useCartStore from '@/stores/cart/useCartStore'
import { createOrderApi } from '@/services/order'
import { getStoreInfoApi } from '@/services/store'
import {formatRetailPrice, formatSpec} from '@/utils/format'
import type { CartItem } from '@/types/cart'
import type { StoreDetail } from '@/types/store'
import './index.less'

export default function CartPage() {
  const token = useAuthStore(s => s.token)
  const items = useCartStore(s => s.items)
  const totalQuantity = useCartStore(s => s.totalQuantity)
  const totalAmount = useCartStore(s => s.totalAmount)
  const loading = useCartStore(s => s.loading)
  const fetchCart = useCartStore(s => s.fetchCart)
  const updateQuantity = useCartStore(s => s.updateQuantity)
  const removeItem = useCartStore(s => s.removeItem)
  const clearCart = useCartStore(s => s.clearCart)
  const clearLocal = useCartStore(s => s.clearLocal)

  /** 本地编辑中的数量（输入即时生效，500ms 防抖后提交服务端） */
  const [qtyMap, setQtyMap] = useState<Record<number, string>>({})
  const debounceRef = useRef<Record<number, ReturnType<typeof setTimeout>>>({})

  /** 下单弹层 */
  const [showOrder, setShowOrder] = useState(false)
  const [remark, setRemark] = useState('')
  const [submitting, setSubmitting] = useState(false)

  /** 配送信息（下单弹层展示，打开时拉取） */
  const [storeInfo, setStoreInfo] = useState<StoreDetail | null>(null)
  const [storeLoading, setStoreLoading] = useState(false)

  /** 可购项（status=1） */
  const purchasable = items.filter(item => item.status === 1)
  const hasInvalid = items.length > 0 && purchasable.length < items.length

  const loggedIn = !!token

  const goLogin = useCallback(() => {
    Taro.navigateTo({ url: '/pages/login/index' })
  }, [])

  /** 拉取门店配送信息 */
  const fetchStoreInfo = useCallback(() => {
    setStoreLoading(true)
    getStoreInfoApi()
      .then(res => setStoreInfo(res.data))
      .catch(() => setStoreInfo(null))
      .finally(() => setStoreLoading(false))
  }, [])

  useDidShow(() => {
    // 未登录不请求接口，直接展示去登录空态（参考消息页）
    if (!loggedIn) return
    fetchCart().catch(() => {})
    // 从门店信息编辑页返回且弹层仍打开时 → 刷新配送信息
    if (showOrder) fetchStoreInfo()
  })

  /** 同步本地编辑数量：删除不存在的项，保留在编数量 */
  useEffect(() => {
    setQtyMap(prev => {
      const next: Record<number, string> = {}
      for (const item of items) {
        if (prev[item.id] !== undefined) {
          next[item.id] = prev[item.id]
        }
      }
      return next
    })
  }, [items])

  /** 清理防抖定时器 */
  useEffect(() => {
    const timers = debounceRef.current
    return () => {
      Object.values(timers).forEach(t => clearTimeout(t))
    }
  }, [])

  /** 数量变更：本地即时更新 + 防抖提交 */
  const handleQtyChange = useCallback(
    (item: CartItem, val: string | number) => {
      const value = Number(val)
      if (!value || value <= 0) return
      setQtyMap(prev => ({ ...prev, [item.id]: String(value) }))
      if (debounceRef.current[item.id]) {
        clearTimeout(debounceRef.current[item.id])
      }
      debounceRef.current[item.id] = setTimeout(() => {
        updateQuantity(item.id, value).catch(() => {
          // 服务端拒绝（超上限等）→ 重新同步展示
          fetchCart().catch(() => {})
        })
      }, 500)
    },
    [updateQuantity, fetchCart],
  )

  /** 删除单项 */
  const handleRemove = useCallback(
    (item: CartItem) => {
      Taro.showModal({
        title: '删除商品',
        content: `确定删除「${item.name}」吗？`,
        confirmColor: '#ee0a24',
        success: res => {
          if (res.confirm) {
            removeItem(item.id).catch(() => {})
          }
        },
      })
    },
    [removeItem],
  )

  /** 清空购物车 */
  const handleClear = useCallback(() => {
    Taro.showModal({
      title: '清空购物车',
      content: '确定清空购物车吗？',
      confirmColor: '#ee0a24',
      success: res => {
        if (res.confirm) {
          clearCart().catch(() => {})
        }
      },
    })
  }, [clearCart])

  /** 打开下单弹层（同时拉取配送信息） */
  const handleOrderTap = useCallback(() => {
    if (!purchasable.length) {
      Taro.showToast({ title: '没有可购买的商品', icon: 'none' })
      return
    }
    setShowOrder(true)
    fetchStoreInfo()
  }, [purchasable.length, fetchStoreInfo])

  /** 配送信息点击：拉取失败时重试，否则前往门店信息编辑页 */
  const handleDeliveryTap = useCallback(() => {
    if (!storeLoading && !storeInfo) {
      fetchStoreInfo()
      return
    }
    Taro.navigateTo({ url: '/pages/store-info/index' })
  }, [storeLoading, storeInfo, fetchStoreInfo])

  /** 提交订单（金额一律服务端重算） */
  const handleSubmitOrder = useCallback(async () => {
    if (submitting) return
    setSubmitting(true)
    try {
      await createOrderApi({
        items: purchasable.map(item => ({
          product_id: item.product_id,
          quantity: Number(qtyMap[item.id] ?? item.quantity),
        })),
        remark: remark.trim() || undefined,
      })
      Taro.showToast({ title: '下单成功', icon: 'success' })
      setShowOrder(false)
      setRemark('')
      // 本地先清空，再以服务端为准同步（服务端可能保留购物车内容）
      clearLocal()
      fetchCart().catch(() => {})
    } catch {
      // 错误（已下架/未设等级价）已由 request 层 toast
    } finally {
      setSubmitting(false)
    }
  }, [submitting, purchasable, qtyMap, remark, clearLocal, fetchCart])

  /** 当前展示的数量 */
  const displayQty = (item: CartItem) => qtyMap[item.id] ?? item.quantity

  return (
    <View className='cart-page'>
      {/* ========== 头部 ========== */}
      <View className='cart-header'>
        <Text className='cart-header__title'>购物车</Text>
        {loggedIn && items.length > 0 && (
          <Text className='cart-header__clear' onClick={handleClear}>清空</Text>
        )}
      </View>

      {/* ========== 列表 ========== */}
      {!loggedIn ? (
        <Empty description='登录后查看购物车' className='cart-empty'>
          <View className='cart-empty__btn' onClick={goLogin}>去登录</View>
        </Empty>
      ) : items.length === 0 ? (
        loading ? (
          <View className='cart-loading'><Text>加载中...</Text></View>
        ) : (
          <Empty description='购物车还是空的，去逛逛吧' className='cart-empty'>
            <Button
              type='danger'
              size='small'
              round
              onClick={() => Taro.switchTab({ url: '/pages/product/index' })}
            >
              去选购
            </Button>
          </Empty>
        )
      ) : (
        items.map(item => (
          <View key={item.id} className={`cart-item ${item.status === 0 ? 'cart-item--invalid' : ''}`}>
            <Image className='cart-item__image' src={item.image} mode='aspectFill' lazyLoad />
            <View className='cart-item__info'>
              <View className='cart-item__title-row'>
                <Text className='cart-item__name'>{item.name}</Text>
                {item.status === 0 && <Text className='cart-item__invalid-tag'>已失效</Text>}
              </View>
              <Text className='cart-item__spec'>
                {formatSpec(item.spec, item.unit)}{'  '}
                单价：{formatRetailPrice(item.price, item.spec)} {item.price_unit}
              </Text>
              <View className='cart-item__bottom'>
                <Text className='cart-item__price'>￥{item.price}</Text>
                {item.status === 1 ? (
                  <Stepper
                    value={displayQty(item)}
                    min={1}
                    max={99999999.99}
                    inputWidth='90rpx'
                    buttonSize='56rpx'
                    onChange={e => handleQtyChange(item, e.detail)}
                  />
                ) : (
                  <Text className='cart-item__delete' onClick={() => handleRemove(item)}>删除</Text>
                )}
              </View>
            </View>
            {item.status === 1 && (
              <View className='cart-item__actions'>
                <Text className='cart-item__amount'>￥{item.amount ?? '0.00'}</Text>
                <Text className='cart-item__delete' onClick={() => handleRemove(item)}>删除</Text>
              </View>
            )}
          </View>
        ))
      )}

      <View style={{ height: 100 }}></View>

      {loggedIn && hasInvalid && (
        <View className='cart-invalid-hint'>
          <Text>部分商品已下架或未设置您所在等级的价格，不可下单</Text>
        </View>
      )}

      {/* ========== 底部结算栏 ========== */}
      {loggedIn && items.length > 0 && (
        <View className='cart-footer'>
          <View className='cart-footer__total'>
            <Text className='cart-footer__label'>合计{totalQuantity}件</Text>
            <Text className='cart-footer__amount'>￥{totalAmount}</Text>
          </View>
          <Button type='danger' className='cart-footer__submit' onClick={handleOrderTap}>
            去下单
          </Button>
        </View>
      )}

      {/* ========== 下单确认弹层 ========== */}
      <Popup
        show={showOrder}
        position='bottom'
        round
        closeable
        closeOnClickOverlay
        safeAreaInsetBottom
        onClose={() => setShowOrder(false)}
      >
        <View className='order-popup'>
          <Text className='order-popup__title'>确认下单</Text>

          {/* 配送信息（点击前往修改门店信息） */}
          <View className='order-popup__delivery' onClick={handleDeliveryTap}>
            <Icon name='location-o' size={20} color='#ee0a24' className='order-popup__delivery-icon' />
            {storeLoading ? (
              <Text className='order-popup__delivery-tip'>配送信息加载中...</Text>
            ) : storeInfo ? (
              <View className='order-popup__delivery-info'>
                <View className='order-popup__delivery-head'>
                  <Text className='order-popup__delivery-name'>{storeInfo.name}</Text>
                  {(storeInfo.contact || storeInfo.phone) && (
                    <Text className='order-popup__delivery-contact'>
                      {storeInfo.contact} {storeInfo.phone}
                    </Text>
                  )}
                </View>
                {storeInfo.address ? (
                  <Text className='order-popup__delivery-address'>{storeInfo.address}</Text>
                ) : (
                  <Text className='order-popup__delivery-warn'>收货地址未填写，点击完善配送信息</Text>
                )}
              </View>
            ) : (
              <Text className='order-popup__delivery-tip'>未获取到门店信息，点击重试</Text>
            )}
            <Text className='order-popup__delivery-arrow'>›</Text>
          </View>

          <ScrollView scrollY className='order-popup__list'>
            {purchasable.map(item => (
              <View key={item.id} className='order-popup__item'>
                <View className='order-popup__item-info'>
                  <Image className='order-popup__item-image' src={item.image} mode='aspectFill' lazyLoad />
                  <View className='order-popup__item-title'>
                    <Text className='order-popup__item-name'>{item.name}</Text>
                    <Text className='order-popup__item-spec'>{formatSpec(item.spec, item.unit)}</Text>
                  </View>
                </View>
                <View className='order-popup__item-right'>
                  <Text className='order-popup__item-qty'>×{displayQty(item)}</Text>
                  <Text className='order-popup__item-amount'>￥{item.amount ?? '0.00'}</Text>
                </View>
              </View>
            ))}
          </ScrollView>
          <View className='order-popup__remark'>
            <Text className='order-popup__remark-label'>订单备注</Text>
            <Textarea
              className='order-popup__remark-input'
              value={remark}
              placeholder='选填，最多 255 字'
              maxlength={255}
              onInput={e => setRemark(e.detail.value)}
            />
          </View>
          <View className='order-popup__footer'>
            <Text className='order-popup__total'>合计 ￥{totalAmount}</Text>
            <Button
              type='danger'
              className='order-popup__submit'
              loading={submitting}
              onClick={handleSubmitOrder}
            >
              提交订单
            </Button>
          </View>
        </View>
      </Popup>
    </View>
  )
}