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

import { elementBackgroundColor } from "@/lib/catalog/element";
import { rarityGradient } from "@/lib/catalog/rarity";
import { isCustomTravelerKey } from "@/lib/catalog/travelers";
import { getCachedPublicTeamExport } 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/anuphan@5.3.0/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 amount(value: number): string {
  return new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(
    value,
  );
}

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(300, 300, { fit: "cover" })
      .png()
      .toBuffer();
    return `data:image/png;base64,${png.toString("base64")}`;
  } catch {
    return null;
  }
}

export async function GET(
  _request: Request,
  context: RouteContext<"/api/teams/[teamId]/image">,
) {
  const { teamId } = await context.params;
  const team = await getCachedPublicTeamExport(teamId);
  if (!team) return new Response("ไม่พบทีม", { status: 404 });

  const total = team.members.reduce(
    (sum, member) => sum + Number(member.damage),
    0,
  );
  const seconds = Number(team.rotationSeconds);
  const dps = seconds > 0 ? total / seconds : 0;
  const [fonts, memberAssets] = await Promise.all([
    anuphanFonts,
    Promise.all(
      team.members.map(async (member) => {
        const [character, weapon, artifact, secondArtifact] = await Promise.all([
          pngDataUrl(member.character.imageUrl),
          member.weapon ? pngDataUrl(member.weapon.imageUrl) : null,
          member.artifact ? pngDataUrl(member.artifact.imageUrl) : null,
          member.secondArtifact ? pngDataUrl(member.secondArtifact.imageUrl) : null,
        ]);
        return { character, weapon, artifact, secondArtifact };
      }),
    ),
  ]);

  return new ImageResponse(
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        flexDirection: "column",
        color: "#f7f7f7",
        background: "#05060a",
        border: "3px solid #34343d",
        padding: "48px 52px",
        fontFamily: "Anuphan",
        position: "relative",
      }}
    >
      <div
        style={{
          position: "relative",
          zIndex: 1,
          display: "flex",
          flex: 1,
          flexDirection: "column",
        }}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            textAlign: "center",
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              fontSize: 64,
              fontWeight: 700,
            }}
          >
            {team.guideName}
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              color: "#b9b9c2",
              fontSize: 32,
            }}
          >
            {team.title} · ระยะเวลาโรเทชั่น{" "}
            {seconds.toLocaleString(undefined, { maximumFractionDigits: 2 })} วิ
          </div>
        </div>

        <div
          style={{
            display: "flex",
            flexDirection: "column",
            gap: 24,
            marginTop: 24,
          }}
        >
          {team.members.map((member, index) => {
            const damage = Number(member.damage);
            const percent = total > 0 ? (damage / total) * 100 : 0;
            return (
              <div
                key={member.position}
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 24,
                  borderRadius: 24,
                  background: elementBackgroundColor(member.character.element),
                  padding: 14,
                }}
              >
                <div
                  style={{
                    position: "relative",
                    display: "flex",
                    width: 150,
                    height: 150,
                    flexShrink: 0,
                    overflow: "hidden",
                    borderRadius: 24,
                    border: "3px solid #ffffff2a",
                    background: rarityGradient(
                      isCustomTravelerKey(member.character.key)
                        ? 5
                        : member.character.rarity,
                    ),
                  }}
                >
                  {memberAssets[index].character ? (
                    <img
                      src={memberAssets[index].character}
                      alt=""
                      width={150}
                      height={150}
                      style={{ objectFit: "cover" }}
                    />
                  ) : (
                    <div
                      style={{
                        display: "flex",
                        width: 150,
                        height: 150,
                        alignItems: "center",
                        justifyContent: "center",
                        color: "#b9b9c2",
                        fontSize: 52,
                      }}
                    >
                      {member.character.name.slice(0, 1)}
                    </div>
                  )}
                  <div
                    style={{
                      position: "absolute",
                      top: 6,
                      left: 6,
                      display: "flex",
                      borderRadius: 4,
                      background: "transparent",
                      color: "#ffffff",
                      padding: "2px 8px",
                      fontSize: 20,
                      fontWeight: 700,
                    }}
                  >
                    C{member.constellation}
                  </div>
                </div>
                <div style={{ display: "flex", gap: 12 }}>
                  {member.weapon && memberAssets[index].weapon ? (
                    <div
                      style={{
                        position: "relative",
                        display: "flex",
                        width: 96,
                        height: 96,
                        overflow: "hidden",
                        borderRadius: 16,
                        background: rarityGradient(member.weapon.rarity),
                      }}
                    >
                      <img
                        src={memberAssets[index].weapon}
                        alt=""
                        width={96}
                        height={96}
                        style={{ objectFit: "contain" }}
                      />
                      <div
                        style={{
                          position: "absolute",
                          top: 3,
                          left: 3,
                          display: "flex",
                          borderRadius: 4,
                          background: "transparent",
                          color: "#ffffff",
                          padding: "1px 5px",
                          fontSize: 16,
                          fontWeight: 700,
                        }}
                      >
                        R{member.refinement}
                      </div>
                    </div>
                  ) : null}
                  {member.artifact && memberAssets[index].artifact ? (
                    <div
                      style={{
                        display: "flex",
                        width: 96,
                        height: 96,
                        overflow: "hidden",
                        borderRadius: 16,
                        background: rarityGradient(member.artifact.rarity),
                      }}
                    >
                      <img
                        src={memberAssets[index].artifact}
                        alt=""
                        width={96}
                        height={96}
                        style={{ objectFit: "contain" }}
                      />
                    </div>
                  ) : null}
                  {member.secondArtifact && memberAssets[index].secondArtifact ? (
                    <div
                      style={{
                        display: "flex",
                        width: 96,
                        height: 96,
                        overflow: "hidden",
                        borderRadius: 16,
                        background: rarityGradient(member.secondArtifact.rarity),
                      }}
                    >
                      <img
                        src={memberAssets[index].secondArtifact}
                        alt=""
                        width={96}
                        height={96}
                        style={{ objectFit: "contain" }}
                      />
                    </div>
                  ) : null}
                </div>
                <div
                  style={{
                    display: "flex",
                    flex: 1,
                    flexDirection: "column",
                    gap: 14,
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "space-between",
                    }}
                  >
                    <div
                      style={{ display: "flex", fontSize: 36, fontWeight: 600 }}
                    >
                      {member.character.name}
                    </div>
                    <div
                      style={{
                        display: "flex",
                        color: "#f7f7f7",
                        fontSize: 34,
                      }}
                    >
                      {amount(damage)}
                    </div>
                  </div>
                  <div
                    style={{ display: "flex", alignItems: "center", gap: 20 }}
                  >
                    <div
                      style={{
                        display: "flex",
                        flex: 1,
                        height: 44,
                        overflow: "hidden",
                        borderRadius: 14,
                        background: "#272730",
                      }}
                    >
                      <div
                        style={{
                          display: "flex",
                          width: `${Math.max(2, Math.min(100, percent))}%`,
                          height: "100%",
                          borderRadius: 14,
                          background:
                            "linear-gradient(90deg, #b7791f 0%, #f0b72f 100%)",
                        }}
                      />
                    </div>
                    <div
                      style={{
                        display: "flex",
                        width: 116,
                        justifyContent: "flex-end",
                        fontSize: 34,
                        fontWeight: 700,
                      }}
                    >
                      {percent.toFixed(1)}%
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        <div
          style={{
            display: "flex",
            flex: 1,
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
            margin: "20px 0",
            borderRadius: 16,
            background: "#272730",
            padding: "24px",
            textAlign: "center",
            color: "#f7f7f7",
            fontSize: 28,
            lineHeight: 1.45,
          }}
        >
          <div style={{ display: "flex" }}>{team.combo}</div>
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            gap: 24,
            borderTop: "2px solid #34343d",
            paddingTop: 26,
            fontSize: 38,
            fontWeight: 700,
          }}
        >
          <span style={{ color: "#f0c95f" }}>DPS: {amount(dps)}</span>
          <span style={{ color: "#74747f" }}>|</span>
          <span>DPR: {amount(total)}</span>
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            marginTop: 22,
            color: "#74747f",
            fontSize: 40,
          }}
        >
          By YT เกนชินไม่ใช่เกมมือถือ
        </div>
      </div>
    </div>,
    {
      width: 1080,
      height: 1350,
      fonts: fonts.length ? fonts : undefined,
      headers: {
        "Cache-Control": "no-store",
        "Content-Disposition": imageContentDisposition(team.title, "team"),
        "Content-Type": "image/png",
      },
    },
  );
}