import React from "react";

/**
 * LeaderboardCard component displays individual user entry on the leaderboard
 * @param {Object} entry - Leaderboard entry data
 * @param {Number} rank - User's rank/position
 * @param {Boolean} isCurrentUser - Whether this is the logged-in user
 */
const LeaderboardCard = ({ entry, rank, isCurrentUser }) => {
  // Determine rank badge color
  const getRankBadgeClass = () => {
    if (rank === 1) return "badge-warning"; // Gold
    if (rank === 2) return "badge-secondary"; // Silver
    if (rank === 3) return "badge-danger"; // Bronze
    return "badge-primary"; // Default
  };

  // Get rank emoji
  const getRankEmoji = () => {
    if (rank === 1) return "🥇";
    if (rank === 2) return "🥈";
    if (rank === 3) return "🥉";
    return "";
  };

  return (
    <div className="col-12 mb-3">
      <div
        className={`card h-100 ${isCurrentUser ? "border-success" : ""}`}
        style={isCurrentUser ? { borderWidth: "3px" } : {}}
      >
        <div className="card-body">
          <div className="row align-items-center">
            {/* Rank */}
            <div className="col-2 col-md-1 text-center">
              <h3 className="mb-0">
                <span className={`badge ${getRankBadgeClass()}`}>
                  {getRankEmoji()} #{rank}
                </span>
              </h3>
            </div>

            {/* User Info */}
            <div className="col-10 col-md-5">
              <h5 className="mb-1">
                {entry.username || "Unknown User"}
                {isCurrentUser && (
                  <span className="badge badge-success ml-2">You</span>
                )}
              </h5>
              <div className="text-muted small">
                {entry.email && <div>{entry.email}</div>}
              </div>
            </div>

            {/* Points */}
            <div className="col-6 col-md-2 text-center mt-2 mt-md-0">
              <div className="text-muted small">Points</div>
              <h4 className="mb-0 text-primary">
                {entry.points.toLocaleString()}
              </h4>
            </div>

            {/* Stats */}
            <div className="col-6 col-md-2 text-center mt-2 mt-md-0">
              <div className="text-muted small">Streets</div>
              <div className="font-weight-bold">{entry.streetsAdopted || 0}</div>
              <div className="text-muted small mt-1">Tasks</div>
              <div className="font-weight-bold">{entry.tasksCompleted || 0}</div>
            </div>

            {/* Badges */}
            <div className="col-12 col-md-2 text-center mt-2 mt-md-0">
              <div className="text-muted small">Badges</div>
              <div className="d-flex justify-content-center flex-wrap">
                {entry.badges && entry.badges.length > 0 ? (
                  entry.badges.slice(0, 5).map((badge, index) => (
                    <span
                      key={index}
                      className="badge badge-info mr-1 mb-1"
                      title={badge.name}
                    >
                      {badge.icon || "🏆"}
                    </span>
                  ))
                ) : (
                  <span className="text-muted small">None</span>
                )}
                {entry.badges && entry.badges.length > 5 && (
                  <span className="badge badge-secondary ml-1">
                    +{entry.badges.length - 5}
                  </span>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default LeaderboardCard;
