'use client'

import Link from 'next/link'
import Image from 'next/image'
import type { RankItem, RankType } from './types'
import { getRankBadgeClass, getLevelIcon, getRichLevelIconStyle, getLinkUrl } from './utils'

interface RankListItemProps {
    item: RankItem
    activeType: RankType
    isMobile?: boolean
}

export default function RankListItem({ item, activeType, isMobile = false }: RankListItemProps) {
    const linkUrl = getLinkUrl(item, activeType)
    const levelIcon = getLevelIcon(item.level)
    const richLevelStyle = getRichLevelIconStyle(item.level)

    if (isMobile) {
        return (
            <div
                className="relative h-[30px] min-w-0 border-b border-dotted border-[#e5e5e5] dark:border-gray-700 flex items-center gap-1.5"
            >
                <span
                    className={`flex-shrink-0 w-4 h-4 rounded-full flex items-center justify-center text-[10px] font-bold ${getRankBadgeClass(item.rank)}`}
                >
                    {item.rank}
                </span>
                <div className="flex items-center ml-1 gap-2 min-w-0">
                    {activeType === 'gift' && levelIcon && (
                        <span className="flex-shrink-0 inline-block">
                            <Image
                                src={levelIcon}
                                alt={`Level ${item.level}`}
                                width={20}
                                height={20}
                                className="object-contain pointer-events-none"
                                style={{ display: 'block' }}
                                unoptimized
                            />
                        </span>
                    )}
                    {activeType === 'rich' && richLevelStyle && (
                        <span
                            className="flex-shrink-0"
                            style={richLevelStyle}
                        />
                    )}
                    <Link
                        href={linkUrl}
                        className="text-xs text-gray-900 dark:text-gray-100 truncate min-w-0 hover:text-[#ff9000] dark:hover:text-orange-400 transition-colors"
                    >
                        {item.name}
                    </Link>
                </div>
            </div>
        )
    }

    return (
        <li className="relative h-5 sm:h-6 min-w-0 flex items-center gap-1.5 sm:gap-2">
            <span
                className={`flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 rounded-full flex items-center justify-center text-[10px] sm:text-xs font-bold mt-0.5 ${getRankBadgeClass(item.rank)}`}
            >
                {item.rank}
            </span>
            <div className="flex items-center gap-1 min-w-0">
                {activeType === 'gift' && levelIcon && (
                    <span className="flex-shrink-0 inline-block">
                        <Image
                            src={levelIcon}
                            alt={`Level ${item.level}`}
                            width={20}
                            height={20}
                            className="object-contain pointer-events-none"
                            style={{ display: 'block' }}
                            unoptimized
                        />
                    </span>
                )}
                {activeType === 'rich' && richLevelStyle && (
                    <span
                        className="flex-shrink-0"
                        style={richLevelStyle}
                    />
                )}
                <Link
                    href={linkUrl}
                    className="text-xs sm:text-sm text-gray-900 dark:text-gray-100 truncate min-w-0 hover:text-[#ff9000] dark:hover:text-orange-400 transition-colors"
                >
                    {item.name}
                </Link>
            </div>
        </li>
    )
}