import { desc } from "drizzle-orm";
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import {
	ContentCard,
	EmptyState,
	OnlineBadge,
	RankBadge,
} from "@/components/public/ui";
import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
import { db, User } from "@/lib/db";

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

type TopUser = {
	username: string;
	look: string;
	credits: number;
	rank: number;
	online: string;
};

export default async function RankingsPage() {
	const t = await getTranslations("pages.rankings");
	let users: TopUser[] = [];
	try {
		users = await db
			.select({
				username: User.username,
				look: User.look,
				credits: User.credits,
				rank: User.rank,
				online: User.online,
			})
			.from(User)
			.orderBy(desc(User.credits))
			.limit(12);
	} catch {
		users = [];
	}

	return (
		<main style={{ display: "grid", gap: "1.5rem" }}>
			<ContentCard icon="🏆" title={t("title")} subtitle={t("subtitle")} />

			<ContentCard padded={users.length === 0}>
				{users.length === 0 ? (
					<EmptyState icon="🏆">{t("emptyState")}</EmptyState>
				) : (
					<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
						{users.map((u, i) => {
							return (
								<div
									key={u.username}
									className="card hover"
									style={{
										display: "flex",
										gap: "0.9rem",
										alignItems: "center",
									}}
								>
									<RankBadge position={i + 1} />
									<UserAvatarThumbnail
										figure={u.look}
										alt={`${u.username} avatar`}
									/>
									<div style={{ minWidth: 0, flex: 1 }}>
										<h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
											<Link href={`/u/${u.username}`}>{u.username}</Link>
										</h3>
										<p className="currency" style={{ margin: "0 0 0.3rem" }}>
											<span className="coin credits">c</span>
											{u.credits.toLocaleString()}
										</p>
										<OnlineBadge online={u.online === "1"} />
									</div>
								</div>
							);
						})}
					</div>
				)}
			</ContentCard>
		</main>
	);
}