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

import { getPublicTeamExport } 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/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);
}

function contentDisposition(teamName: string): string {
  const displayName = teamName.trim() || "team";
  const fallback = displayName
    .normalize("NFKD")
    .replace(/[^a-z0-9]+/giu, "-")
    .replace(/^-|-$/gu, "") || "team";
  const encoded = encodeURIComponent(`${displayName}.png`).replace(
    /['()*]/gu,
    (character) => `%${character.charCodeAt(0).toString(16).toUpperCase()}`,
  );
  return `attachment; filename="${fallback}.png"; filename*=UTF-8''${encoded}`;
}

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(156, 156, { 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 getPublicTeamExport(teamId);
  if (!team) return new Response("Team not found", { 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 = await anuphanFonts;
  const memberImages = await Promise.all(
    team.members.map((member) => pngDataUrl(member.character.imageUrl)),
  );

  return new ImageResponse(
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        flexDirection: "column",
        color: "#f4fbfa",
        background:
          "radial-gradient(circle at 50% 0%, #16454a 0%, #0a2429 38%, #06171b 100%)",
        border: "2px solid #3aaaa2",
        padding: "34px 36px",
        fontFamily: "Anuphan",
      }}
    >
      <div style={{ display: "flex", flexDirection: "column", textAlign: "center" }}>
        <div style={{ display: "flex", justifyContent: "center", fontSize: 42, fontWeight: 700 }}>
          {team.guideName}
        </div>
        <div style={{ display: "flex", justifyContent: "center", color: "#82d6ce", fontSize: 20 }}>
          {team.title} · ระยะเวลาโรเทชั่น {seconds.toLocaleString(undefined, { maximumFractionDigits: 2 })} วิ
        </div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 10 }}>
        {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: 14 }}>
              {memberImages[index] ? (
                <img
                  src={memberImages[index]}
                  alt=""
                  width={78}
                  height={78}
                  style={{ borderRadius: 16, border: "2px solid #78cbc4", objectFit: "cover" }}
                />
              ) : (
                <div style={{ display: "flex", width: 78, height: 78, alignItems: "center", justifyContent: "center", borderRadius: 16, border: "2px solid #78cbc4", color: "#82d6ce", fontSize: 30 }}>
                  {member.character.name.slice(0, 1)}
                </div>
              )}
              <div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 6 }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <div style={{ display: "flex", fontSize: 20, fontWeight: 600 }}>{member.character.name}</div>
                  <div style={{ display: "flex", color: "#d9f6f2", fontSize: 18 }}>{amount(damage)}</div>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <div style={{ display: "flex", flex: 1, height: 24, overflow: "hidden", borderRadius: 8, background: "#17383d" }}>
                    <div
                      style={{
                        display: "flex",
                        width: `${Math.max(2, Math.min(100, percent))}%`,
                        height: "100%",
                        borderRadius: 8,
                        background: "linear-gradient(90deg, #55b7ae 0%, #8be0d7 100%)",
                      }}
                    />
                  </div>
                  <div style={{ display: "flex", width: 66, justifyContent: "flex-end", fontSize: 20, fontWeight: 700 }}>
                    {percent.toFixed(1)}%
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <div style={{ display: "flex", flex: 1 }} />
      <div style={{ display: "flex", justifyContent: "center", gap: 16, borderTop: "1px solid #28555a", paddingTop: 20, fontSize: 26, fontWeight: 700 }}>
        <span style={{ color: "#f0c95f" }}>DPS: {amount(dps)}</span>
      </div>
      <div style={{ display: "flex", justifyContent: "center", marginTop: 14, textAlign: "center", color: "#d1e9e6", fontSize: 18, lineHeight: 1.45 }}>
        {team.combo}
      </div>
      <div style={{ display: "flex", justifyContent: "center", marginTop: 18, color: "#5c9995", fontSize: 14 }}>
        By YT เกนชินไม่ใช่เกมมือถือ
      </div>
    </div>,
    {
      width: 550,
      height: 776,
      fonts: fonts.length ? fonts : undefined,
      headers: {
        "Cache-Control": "no-store",
        "Content-Disposition": contentDisposition(team.title),
        "Content-Type": "image/png",
      },
    },
  );
}