import React, { memo } from 'react';
import { Badge } from '@/components/ui/badge';

interface RankingItem {
    id: number;
    rank: number;
    name: string;
    class: number;
    class_name: string;
    kills: number;
    deaths: number;
    kdr: number;
}

interface RankingWidgetProps {
    pvpRankings: RankingItem[];
    widgetBackgroundUrl?: string | null;
}

// Move getRankBadgeColor outside component to prevent recreation on every render
const getRankBadgeColor = (rank: number) => {
    if (rank === 1) return 'bg-yellow-100 text-yellow-800 border-yellow-300 dark:bg-yellow-900/60 dark:text-yellow-300 dark:border-yellow-700';
    if (rank === 2) return 'bg-gray-100 text-gray-800 border-gray-300 dark:bg-gray-700/60 dark:text-gray-300 dark:border-gray-600';
    if (rank === 3) return 'bg-orange-100 text-orange-800 border-orange-300 dark:bg-orange-900/60 dark:text-orange-300 dark:border-orange-700';
    return 'bg-blue-100 text-blue-800 border-blue-300 dark:bg-blue-900/60 dark:text-blue-300 dark:border-blue-700';
};

export const RankingWidget = memo(function RankingWidget({ pvpRankings, widgetBackgroundUrl }: RankingWidgetProps) {

    return (
        <div
            className="side-block rounded-lg border p-4"
            style={{
                backgroundImage: `url('${widgetBackgroundUrl || '/img/step/bg.webp'}')`,
                backgroundRepeat: 'no-repeat',
                backgroundSize: 'cover',
                backgroundColor: 'transparent',
            }}
        >
            <div className="flex flex-col gap-3">
                {/* Icon and Title */}
                <div className="flex items-center gap-4">
                    <div className="flex-shrink-0">
                        <img src="/img/step/pic-red-pvp.webp" alt="PVP Icon" width={159} height={158} className="h-16 w-auto" />
                    </div>
                    <h3 className="text-xl font-bold text-white tracking-widest" style={{ fontFamily: 'serif' }}>
                        PVP RANKINGS
                    </h3>
                </div>

                {/* Content */}
                <div className="w-full">
                    {pvpRankings && pvpRankings.length > 0 ? (
                        <div className="overflow-x-auto">
                            <table className="w-full text-sm">
                                <thead>
                                    <tr className="border-b border-white/30">
                                        <th className="text-left py-2 px-2 font-bold text-white/80 text-xs uppercase">Rank</th>
                                        <th className="text-left py-2 px-2 font-bold text-white/80 text-xs uppercase">Name</th>
                                        <th className="text-left py-2 px-2 font-bold text-white/80 text-xs uppercase">Kill</th>
                                        <th className="text-left py-2 px-2 font-bold text-white/80 text-xs uppercase">Death</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {pvpRankings.slice(0, 10).map((player) => (
                                        <tr
                                            key={player.id}
                                            className="border-b border-white/10 hover:bg-white/5 transition-colors"
                                        >
                                            <td className="py-3 px-2">
                                                <Badge
                                                    variant="outline"
                                                    className={getRankBadgeColor(player.rank)}
                                                >
                                                    {player.rank}
                                                </Badge>
                                            </td>
                                            <td className="py-3 px-2">
                                                <div className="flex items-center gap-2">
                                                    <img
                                                        src={`/img/iconclass/${player.class_name.toLowerCase()}.webp`}
                                                        alt={player.class_name}
                                                        className="w-6 h-6 object-contain"
                                                        onError={(e) => {
                                                            e.currentTarget.style.display = 'none';
                                                        }}
                                                    />
                                                    <span className="font-medium text-white">{player.name}</span>
                                                </div>
                                            </td>
                                            <td className="py-3 px-2">
                                                <span className="font-semibold text-green-500">{player.kills}</span>
                                            </td>
                                            <td className="py-3 px-2">
                                                <span className="font-semibold text-red-500">{player.deaths}</span>
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                    ) : (
                        <div className="text-center text-white/60 py-4">
                            <p className="font-medium">No Rankings Yet</p>
                            <p className="text-sm">Be the first to compete!</p>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
});