"use client";

import { useUser } from "@/lib/context";
import { Users, Flame, Trophy } from "lucide-react";
import { motion } from "framer-motion";

export default function Leaderboard() {
  const { profile } = useUser();

  const leaderboardUsers = [
    { rank: 1, name: "Zara Cole", level: 6, steps: 14200, points: 285, avatar: "Z" },
    { rank: 2, name: "Marcus Lee", level: 5, steps: 12100, points: 240, avatar: "M" },
    { rank: 3, name: "Chloe Vane", level: 4, steps: 9400, points: 188, avatar: "C" },
    { rank: 4, name: "Alex Stark (You)", level: profile.level, steps: profile.stepsToday, points: Math.round(profile.stepsToday / 15), avatar: "A", highlight: true },
    { rank: 5, name: "Devon Shaw", level: 3, steps: 5900, points: 118, avatar: "D" },
  ];

  return (
    <section className="py-24 bg-dark relative overflow-hidden">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        <div className="glassmorphism rounded-3xl p-8 sm:p-12 border border-accent-pink/10 space-y-8 shadow-[0_0_50px_rgba(255,46,136,0.02)]">
          <div className="text-left space-y-4">
            <div className="w-12 h-12 rounded-2xl bg-accent-pink/10 border border-accent-pink/20 flex items-center justify-center text-accent-pink">
              <Trophy className="w-6 h-6 animate-pulse" />
            </div>

            <div className="space-y-2">
              <span className="text-accent-pink font-bold text-xs uppercase tracking-wider">Section 14 • Leaderboard</span>
              <h3 className="text-2xl sm:text-4xl font-extrabold font-sora text-white">
                Daily Ranks & <br />
                <span className="text-glow-pink text-accent-pink">Community Standings</span>
              </h3>
              <p className="text-white/60 text-sm leading-relaxed">
                Check out who is logging the most activity today. Walk, play, refer, and climb to the top to unlock premium avatar banners and multiplier rewards.
              </p>
            </div>
          </div>

          {/* Leaderboard panel list */}
          <div className="bg-white/3 border border-white/5 rounded-2xl p-4 sm:p-6 space-y-4">
            <div className="flex items-center justify-between text-[10px] text-white/40 font-bold uppercase tracking-wider px-3 border-b border-white/5 pb-3">
              <span>User Roster</span>
              <div className="flex space-x-12">
                <span>Steps Logged</span>
                <span>Est. LYTs</span>
              </div>
            </div>

            <div className="space-y-2.5">
              {leaderboardUsers.map((user) => (
                <div
                  key={user.rank}
                  className={`flex items-center justify-between p-3 rounded-xl transition-all ${
                    user.highlight
                      ? "bg-accent-pink/10 border border-accent-pink/20 shadow-[0_0_15px_rgba(255,46,136,0.08)]"
                      : "bg-white/2 border border-transparent hover:border-white/5"
                  }`}
                >
                  <div className="flex items-center space-x-3">
                    <span
                      className={`w-6 text-center font-sora font-extrabold text-sm ${
                        user.rank === 1
                          ? "text-primary text-glow-yellow"
                          : user.rank === 2
                          ? "text-slate-300"
                          : user.rank === 3
                          ? "text-amber-600"
                          : "text-white/60"
                      }`}
                    >
                      #{user.rank}
                    </span>

                    <div className="relative">
                      <div className="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center font-bold text-xs text-white">
                        {user.avatar}
                      </div>
                      <span className="absolute -bottom-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-[#181818] text-[8px] font-bold text-white/80 border border-white/10">
                        L{user.level}
                      </span>
                    </div>

                    <div>
                      <span className="text-xs font-bold text-white block">{user.name}</span>
                      {user.highlight && (
                        <span className="text-[9px] text-accent-pink font-semibold flex items-center gap-1 mt-0.5">
                          <Flame className="w-3 h-3 fill-current animate-pulse" />
                          <span>{profile.streak} days active streak</span>
                        </span>
                      )}
                    </div>
                  </div>

                  <div className="flex items-center space-x-12 text-right">
                    <span className="text-xs font-semibold text-white/80 font-mono">
                      {user.steps.toLocaleString()}
                    </span>

                    <span className="text-sm font-bold text-primary font-mono">
                      +{user.points}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

      </div>
    </section>
  );
}
