'use client'

import Image from 'next/image'
import { useMemo } from 'react'
import { AiChatRankOutput, AiHeartbeatRankOutput, AiGiftRankOutput } from '@/services/home/types'
import { RankType } from '@/types/global'
import { formatNumberToKMB } from '@/lib/utils'
import Link from 'next/link'
import { usePrefetchRoutes } from '@/hooks/useGlobalPrefetchRoutes'

interface RankingListProps {
  rankData: (AiChatRankOutput | AiHeartbeatRankOutput | AiGiftRankOutput)[]
  rankType: RankType
  startFromRank?: number // 从第几名开始显示，默认为4
}

const RankingList: React.FC<RankingListProps> = ({ rankData, rankType, startFromRank = 4 }) => {
  const filteredData = useMemo(
    () => rankData.filter((item) => item.rankNo && item.rankNo >= startFromRank),
    [rankData, startFromRank]
  )
  const chatRoutes = useMemo(
    () => filteredData.map((item) => (item?.aiId ? `/chat/${item.aiId}` : null)),
    [filteredData]
  )
  usePrefetchRoutes(chatRoutes, { limit: 20 })

  // 根据排行榜类型获取格式化后的显示值
  const getDisplayValue = (item: AiChatRankOutput | AiHeartbeatRankOutput | AiGiftRankOutput) => {
    switch (rankType) {
      case RankType.CHAT:
        return formatNumberToKMB((item as AiChatRankOutput).chatNum || 0)
      case RankType.CRUSH:
        return `${(item as AiHeartbeatRankOutput).heartbeatValTotal || 0}℃`
      case RankType.GIFTS:
        return formatNumberToKMB(Math.floor(((item as AiGiftRankOutput).giftCoinNum || 0) / 100))
      default:
        return '0'
    }
  }

  // 根据排行榜类型获取对应的图标组件
  const getRankIcon = () => {
    switch (rankType) {
      case RankType.CHAT:
        return <i className="iconfont icon-Chat !text-[24px]" />
      case RankType.CRUSH:
        return <Image src="/icons/icon-crush.svg" alt="" width={24} height={24} />
      case RankType.GIFTS:
        return <Image src="/icons/diamond.svg" alt="" width={24} height={24} />
      default:
        return <i className="iconfont icon-Chat !text-[24px]" />
    }
  }

  const getLikedCount = (item: AiChatRankOutput | AiHeartbeatRankOutput | AiGiftRankOutput) => {
    if ('likedNum' in item && typeof item.likedNum === 'number') {
      return item.likedNum
    }
    return 0
  }

  if (filteredData.length === 0) {
    return null
  }

  return (
    <div className="mx-auto mt-6 flex max-w-[752px] flex-col gap-2 px-4 pb-4">
      {filteredData.map((item) => {
        const displayValue = getDisplayValue(item)

        return (
          <Link href={`/chat/${item.aiId}`} key={item.aiId} prefetch={false}>
            <div
              key={item.aiId}
              className="box-border flex w-full items-center justify-center gap-4 p-2"
            >
              {/* 排名编号 */}
              <div className="txt-numDisplay-s w-6 shrink-0 text-center">
                {String(item.rankNo).padStart(2, '0')}
              </div>

              {/* 头像 */}
              <div className="relative h-16 w-16 shrink-0">
                <div className="absolute top-1/2 left-1/2 h-16 w-16 -translate-x-1/2 -translate-y-1/2">
                  <Image
                    src={item.headImg || ''}
                    alt={item.nickname || 'Avatar'}
                    width={64}
                    height={64}
                    className="h-full w-full rounded-full object-cover"
                  />
                </div>
              </div>

              {/* 用户信息区域 */}
              <div className="flex min-w-0 flex-1 flex-col gap-2">
                {/* 用户名 */}
                <div className="flex w-full items-start gap-2">
                  <div className="txt-title-m truncate">{item.nickname}</div>
                </div>

                {/* 喜欢数 */}
                <div className="flex w-full items-center gap-2">
                  <div className="text-txt-secondary-normal flex items-center gap-1">
                    <i className="iconfont icon-Like-fill !text-[12px]" />
                    <div className="txt-numMonotype-s">
                      {formatNumberToKMB(getLikedCount(item) || 0)}
                    </div>
                  </div>
                </div>
              </div>

              {/* 排行榜数值 */}
              <div className="flex items-center">
                <div className="flex w-16 min-w-6 flex-col items-center justify-center gap-1 rounded-[4px] px-1 py-0.5 backdrop-blur-sm">
                  {/* 图标 */}
                  <div className="flex h-6 w-6 items-center justify-center">{getRankIcon()}</div>

                  {/* 数值 */}
                  <div className="txt-numMonotype-s text-center">{displayValue}</div>
                </div>
              </div>
            </div>
          </Link>
        )
      })}
    </div>
  )
}

export default RankingList
