Epicnabbo-Catalogus-Updated-Daily/src/app/draw-badge/page.tsx

import { redirect } from "next/navigation";
import { buyBadge } from "@/actions/draw-badge";
import { ContentCard, EmptyState, StatBlock } from "@/components/public/ui";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";

// Reads the live users + website_drawbadges tables and writes credits/badges on
// purchase — must never be statically rendered.
export const dynamic = "force-dynamic";

export const metadata = { title: "Draw a Badge" };

const DEFAULT_PRICE = 50;

type DrawBadge = {
  id: bigint;
  badgeUrl: string;
  badgeName: string;
  badgeDesc: string;
};

const BOUGHT_NOTE = (code: string) =>
  `Badge "${code}" has been added to your inventory. Enjoy!`;

const ERROR_NOTE: Record<string, string> = {
  invalid: "That badge is no longer available.",
  credits: "You don't have enough credits to buy this badge.",
  fail: "Something went wrong. Please try again.",
};

export default async function DrawBadgePage({
  searchParams,
}: {
  // Next 16: searchParams is a Promise.
  searchParams: Promise<{ bought?: string; error?: string }>;
}) {
  const session = await auth();
  if (!session?.user?.id) redirect("/login");

  const { bought = "", error = "" } = await searchParams;

  // Resolve the flat purchase price + the buyer's balance + the published
  // badges, all fail-soft so the page still renders if the DB is unreachable.
  let price = DEFAULT_PRICE;
  let credits = 0;
  let badges: DrawBadge[] = [];

  try {
    const raw = await siteSettings.get("drawbadge.price", String(DEFAULT_PRICE));
    const n = Number(raw);
    if (Number.isFinite(n) && n >= 0) price = Math.floor(n);
  } catch {
    price = DEFAULT_PRICE;
  }

  try {
    const buyer = await prisma.user.findUnique({
      where: { id: Number(session.user.id) },
      select: { credits: true },
    });
    credits = buyer?.credits ?? 0;
  } catch {
    credits = 0;
  }

  try {
    badges = await prisma.websiteDrawbadges.findMany({
      where: { published: true },
      select: { id: true, badgeUrl: true, badgeName: true, badgeDesc: true },
      orderBy: { id: "desc" },
    });
  } catch {
    badges = [];
  }

  return (
    <main style={{ display: "grid", gap: "1.5rem" }}>
      <ContentCard
        icon="🎨"
        title="Draw a Badge"
        subtitle="Buy a community-designed badge and wear it on your profile."
      >
        <div className="stat-grid">
          <StatBlock value={credits.toLocaleString()} label="Your credits" icon="🪙" />
          <StatBlock value={price.toLocaleString()} label="Price per badge" icon="🏷️" />
        </div>

        {bought ? (
          <p
            role="status"
            aria-live="polite"
            style={{
              margin: "1rem 0 0",
              fontWeight: 700,
              color: "var(--color-secondary-hover)",
            }}
          >
            {BOUGHT_NOTE(bought)}
          </p>
        ) : null}
        {error ? (
          <p
            role="alert"
            style={{ margin: "1rem 0 0", fontWeight: 700, color: "var(--color-danger)" }}
          >
            {ERROR_NOTE[error] ?? ERROR_NOTE.fail}
          </p>
        ) : null}
      </ContentCard>

      <ContentCard
        icon="🏅"
        title="Available badges"
        subtitle={
          badges.length > 0 ? `${badges.length} badge(s) available` : undefined
        }
        padded={badges.length === 0}
      >
        {badges.length === 0 ? (
          <EmptyState icon="🎨">
            No badges have been published yet. Check back soon!
          </EmptyState>
        ) : (
          <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
            {badges.map((b) => {
              const affordable = credits >= price;
              return (
                <article key={String(b.id)} className="card hover">
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: "0.75rem",
                      marginBottom: "0.6rem",
                    }}
                  >
                    <div
                      style={{
                        width: 56,
                        height: 56,
                        borderRadius: "var(--radius-sm)",
                        display: "grid",
                        placeItems: "center",
                        background: "#f8fafc",
                        border: "2px solid var(--border-color)",
                        flexShrink: 0,
                        overflow: "hidden",
                      }}
                    >
                      {b.badgeUrl ? (
                        // Badge images are arbitrary external URLs stored by the
                        // draw-badge tool, so a plain <img> is correct here.
                        // eslint-disable-next-line @next/next/no-img-element
                        <img
                          src={b.badgeUrl}
                          alt=""
                          width={40}
                          height={40}
                          style={{ objectFit: "contain", display: "block" }}
                        />
                      ) : null}
                    </div>
                    <div style={{ minWidth: 0 }}>
                      <h3 style={{ margin: 0 }}>{b.badgeName}</h3>
                      <span className="currency">
                        <span className="coin credits">cr</span>
                        {price.toLocaleString()}
                      </span>
                    </div>
                  </div>

                  {b.badgeDesc ? (
                    <p style={{ margin: "0 0 0.85rem" }}>{b.badgeDesc}</p>
                  ) : null}

                  <form action={buyBadge}>
                    <input type="hidden" name="id" value={String(b.id)} />
                    <button
                      type="submit"
                      className="btn btn-primary"
                      style={{ width: "100%" }}
                      disabled={!affordable}
                      aria-disabled={!affordable}
                    >
                      {affordable ? "Buy badge" : "Not enough credits"}
                    </button>
                  </form>
                </article>
              );
            })}
          </div>
        )}
      </ContentCard>
    </main>
  );
}