import { useMemo, useState } from 'react'
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { Button, ConfigProvider, DatePicker, Empty, Input, Popup } from '@nutui/nutui-react-taro'
import { Search } from '@nutui/icons-react-taro'
import dayjs from 'dayjs'

type PayStatus = '全部回款' | '部分回款' | '未回款'
type AmountSort = '默认' | '从高到低' | '从低到高'

type OrderItem = {
  id: string
  orderNo: string
  companyName: string
  unifiedCode: string
  projectName: string
  follower: string
  payStatus: PayStatus
  date: string // YYYY-MM-DD
  principal: number
  interest: number
}

const formatYmd = (d?: Date | null) => {
  if (!d) return ''
  return dayjs(d).format('YYYY-MM-DD')
}

const getStatusStyle = (s: PayStatus) => {
  if (s === '全部回款') return 'bg-green-500'
  if (s === '部分回款') return 'bg-orange-500'
  return 'bg-red-500'
}

const makeMockOrders = (page: number): OrderItem[] => {
  const companies = [
    { name: '广西万宇工程建设有限公司', code: '91450100MA00000001' },
    { name: '广西远恒建筑有限公司', code: '91450100MA00000002' },
    { name: '南宁宏达工程有限公司', code: '91450100MA00000003' },
    { name: '桂林鑫盛建设有限公司', code: '91450100MA00000004' }
  ]
  const followers = ['罗天东', '张三', '李四', '王五']
  const suffix = ['一期', '二期', '改扩建', '配套', '市政', '装饰', '机电']

  // page=1：给出 16 条示例，统计更直观（项目=订单维度，而非公司维度）
  const size = page === 1 ? 16 : 6
  const baseNo = 9099009999 + (page - 1) * 100

  const list: OrderItem[] = []
  for (let i = 0; i < size; i++) {
    const c = companies[(page + i) % companies.length]
    const follower = followers[(i + page) % followers.length]
    const payStatus: PayStatus =
      page === 1 ? '全部回款' : (['全部回款', '部分回款', '未回款'][(i + page) % 3] as PayStatus)

    const orderNo = String(baseNo + i)
    const date = dayjs('2025-10-10').subtract((page - 1) * 7 + (i % 6), 'day').format('YYYY-MM-DD')

    // page=1：让本金/利息合计更规整（本金 2000，利息 200）
    const principal = page === 1 ? (i < 8 ? 100 : 150) : 200 + ((i + page) % 5) * 50
    const interest = page === 1 ? (i < 8 ? 10 : 15) : 20 + ((i + page) % 4) * 5

    const projectName = `${c.name}${suffix[(i + page) % suffix.length]}项目`

    list.push({
      id: `${page}-${i}-${orderNo}`,
      orderNo,
      companyName: c.name,
      unifiedCode: c.code,
      projectName,
      follower,
      payStatus,
      date,
      principal,
      interest
    })
  }
  return list
}

