import Image from 'next/image'
import { BillOutput, InOrOut, BizType } from '@/services/wallet/types'
import numeral from 'numeral'
import dayjs from 'dayjs'
import { formatFromCents } from '@/utils/number'
import { GiftOutput } from '@/services/im'

// 交易记录项组件
interface TransactionItemProps {
  transaction: BillOutput
  giftList: GiftOutput[]
}

const DiamondIcon = () => (
  <div className="relative size-4">
    <Image src="/icons/diamond.svg" alt="Diamond" width={16} height={16} className="size-full" />
  </div>
)

// 业务类型映射到中文显示名称
const getBizTypeDisplayName = (bizType?: BizType): string => {
  const bizTypeMap: Record<BizType, string> = {
    [BizType.Charge]: 'Charge',
    [BizType.Gift]: 'Gift',
    [BizType.Withdraw]: 'Withdraw',
    [BizType.ChatAssistant]: 'AI Chat',
    [BizType.CreateAIImage]: 'Create Image',
    [BizType.ImageUnlock]: 'Image Unlock',
    [BizType.VoiceCall]: 'Voice Call',
    [BizType.SendVoice]: 'Send Voice',
    [BizType.TextModel]: 'Text Model',
    [BizType.HeartbeatPurchase]: 'Heartbeat Purchase',
    [BizType.Game]: 'Game',
    [BizType.Sub]: 'Subscribe',
    [BizType.SubscribeMember]: 'Subscribe Member',
    [BizType.Refund]: 'Refund',
    [BizType.NewUserGift]: 'New User Gift',
    [BizType.VipBuffGift]: 'VIP Gift',
    [BizType.UnlockAdmirers]: 'Unlock Admirers',
    [BizType.FrozenBalance]: 'Frozen Balance',
    [BizType.UnfrozenBalance]: 'Unfrozen Balance',
  }

  return bizType ? bizTypeMap[bizType] || bizType : 'Unknown Transaction'
}

// 格式化日期时间
const formatDateTime = (dateTime?: string): string => {
  if (!dateTime) return ''

  return dayjs(dateTime).format('MMM DD, YYYY HH:mm:ss A')
}

export const TransactionItem = ({ transaction, giftList }: TransactionItemProps) => {
  const { amount, inOrOut, bizType, time, nickname, message, item, extend } = transaction

  const isIncome = inOrOut === InOrOut.In
  const amountColor = isIncome ? 'text-positive-normal' : 'text-important-variant-normal'
  const amountPrefix = isIncome ? '+' : '-'

  // 获取显示标题
  const getDisplayTitle = (): string => {
    if (bizType === BizType.Gift) {
      const giftId = extend ? JSON.parse(extend).giftId : undefined
      if (giftId) {
        const gift = giftList.find((gift) => gift.id === giftId)
        if (gift) {
          return gift.name
        }
      }
    }
    if (message) return message
    if (item) return item
    if (nickname) return `${getBizTypeDisplayName(bizType)} - ${nickname}`
    return getBizTypeDisplayName(bizType)
  }

  return (
    <div className="flex w-full items-center justify-between">
      <div className="flex flex-1 items-center gap-3">
        <div className="flex flex-1 flex-col items-start">
          <div className="txt-title-s">{getDisplayTitle()}</div>
          <div className="txt-label-s text-txt-secondary-normal">{formatDateTime(time)}</div>
        </div>
      </div>
      <div className="flex items-center gap-2">
        <DiamondIcon />
        <div className={`txt-numMonotype-l whitespace-nowrap ${amountColor}`}>
          {amountPrefix}
          {formatFromCents(amount || 0)}
        </div>
      </div>
    </div>
  )
}
