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

import { getTranslations } from "next-intl/server";
import { ContentCard, EmptyState, StatBlock } from "@/components/public/ui";
import { formatDate } from "@/lib/format-date";
import { prisma } from "@/lib/prisma";

export const revalidate = 300;

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

// state == 1 → an active, unsold offer in the Arcturus marketplace.
const STATE_ACTIVE = 1;

type RelativeTimeTranslator = (
	key: string,
	values?: Record<string, number>,
) => string;

function listedAgo(ts: number, t: RelativeTimeTranslator): string {
	const now = Math.floor(Date.now() / 1000);
	const diff = Math.max(0, now - ts);
	if (diff < 60) return t("justNow");
	const mins = Math.floor(diff / 60);
	if (mins < 60) return t("minutesAgo", { count: mins });
	const hours = Math.floor(mins / 60);
	if (hours < 24) return t("hoursAgo", { count: hours });
	const days = Math.floor(hours / 24);
	return t("daysAgo", { count: days });
}

export default async function MarketplacePage() {
	const t = await getTranslations("pages.marketplace");
	let offers: {
		id: number;
		itemId: number;
		userId: number;
		price: number;
		timestamp: number;
	}[] = [];
	try {
		offers = await prisma.marketplaceItems.findMany({
			where: { state: STATE_ACTIVE },
			select: {
				id: true,
				itemId: true,
				userId: true,
				price: true,
				timestamp: true,
			},
			orderBy: { timestamp: "desc" },
			take: 100,
		});
	} catch {
		offers = [];
	}

	// Resolve seller usernames in a single query (read-only display join).
	let sellers = new Map<number, string>();
	try {
		const ids = [...new Set(offers.map((o) => o.userId))];
		if (ids.length > 0) {
			const users = await prisma.user.findMany({
				where: { id: { in: ids } },
				select: { id: true, username: true },
			});
			sellers = new Map(users.map((u) => [u.id, u.username]));
		}
	} catch {
		sellers = new Map();
	}

	const total = offers.reduce((sum, o) => sum + o.price, 0);

	return (
		<main style={{ display: "grid", gap: "1.5rem" }}>
			<ContentCard icon="🛍️" title={t("title")} subtitle={t("subtitle")}>
				<div className="stat-grid">
					<StatBlock
						value={offers.length.toLocaleString()}
						label={t("activeOffers")}
						icon="🏷️"
					/>
					<StatBlock
						value={new Set(offers.map((o) => o.userId)).size.toLocaleString()}
						label={t("sellers")}
						icon="👥"
					/>
					<StatBlock
						value={`${total.toLocaleString()} cr`}
						label={t("totalValue")}
						icon="🪙"
					/>
				</div>
			</ContentCard>

			<ContentCard
				icon="📋"
				title={t("activeListings")}
				subtitle={offers.length > 0 ? t("mostRecentFirst") : undefined}
				padded={offers.length === 0}
			>
				{offers.length === 0 ? (
					<EmptyState icon="🛍️">{t("empty")}</EmptyState>
				) : (
					<div style={{ padding: "0.25rem 1rem 0.75rem", overflowX: "auto" }}>
						<table>
							<thead>
								<tr>
									<th>{t("colOffer")}</th>
									<th>{t("colItem")}</th>
									<th>{t("colSeller")}</th>
									<th>{t("colPrice")}</th>
									<th>{t("colListed")}</th>
								</tr>
							</thead>
							<tbody>
								{offers.map((o) => (
									<tr key={o.id}>
										<td className="muted">#{o.id}</td>
										<td>{t("itemLabel", { id: o.itemId })}</td>
										<td>
											{sellers.get(o.userId) ??
												t("userLabel", { id: o.userId })}
										</td>
										<td style={{ fontWeight: 700 }}>
											{o.price.toLocaleString()} cr
										</td>
										<td
											className="muted"
											title={formatDate(new Date(o.timestamp * 1000))}
										>
											{listedAgo(o.timestamp, t)}
										</td>
									</tr>
								))}
							</tbody>
						</table>
					</div>
				)}
			</ContentCard>
		</main>
	);
}