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

import { ContentCard, EmptyState, StatBlock } from "@/components/public/ui";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

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

// state == 1 → an active, unsold offer in the Arcturus marketplace.
const STATE_ACTIVE = 1;

function listedAgo(ts: number): string {
  const now = Math.floor(Date.now() / 1000);
  const diff = Math.max(0, now - ts);
  if (diff < 60) return "just now";
  const mins = Math.floor(diff / 60);
  if (mins < 60) return `${mins}m ago`;
  const hours = Math.floor(mins / 60);
  if (hours < 24) return `${hours}h ago`;
  const days = Math.floor(hours / 24);
  return `${days}d ago`;
}

function listedAt(ts: number): string {
  return new Date(ts * 1000).toISOString().slice(0, 16).replace("T", " ");
}

export default async function MarketplacePage() {
  let offers: {
    id: number;
    itemId: number;
    userId: number;
    price: number;
    timestamp: number;
  }[] = [];
  try {
    offers = await prisma.marketplaceItems.findMany({
      where: { state: STATE_ACTIVE },
      select: { id: true, itemId: true, userId: true, price: true, timestamp: true },
      orderBy: { timestamp: "desc" },
      take: 100,
    });
  } catch {
    offers = [];
  }

  // Resolve seller usernames in a single query (read-only display join).
  let sellers = new Map<number, string>();
  try {
    const ids = [...new Set(offers.map((o) => o.userId))];
    if (ids.length > 0) {
      const users = await prisma.user.findMany({
        where: { id: { in: ids } },
        select: { id: true, username: true },
      });
      sellers = new Map(users.map((u) => [u.id, u.username]));
    }
  } catch {
    sellers = new Map();
  }

  const total = offers.reduce((sum, o) => sum + o.price, 0);

  return (
    <main style={{ display: "grid", gap: "1.5rem" }}>
      <ContentCard
        icon="🛍️"
        title="Marketplace"
        subtitle="Browse furniture and rares listed by players. Listings are placed in-game and update live — head into the hotel to make an offer."
      >
        <div className="stat-grid">
          <StatBlock value={offers.length.toLocaleString()} label="Active offers" icon="🏷️" />
          <StatBlock
            value={new Set(offers.map((o) => o.userId)).size.toLocaleString()}
            label="Sellers"
            icon="👥"
          />
          <StatBlock value={`${total.toLocaleString()} cr`} label="Total value" icon="🪙" />
        </div>
      </ContentCard>

      <ContentCard
        icon="📋"
        title="Active listings"
        subtitle={offers.length > 0 ? "Most recently listed first" : undefined}
        padded={offers.length === 0}
      >
        {offers.length === 0 ? (
          <EmptyState icon="🛍️">
            There are no active marketplace offers right now. Check back later.
          </EmptyState>
        ) : (
          <div style={{ padding: "0.25rem 1rem 0.75rem", overflowX: "auto" }}>
            <table>
              <thead>
                <tr>
                  <th>Offer</th>
                  <th>Item</th>
                  <th>Seller</th>
                  <th>Price</th>
                  <th>Listed</th>
                </tr>
              </thead>
              <tbody>
                {offers.map((o) => (
                  <tr key={o.id}>
                    <td className="muted">#{o.id}</td>
                    <td>Item #{o.itemId}</td>
                    <td>{sellers.get(o.userId) ?? `User #${o.userId}`}</td>
                    <td style={{ fontWeight: 700 }}>{o.price.toLocaleString()} cr</td>
                    <td className="muted" title={listedAt(o.timestamp)}>
                      {listedAgo(o.timestamp)}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </ContentCard>
    </main>
  );
}