export default function CreditOrderPage() {

  const [rawList, setRawList] = useState<OrderItem[]>(() => makeMockOrders(1))
  const [mockPage, setMockPage] = useState(1)

  const [searchValue, setSearchValue] = useState('')
  const [amountSort, setAmountSort] = useState<AmountSort>('默认')
  const [payFilter, setPayFilter] = useState<PayStatus>('全部回款')

  const [datePopupVisible, setDatePopupVisible] = useState(false)
  const [datePickerVisible, setDatePickerVisible] = useState(false)
  const [picking, setPicking] = useState<'start' | 'end'>('start')
  const [startDate, setStartDate] = useState<Date | null>(null)
  const [endDate, setEndDate] = useState<Date | null>(null)

  const filteredList = useMemo(() => {
    let list = rawList.slice()

    const q = searchValue.trim()
    if (q) {
      const qq = q.toLowerCase()
      list = list.filter(o => {
        return (
          String(o.companyName || '').toLowerCase().includes(qq) ||
          String(o.unifiedCode || '').toLowerCase().includes(qq) ||
          String(o.orderNo || '').toLowerCase().includes(qq)
        )
      })
    }

    if (payFilter) {
      list = list.filter(o => o.payStatus === payFilter)
    }

    if (startDate || endDate) {
      const start = startDate ? dayjs(startDate).startOf('day') : null
      const end = endDate ? dayjs(endDate).endOf('day') : null
      list = list.filter(o => {
        const t = dayjs(o.date, 'YYYY-MM-DD')
        if (start && t.isBefore(start)) return false
        if (end && t.isAfter(end)) return false
        return true
      })
    }

    if (amountSort !== '默认') {
      list.sort((a, b) => {
        const av = Number(a.principal || 0)
        const bv = Number(b.principal || 0)
        return amountSort === '从高到低' ? bv - av : av - bv
      })
    }

    return list
  }, [amountSort, endDate, payFilter, rawList, searchValue, startDate])

  const stats = useMemo(() => {
    // 业务说明：一个公司可能对应多个项目（多条订单），因此“订单数量”=项目/订单条数，而不是公司数。
    const total = filteredList.length
    const principal = filteredList.reduce((sum, o) => sum + Number(o.principal || 0), 0)
    const interest = filteredList.reduce((sum, o) => sum + Number(o.interest || 0), 0)
    return { total, principal, interest }
  }, [filteredList])

  const timeText = useMemo(() => {
    const s = formatYmd(startDate)
    const e = formatYmd(endDate)
    if (!s && !e) return '时间筛选'
    if (s && e) return `${s}~${e}`
    return s ? `${s}~` : `~${e}`
  }, [endDate, startDate])

  const pickAmountSort = async () => {
    try {
      const options: AmountSort[] = ['默认', '从高到低', '从低到高']
      const res = await Taro.showActionSheet({ itemList: options })
      const next = options[res.tapIndex]
      if (next) setAmountSort(next)
    } catch (e) {
      const msg = String((e as any)?.errMsg || (e as any)?.message || e || '')
      if (msg.includes('cancel')) return
      console.error('选择金额排序失败:', e)
    }
  }

  const pickPayFilter = async () => {
    try {
      const options: PayStatus[] = ['全部回款', '部分回款', '未回款']
      const res = await Taro.showActionSheet({ itemList: options })
      const next = options[res.tapIndex]
      if (next) setPayFilter(next)
    } catch (e) {
      const msg = String((e as any)?.errMsg || (e as any)?.message || e || '')
      if (msg.includes('cancel')) return
      console.error('选择回款筛选失败:', e)
    }
  }

  const loadMore = () => {
    const nextPage = mockPage + 1
    const incoming = makeMockOrders(nextPage)
    setMockPage(nextPage)
    setRawList(prev => prev.concat(incoming))
    console.log('加载更多:', { nextPage, appended: incoming.length })
    Taro.showToast({ title: '已加载更多', icon: 'none' })
  }

  return (
    <View className="bg-pink-50 min-h-screen">
      <ConfigProvider>
        <View className="max-w-md mx-auto">
          <View className="px-4 pt-2">
            <View className="bg-white rounded-full border border-pink-100 px-3 py-2 flex items-center gap-2">
              <Search size={16} className="text-gray-400" />
              <View className="flex-1">
                <Input
                  value={searchValue}
                  onChange={setSearchValue}
                  placeholder="请输入公司名称、统一代码查询、订单号查询"
                />
              </View>
            </View>

            <View className="mt-3 grid grid-cols-3 gap-2">
              <View
                className="bg-white rounded-xl border border-pink-100 px-2 py-2 text-xs text-gray-700 flex items-center justify-center"
                onClick={pickAmountSort}
              >
                <Text className="mr-1">金额排序</Text>
                <Text className="text-gray-400">{amountSort === '从高到低' ? '↓' : amountSort === '从低到高' ? '↑' : '↕'}</Text>
              </View>
              <View
                className="bg-white rounded-xl border border-pink-100 px-2 py-2 text-xs text-gray-700 flex items-center justify-center"
                onClick={pickPayFilter}
              >
                <Text>{payFilter}</Text>
              </View>
              <View
                className="bg-white rounded-xl border border-pink-100 px-2 py-2 text-xs text-gray-700 flex items-center justify-center"
                onClick={() => setDatePopupVisible(true)}
              >
                <Text className="truncate">{timeText}</Text>
              </View>
            </View>

            <View className="mt-2 text-xs text-gray-400 flex items-center justify-between">
              <Text>总订单量：{stats.total}个</Text>
              <Text>订单本金：{stats.principal}元</Text>
              <Text>利息金额：{stats.interest}元</Text>
            </View>
          </View>

          <View className="px-4 mt-3 pb-6">
            {!filteredList.length ? (
              <View className="bg-white rounded-xl border border-pink-100 py-10">
                <Empty description="暂无订单" />
              </View>
            ) : (
              filteredList.map(o => (
                <View key={o.id} className="bg-white rounded-xl border border-pink-100 p-3 mb-3">
                  <View className="flex items-center justify-between">
                    <Text className="text-xs text-gray-500">订单号：{o.orderNo}</Text>
                    <View className={`px-2 py-1 rounded-full ${getStatusStyle(o.payStatus)}`}>
                      <Text className="text-xs text-white">{o.payStatus}</Text>
                    </View>
                  </View>

                  {/* 项目名称是核心分组/统计维度（一个公司可有多个项目=多条订单），因此需要突出显示 */}
                  <View className="mt-2">
                    <Text className="text-sm font-semibold text-rose-600">{o.projectName}</Text>
                  </View>

                  <View className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-gray-600">
                    <Text>公司：{o.companyName}</Text>
                    <Text>跟进人：{o.follower}</Text>
                    <Text>日期：{o.date}</Text>
                  </View>

                  <View className="mt-2 flex items-center gap-6 text-xs text-gray-700">
                    <Text>
                      <Text className="text-gray-400">本金：</Text>
                      {o.principal}元
                    </Text>
                    <Text>
                      <Text className="text-gray-400">利息：</Text>
                      {o.interest}元
                    </Text>
                  </View>
                </View>
              ))
            )}

            <View className="mt-2 flex justify-center">
              <Button
                fill="none"
                size="small"
                style={{ color: '#bdbdbd' }}
                onClick={loadMore}
              >
                加载更多
              </Button>
            </View>
          </View>
        </View>

        <Popup
          visible={datePopupVisible}
          position="bottom"
          onClose={() => setDatePopupVisible(false)}
          style={{ borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }}
        >
          <View className="px-4 py-4 bg-white">
            <View className="text-base font-semibold text-gray-900">时间筛选</View>
            <View className="mt-3 text-sm text-gray-700">
              <View className="flex items-center justify-between py-2" onClick={() => { setPicking('start'); setDatePickerVisible(true) }}>
                <Text>开始日期</Text>
                <Text className="text-gray-500">{formatYmd(startDate) || '未选择'}</Text>
              </View>
              <View className="flex items-center justify-between py-2" onClick={() => { setPicking('end'); setDatePickerVisible(true) }}>
                <Text>结束日期</Text>
                <Text className="text-gray-500">{formatYmd(endDate) || '未选择'}</Text>
              </View>
            </View>

            <View className="mt-4 flex items-center justify-between gap-3">
              <Button
                fill="outline"
                onClick={() => {
                  setStartDate(null)
                  setEndDate(null)
                }}
              >
                清空
              </Button>
              <Button type="primary" onClick={() => setDatePopupVisible(false)}>
                完成
              </Button>
            </View>
          </View>
        </Popup>

        <DatePicker
          visible={datePickerVisible}
          title={picking === 'start' ? '选择开始日期' : '选择结束日期'}
          type="date"
          value={(picking === 'start' ? startDate : endDate) || new Date()}
          startDate={dayjs('2020-01-01').toDate()}
          endDate={dayjs('2035-12-31').toDate()}
          onClose={() => setDatePickerVisible(false)}
          onCancel={() => setDatePickerVisible(false)}
          onConfirm={(_options, selectedValue) => {
            const [y, m, d] = (selectedValue || []).map(v => Number(v))
            const next = new Date(y, (m || 1) - 1, d || 1, 0, 0, 0)

            if (picking === 'start') {
              setStartDate(next)
              if (endDate && dayjs(endDate).isBefore(next, 'day')) setEndDate(null)
            } else {
              setEndDate(next)
              if (startDate && dayjs(next).isBefore(startDate, 'day')) setStartDate(null)
            }
            setDatePickerVisible(false)
          }}
        />
      </ConfigProvider>
    </View>
  )
}
