import { useCallback, useRef, useState } from 'react'
import Taro, { useDidShow, useReachBottom } from '@tarojs/taro'
import { View, Text, ScrollView } from '@tarojs/components'
import { Empty, Icon, Popup } from '@antmjs/vantui'
import useAuthStore from '@/stores/auth/useAuthStore'
import { getBillExportUrl, getBillListApi } from '@/services/bill'
import { getCategoriesApi } from '@/services/product'
import { downloadExportFile } from '@/utils/download'
import type { Bill, BillSummary } from '@/services/bill'
import './index.less'

const PAGE_SIZE = 10

/** 单次导出上限（后端限制 1~100 张） */
const EXPORT_MAX = 100

/** 状态筛选（接口 status 为原始支付状态：0 未支付含审核中 / 1 已支付） */
const STATUS_FILTERS: Array<{ value: 0 | 1 | undefined; label: string }> = [
  { value: undefined, label: '全部' },
  { value: 0, label: '未支付' },
  { value: 1, label: '已支付' },
]

/** 导出分类选项（id=0 全部分类） */
interface CategoryOption {
  id: number
  name: string
}

/**
 * 账单列表页
 * 采购单完成后由后台按门店生成（只读）；底部汇总栏为门店口径待支付汇总（含审核中，不受筛选影响）
 * 支持多选账单合并导出 Excel（可按一级分类过滤商品明细）
 */
