import { useCallback, useRef, useState } from 'react'
import Taro, { useDidShow, useReachBottom, useRouter } from '@tarojs/taro'
import { View, Text, ScrollView } from '@tarojs/components'
import { Empty, Popup } from '@antmjs/vantui'
import useAuthStore from '@/stores/auth/useAuthStore'
import { cancelOrderApi, getOrderDetailApi, getOrderListApi } from '@/services/order'
import { ORDER_STATUS_FILTERS, ORDER_STATUS_TEXT } from '@/types/order'
import type { OrderDetail, OrderListItem, OrderStatus } from '@/types/order'
import './index.less'

const PAGE_SIZE = 10

/**
 * 订单列表页
 * 入口：/pages/order-list/index?status=0|1|2|3|4|9|all
 * 状态文案一律使用接口返回的 status_name（详情接口无该字段时沿用列表行）
 */
export default function OrderListPage() {
  const router = useRouter()
  const token = useAuthStore(s => s.token)

  /** 当前状态筛选（undefined = 全部） */
  const [status, setStatus] = useState<OrderStatus | undefined>(undefined)
  const [orders, setOrders] = useState<OrderListItem[]>([])
  const [page, setPage] = useState(1)
  const [loading, setLoading] = useState(false)
  const [finished, setFinished] = useState(false)
  const loadingRef = useRef(false)

  /** 订单详情弹层（statusName 沿用列表行，详情接口不返回 status_name） */
  const [showDetail, setShowDetail] = useState(false)
  const [orderDetail, setOrderDetail] = useState<OrderDetail | null>(null)
  const [detailStatusName, setDetailStatusName] = useState('')

  const loggedIn = !!token

  /** 解析路由参数中的 status（'all' / 数字 / 缺省 → undefined） */
  const parseStatus = useCallback((raw?: string): OrderStatus | undefined => {
    if (!raw || raw === 'all' || raw === '') return undefined
    const num = Number(raw)
    return Number.isNaN(num) ? undefined : (num as OrderStatus)
  }, [])

  /** 拉取订单列表 */
  const loadOrders = useCallback(
    async (pageNum: number, reset: boolean, statusParam?: OrderStatus) => {
      if (!loggedIn || loadingRef.current) return
      loadingRef.current = true
      setLoading(true)
      try {
        const res = await getOrderListApi({
          status: statusParam,
          page: pageNum,
          pageSize: PAGE_SIZE,
        })
        const { data, total } = res.data
        setOrders(prev => (reset ? data : [...prev, ...data]))
        setPage(pageNum)
        setFinished(pageNum * PAGE_SIZE >= total)
      } catch {
        // 错误已由 request 层 toast
      } finally {
        loadingRef.current = false
        setLoading(false)
      }
    },
    [loggedIn],
  )

  useDidShow(() => {
    const statusParam = parseStatus(router.params.status)
    setStatus(statusParam)
    loadOrders(1, true, statusParam)
  })

  useReachBottom(() => {
    if (!finished && !loadingRef.current && loggedIn) {
      loadOrders(page + 1, false, status)
    }
  })

  /** 切换状态筛选 */
  const handleStatusTap = useCallback(
    (value?: OrderStatus) => {
      setStatus(value)
      setFinished(false)
      loadOrders(1, true, value)
    },
    [loadOrders],
  )

  /** 查看订单详情 */
  const handleOrderTap = useCallback(async (order: OrderListItem) => {
    try {
      const res = await getOrderDetailApi(order.id)
      setOrderDetail(res.data)
      setDetailStatusName(order.status_name)
      setShowDetail(true)
    } catch {
      // 错误已由 request 层 toast
    }
  }, [])

  /** 取消订单（仅待接单可取消，以 can_cancel 为准） */
  const handleCancelOrder = useCallback(
    (order: OrderListItem) => {
      Taro.showModal({
        title: '取消订单',
        content: `确定取消订单 ${order.order_no} 吗？`,
        confirmColor: '#ee0a24',
        success: res => {
          if (res.confirm) {
            cancelOrderApi(order.id)
              .then(() => {
                Taro.showToast({ title: '订单已取消', icon: 'success' })
                loadOrders(1, true, status)
              })
              .catch(() => {})
          }
        },
      })
    },
    [loadOrders, status],
  )

  /** 跳转关联账单详情 */
  const handleBillTap = useCallback((billId: number) => {
    Taro.navigateTo({ url: `/pages/bill-detail/index?id=${billId}` })
  }, [])

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

  return (
    <View className='order-list-page'>
      {/* ========== 状态筛选 ========== */}
      <ScrollView scrollX className='status-scroll'>
        {ORDER_STATUS_FILTERS.map(item => (
          <View
            key={item.label}
            className={`status-chip ${status === item.value ? 'active' : ''}`}
            onClick={() => handleStatusTap(item.value)}
          >
            <Text>{item.label}</Text>
          </View>
        ))}
      </ScrollView>

      {/* ========== 订单列表 ========== */}
      {!loggedIn ? (
        <Empty description='登录后查看订单' className='order-empty'>
          <View className='order-empty__btn' onClick={goLogin}>去登录</View>
        </Empty>
      ) : orders.length === 0 ? (
        loading ? (
          <View className='order-loading'><Text>加载中...</Text></View>
        ) : (
          <Empty description='暂无订单' className='order-empty' />
        )
      ) : (
        orders.map(order => (
          <View key={order.id} className='order-item' onClick={() => handleOrderTap(order)}>
            <View className='order-item__header'>
              <Text className='order-item__no'>{order.order_no}</Text>
              <Text className={`order-item__status order-item__status--${order.status}`}>
                {order.status_name}
              </Text>
            </View>
            {/* 商品预览（仅前 3 条，完整明细见详情） */}
            <Text className='order-item__preview'>
              {order.items.map(i => `${i.product_name}×${i.quantity}`).join('、')}
              {order.item_count > 3 ? ` 等${order.item_count}种` : ''}
            </Text>
            <View className='order-item__body'>
              <Text className='order-item__date'>订货日期 {order.order_date}</Text>
              <View className='order-item__amounts'>
                <Text className='order-item__qty'>共 {order.total_quantity} 件</Text>
                <Text className='order-item__amount'>￥{order.total_amount}</Text>
              </View>
            </View>
            {order.remark && <Text className='order-item__remark'>备注：{order.remark}</Text>}
            {(order.can_cancel || order.bill_id > 0) && (
              <View className='order-item__footer'>
                {order.bill_id > 0 && (
                  <View
                    className='order-item__bill'
                    onClick={e => {
                      e.stopPropagation()
                      handleBillTap(order.bill_id)
                    }}
                  >
                    查看账单
                  </View>
                )}
                {order.can_cancel && (
                  <View
                    className='order-item__cancel'
                    onClick={e => {
                      e.stopPropagation()
                      handleCancelOrder(order)
                    }}
                  >
                    取消订单
                  </View>
                )}
              </View>
            )}
          </View>
        ))
      )}

      {loggedIn && finished && orders.length > 0 && (
        <View className='order-loading'><Text>没有更多了</Text></View>
      )}

      {/* ========== 订单详情弹层 ========== */}
      <Popup
        show={showDetail}
        position='bottom'
        round
        closeable
        closeOnClickOverlay
        safeAreaInsetBottom
        onClose={() => setShowDetail(false)}
      >
        {orderDetail && (
          <View className='detail-popup'>
            <Text className='detail-popup__title'>{orderDetail.order_no}</Text>
            <View className='detail-popup__meta'>
              <Text>{orderDetail.order_date} 下单 {orderDetail.created_at}</Text>
              <Text className='detail-popup__status'>
                {detailStatusName || ORDER_STATUS_TEXT[orderDetail.status] || ''}
              </Text>
            </View>
            <ScrollView scrollY className='detail-popup__list'>
              {(orderDetail.items ?? []).map(item => (
                <View key={item.id} className='detail-popup__item'>
                  <View className='detail-popup__item-info'>
                    <Text className='detail-popup__item-name'>{item.product_name}</Text>
                    <Text className='detail-popup__item-spec'>
                      {item.product_spec ? `${item.product_spec} ` : ''}￥{item.price}/{item.unit} × {item.quantity}
                    </Text>
                  </View>
                  <Text className='detail-popup__item-amount'>￥{item.amount}</Text>
                </View>
              ))}
            </ScrollView>
            {orderDetail.remark && (
              <Text className='detail-popup__remark'>备注：{orderDetail.remark}</Text>
            )}
            <View className='detail-popup__footer'>
              <Text className='detail-popup__total'>合计 ￥{orderDetail.total_amount}</Text>
            </View>
          </View>
        )}
      </Popup>
    </View>
  )
}