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, rarityTextColor } from "@/lib/catalog/rarity";
import { getCachedPublicWeaponExport } from "@/lib/cache/public";
import { imageContentDisposition } from "@/lib/guides/export-image";

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): string {
  return Number(value) === 0
    ? "-%"
    : `${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 getCachedPublicWeaponExport(guideId);
  if (!guide) return new Response("ไม่พบไกด์", { status: 404 });

  const [fonts, weaponImages] = await Promise.all([
    anuphanFonts,
    Promise.all(guide.weapons.map((row) => pngDataUrl(row.weapon.imageUrl))),
  ]);
  const weaponHeights = guide.weapons.map((row) =>
    Math.max(126, 126 + (row.note ? Math.ceil(row.note.length / 52) * 22 : 0)),
  );
  const noteHeight = guide.note
    ? Math.max(24, Math.ceil(guide.note.length / 70) * 22)
    : 0;
  const height = Math.max(
    360,
    190 +
      noteHeight +
      weaponHeights.reduce((sum, rowHeight) => sum + rowHeight, 0) +
      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: "#05060a",
        padding: "32px 36px",
        fontFamily: "Anuphan",
        position: "relative",
      }}
    >
      <div
        style={{
          position: "relative",
          zIndex: 1,
          display: "flex",
          flex: 1,
          flexDirection: "column",
          gap: 14,
        }}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            gap: 8,
            marginBottom: 6,
          }}
        >
          <div
            style={{
              display: "flex",
              color: "#f0b72f",
              fontSize: 16,
              fontWeight: 700,
            }}
          >
            อาวุธที่แนะนำ
          </div>
          <div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>
            Weapons
          </div>
          {guide.note ? (
            <div
              style={{
                display: "flex",
                maxWidth: 760,
                color: "#b9b9c2",
                fontSize: 16,
                lineHeight: 1.4,
                textAlign: "center",
              }}
            >
              {guide.note}
            </div>
          ) : null}
        </div>
        {guide.weapons.map((row, index) => (
          <div
            key={row.id}
            style={{
              display: "flex",
              minHeight: weaponHeights[index],
              overflow: "hidden",
              border: "1px solid rgba(247, 247, 247, 0.1)",
              borderRadius: 14,
              background: "#ffffff",
            }}
          >
            <div
              style={{
                position: "relative",
                display: "flex",
                flex: 3,
                overflow: "hidden",
                borderBottomRightRadius: 80,
                background: rarityGradient(row.weapon.rarity),
                color: "white",
                padding: 0,
              }}
            >
              <div
                style={{
                  position: "relative",
                  zIndex: 1,
                  display: "flex",
                  flex: 1,
                  alignItems: "center",
                  gap: 18,
                  padding: "10px 40px 10px 24px",
                }}
              >
                {weaponImages[index] ? (
                  <img
                    src={weaponImages[index]!}
                    alt=""
                    width={104}
                    height={104}
                    style={{ objectFit: "contain" }}
                  />
                ) : (
                  <div
                    style={{
                      display: "flex",
                      width: 104,
                      height: 104,
                      alignItems: "center",
                      justifyContent: "center",
                      fontSize: 32,
                    }}
                  >
                    {index + 1}
                  </div>
                )}
                <div
                  style={{ display: "flex", flexDirection: "column", gap: 5 }}
                >
                  <div
                    style={{ display: "flex", fontSize: 24, fontWeight: 700 }}
                  >
                    {index + 1}. {row.weapon.name} R{row.refinement}
                  </div>
                  {row.note ? (
                    <div
                      style={{
                        display: "flex",
                        fontSize: 14,
                        lineHeight: 1.55,
                      }}
                    >
                      {row.note}
                    </div>
                  ) : null}
                </div>
              </div>
            </div>
            <div
              style={{
                display: "flex",
                flex: 1,
                alignItems: "center",
                justifyContent: "space-around",
                gap: 12,
                color: "#17171c",
                padding: "12px 16px",
              }}
            >
              {row.overallPercent ? (
                <div
                  style={{
                    display: "flex",
                    flex: 1,
                    flexDirection: "column",
                    alignItems: "center",
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                      color: rarityTextColor(row.weapon.rarity),
                      fontSize: 36,
                      fontWeight: 700,
                    }}
                  >
                    {metric(row.overallPercent)}
                  </div>
                  <div style={{ display: "flex", fontSize: 14 }}>
                    ดาเมททั้งทีม
                  </div>
                </div>
              ) : null}
              {row.personalPercent ? (
                <div
                  style={{
                    display: "flex",
                    flex: 1,
                    flexDirection: "column",
                    alignItems: "center",
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                      color: rarityTextColor(row.weapon.rarity),
                      fontSize: 36,
                      fontWeight: 700,
                    }}
                  >
                    {metric(row.personalPercent)}
                  </div>
                  <div style={{ display: "flex", fontSize: 14 }}>
                    ดาเมจส่วนตัว
                  </div>
                </div>
              ) : null}
            </div>
          </div>
        ))}
      </div>
    </div>,
    {
      width: 1000,
      height,
      fonts: fonts.length ? fonts : undefined,
      headers: {
        "Cache-Control": "no-store",
        "Content-Disposition": imageContentDisposition(
          `${guide.guideName}-Weapon`,
          "weapons",
        ),
        "Content-Type": "image/png",
      },
    },
  );
}