'use client'

import Link from 'next/link'
import Image from 'next/image'
import { formatViews } from '@/utils/format'
import type { RankItem, RankType } from './types'
import { getRankBadgeClass, getRankGradientClass, getLevelIcon, getRichLevelIconStyle, getRankIcon, getLinkUrl, renderNameWithEmoji } from './utils'

interface TopRankCardProps {
    item: RankItem
    activeType: RankType
}

export default function TopRankCard({ item, activeType }: TopRankCardProps) {
    const rankIcon = getRankIcon(activeType)
    const levelIcon = getLevelIcon(item.level)
    const richLevelStyle = getRichLevelIconStyle(item.level)
    const linkUrl = getLinkUrl(item, activeType)
    const gradientClass = getRankGradientClass(item.rank, activeType)

    return (
        <div
            className={`flex-1 min-w-0 bg-white dark:bg-[#1a1c21] rounded-lg p-3 sm:p-4 transition-shadow ${item.rank === 1
                ? 'lg:border lg:border-[#e6e5e5] lg:dark:border-gray-800 lg:hover:shadow-lg'
                : 'hidden lg:block border border-[#e6e5e5] dark:border-gray-800 hover:shadow-lg'
                }`}
        >
            {/* Mobile: Only Rank 1 - Vertical Layout (Avatar on top, info below) */}
            {item.rank === 1 && (
                <div className="flex flex-col lg:hidden items-center text-center">
                    <div className="relative mb-1">
                        {item.avatar ? (
                            <Link href={linkUrl} className="block">
                                <div className="relative w-[110px] h-[110px]">
                                    {item.rank === 1 && rankIcon && (
                                        <div className="relative w-[110px] h-[110px] flex">
                                            <div
                                                className="relative w-[6.3rem] h-[6.3rem] ml-1.5 mt-1.5 rounded-full overflow-hidden bg-gray-200 dark:bg-neutral-900"
                                            >
                                                <Image
                                                    src={item.avatar}
                                                    alt={item.name}
                                                    fill
                                                    className="object-cover pointer-events-none"
                                                    unoptimized
                                                />
                                            </div>
                                            <Image
                                                src={rankIcon}
                                                alt="avatar frame"
                                                fill
                                                className="object-contain mb-1.5 mr-1.5 pointer-events-none"
                                                unoptimized
                                            />
                                            {activeType === 'gift' && levelIcon && (
                                                <div className="absolute bottom-1 right-2 w-4 h-4 z-20">
                                                    <Image
                                                        src={levelIcon}
                                                        alt={`Level ${item.level}`}
                                                        fill
                                                        className="object-contain pointer-events-none"
                                                        unoptimized
                                                    />
                                                </div>
                                            )}
                                            {activeType === 'rich' && richLevelStyle && (
                                                <div
                                                    className="absolute bottom-0 left-1/2 -translate-x-1/2 z-20"
                                                    style={richLevelStyle}
                                                />
                                            )}
                                        </div>
                                    )}
                                </div>
                            </Link>
                        ) : (
                            <div className="relative w-[110px] h-[110px]">
                                {item.rank === 1 && rankIcon && (
                                    <div className="absolute inset-0 z-0">
                                        <Image
                                            src={rankIcon}
                                            alt="avatar frame"
                                            fill
                                            className="object-contain pointer-events-none"
                                            unoptimized
                                        />
                                    </div>
                                )}
                                <div
                                    className={`relative z-10 w-[110px] h-[110px] rounded-full bg-gray-200 dark:bg-neutral-900 ${item.rank === 1
                                        ? 'ring-2 ring-yellow-400 dark:ring-yellow-500 ring-offset-1 dark:ring-offset-[#0c0d0e] shadow-lg'
                                        : ''
                                        }`}
                                />
                            </div>
                        )}
                    </div>
                    <div className="w-full">
                        <div className="flex items-center gap-1 justify-center mb-1">
                            {activeType === 'gift' && item.rank >= 2 && 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' && item.rank >= 2 && richLevelStyle && (
                                <span
                                    className="flex-shrink-0"
                                    style={richLevelStyle}
                                />
                            )}
                            {gradientClass ? (
                                <Link
                                    href={linkUrl}
                                    className={`text-sm usernameGradient ${gradientClass} truncate`}
                                >
                                    {renderNameWithEmoji(item.name)}
                                </Link>
                            ) : (
                                <Link
                                    href={linkUrl}
                                    className="text-sm font-medium text-gray-900 dark:text-white truncate hover:text-[#ff9000] dark:hover:text-orange-400 transition-colors"
                                >
                                    {item.name}
                                </Link>
                            )}
                        </div>
                        <div className="text-sm text-[#ff9000] dark:text-orange-400 font-semibold">
                            {formatViews(item.giftAmount)}
                        </div>
                    </div>
                </div>
            )}

            {/* Desktop: Horizontal Layout */}
            <div className="hidden lg:flex items-start gap-2 sm:gap-3 min-w-0 h-full">
                <div
                    className={`flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 rounded-full flex items-center justify-center text-xs sm:text-sm font-bold mt-[20px] sm:mt-[30px] ${getRankBadgeClass(item.rank)}`}
                >
                    {item.rank}
                </div>
                {item.avatar ? (
                    <Link href={linkUrl} className="flex-shrink-0">
                        <div className="relative w-16 h-16 sm:w-[4.8rem] sm:h-[4.8rem]">
                            {item.rank === 1 && rankIcon && (
                                <div className="relative w-16 h-16 sm:w-20 sm:h-20 flex">
                                    <div
                                        className="relative w-[3.6rem] h-[3.6rem] sm:w-[4.6rem] sm:h-[4.6rem] ml-0.5 sm:ml-1 mt-0.5 sm:mt-1 rounded-full overflow-hidden bg-gray-200 dark:bg-neutral-900"
                                    >
                                        <Image
                                            src={item.avatar}
                                            alt={item.name}
                                            fill
                                            className="object-cover pointer-events-none"
                                            unoptimized
                                        />
                                    </div>
                                    <Image
                                        src={rankIcon}
                                        alt="avatar frame"
                                        fill
                                        className="object-contain mb-0.5 sm:mb-1 mr-0.5 sm:mr-1 pointer-events-none"
                                        unoptimized
                                    />
                                    {activeType === 'gift' && levelIcon && (
                                        <div className="absolute bottom-0 right-2 w-4 h-4 z-20">
                                            <Image
                                                src={levelIcon}
                                                alt={`Level ${item.level}`}
                                                fill
                                                className="object-contain pointer-events-none"
                                                unoptimized
                                            />
                                        </div>
                                    )}
                                    {activeType === 'rich' && richLevelStyle && (
                                        <div
                                            className="absolute bottom-0 left-1/2 -translate-x-1/2 z-20"
                                            style={richLevelStyle}
                                        />
                                    )}
                                </div>
                            )}
                            {item.rank !== 1 && (
                                <div className="relative w-16 h-16 sm:w-20 sm:h-20">
                                    <div
                                        className="relative w-16 h-16 sm:w-20 sm:h-20 rounded-full overflow-hidden bg-gray-200 dark:bg-neutral-900"
                                    >
                                        <Image
                                            src={item.avatar}
                                            alt={item.name}
                                            fill
                                            className="object-cover pointer-events-none"
                                            unoptimized
                                        />
                                    </div>
                                    {activeType === 'rich' && richLevelStyle && (
                                        <div
                                            className="absolute bottom-0 left-1/2 -translate-x-1/2 z-20"
                                            style={richLevelStyle}
                                        />
                                    )}
                                </div>
                            )}
                            {activeType === 'gift' && item.rank !== 1 && item.rank <= 3 && levelIcon && (
                                <div className="absolute bottom-0 right-0 w-4 h-4 z-20">
                                    <Image
                                        src={levelIcon}
                                        alt={`Level ${item.level}`}
                                        fill
                                        className="object-contain pointer-events-none"
                                        unoptimized
                                    />
                                </div>
                            )}
                        </div>
                    </Link>
                ) : (
                    <div className="flex-shrink-0 relative w-16 h-16 sm:w-20 sm:h-20">
                        {item.rank === 1 && rankIcon && (
                            <div className="absolute inset-0 z-0">
                                <Image
                                    src={rankIcon}
                                    alt="avatar frame"
                                    fill
                                    className="object-contain pointer-events-none"
                                    unoptimized
                                />
                            </div>
                        )}
                        <div
                            className={`relative z-10 w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-gray-200 dark:bg-neutral-900 ${item.rank === 1
                                ? 'ring-2 sm:ring-4 ring-yellow-400 dark:ring-yellow-500 ring-offset-1 sm:ring-offset-2 dark:ring-offset-[#0c0d0e] shadow-lg'
                                : ''
                                }`}
                        >
                            {activeType === 'rich' && item.rank <= 3 && richLevelStyle && (
                                <div
                                    className="absolute bottom-0 left-1/2 -translate-x-1/2 z-20"
                                    style={richLevelStyle}
                                />
                            )}
                        </div>
                    </div>
                )}
                <div className="flex-1 min-w-0 flex flex-col justify-center h-full">
                    <div className="flex items-center gap-1 mb-1">
                        {activeType === 'gift' && item.rank >= 4 && 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' && item.rank >= 4 && richLevelStyle && (
                            <span
                                className="flex-shrink-0"
                                style={richLevelStyle}
                            />
                        )}
                        {gradientClass ? (
                            <Link
                                href={linkUrl}
                                className={`text-xs sm:text-sm usernameGradient ${gradientClass} truncate`}
                            >
                                {renderNameWithEmoji(item.name)}
                            </Link>
                        ) : (
                            <Link
                                href={linkUrl}
                                className="text-xs sm:text-sm font-medium text-gray-900 dark:text-white truncate hover:text-[#ff9000] dark:hover:text-orange-400 transition-colors"
                            >
                                {item.name}
                            </Link>
                        )}
                    </div>
                    <div className="text-xs sm:text-sm text-[#ff9000] dark:text-orange-400 font-semibold">
                        {formatViews(item.giftAmount)}
                    </div>
                </div>
            </div>
        </div>
    )
}