EpicNext-Cms/src/app/(site)/leaderboard/page.tsx

import Link from "next/link";
import { getTranslations } from "next-intl/server";
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 revalidate = 300;

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

// 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" },
	{ key: "achievement", label: "Achievement", coin: "" },
	{ key: "respects", label: "Respects", coin: "" },
	{ key: "onlinetime", label: "Online Time", coin: "" },
] as const;

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

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

function formatValue(key: TabKey, value: number): string {
	if (key === "onlinetime") {
		const hours = Math.floor(value / 3600);
		const days = Math.floor(hours / 24);
		if (days > 0) return `${days}d ${hours % 24}h`;
		return `${hours}h`;
	}
	return value.toLocaleString();
}

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 [];
	}
}

async function loadSettingsRows(
	field: "achievementScore" | "respectsReceived" | "onlineTime" | "hofPoints",
): Promise<Row[]> {
	try {
		const top = await prisma.usersSettings.findMany({
			orderBy: { [field]: "desc" },
			take: 20,
			select: { userId: true, [field]: 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 as unknown as Array<{ userId: number; [k: string]: unknown }>)
			.map((t) => {
				const u = byId.get(t.userId as number);
				if (!u) return null;
				// eslint-disable-next-line security/detect-object-injection -- field is union of known keys
				return {
					username: u.username,
					look: u.look,
					value: Number(t[field] ?? 0),
				};
			})
			.filter((r): r is Row => r !== null);
	} catch {
		return [];
	}
}

const SETTINGS_FIELD: Record<
	"achievement" | "respects" | "onlinetime",
	"achievementScore" | "respectsReceived" | "onlineTime"
> = {
	achievement: "achievementScore",
	respects: "respectsReceived",
	onlinetime: "onlineTime",
};

export default async function LeaderboardPage({
	searchParams,
}: {
	searchParams: Promise<{ type?: string }>;
}) {
	const t = await getTranslations("pages.leaderboard");
	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) ?? TABS[0];

	const [rows, imagerBase] = await Promise.all([
		active === "credits"
			? loadCreditsRows()
			: active === "diamonds" || active === "duckets"
				? // eslint-disable-next-line security/detect-object-injection -- active validated as "diamonds"|"duckets" in this branch
					loadCurrencyRows(CURRENCY_TYPE[active])
				: loadSettingsRows(
						SETTINGS_FIELD[active as keyof typeof SETTINGS_FIELD],
					),
		siteSettings.get(
			"habbo_imaging_url",
			"https://www.habbo.com/habbo-imaging/avatarimage",
		),
	]);

	const valueOnly =
		active === "achievement" ||
		active === "respects" ||
		active === "onlinetime";

	return (
		<main style={{ display: "grid", gap: "1.5rem" }}>
			<ContentCard
				icon="📊"
				title={t("title")}
				subtitle={t("subtitle", { currency: t(`tab_${active}`).toLowerCase() })}
			/>

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

			<ContentCard padded={rows.length === 0}>
				{rows.length === 0 ? (
					<EmptyState icon="📊">{t("emptyState")}</EmptyState>
				) : (
					<table>
						<thead>
							<tr>
								<th style={{ width: "3rem" }}>#</th>
								<th style={{ width: "3.5rem" }}>{t("colAvatar")}</th>
								<th>{t("colPlayer")}</th>
								<th style={{ textAlign: "right" }}>{t(`tab_${active}`)}</th>
							</tr>
						</thead>
						<tbody>
							{rows.map((row, i) => {
								const avatar = avatarImageUrl(imagerBase ?? "", row.look, {
									size: "s",
									headOnly: true,
								});
								return (
									<tr key={row.username}>
										<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" }}>
											{valueOnly ? (
												<strong>{formatValue(active, row.value)}</strong>
											) : (
												<span
													className="currency"
													style={{ display: "inline-flex" }}
												>
													<span className={`coin ${activeTab.coin}`} />
													{row.value.toLocaleString()}
												</span>
											)}
										</td>
									</tr>
								);
							})}
						</tbody>
					</table>
				)}
			</ContentCard>
		</main>
	);
}