'use client'

import Link from 'next/link'
import Image from 'next/image'
import { formatViews } from '@/utils/format'
import { useTranslation } from 'react-i18next'
import type { StarRankItem } from './types'
import { getRankBadgeClass } from './utils'

interface StarRankCardProps {
    item: StarRankItem
}

export default function StarRankCard({ item }: StarRankCardProps) {
    const { t } = useTranslation()

    return (
        <li
            className={`group overflow-hidden transition-all duration-300 hover:-translate-y-1 ${item.rank === 1
                ? 'bg-gradient-to-r from-amber-50 via-yellow-50 to-transparent dark:from-amber-900/30 dark:via-yellow-900/20 dark:to-transparent'
                : item.rank === 2
                    ? 'bg-gradient-to-r from-blue-50 via-cyan-50 to-transparent dark:from-blue-900/30 dark:via-cyan-900/20 dark:to-transparent'
                    : item.rank === 3
                        ? 'bg-gradient-to-r from-purple-50 via-pink-50 to-transparent dark:from-purple-900/30 dark:via-pink-900/20 dark:to-transparent'
                        : 'bg-white dark:bg-[#1a1c21]'
                }`}
        >
            <div className="flex items-center gap-3 sm:gap-4 p-3 sm:p-4">
                {/* 排名徽章 */}
                <div className={`flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-xs sm:text-sm font-bold ${getRankBadgeClass(item.rank)}`}>
                    {item.rank}
                </div>

                {/* 头像 */}
                {item.avatar ? (
                    <Link href={`/user/${item.userId}`} className="flex-shrink-0 block">
                        <div className="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full overflow-hidden bg-gray-200 dark:bg-neutral-900 ring-2 ring-gray-200 dark:ring-gray-700 dark:group-hover:ring-gray-600 transition-all">
                            <Image
                                src={item.avatar}
                                alt={item.name}
                                fill
                                className="object-cover pointer-events-none"
                                unoptimized
                            />
                        </div>
                    </Link>
                ) : (
                    <div className="flex-shrink-0 w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gray-200 dark:bg-neutral-900 ring-2 ring-gray-200 dark:ring-gray-700" />
                )}

                {/* 名字和数量 */}
                <div className="flex-1 min-w-0 flex flex-col gap-1">
                    <div className="flex flex-col min-w-0">
                        <Link
                            href={`/user/${item.userId}`}
                            className="text-sm sm:text-base font-medium text-gray-900 dark:text-white hover:text-black dark:hover:text-white transition-colors truncate"
                        >
                            {item.name}
                        </Link>
                        <p className="text-xs sm:text-sm text-black dark:text-white font-bold">
                            {formatViews(item.giftCount)} {t('rank.star.unit')}
                        </p>
                    </div>
                    <Link
                        href={`/user/${item.contributorId}`}
                        className="text-xs sm:text-sm text-[#9a9999] dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors truncate"
                    >
                        {item.contributorName}
                    </Link>
                </div>
            </div>
        </li>
    )
}