/* eslint-disable @next/next/no-img-element */

import { readFile } from "node:fs/promises";
import { join } from "node:path";

import { ImageResponse } from "next/og";

export const ogImageSize = { width: 1222, height: 560 } as const;
export const ogImageContentType = "image/png";

let bannerDataPromise: Promise<string> | undefined;
let fontDataPromise: Promise<Buffer> | undefined;

function shorten(value: string, length: number): string {
  const normalized = value.replace(/\s+/gu, " ").trim();
  return normalized.length > length
    ? `${normalized.slice(0, length - 1).trimEnd()}…`
    : normalized;
}

function getBannerData(): Promise<string> {
  bannerDataPromise ??= readFile(
    join(process.cwd(), "public/web_banner.png"),
    "base64",
  ).then((data) => `data:image/png;base64,${data}`);
  return bannerDataPromise;
}

function getFontData(): Promise<Buffer> {
  fontDataPromise ??= readFile(join(process.cwd(), "public/Kanit-SemiBold.ttf"));
  return fontDataPromise;
}

export async function generateOgImage({
  title,
  sub,
}: {
  title: string;
  sub: string;
}) {
  const [bannerSrc, kanit] = await Promise.all([getBannerData(), getFontData()]);

  return new ImageResponse(
    <div
      style={{
        display: "flex",
        width: "1222px",
        height: "560px",
        fontFamily: "Kanit",
        color: "#fff",
      }}
    >
      <img src={bannerSrc} alt="Banner" width={1222} height={560} />
      <div
        style={{
          fontSize: 64,
          position: "absolute",
          top: "160px",
          left: "60px",
          display: "flex",
          flexDirection: "column",
          right: "450px",
          bottom: "100px",
        }}
      >
        <div>{shorten(title, 24)}</div>
        <div
          style={{
            fontSize: 24,
            marginTop: "-20px",
            color: "#aaa",
          }}
        >
          {shorten(sub, 92)}
        </div>
      </div>
    </div>,
    {
      ...ogImageSize,
      fonts: [{ name: "Kanit", data: kanit, style: "normal", weight: 600 }],
    },
  );
}