import { prisma } from "@/lib/prisma";
import Image from "next/image";
import { Trophy, Medal, Zap } from "lucide-react";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Leaderboard",
  description: "Papan peringkat pengguna QuizB",
};

export const dynamic = "force-dynamic";

async function getLeaderboard() {
  return prisma.user.findMany({
    orderBy: { totalScore: "desc" },
    take: 50,
    select: {
      id: true, name: true, image: true, username: true,
      level: true, totalScore: true, quizzesPlayed: true,
    },
  });
}

const rankColors = ["text-yellow-500", "text-zinc-400", "text-amber-600"];
const rankBg = ["bg-yellow-500/10", "bg-zinc-500/10", "bg-amber-600/10"];
const RankIcons = [
  <Trophy key="1" className="w-5 h-5 text-yellow-500" />,
  <Medal key="2" className="w-5 h-5 text-zinc-400" />,
  <Medal key="3" className="w-5 h-5 text-amber-600" />,
];

export default async function LeaderboardPage() {
  const users = await getLeaderboard().catch(() => []);

  return (
    <div className="min-h-screen pt-20">
      <div className="container mx-auto px-4 py-8 max-w-3xl">
        {/* Header */}
        <div className="text-center mb-12">
          <div className="w-16 h-16 bg-yellow-500/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <Trophy className="w-8 h-8 text-yellow-500" />
          </div>
          <h1 className="text-3xl font-bold mb-2">Papan Peringkat</h1>
          <p className="text-muted-foreground">Top pengguna QuizB bulan ini</p>
        </div>

        {/* Top 3 Podium */}
        {users.length >= 3 && (
          <div className="flex items-end justify-center gap-4 mb-10">
            {/* 2nd */}
            <div className="flex flex-col items-center">
              <div className="w-14 h-14 rounded-2xl overflow-hidden border-2 border-zinc-400/50 mb-2">
                {users[1].image ? (
                  <Image src={users[1].image} alt={users[1].name ?? ""} width={56} height={56} />
                ) : (
                  <div className="w-full h-full bg-zinc-500/20 flex items-center justify-center text-xl font-bold">
                    {users[1].name?.[0]}
                  </div>
                )}
              </div>
              <div className="bg-zinc-500/10 border border-zinc-500/20 rounded-xl px-4 py-3 text-center w-24 h-20 flex flex-col justify-center">
                <span className="text-zinc-400 text-2xl font-black">#2</span>
              </div>
            </div>
            {/* 1st */}
            <div className="flex flex-col items-center -mb-2">
              <div className="text-2xl mb-1">👑</div>
              <div className="w-16 h-16 rounded-2xl overflow-hidden border-2 border-yellow-500/70 mb-2">
                {users[0].image ? (
                  <Image src={users[0].image} alt={users[0].name ?? ""} width={64} height={64} />
                ) : (
                  <div className="w-full h-full bg-yellow-500/20 flex items-center justify-center text-2xl font-bold">
                    {users[0].name?.[0]}
                  </div>
                )}
              </div>
              <div className="bg-yellow-500/10 border border-yellow-500/30 rounded-xl px-4 py-3 text-center w-28 h-24 flex flex-col justify-center">
                <span className="text-yellow-500 text-3xl font-black">#1</span>
              </div>
            </div>
            {/* 3rd */}
            <div className="flex flex-col items-center">
              <div className="w-14 h-14 rounded-2xl overflow-hidden border-2 border-amber-600/50 mb-2">
                {users[2].image ? (
                  <Image src={users[2].image} alt={users[2].name ?? ""} width={56} height={56} />
                ) : (
                  <div className="w-full h-full bg-amber-600/20 flex items-center justify-center text-xl font-bold">
                    {users[2].name?.[0]}
                  </div>
                )}
              </div>
              <div className="bg-amber-600/10 border border-amber-600/20 rounded-xl px-4 py-3 text-center w-24 h-16 flex flex-col justify-center">
                <span className="text-amber-600 text-2xl font-black">#3</span>
              </div>
            </div>
          </div>
        )}

        {/* Full List */}
        <div className="space-y-2">
          {users.map((user, i) => (
            <div
              key={user.id}
              className={`flex items-center gap-4 p-4 rounded-2xl border transition-all ${
                i < 3
                  ? `${rankBg[i]} border-current`
                  : "bg-card border-border hover:border-primary/20"
              }`}
            >
              {/* Rank */}
              <div className="w-8 text-center">
                {i < 3 ? (
                  RankIcons[i]
                ) : (
                  <span className="text-sm font-bold text-muted-foreground">#{i + 1}</span>
                )}
              </div>

              {/* Avatar */}
              <div className="w-10 h-10 rounded-xl overflow-hidden flex-shrink-0">
                {user.image ? (
                  <Image src={user.image} alt={user.name ?? ""} width={40} height={40} />
                ) : (
                  <div className="w-full h-full gradient-brand flex items-center justify-center text-white text-sm font-bold">
                    {user.name?.[0] ?? "U"}
                  </div>
                )}
              </div>

              {/* Info */}
              <div className="flex-1 min-w-0">
                <p className="font-semibold truncate">{user.name ?? "Anonim"}</p>
                <div className="flex items-center gap-3 text-xs text-muted-foreground">
                  <span className="flex items-center gap-1">
                    <Zap className="w-3 h-3" />
                    Lv.{user.level}
                  </span>
                  <span>{user.quizzesPlayed} quiz</span>
                </div>
              </div>

              {/* Score */}
              <div className="text-right flex-shrink-0">
                <div className={`font-black text-lg ${i < 3 ? rankColors[i] : "text-foreground"}`}>
                  {user.totalScore.toLocaleString("id-ID")}
                </div>
                <div className="text-xs text-muted-foreground">poin</div>
              </div>
            </div>
          ))}

          {users.length === 0 && (
            <div className="text-center py-16 text-muted-foreground">
              <Trophy className="w-12 h-12 mx-auto mb-3 opacity-20" />
              <p>Belum ada data leaderboard.</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}