Epicnabbo-Catalogus-Updated-Daily/src/app/(site)/guilds/[id]/page.tsx

import Link from "next/link";
import { notFound } from "next/navigation";
import { getTranslations } from "next-intl/server";
import { ContentCard, EmptyState, StatBlock } from "@/components/public/ui";
import { avatarImageUrl } from "@/lib/format";
import { prisma } from "@/lib/prisma";
import { formatDate } from "@/lib/format-date";
import { siteSettings } from "@/lib/services/site-settings";

export const revalidate = 300;

type GuildView = {
	id: number;
	name: string;
	description: string;
	badge: string;
	userId: number;
	dateCreated: number;
};

type MemberView = {
	userId: number;
	username: string;
	look: string;
	motto: string;
	memberSince: number;
	isOwner: boolean;
};

export default async function GuildPage({
	params,
}: {
	params: Promise<{ id: string }>;
}) {
	const t = await getTranslations("pages.guild");
	const { id } = await params;
	const guildId = Number(id);
	if (!Number.isInteger(guildId) || guildId <= 0) notFound();

	let guild: GuildView | null = null;
	try {
		guild = await prisma.guilds.findUnique({
			where: { id: guildId },
			select: {
				id: true,
				name: true,
				description: true,
				badge: true,
				userId: true,
				dateCreated: true,
			},
		});
	} catch {
		guild = null;
	}

	if (!guild) notFound();

	// Members come from guilds_members; there is no relation in the schema, so we
	// join the users table manually by id.
	let memberRows: { userId: number; memberSince: number }[] = [];
	try {
		memberRows = await prisma.guildsMembers.findMany({
			where: { guildId: guild.id },
			orderBy: { memberSince: "asc" },
			take: 200,
			select: { userId: true, memberSince: true },
		});
	} catch {
		memberRows = [];
	}

	const memberIds = Array.from(
		new Set(
			[guild.userId, ...memberRows.map((m) => m.userId)].filter((v) => v > 0),
		),
	);

	let users: { id: number; username: string; look: string; motto: string }[] =
		[];
	try {
		users = memberIds.length
			? await prisma.user.findMany({
					where: { id: { in: memberIds } },
					select: { id: true, username: true, look: true, motto: true },
				})
			: [];
	} catch {
		users = [];
	}

	const imagerBase = await siteSettings.get(
		"habbo_imaging_url",
		"https://www.habbo.com/habbo-imaging/avatarimage",
	);

	const usersById = new Map(users.map((u) => [u.id, u]));
	const sinceById = new Map(memberRows.map((m) => [m.userId, m.memberSince]));

	const guildOwnerUserId = guild.userId;

	const members: MemberView[] = memberIds
		.map((uid) => {
			const u = usersById.get(uid);
			if (!u) return null;
			return {
				userId: u.id,
				username: u.username,
				look: u.look,
				motto: u.motto,
				memberSince: sinceById.get(uid) ?? 0,
				isOwner: uid === guildOwnerUserId,
			};
		})
		.filter((m): m is MemberView => m !== null)
		// Owner first, then by join date.
		.sort((a, b) => {
			if (a.isOwner !== b.isOwner) return a.isOwner ? -1 : 1;
			return a.memberSince - b.memberSince;
		});

	const created = formatDate(new Date(guild.dateCreated * 1000), "date");

	return (
		<main style={{ display: "grid", gap: "1.5rem" }}>
			<p style={{ margin: 0 }}>
				<Link href="/guilds">{t("allGuilds")}</Link>
			</p>

			<ContentCard>
				<div
					style={{ display: "flex", gap: "1.25rem", alignItems: "flex-start" }}
				>
					{guild.badge ? (
						// eslint-disable-next-line @next/next/no-img-element
						<img
							src={`https://habbo-stories-content.s3.amazonaws.com/badge-part-images/${guild.badge}.gif`}
							alt={`${guild.name} badge`}
							width={48}
							height={48}
							style={{ flex: "0 0 auto" }}
						/>
					) : null}
					<div style={{ minWidth: 0, flex: 1 }}>
						<h1 style={{ margin: "0 0 0.35rem" }}>
							{guild.name || t("unnamedGuild")}
						</h1>
						<p style={{ margin: 0 }}>
							{guild.description || (
								<span className="muted">{t("noDescription")}</span>
							)}
						</p>
					</div>
				</div>

				<div className="stat-grid" style={{ marginTop: "1.1rem" }}>
					<StatBlock
						icon="👥"
						value={members.length}
						label={
							members.length === 1 ? t("memberSingular") : t("memberPlural")
						}
					/>
					{created ? (
						<StatBlock icon="📅" value={created} label={t("founded")} />
					) : null}
					<StatBlock
						icon="🚪"
						value={
							<Link
								href={`/guilds/${guild.id}/forum`}
								style={{ textDecoration: "none" }}
							>
								{t("forumLink")}
							</Link>
						}
						label={t("discussion")}
					/>
				</div>
			</ContentCard>

			<ContentCard
				icon="👥"
				title={t("membersTitle")}
				subtitle={`${members.length} ${members.length === 1 ? t("memberLowerSingular") : t("memberLowerPlural")}`}
				padded={members.length === 0}
			>
				{members.length === 0 ? (
					<EmptyState icon="👥">{t("noMembers")}</EmptyState>
				) : (
					<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
						{members.map((m) => (
							<div
								key={m.userId}
								className="card hover"
								style={{
									display: "flex",
									gap: "0.85rem",
									alignItems: "center",
								}}
							>
								{/* eslint-disable-next-line @next/next/no-img-element */}
								<img
									className="avatar"
									src={avatarImageUrl(imagerBase ?? "", m.look, { size: "l" })}
									alt={`${m.username} avatar`}
									width={50}
									height={75}
									style={{ flex: "0 0 auto" }}
								/>
								<div style={{ minWidth: 0 }}>
									<h3 style={{ margin: "0 0 0.2rem", fontSize: "1rem" }}>
										<Link href={`/u/${m.username}`}>{m.username}</Link>
									</h3>
									{m.isOwner ? (
										<span
											className="online-badge online"
											style={{ marginBottom: "0.25rem" }}
										>
											👑 {t("owner")}
										</span>
									) : null}
									<p
										className="muted"
										style={{ margin: m.isOwner ? "0.25rem 0 0" : 0 }}
									>
										{m.motto || t("noMotto")}
									</p>
								</div>
							</div>
						))}
					</div>
				)}
			</ContentCard>
		</main>
	);
}