'use client'

import { IconButton } from '@/components/ui/button'
import { useRouter } from 'next/navigation'
import { TransactionItem } from './components/TransactionItem'
import { TransactionSkeleton, TransactionEmptyState } from './components/TransactionSkeleton'
import { InfiniteScrollList } from '@/components/ui/infinite-scroll-list'
import { useTransactionListWithInfiniteScroll } from '@/hooks/useWallet'
import { BillOutput } from '@/services/wallet/types'
import { useState } from 'react'
import { useGetGiftList } from '@/hooks/useIm'

const TransactionsPage = () => {
  const router = useRouter()
  const { data } = useGetGiftList()
  const giftList = data?.datas || []

  const handleBack = () => {
    router.back()
  }

  // 使用交易记录无限滚动 hook
  const {
    transactions,
    summary,
    totalCount,
    isLoading,
    isError,
    isFetchingNextPage,
    hasNextPage,
    fetchNextPage,
    refetch,
    error,
  } = useTransactionListWithInfiniteScroll({
    pageSize: 20,
  })

  return (
    <div className="relative flex items-start justify-center gap-1 px-4 pt-12 pb-20">
      <div className="flex w-full max-w-[752px] flex-col items-start justify-start gap-6">
        {/* 标题栏 */}
        <div className="flex w-full items-center justify-start gap-2">
          <div className="flex flex-1 items-center gap-2">
            <IconButton variant="ghost" size="small" onClick={handleBack}>
              <i className="iconfont icon-arrow-left" />
            </IconButton>
            <div className="txt-title-l">Transactions</div>
          </div>
        </div>

        {/* 交易记录列表 */}
        <div className="bg-surface-base-normal w-full overflow-hidden rounded-lg p-6">
          <InfiniteScrollList<BillOutput>
            items={transactions}
            renderItem={(transaction) => (
              <TransactionItem transaction={transaction} giftList={giftList} />
            )}
            getItemKey={(transaction) => transaction.id?.toString() || 'unknown'}
            hasNextPage={hasNextPage}
            isLoading={isLoading || isFetchingNextPage}
            fetchNextPage={fetchNextPage}
            columns={1}
            gap={6}
            className="!grid-cols-1"
            LoadingSkeleton={() => <TransactionSkeleton />}
            EmptyComponent={TransactionEmptyState}
            hasError={isError}
            onRetry={refetch}
            threshold={200}
          />
        </div>
      </div>
    </div>
  )
}

export default TransactionsPage
