EpicNext-Cms/src/app/friends/page.tsx

import Link from "next/link";
import { redirect } from "next/navigation";
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 default async function FriendsPage() {
  const session = await auth();
  if (!session?.user?.id) redirect("/login");

  const userId = Number(session.user.id);

  // Friendships are bidirectional and stored once: the session user can appear
  // as either user_one_id or user_two_id, with the *other* column being the
  // friend. 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",
    ),
  ]);

  return (
    <main style={{ display: "grid", gap: "1.5rem" }}>
      <ContentCard
        icon="🤝"
        title="Friends"
        subtitle={
          friends.length === 0
            ? "You have no friends added yet"
            : `You have ${friends.length} friend${friends.length === 1 ? "" : "s"}`
        }
      />

      <ContentCard padded={friends.length === 0}>
        {friends.length === 0 ? (
          <EmptyState icon="🤝">
            Add friends in the hotel and they will show up here.
          </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 || "No motto"}
                    </p>
                    <OnlineBadge online={isOnline} />
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </ContentCard>
    </main>
  );
}