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

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

export const dynamic = "force-dynamic";

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;
};

function formatTimestamp(ts: number): string {
  if (!ts) return "";
  return new Date(ts * 1000).toISOString().slice(0, 10);
}

export default async function GuildPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  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 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 === guild!.userId,
      };
    })
    .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 = formatTimestamp(guild.dateCreated);

  return (
    <main style={{ display: "grid", gap: "1.5rem" }}>
      <p style={{ margin: 0 }}>
        <Link href="/guilds">← All guilds</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 || "Unnamed guild"}</h1>
            <p style={{ margin: 0 }}>
              {guild.description || <span className="muted">No description</span>}
            </p>
          </div>
        </div>

        <div className="stat-grid" style={{ marginTop: "1.1rem" }}>
          <StatBlock
            icon="👥"
            value={members.length}
            label={members.length === 1 ? "Member" : "Members"}
          />
          {created ? <StatBlock icon="📅" value={created} label="Founded" /> : null}
          <StatBlock
            icon="🚪"
            value={
              <Link href={`/guilds/${guild.id}/forum`} style={{ textDecoration: "none" }}>
                Forum →
              </Link>
            }
            label="Discussion"
          />
        </div>
      </ContentCard>

      <ContentCard
        icon="👥"
        title="Members"
        subtitle={`${members.length} ${members.length === 1 ? "member" : "members"}`}
        padded={members.length === 0}
      >
        {members.length === 0 ? (
          <EmptyState icon="👥">No members.</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" }}
                    >
                      👑 Owner
                    </span>
                  ) : null}
                  <p className="muted" style={{ margin: m.isOwner ? "0.25rem 0 0" : 0 }}>
                    {m.motto || "No motto"}
                  </p>
                </div>
              </div>
            ))}
          </div>
        )}
      </ContentCard>
    </main>
  );
}