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

import Link from "next/link";
import { redirect } from "next/navigation";
import { getTranslations } from "next-intl/server";
import type { CSSProperties } from "react";
import { removeFriendship } from "@/actions/messenger";
import { ContentCard, EmptyState, OnlineBadge } from "@/components/public/ui";
import { auth } from "@/lib/auth";
import { avatarImageUrl } from "@/lib/format";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";

export const dynamic = "force-dynamic";

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

type SearchParams = Promise<{ removed?: string; error?: string }>;

function feedbackStyle(tone: "success" | "error"): CSSProperties {
	const accent =
		tone === "error" ? "var(--color-danger)" : "var(--color-primary)";
	return {
		margin: 0,
		padding: "0.85rem 1rem",
		borderRadius: "var(--radius-md)",
		border: `1px solid ${accent}`,
		color: "var(--color-text-readable, var(--color-text))",
		fontSize: "0.9rem",
		fontWeight: 600,
		background: "var(--color-surface)",
		borderLeft: `4px solid ${accent}`,
	};
}

export default async function FriendsPage({
	searchParams,
}: {
	searchParams: SearchParams;
}) {
	const t = await getTranslations("pages.friends");
	const session = await auth();
	if (!session?.user?.id) redirect("/login");

	const userId = Number(session.user.id);
	const { removed, error } = await searchParams;

	// Friendships are stored as TWO directional rows (user_one_id→user_two_id
	// and the reverse). Read both directions, then dedupe the friend ids.
	const friendships = await prisma.messengerFriendships
		.findMany({
			where: {
				OR: [{ userOneId: userId }, { userTwoId: userId }],
			},
			select: { userOneId: true, userTwoId: true },
		})
		.catch(() => []);

	const friendIds = Array.from(
		new Set(
			friendships
				.map((f) => (f.userOneId === userId ? f.userTwoId : f.userOneId))
				.filter((id) => id && id !== userId),
		),
	);

	const [friends, imagerBase] = await Promise.all([
		friendIds.length
			? prisma.user
					.findMany({
						where: { id: { in: friendIds } },
						select: {
							id: true,
							username: true,
							look: true,
							motto: true,
							online: true,
						},
						orderBy: { username: "asc" },
					})
					.catch(() => [])
			: Promise.resolve([]),
		siteSettings.get(
			"habbo_imaging_url",
			"https://www.habbo.com/habbo-imaging/avatarimage",
		),
	]);

	const errorMessage =
		error === "not_found"
			? t("errors.notFound")
			: error === "invalid"
				? t("errors.invalid")
				: error
					? t("errors.error")
					: null;

	return (
		<main style={{ display: "grid", gap: "1.5rem" }}>
			{removed === "1" ? (
				<div role="status" style={feedbackStyle("success")}>
					{t("success.removed")}
				</div>
			) : null}
			{errorMessage ? (
				<div role="alert" style={feedbackStyle("error")}>
					{errorMessage}
				</div>
			) : null}

			<ContentCard
				icon="🤝"
				title={t("title")}
				subtitle={
					friends.length === 0
						? t("emptySubtitle")
						: t("subtitle", { count: friends.length })
				}
			/>

			<ContentCard padded={friends.length === 0}>
				{friends.length === 0 ? (
					<EmptyState icon="🤝">{t("emptyState")}</EmptyState>
				) : (
					<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
						{friends.map((friend) => {
							const avatar = avatarImageUrl(imagerBase ?? "", friend.look, {
								size: "s",
								headOnly: true,
							});
							const isOnline = friend.online === "1";
							return (
								<div
									key={friend.id}
									className="card hover"
									style={{
										display: "flex",
										gap: "0.85rem",
										alignItems: "center",
									}}
								>
									{/* eslint-disable-next-line @next/next/no-img-element */}
									<img
										className="avatar"
										src={avatar}
										alt={`${friend.username} avatar`}
										width={50}
										height={50}
									/>
									<div style={{ minWidth: 0, flex: 1 }}>
										<h3 style={{ margin: "0 0 0.3rem", fontSize: "1rem" }}>
											<Link href={`/u/${friend.username}`}>
												{friend.username}
											</Link>
										</h3>
										<p
											className="muted"
											style={{
												margin: "0 0 0.4rem",
												overflow: "hidden",
												textOverflow: "ellipsis",
												whiteSpace: "nowrap",
											}}
										>
											{friend.motto || t("noMotto")}
										</p>
										<OnlineBadge online={isOnline} />
									</div>
									<form action={removeFriendship}>
										<input
											type="hidden"
											name="friendId"
											value={String(friend.id)}
										/>
										<button type="submit" className="btn">
											{t("remove")}
										</button>
									</form>
								</div>
							);
						})}
					</div>
				)}
			</ContentCard>
		</main>
	);
}