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

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

import { ImageResponse } from "next/og";
import sharp from "sharp";

import { rarityGradient } from "@/lib/catalog/rarity";
import { artifactTierCount } from "@/lib/guides/artifacts";

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

let bannerDataPromise: Promise<string> | undefined;
let fontDataPromise: Promise<Buffer> | undefined;
let characterFontDataPromise: Promise<Buffer> | undefined;
const imageDataPromises = new Map<string, Promise<string | null>>();

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 metric(value: string): string {
  return Number(value) === 0
    ? "-%"
    : `${Number(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
}

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;
}

function getCharacterFontData(): Promise<Buffer> {
  characterFontDataPromise ??= readFile(join(process.cwd(), "public/zh-cn.ttf"));
  return characterFontDataPromise;
}

function getImageData(url: string): Promise<string | null> {
  const cached = imageDataPromises.get(url);
  if (cached) return cached;

  const promise = fetch(url)
    .then(async (response) => {
      if (!response.ok) return null;
      const png = await sharp(Buffer.from(await response.arrayBuffer()))
        .png()
        .toBuffer();
      return `data:image/png;base64,${png.toString("base64")}`;
    })
    .catch(() => null);
  imageDataPromises.set(url, promise);
  return promise;
}

export async function generateOgImage({
  title,
  sub,
  characterCard = false,
  backgroundUrl,
  characterUrl,
  recommendedWeapon,
  recommendedArtifact,
}: {
  title: string;
  sub: string;
  characterCard?: boolean;
  backgroundUrl?: string | null;
  characterUrl?: string | null;
  recommendedWeapon?: {
    name: string;
    refinement: number;
    rarity: number | null;
    imageUrl: string;
    overallPercent: string | null;
    personalPercent: string | null;
  } | null;
  recommendedArtifact?: {
    first: {
      name: string;
      rarity: number | null;
      imageUrl: string;
    };
    second: {
      name: string;
      rarity: number | null;
      imageUrl: string;
    } | null;
    percent: string;
  } | null;
}) {
  const [
    bannerSrc,
    kanit,
    characterFont,
    characterBackgroundSrc,
    characterArtSrc,
    weaponArtSrc,
    firstArtifactArtSrc,
    secondArtifactArtSrc,
  ] =
    await Promise.all([
      characterCard ? null : getBannerData(),
      getFontData(),
      characterCard ? getCharacterFontData() : null,
      characterCard && backgroundUrl ? getImageData(backgroundUrl) : null,
      characterCard && characterUrl ? getImageData(characterUrl) : null,
      recommendedWeapon ? getImageData(recommendedWeapon.imageUrl) : null,
      recommendedArtifact ? getImageData(recommendedArtifact.first.imageUrl) : null,
      recommendedArtifact?.second
        ? getImageData(recommendedArtifact.second.imageUrl)
        : null,
    ]);
  const backgroundSrc = characterCard ? characterBackgroundSrc : bannerSrc;

  return new ImageResponse(
    <div
      style={{
        display: "flex",
        width: "1222px",
        height: "560px",
        fontFamily: "Kanit",
        color: "#fff",
        textShadow: "0 2px 8px rgba(0, 0, 0, 0.8)",
        position: "relative",
        overflow: "hidden",
      }}
    >
      {backgroundSrc ? (
        <img src={backgroundSrc} alt="" width={1222} height={560} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      ) : (
        <div style={{ position: "absolute", inset: 0, background: "#111827" }} />
      )}
      {characterCard && characterArtSrc ? (
        <img
          src={characterArtSrc}
          alt=""
          width={480}
          height={360}
          style={{
            position: "absolute",
            top: 0,
            right: 0,
            width: "58%",
            height: "100%",
            objectFit: "cover",
            objectPosition: "center",
          }}
        />
      ) : null}
      {characterCard ? (
        <div
          style={{
            position: "absolute",
            inset: 0,
            background: "linear-gradient(90deg, rgba(3, 8, 18, 0.88) 0%, rgba(3, 8, 18, 0.62) 45%, rgba(3, 8, 18, 0.08) 100%)",
          }}
        />
      ) : null}
      <div
        style={{
          position: "absolute",
          top: characterCard
            ? recommendedWeapon || recommendedArtifact
              ? "36px"
              : "52px"
            : "160px",
          left: "60px",
          display: "flex",
          flexDirection: "column",
          right: characterCard ? "560px" : "450px",
          bottom: recommendedWeapon || recommendedArtifact ? "28px" : "100px",
        }}
      >
        {characterCard ? (
          <div style={{ display: "flex", color: "#d8f4ee", fontSize: 28 }}>
            เกนชินไม่ใช่เกมมือถือไกด์
          </div>
        ) : null}
        <div style={{ display: "flex", fontFamily: characterCard ? "Genshin" : "Kanit", fontSize: 64, marginTop: characterCard ? "8px" : 0 }}>
          {shorten(title, 24)}
        </div>
        <div
          style={{
            display: "flex",
            fontSize: 24,
            marginTop: characterCard ? "8px" : "-20px",
            color: "#fff",
          }}
        >
          {shorten(sub, 92)}
        </div>
        {recommendedWeapon ? (
          <div
            style={{
              display: "flex",
              width: "500px",
              height: "72px",
              marginTop: "14px",
              overflow: "hidden",
              borderRadius: "12px",
              background: "#fff",
            }}
          >
            <div
              style={{
                display: "flex",
                flex: recommendedWeapon.overallPercent || recommendedWeapon.personalPercent ? 3 : 1,
                alignItems: "center",
                gap: "10px",
                overflow: "hidden",
                borderBottomRightRadius: "48px",
                background: rarityGradient(recommendedWeapon.rarity),
                color: "#fff",
                padding: "2px 28px 2px 6px",
              }}
            >
              {weaponArtSrc ? (
                <img
                  src={weaponArtSrc}
                  alt=""
                  width={68}
                  height={68}
                  style={{ width: "68px", height: "68px", objectFit: "contain" }}
                />
              ) : null}
              <div style={{ display: "flex", fontSize: 20 }}>
                {shorten(recommendedWeapon.name, 19)} R{recommendedWeapon.refinement}
              </div>
            </div>
            {recommendedWeapon.overallPercent || recommendedWeapon.personalPercent ? (
              <div
                style={{
                  display: "flex",
                  flex: 1,
                  alignItems: "center",
                  justifyContent: "space-around",
                  color: "#17171c",
                  padding: "6px",
                }}
              >
                {recommendedWeapon.overallPercent ? (
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                    <div style={{ display: "flex", fontSize: 16 }}>{metric(recommendedWeapon.overallPercent)}</div>
                    <div style={{ display: "flex", fontSize: 8 }}>ทั้งทีม</div>
                  </div>
                ) : null}
                {recommendedWeapon.personalPercent ? (
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                    <div style={{ display: "flex", fontSize: 16 }}>{metric(recommendedWeapon.personalPercent)}</div>
                    <div style={{ display: "flex", fontSize: 8 }}>ส่วนตัว</div>
                  </div>
                ) : null}
              </div>
            ) : null}
          </div>
        ) : null}
        {recommendedArtifact ? (
          <div
            style={{
              display: "flex",
              width: "500px",
              height: "72px",
              marginTop: recommendedWeapon ? "10px" : "14px",
              alignItems: "center",
              gap: "10px",
              overflow: "hidden",
              border: "1px solid #ffffff1f",
              borderRadius: "12px",
              background: "#34343d",
              padding: "2px 8px",
            }}
          >
            <div style={{ display: "flex", width: recommendedArtifact.second ? "108px" : "68px" }}>
              {firstArtifactArtSrc ? (
                <div style={{ display: "flex", width: "68px", height: "68px", overflow: "hidden", border: "1px solid #ffffff2a", borderRadius: "10px", background: rarityGradient(recommendedArtifact.first.rarity) }}>
                  <img src={firstArtifactArtSrc} alt="" width={68} height={68} style={{ objectFit: "contain" }} />
                </div>
              ) : null}
              {recommendedArtifact.second && secondArtifactArtSrc ? (
                <div style={{ display: "flex", width: "68px", height: "68px", overflow: "hidden", marginLeft: "-28px", border: "1px solid #ffffff2a", borderRadius: "10px", background: rarityGradient(recommendedArtifact.second.rarity) }}>
                  <img src={secondArtifactArtSrc} alt="" width={68} height={68} style={{ objectFit: "contain" }} />
                </div>
              ) : null}
            </div>
            <div style={{ display: "flex", flex: 1, fontSize: 18 }}>
              {artifactTierCount(recommendedArtifact.second?.name ?? null)} {shorten(recommendedArtifact.first.name, recommendedArtifact.second ? 12 : 21)}
              {recommendedArtifact.second ? ` + ${shorten(recommendedArtifact.second.name, 12)}` : ""}
            </div>
            <div style={{ display: "flex", color: "#f0b72f", fontSize: 22 }}>
              {metric(recommendedArtifact.percent)}
            </div>
          </div>
        ) : null}
      </div>
    </div>,
    {
      ...ogImageSize,
      fonts: [
        { name: "Kanit", data: kanit, style: "normal", weight: 600 },
        ...(characterFont
          ? [{ name: "Genshin", data: characterFont, style: "normal" as const, weight: 400 as const }]
          : []),
      ],
    },
  );
}