EpicNext-Cms/src/app/leaderboard/page.tsx

import Link from "next/link";
import { ContentCard, EmptyState, RankBadge } from "@/components/public/ui";
import { avatarImageUrl } from "@/lib/format";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";

export const dynamic = "force-dynamic";

export const metadata = { title: "Leaderboard" };

// AtomCMS-faithful currency type ids (see prisma/schema.prisma UsersCurrency):
//   Credits = -1 (lives on users.credits), Duckets = 0, Diamonds = 5.
const TABS = [
  { key: "credits", label: "Credits", coin: "credits" },
  { key: "diamonds", label: "Diamonds", coin: "diamonds" },
  { key: "duckets", label: "Duckets", coin: "duckets" },
] as const;

type TabKey = (typeof TABS)[number]["key"];

const CURRENCY_TYPE: Record<Exclude<TabKey, "credits">, number> = {
  diamonds: 5,
  duckets: 0,
};

type Row = { username: string; look: string; value: number };

async function loadCreditsRows(): Promise<Row[]> {
  try {
    const users = await prisma.user.findMany({
      orderBy: { credits: "desc" },
      take: 20,
      select: { username: true, look: true, credits: true },
    });
    return users.map((u) => ({ username: u.username, look: u.look, value: u.credits }));
  } catch {
    return [];
  }
}

async function loadCurrencyRows(type: number): Promise<Row[]> {
  try {
    const top = await prisma.usersCurrency.findMany({
      where: { type },
      orderBy: { amount: "desc" },
      take: 20,
      select: { userId: true, amount: true },
    });
    if (top.length === 0) return [];

    const users = await prisma.user.findMany({
      where: { id: { in: top.map((t) => t.userId) } },
      select: { id: true, username: true, look: true },
    });
    const byId = new Map(users.map((u) => [u.id, u]));

    return top
      .map((t) => {
        const u = byId.get(t.userId);
        if (!u) return null;
        return { username: u.username, look: u.look, value: t.amount };
      })
      .filter((r): r is Row => r !== null);
  } catch {
    return [];
  }
}

export default async function LeaderboardPage({
  searchParams,
}: {
  searchParams: Promise<{ type?: string }>;
}) {
  const { type } = await searchParams;
  const active: TabKey = TABS.some((t) => t.key === type) ? (type as TabKey) : "credits";
  const activeTab = TABS.find((t) => t.key === active)!;

  const [rows, imagerBase] = await Promise.all([
    active === "credits"
      ? loadCreditsRows()
      : loadCurrencyRows(CURRENCY_TYPE[active as Exclude<TabKey, "credits">]),
    siteSettings.get("habbo_imaging_url", "https://www.habbo.com/habbo-imaging/avatarimage"),
  ]);

  return (
    <main style={{ display: "grid", gap: "1.5rem" }}>
      <ContentCard
        icon="📊"
        title="Leaderboard"
        subtitle={`Top 20 players by ${activeTab.label.toLowerCase()}`}
      />

      <div className="nav" style={{ gap: "0.5rem" }}>
        {TABS.map((t) => (
          <Link
            key={t.key}
            href={`/leaderboard?type=${t.key}`}
            className={`btn ${t.key === active ? "btn-primary" : "btn-outline"}`}
          >
            {t.label}
          </Link>
        ))}
      </div>

      <ContentCard padded={rows.length === 0}>
        {rows.length === 0 ? (
          <EmptyState icon="📊">No rankings to show yet.</EmptyState>
        ) : (
          <table>
            <thead>
              <tr>
                <th style={{ width: "3rem" }}>#</th>
                <th style={{ width: "3.5rem" }}>Avatar</th>
                <th>Player</th>
                <th style={{ textAlign: "right" }}>{activeTab.label}</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row, i) => {
                const avatar = avatarImageUrl(imagerBase ?? "", row.look, {
                  size: "s",
                  headOnly: true,
                });
                return (
                  <tr key={`${row.username}-${i}`}>
                    <td>
                      <RankBadge position={i + 1} />
                    </td>
                    <td>
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img
                        className="avatar"
                        src={avatar}
                        alt={`${row.username} avatar`}
                        width={40}
                        height={40}
                      />
                    </td>
                    <td>
                      <Link href={`/u/${encodeURIComponent(row.username)}`} style={{ fontWeight: 700 }}>
                        {row.username}
                      </Link>
                    </td>
                    <td style={{ textAlign: "right" }}>
                      <span className="currency" style={{ display: "inline-flex" }}>
                        <span className={`coin ${activeTab.coin}`} />
                        {row.value.toLocaleString()}
                      </span>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </ContentCard>
    </main>
  );
}