import { db } from "@/lib/db";

export default async function LeaderboardPage() {
  const teams = await db.team.findMany({
    where: { status: "ACTIVE" },
    orderBy: { totalPoints: "desc" },
    include: { user: { select: { name: true, email: true } } },
    take: 100,
  });

  return (
    <div className="max-w-3xl mx-auto py-10 px-6">
      <h1 className="text-3xl font-bold mb-8">🏆 جدول امتیازات</h1>
      <div className="bg-white rounded-2xl shadow overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-green-800 text-white">
            <tr>
              <th className="text-right px-5 py-4">رتبه</th>
              <th className="text-right px-5 py-4">تیم</th>
              <th className="text-right px-5 py-4">مدیر</th>
              <th className="text-right px-5 py-4">امتیاز</th>
            </tr>
          </thead>
          <tbody>
            {teams.map((t, i) => (
              <tr
                key={t.id}
                className={`border-t transition ${
                  i === 0 ? "bg-yellow-50" : i === 1 ? "bg-gray-50" : i === 2 ? "bg-orange-50" : "hover:bg-green-50"
                }`}
              >
                <td className="px-5 py-4 font-bold text-lg">
                  {i === 0 ? "🥇" : i === 1 ? "🥈" : i === 2 ? "🥉" : i + 1}
                </td>
                <td className="px-5 py-4 font-semibold">{t.name}</td>
                <td className="px-5 py-4 text-gray-500">{t.user.name ?? t.user.email}</td>
                <td className="px-5 py-4 font-bold text-blue-700 text-lg">{t.totalPoints}</td>
              </tr>
            ))}
          </tbody>
        </table>
        {teams.length === 0 && (
          <div className="text-center text-gray-400 py-16">هنوز تیمی ثبت نشده</div>
        )}
      </div>
    </div>
  );
}