export default function BillListPage() {
  const token = useAuthStore(s => s.token)

  const [status, setStatus] = useState<0 | 1 | undefined>(undefined)
  const [bills, setBills] = useState<Bill[]>([])
  const [summary, setSummary] = useState<BillSummary | null>(null)
  const [page, setPage] = useState(1)
  const [loading, setLoading] = useState(false)
  const [finished, setFinished] = useState(false)
  const loadingRef = useRef(false)

  /** 导出：多选模式 + 已选账单 + 分类弹层 */
  const [selectMode, setSelectMode] = useState(false)
  const [selectedIds, setSelectedIds] = useState<number[]>([])
  const [showCategory, setShowCategory] = useState(false)
  const [categories, setCategories] = useState<CategoryOption[]>([])

  const loggedIn = !!token

  /** 拉取账单列表（summary 每次随响应刷新） */
  const loadList = useCallback(
    async (pageNum: number, reset: boolean, statusParam?: 0 | 1) => {
      if (!loggedIn || loadingRef.current) return
      loadingRef.current = true
      setLoading(true)
      try {
        const res = await getBillListApi({ status: statusParam, page: pageNum, pageSize: PAGE_SIZE })
        const { data, total, summary: sum } = res.data
        setBills(prev => (reset ? data : [...prev, ...data]))
        setSummary(sum)
        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?: 0 | 1) => {
      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/bill-detail/index?id=${id}` })
  }, [])

  /** 合并付款 → 发起付款页 */
  const goPay = useCallback(() => {
    Taro.navigateTo({ url: '/pages/payment/index' })
  }, [])

  /** 进入/退出多选导出模式 */
  const toggleSelectMode = useCallback(() => {
    setSelectMode(prev => !prev)
    setSelectedIds([])
  }, [])

  /** 账单点击：多选模式切换勾选，否则进详情 */
  const handleItemTap = useCallback(
    (bill: Bill) => {
      if (!selectMode) {
        goDetail(bill.id)
        return
      }
      setSelectedIds(prev => {
        if (prev.includes(bill.id)) return prev.filter(i => i !== bill.id)
        if (prev.length >= EXPORT_MAX) {
          Taro.showToast({ title: `最多导出 ${EXPORT_MAX} 张`, icon: 'none' })
          return prev
        }
        return [...prev, bill.id]
      })
    },
    [selectMode, goDetail],
  )

  /** 全选当前已加载账单（受导出上限约束） */
  const handleSelectAll = useCallback(() => {
    setSelectedIds(prev => {
      if (prev.length === bills.length) return []
      if (bills.length > EXPORT_MAX) {
        Taro.showToast({ title: `最多导出 ${EXPORT_MAX} 张，已选前 ${EXPORT_MAX} 张`, icon: 'none' })
        return bills.slice(0, EXPORT_MAX).map(b => b.id)
      }
      return bills.map(b => b.id)
    })
  }, [bills])

  /** 打开分类选择弹层（首次加载分类树根节点） */
  const handleExportTap = useCallback(async () => {
    if (selectedIds.length === 0) {
      Taro.showToast({ title: '请先勾选要导出的账单', icon: 'none' })
      return
    }
    if (categories.length === 0) {
      try {
        const res = await getCategoriesApi()
        setCategories([
          { id: 0, name: '全部分类' },
          ...res.data.map(c => ({ id: c.id, name: c.name })),
        ])
      } catch {
        return // 错误已由 request 层 toast
      }
    }
    setShowCategory(true)
  }, [selectedIds, categories])

  /** 按所选分类导出合并 Excel */
  const handleExport = useCallback(
    async (categoryId: number) => {
      const isH5 = process.env.TARO_ENV === 'h5'
      Taro.showLoading({ title: '导出中...', mask: true })
      try {
        await downloadExportFile(getBillExportUrl(selectedIds, categoryId), '门店账单.xlsx')
        setShowCategory(false)
        toggleSelectMode()
        if (isH5) {
          Taro.showToast({ title: '导出成功', icon: 'success' })
        }
      } catch (e: any) {
        Taro.showToast({ title: e?.message || '导出失败，请稍后重试', icon: 'none' })
      } finally {
        Taro.hideLoading()
      }
    },
    [selectedIds, toggleSelectMode],
  )

  /** 底部待支付汇总栏是否可见（多选导出时让位给导出栏） */
  const showPayBar = loggedIn && !selectMode && !!summary && summary.unpaid_count > 0

  return (
    <View className={`bill-page ${selectMode ? 'bill-page--select' : ''} ${showPayBar ? 'bill-page--pay' : ''}`}>
      {/* ========== 状态筛选 + 导出入口 ========== */}
      <View className='bill-toolbar'>
        <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 && bills.length > 0 && (
          <View className={`bill-toolbar__export ${selectMode ? 'active' : ''}`} onClick={toggleSelectMode}>
            <Text>{selectMode ? '取消' : '导出'}</Text>
          </View>
        )}
      </View>

      {/* ========== 账单列表 ========== */}
      {!loggedIn ? (
        <Empty description='登录后查看账单' className='bill-empty'>
          <View className='bill-empty__btn' onClick={goLogin}>去登录</View>
        </Empty>
      ) : bills.length === 0 ? (
        loading ? (
          <View className='bill-loading'><Text>加载中...</Text></View>
        ) : (
          <Empty description='暂无账单' className='bill-empty' />
        )
      ) : (
        bills.map(bill => {
          const checked = selectMode && selectedIds.includes(bill.id)
          return (
            <View
              key={bill.id}
              className={`bill-item ${selectMode ? 'bill-item--select' : ''}`}
              onClick={() => handleItemTap(bill)}
            >
              {selectMode && (
                <View className={`bill-check ${checked ? 'on' : ''}`}>
                  {checked && <Icon name='success' size={14} color='#fff' />}
                </View>
              )}
              <View className='bill-item__content'>
                <View className='bill-item__header'>
                  <Text className='bill-item__no'>{bill.bill_no}</Text>
                  <Text className={`bill-item__status bill-item__status--${bill.pay_state}`}>
                    {bill.pay_state_name}
                  </Text>
                </View>
                <View className='bill-item__body'>
                  <View className='bill-item__meta'>
                    <Text className='bill-item__date'>账单日期 {bill.bill_date}</Text>
                    {bill.purchase && (
                      <Text className='bill-item__purchase'>采购单 {bill.purchase.purchase_no}</Text>
                    )}
                  </View>
                  <Text className='bill-item__amount'>￥{bill.total_amount}</Text>
                </View>
                <View className='bill-item__footer'>
                  <Text className='bill-item__settle'>应结算 {bill.settlement_date}</Text>
                  {bill.pay_state === 2 && bill.paid_at && (
                    <Text className='bill-item__paid'>已于 {bill.paid_at} 支付</Text>
                  )}
                </View>
              </View>
            </View>
          )
        })
      )}

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

      {/* ========== 底部待支付汇总栏（门店口径，含审核中） ========== */}
      {showPayBar && summary && (
        <View className='bill-paybar'>
          <View className='bill-paybar__info'>
            <Text className='bill-paybar__label'>待支付账单（含审核中）{summary.unpaid_count} 笔</Text>
            <Text className='bill-paybar__amount'>￥{summary.unpaid_amount}</Text>
          </View>
          <View className='bill-paybar__btn' onClick={goPay}>去付款</View>
        </View>
      )}

      {/* ========== 导出操作栏 ========== */}
      {selectMode && (
        <View className='export-bar'>
          <Text className='export-bar__count'>已选 {selectedIds.length} 张</Text>
          <View className='export-bar__all' onClick={handleSelectAll}>
            {selectedIds.length === bills.length && bills.length > 0 ? '取消全选' : '全选'}
          </View>
          <View
            className={`export-bar__btn ${selectedIds.length === 0 ? 'disabled' : ''}`}
            onClick={handleExportTap}
          >
            导出 Excel
          </View>
        </View>
      )}

      {/* ========== 分类选择弹层 ========== */}
      <Popup
        show={showCategory}
        position='bottom'
        round
        closeable
        closeOnClickOverlay
        safeAreaInsetBottom
        onClose={() => setShowCategory(false)}
      >
        <View className='category-popup'>
          <Text className='category-popup__title'>选择商品分类</Text>
          <Text className='category-popup__desc'>
            仅过滤商品明细行，配送费与附加金额仍全额汇总
          </Text>
          <ScrollView scrollY className='category-popup__list'>
            {categories.map(c => (
              <View key={c.id} className='category-popup__item' onClick={() => handleExport(c.id)}>
                <Text className='category-popup__name'>{c.name}</Text>
                <Icon name='arrow' size={16} color='#c8c9cc' />
              </View>
            ))}
          </ScrollView>
        </View>
      </Popup>
    </View>
  )
}