EpicNext-Cms/src/app/admin/guilds/[id]/page.tsx

import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import { getTranslations } from "next-intl/server";
import { disbandGuild } from "@/actions/admin-guilds";
import { Button } from "@/components/ui/button";
import { formatDate } from "@/lib/format-date";
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
import { prisma } from "@/lib/prisma";

export default async function AdminGuildDetailPage({
	params,
}: {
	params: Promise<{ id: string }>;
}) {
	const { session, permissions } = await getAdminContext();
	if (!canAccess(permissions, PERMS.USERS_VIEW, session.user.rank)) {
		redirect("/admin");
	}

	const canEdit = canAccess(permissions, PERMS.USERS_EDIT, session.user.rank);
	const t = await getTranslations("pages.admin.guilds");
	const { id: rawId } = await params;
	const id = Number(rawId);
	if (!Number.isFinite(id) || id <= 0) notFound();

	const guild = await prisma.guilds.findUnique({
		where: { id },
		select: {
			id: true,
			name: true,
			description: true,
			userId: true,
			roomId: true,
			badge: true,
			dateCreated: true,
			state: true,
			forum: true,
		},
	});
	if (!guild) notFound();

	const [owner, members, memberCount, threadCount] = await Promise.all([
		prisma.user
			.findUnique({
				where: { id: guild.userId },
				select: { id: true, username: true },
			})
			.catch(() => null),
		prisma.guildsMembers
			.findMany({
				where: { guildId: id },
				orderBy: [{ levelId: "asc" }, { memberSince: "asc" }],
				take: 100,
				select: { userId: true, levelId: true, memberSince: true },
			})
			.catch(() => []),
		prisma.guildsMembers.count({ where: { guildId: id } }).catch(() => 0),
		prisma.guildsForumsThreads.count({ where: { guildId: id } }).catch(() => 0),
	]);

	const memberUserIds = members.map((m) => m.userId).filter((uid) => uid > 0);
	const memberUsers =
		memberUserIds.length > 0
			? await prisma.user
					.findMany({
						where: { id: { in: memberUserIds } },
						select: { id: true, username: true },
					})
					.catch(() => [])
			: [];
	const usernameById = new Map(memberUsers.map((u) => [u.id, u.username]));

	return (
		<main className="space-y-6">
			<div className="flex flex-wrap items-start justify-between gap-4">
				<div className="flex items-center gap-4">
					{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=""
							width={64}
							height={64}
							className="h-16 w-16 object-contain"
						/>
					) : null}
					<div>
						<h1 className="m-0 text-xl font-bold">
							{guild.name || `#${guild.id}`}
						</h1>
						<p className="muted m-0 text-sm">#{guild.id}</p>
					</div>
				</div>
				<div className="flex flex-wrap gap-2">
					<Button variant="ghost" size="sm" asChild>
						<Link href="/admin/guilds">{t("back")}</Link>
					</Button>
					<Button variant="ghost" size="sm" asChild>
						<Link href={`/guilds/${guild.id}`} target="_blank">
							{t("viewPublic")}
						</Link>
					</Button>
					{canEdit ? (
						<form action={disbandGuild}>
							<input type="hidden" name="id" value={guild.id} />
							<Button
								type="submit"
								variant="ghost"
								size="sm"
								style={{ color: "var(--admin-error)" }}
							>
								{t("disband")}
							</Button>
						</form>
					) : null}
				</div>
			</div>

			{guild.description ? (
				<p className="text-sm text-[var(--admin-text-muted)]">
					{guild.description}
				</p>
			) : null}

			<div className="grid grid-cols-[repeat(auto-fit,minmax(160px,1fr))] gap-3">
				<div className="admin-card">
					<div className="text-xs muted">{t("colOwner")}</div>
					<div>
						{owner ? (
							<Link href={`/admin/users/show/${owner.id}`}>
								{owner.username}
							</Link>
						) : (
							`#${guild.userId}`
						)}
					</div>
				</div>
				<div className="admin-card">
					<div className="text-xs muted">{t("colMembers")}</div>
					<div className="text-lg font-bold">{memberCount}</div>
				</div>
				<div className="admin-card">
					<div className="text-xs muted">{t("colThreads")}</div>
					<div className="text-lg font-bold">{threadCount}</div>
				</div>
				<div className="admin-card">
					<div className="text-xs muted">{t("colCreated")}</div>
					<div>{formatDate(new Date(guild.dateCreated * 1000))}</div>
				</div>
				<div className="admin-card">
					<div className="text-xs muted">{t("colRoom")}</div>
					<div>
						{guild.roomId > 0 ? (
							<Link href={`/admin/rooms/show/${guild.roomId}`}>
								#{guild.roomId}
							</Link>
						) : (
							"—"
						)}
					</div>
				</div>
			</div>

			<section>
				<h2 className="admin-section-title">
					{t("members")} ({Math.min(members.length, memberCount)})
				</h2>
				{members.length === 0 ? (
					<div className="admin-empty">{t("noMembers")}</div>
				) : (
					<div className="admin-card overflow-x-auto" style={{ padding: 0 }}>
						<table>
							<thead>
								<tr>
									<th>{t("colUser")}</th>
									<th>{t("colLevel")}</th>
									<th>{t("colJoined")}</th>
								</tr>
							</thead>
							<tbody>
								{members.map((m) => (
									<tr key={`${m.userId}-${m.memberSince}`}>
										<td>
											<Link href={`/admin/users/show/${m.userId}`}>
												{usernameById.get(m.userId) ?? `#${m.userId}`}
											</Link>
										</td>
										<td className="muted">{m.levelId}</td>
										<td className="muted">
											{formatDate(new Date(m.memberSince * 1000))}
										</td>
									</tr>
								))}
							</tbody>
						</table>
					</div>
				)}
			</section>
		</main>
	);
}