Epicnabbo-Catalogus-Updated-Daily/src/app/messages/page.tsx

import Link from "next/link";
import { redirect } from "next/navigation";
import { auth } from "@/lib/auth";
import { avatarImageUrl } from "@/lib/format";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";
import { acceptFriend } from "@/actions/messenger";

export const dynamic = "force-dynamic";

function formatTimestamp(seconds: number): string {
  if (!seconds) return "";
  // sended_on is a unix timestamp in seconds (emulator convention).
  return new Date(seconds * 1000).toISOString().slice(0, 16).replace("T", " ");
}

export default async function MessagesPage() {
  const session = await auth();
  if (!session?.user?.id) redirect("/login");

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

  // Pending friend requests addressed to the session user, the most recent
  // offline messages they've received, and the avatar-imager base URL.
  let requests: { id: number; userFromId: number }[] = [];
  let messages: { id: number; userFromId: number; message: string; sendedOn: number }[] = [];
  let imagerBase =
    "https://www.habbo.com/habbo-imaging/avatarimage";

  try {
    const [reqRows, msgRows, base] = await Promise.all([
      prisma.messengerFriendrequests.findMany({
        where: { userToId: userId },
        select: { id: true, userFromId: true },
        orderBy: { id: "desc" },
        take: 100,
      }),
      prisma.messengerOffline.findMany({
        where: { userId },
        select: { id: true, userFromId: true, message: true, sendedOn: true },
        orderBy: { sendedOn: "desc" },
        take: 50,
      }),
      siteSettings.get(
        "habbo_imaging_url",
        "https://www.habbo.com/habbo-imaging/avatarimage",
      ),
    ]);
    requests = reqRows;
    messages = msgRows;
    if (base) imagerBase = base;
  } catch {
    requests = [];
    messages = [];
  }

  // Resolve usernames/looks for every counterparty referenced above.
  const otherIds = Array.from(
    new Set([
      ...requests.map((r) => r.userFromId),
      ...messages.map((m) => m.userFromId),
    ]),
  ).filter((id) => id && id > 0);

  let userById = new Map<
    number,
    { id: number; username: string; look: string }
  >();
  if (otherIds.length > 0) {
    try {
      const users = await prisma.user.findMany({
        where: { id: { in: otherIds } },
        select: { id: true, username: true, look: true },
      });
      userById = new Map(users.map((u) => [u.id, u]));
    } catch {
      userById = new Map();
    }
  }

  return (
    <main>
      <h1>Messages</h1>
      <p className="muted" style={{ marginTop: "-0.25rem" }}>
        Friend requests and offline messages waiting for you.
      </p>

      {/* ── Pending friend requests ───────────────────────────── */}
      <section style={{ marginTop: "1.5rem" }}>
        <h2>Friend requests</h2>
        {requests.length === 0 ? (
          <div className="card">
            <p className="muted" style={{ margin: 0 }}>
              No pending friend requests.
            </p>
          </div>
        ) : (
          <div className="grid">
            {requests.map((req) => {
              const from = userById.get(req.userFromId);
              const avatar = avatarImageUrl(imagerBase, from?.look ?? "", {
                size: "s",
                headOnly: true,
              });
              return (
                <div
                  key={req.id}
                  className="card"
                  style={{ display: "flex", gap: "0.85rem", alignItems: "center" }}
                >
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    className="avatar"
                    src={avatar}
                    alt={`${from?.username ?? "User"} avatar`}
                    width={50}
                    height={50}
                  />
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <p style={{ margin: 0 }}>
                      {from ? (
                        <Link href={`/u/${from.username}`}>
                          <strong>{from.username}</strong>
                        </Link>
                      ) : (
                        <strong>User #{req.userFromId}</strong>
                      )}
                    </p>
                    <p className="muted" style={{ margin: 0 }}>
                      wants to be your friend.
                    </p>
                  </div>
                  <form action={acceptFriend}>
                    <input type="hidden" name="requestId" value={String(req.id)} />
                    <button type="submit" className="btn btn-secondary">
                      Accept
                    </button>
                  </form>
                </div>
              );
            })}
          </div>
        )}
      </section>

      {/* ── Offline messages ──────────────────────────────────── */}
      <section style={{ marginTop: "2rem" }}>
        <h2>Offline messages</h2>
        {messages.length === 0 ? (
          <div className="card">
            <p className="muted" style={{ margin: 0 }}>
              You have no offline messages.
            </p>
          </div>
        ) : (
          <div className="grid">
            {messages.map((msg) => {
              const from = userById.get(msg.userFromId);
              const avatar = avatarImageUrl(imagerBase, from?.look ?? "", {
                size: "s",
                headOnly: true,
              });
              const when = formatTimestamp(msg.sendedOn);
              return (
                <article
                  key={msg.id}
                  className="card"
                  style={{ display: "flex", gap: "0.85rem", alignItems: "flex-start" }}
                >
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    className="avatar"
                    src={avatar}
                    alt={`${from?.username ?? "User"} avatar`}
                    width={50}
                    height={50}
                  />
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <p
                      className="muted"
                      style={{ marginTop: 0, marginBottom: "0.35rem" }}
                    >
                      {from ? (
                        <Link href={`/u/${from.username}`}>{from.username}</Link>
                      ) : (
                        <span>User #{msg.userFromId}</span>
                      )}
                      {when ? <span> · {when}</span> : null}
                    </p>
                    <p style={{ margin: 0, whiteSpace: "pre-wrap" }}>{msg.message}</p>
                  </div>
                </article>
              );
            })}
          </div>
        )}
      </section>
    </main>
  );
}