buzz-sheet/app/api/guides/[guideId]/weapons/image/route.tsx

/* eslint-disable @next/next/no-img-element */
import { ImageResponse } from "next/og";
import sharp from "sharp";

import { rarityGradient } from "@/lib/catalog/rarity";
import { imageContentDisposition } from "@/lib/guides/export-image";
import { getPublicWeaponExport } from "@/lib/guides/queries";

const anuphanFonts = Promise.all(
  [
    { subset: "latin", weight: 400 as const },
    { subset: "thai", weight: 400 as const },
    { subset: "latin", weight: 700 as const },
    { subset: "thai", weight: 700 as const },
  ].map(async ({ subset, weight }) => {
    const response = await fetch(
      `https://unpkg.com/@fontsource/[email protected]/files/anuphan-${subset}-${weight}-normal.woff`,
    );
    if (!response.ok) throw new Error(`Unable to load Anuphan ${subset} ${weight}`);
    return {
      name: "Anuphan",
      data: await response.arrayBuffer(),
      weight,
      style: "normal" as const,
    };
  }),
).catch(() => []);

function metric(value: string | null): string {
  return value === null
    ? "—"
    : `${Number(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
}

async function pngDataUrl(url: string): Promise<string | null> {
  try {
    const response = await fetch(url);
    if (!response.ok) return null;
    const png = await sharp(Buffer.from(await response.arrayBuffer()))
      .resize(120, 120, { fit: "contain" })
      .png()
      .toBuffer();
    return `data:image/png;base64,${png.toString("base64")}`;
  } catch {
    return null;
  }
}

export async function GET(
  _request: Request,
  context: { params: Promise<{ guideId: string }> },
) {
  const { guideId } = await context.params;
  const guide = await getPublicWeaponExport(guideId);
  if (!guide) return new Response("Guide not found", { status: 404 });

  const [fonts, weaponImages] = await Promise.all([
    anuphanFonts,
    Promise.all(guide.weapons.map((row) => pngDataUrl(row.weapon.imageUrl))),
  ]);
  const height = Math.max(360, 190 + guide.weapons.length * 126 + Math.max(0, guide.weapons.length - 1) * 14);

  return new ImageResponse(
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        flexDirection: "column",
        gap: 14,
        color: "#f7f7f7",
        background: "#17171c",
        padding: "32px 36px",
        fontFamily: "Anuphan",
      }}
    >
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginBottom: 6 }}>
        <div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>{guide.guideName}</div>
        <div style={{ display: "flex", color: "#d3b568", fontSize: 22 }}>Weapons</div>
      </div>
      {guide.weapons.map((row, index) => (
        <div
          key={row.id}
          style={{
            display: "flex",
            minHeight: 112,
            overflow: "hidden",
            borderRadius: 14,
            background: "white",
          }}
        >
          <div
            style={{
              display: "flex",
              flex: 1,
              alignItems: "center",
              gap: 18,
              background: rarityGradient(row.weapon.rarity),
              color: "white",
              padding: "10px 24px",
            }}
          >
            {weaponImages[index] ? (
              <img src={weaponImages[index]!} alt="" width={92} height={92} style={{ objectFit: "contain" }} />
            ) : (
              <div style={{ display: "flex", width: 92, height: 92, alignItems: "center", justifyContent: "center", fontSize: 32 }}>{index + 1}</div>
            )}
            <div style={{ display: "flex", fontSize: 24, fontWeight: 700 }}>
              {index + 1}. {row.weapon.name} R{row.refinement}
            </div>
          </div>
          <div style={{ display: "flex", width: 350, alignItems: "center", justifyContent: "space-around", gap: 16, color: "#17171c", padding: "12px 20px" }}>
            <div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center" }}>
              <div style={{ display: "flex", fontSize: 30, fontWeight: 700 }}>{metric(row.overallPercent)}</div>
              <div style={{ display: "flex", fontSize: 14 }}>ดาเมจทั้งทีม</div>
            </div>
            <div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center" }}>
              <div style={{ display: "flex", fontSize: 30, fontWeight: 700 }}>{metric(row.personalPercent)}</div>
              <div style={{ display: "flex", fontSize: 14 }}>ดาเมจส่วนตัว</div>
            </div>
          </div>
        </div>
      ))}
    </div>,
    {
      width: 1000,
      height,
      fonts: fonts.length ? fonts : undefined,
      headers: {
        "Cache-Control": "no-store",
        "Content-Disposition": imageContentDisposition(`${guide.guideName} Weapons`, "weapons"),
        "Content-Type": "image/png",
      },
    },
  );
}