import { useCallback, useRef, useState } from 'react'
import Taro, { useDidShow, useReachBottom } from '@tarojs/taro'
import { View, Text, ScrollView } from '@tarojs/components'
import { Empty } from '@antmjs/vantui'
import useAuthStore from '@/stores/auth/useAuthStore'
import { getPaymentListApi, getPayStatusName, PAY_METHOD_NAMES } from '@/services/payment'
import type { Payment, PayStatus } from '@/services/payment'
import './index.less'

const PAGE_SIZE = 10

/** 状态筛选（undefined = 全部） */
const STATUS_FILTERS: Array<{ value: PayStatus | undefined; label: string }> = [
  { value: undefined, label: '全部' },
  { value: 0, label: '待审核' },
  { value: 1, label: '已通过' },
  { value: 2, label: '已拒绝' },
]

/**
 * 支付记录列表页
 * 门店口径支付记录（合并付款申请），支持状态筛选；点击进支付详情
 */
export default function PaymentRecordsPage() {
  const token = useAuthStore(s => s.token)

  const [status, setStatus] = useState<PayStatus | undefined>(undefined)
  const [records, setRecords] = useState<Payment[]>([])
  const [page, setPage] = useState(1)
  const [loading, setLoading] = useState(false)
  const [finished, setFinished] = useState(false)
  const loadingRef = useRef(false)

  const loggedIn = !!token

  /** 拉取支付记录 */
  const loadList = useCallback(
    async (pageNum: number, reset: boolean, statusParam?: PayStatus) => {
      if (!loggedIn || loadingRef.current) return
      loadingRef.current = true
      setLoading(true)
      try {
        const res = await getPaymentListApi({ status: statusParam, page: pageNum, pageSize: PAGE_SIZE })
        const { data, total } = res.data
        setRecords(prev => (reset ? data : [...prev, ...data]))
        setPage(pageNum)
        setFinished(pageNum * PAGE_SIZE >= total)
      } catch {
        // 错误已由 request 层 toast
      } finally {
        loadingRef.current = false
        setLoading(false)
      }
    },
    [loggedIn],
  )

  useDidShow(() => {
    loadList(1, true, status)
  })

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

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

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

  const goDetail = useCallback((id: number) => {
    Taro.navigateTo({ url: `/pages/payment-detail/index?id=${id}` })
  }, [])

  return (
    <View className='payment-page'>
      {/* ========== 状态筛选 ========== */}
      <ScrollView scrollX className='status-scroll'>
        {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='payment-empty'>
          <View className='payment-empty__btn' onClick={goLogin}>去登录</View>
        </Empty>
      ) : records.length === 0 ? (
        loading ? (
          <View className='payment-loading'><Text>加载中...</Text></View>
        ) : (
          <Empty description='暂无支付记录' className='payment-empty' />
        )
      ) : (
        records.map(record => (
          <View key={record.id} className='payment-item' onClick={() => goDetail(record.id)}>
            <View className='payment-item__header'>
              <Text className='payment-item__no'>{record.payment_no}</Text>
              <Text className={`payment-item__status payment-item__status--${record.status}`}>
                {getPayStatusName(record)}
              </Text>
            </View>
            <View className='payment-item__body'>
              <View className='payment-item__meta'>
                <Text className='payment-item__method'>{PAY_METHOD_NAMES[record.pay_method]}</Text>
                <Text className='payment-item__date'>{record.created_at}</Text>
              </View>
              <View className='payment-item__side'>
                <Text className='payment-item__amount'>￥{record.amount}</Text>
                <Text className='payment-item__bills'>合并 {record.bills_count ?? 0} 张账单</Text>
              </View>
            </View>
            {record.status === 2 && record.pay_type !== 2 && !!record.audit_remark && (
              <Text className='payment-item__reject'>拒绝原因：{record.audit_remark}</Text>
            )}
          </View>
        ))
      )}

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