import Image from "next/image"
import { Users, Crown } from "lucide-react"

interface ActiveUsersLeaderboardProps {
  leaderboardData: { username: string; eventCount: number; avatarUrl: string }[]
  className?: string
}

export function ActiveUsersLeaderboard({
  leaderboardData,
  className,
}: ActiveUsersLeaderboardProps) {
  const safeLeaderboardData = Array.isArray(leaderboardData) ? leaderboardData : []
  const needsScrollbar = safeLeaderboardData.length > 12

  return (
    <div
      className={`bg-card rounded-xl border border-border p-4 hover:shadow-md transition-all duration-300 hover:border-primary/20 h-full flex flex-col ${className || ""}`}
    >
      <div className="flex items-center justify-between mb-4">
        <div>
          <h3 className="text-sm font-semibold mb-0.5">Active Users</h3>
          <div className="text-xs text-muted-foreground">Top contributors last 30 days</div>
        </div>
        <div className="w-8 h-8 sm:w-9 sm:h-9 rounded-lg bg-gradient-to-br from-indigo-500/20 to-indigo-600/20 flex items-center justify-center text-indigo-500 group-hover:scale-110 transition-transform">
          <Users size={16} />
        </div>
      </div>

      {safeLeaderboardData.length > 0 ? (
        <div
          className={`flex-1 max-h-[500px] pr-1 custom-scrollbar ${needsScrollbar ? "overflow-y-scroll" : "overflow-y-auto"}`}
        >
          <div className="space-y-3 mt-2">
            {safeLeaderboardData.map((user, index) => (
              <div key={user.username} className="flex items-center justify-between">
                <div className="flex items-center">
                  <div className="relative mr-3">
                    {index < 3 && (
                      <div
                        className={`absolute -top-2 -right-1 w-5 h-5 rounded-full flex items-center justify-center transform rotate-12
                        ${
                          index === 0
                            ? "text-yellow-500"
                            : index === 1
                              ? "text-gray-400"
                              : "text-amber-700"
                        }`}
                      >
                        <Crown size={16} fill="currentColor" />
                      </div>
                    )}

                    <Image
                      src={user.avatarUrl}
                      alt={user.username}
                      width={32}
                      height={32}
                      className="rounded-full border border-border/50"
                    />
                  </div>
                  <div>
                    <div className="text-xs font-medium">{user.username}</div>
                    <div className="text-[10px] text-muted-foreground">
                      {user.eventCount} {user.eventCount === 1 ? "event" : "events"}
                    </div>
                  </div>
                </div>
                <div
                  className={`text-xs font-medium px-1.5 py-0.5 rounded 
                  ${
                    index === 0
                      ? "bg-yellow-100 text-yellow-800"
                      : index === 1
                        ? "bg-gray-100 text-gray-800"
                        : index === 2
                          ? "bg-amber-100 text-amber-800"
                          : "bg-blue-50 text-blue-700"
                  }`}
                >
                  #{index + 1}
                </div>
              </div>
            ))}
          </div>
        </div>
      ) : (
        <div className="flex flex-col justify-center items-center h-[155px] bg-muted/10 rounded-md border border-dashed border-border/50">
          <Users size={20} className="text-muted-foreground/30 mb-2" />
          <p className="text-xs text-muted-foreground text-center">
            No active users in the last 30 days
          </p>
        </div>
      )}
    </div>
  )
}
