import { LinkIcon, Trophy } from "lucide-react";
import Link from "next/link";

interface GlobalLeaderboardUser {
  rank: number;
  user_id: string;
  username: string;
  wins: number;
  podiums: number;
  problems_completed: number;
}

const LeaderboardRow = ({
  index = 0,
  run,
}: {
  index?: number;
  run: GlobalLeaderboardUser;
}) => {
  const getRankStyle = (rank: number) => {
    if (rank === 1) return "rank-gold";
    if (rank === 2) return "rank-silver";
    if (rank === 3) return "rank-bronze";
    return "bg-secondary text-muted-foreground";
  };

  const getRankGlow = (rank: number) => {
    if (rank === 1) return "glow-gold";
    if (rank === 2) return "glow-silver";
    if (rank === 3) return "glow-bronze";
    return "";
  };

  const isTopThree = run.rank <= 3;

  return (
    <tr
      className={`group border-b border-border hover:bg-secondary/50 transition-colors animate-fade-in opacity-0 ${
        isTopThree ? "bg-secondary/30" : ""
      }`}
      style={{
        animationDelay: `${index * 0.05}s`,
        animationFillMode: "forwards",
      }}
    >
      {/* Rank */}
      <td className="py-4 px-5 w-16">
        <div
          className={`inline-flex items-center justify-center w-8 h-8 rounded-lg text-sm font-bold ${getRankStyle(
            run.rank
          )} ${getRankGlow(run.rank)}`}
        >
          {isTopThree ? <Trophy className="h-4 w-4" /> : run.rank}
        </div>
      </td>

      {/* Username */}
      <td>
        <div className="flex items-center gap-3">
          <span
            className={`font-medium ${
              isTopThree ? "text-foreground" : "text-secondary-foreground"
            } group-hover:text-primary transition-colors`}
          >
            {run.username}
          </span>
        </div>
      </td>

      {/* Wins */}
      <td className="py-4 px-4 text-center font-mono font-semibold text-primary">
        {run.wins}
      </td>

      {/* Podiums */}
      <td className="py-4 px-4 text-center font-mono font-semibold text-primary">
        {run.podiums}
      </td>

      {/* Problems Completed */}
      <td className="py-4 px-4 text-center font-mono font-semibold text-primary">
        {run.problems_completed}
      </td>

      {/* Profile Link */}
      <td className="py-4 px-4">
        <Link
          href={`/profile/${run.user_id}`}
          className="hover:text-primary flex items-center gap-1"
        >
          <LinkIcon className="w-3 h-3" /> View Profile
        </Link>
      </td>
    </tr>
  );
};

export default LeaderboardRow;