/* eslint-disable @next/next/no-img-element */
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";
import { getCachedPublicArtifactExport } from "@/lib/cache/public";
import { imageContentDisposition } from "@/lib/guides/export-image";
import { normalizeTargetStat, statPriorityColor, targetStatIconName, targetStatOptions } from "@/lib/guides/stats";
import { normalizeTalentPriorities, talentTypeLabel } from "@/lib/guides/talents";

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

function statLabel(value: string): string {
  const labels: Record<string, string> = {
    HP: "พลังชีวิต",
    ATK: "พลังโจมตี",
    DEF: "พลังป้องกัน",
    EM: "ความชำนาญธาตุ",
    ER: "ฟื้นฟูพลังงาน",
    "CRIT RATE": "อัตราคริ",
    "CRIT DAMAGE": "ความแรงคริ",
    "ATK%": "พลังโจมตี%",
    "HP%": "พลังชีวิต%",
    "DEF%": "พลังป้องกัน%",
    "CRIT Rate%/CRIT DMG%": "อัตราคริ/ความแรงคริ",
    "Pyro DMG%": "ความเสียหายธาตุไฟ%",
    "Hydro DMG%": "ความเสียหายธาตุน้ำ%",
    "Cryo DMG%": "ความเสียหายธาตุน้ำแข็ง%",
    "Electro DMG%": "ความเสียหายธาตุไฟฟ้า%",
    "Anemo DMG%": "ความเสียหายธาตุลม%",
    "Geo DMG%": "ความเสียหายธาตุดิน%",
    "Dendro DMG%": "ความเสียหายธาตุไม้%",
    "Physical DMG%": "ความเสียหายกายภาพ%",
    "Healing Bonus%": "โบนัสการรักษา%",
  };
  return labels[value] ?? 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(96, 96, { fit: "contain" })
      .png()
      .toBuffer();
    return `data:image/png;base64,${png.toString("base64")}`;
  } catch {
    return null;
  }
}

async function localPngDataUrl(fileName: string, size: number | null = 96, white = false): Promise<string> {
  let image = sharp(join(process.cwd(), "public", "icon", fileName));
  if (white) image = image.negate({ alpha: false });
  const png = await (size === null ? image : image.resize(size, size, { fit: "contain" }))
    .png()
    .toBuffer();
  return `data:image/png;base64,${png.toString("base64")}`;
}

export async function GET(
  _request: Request,
  context: RouteContext<"/api/guides/[guideId]/artifacts/image">,
) {
  const { guideId } = await context.params;
  const guide = await getCachedPublicArtifactExport(guideId);
  if (!guide) return new Response("ไม่พบไกด์", { status: 404 });
  const talents = normalizeTalentPriorities(guide.profile?.talents ?? []);

  const [fonts, groupAssets, statIconAssets, talentAssets, targetStatAssets] = await Promise.all([
    anuphanFonts,
    Promise.all(
      guide.groups.map((group) =>
        Promise.all(
          group.rows.map(async (row) => ({
            first: await pngDataUrl(row.first.imageUrl),
            second: row.second ? await pngDataUrl(row.second.imageUrl) : null,
          })),
        ),
      ),
    ),
    Promise.all([
      localPngDataUrl("Icon_Sands_of_Eon.webp"),
      localPngDataUrl("Icon_Goblet_of_Eonothem.webp"),
      localPngDataUrl("Icon_Circlet_of_Logos.webp"),
    ]),
    Promise.all(talents.map((talent) => {
      const catalogTalent = guide.character.talents.find((item) => item.type === talent.type);
      return catalogTalent?.iconUrl ? pngDataUrl(catalogTalent.iconUrl) : null;
    })),
    Promise.all(targetStatOptions.map((stat) => localPngDataUrl(`stats/${targetStatIconName(stat)}.webp`, 96, true))),
  ]);

  const profile = guide.profile;
  const groupRowHeights = guide.groups.map((group) => group.rows.map((row) => Math.max(76, 76 + (row.note ? Math.ceil(row.note.length / 58) * 22 : 0))));
  const leftHeight = guide.groups.reduce((sum, _group, groupIndex) => sum + 68 + groupRowHeights[groupIndex].reduce((groupSum, rowHeight) => groupSum + rowHeight, 0), 0) + Math.max(0, guide.groups.length - 1) * 16;
  const detailHeight = profile
    ? 60 + profile.targets.length * 40 + (profile.talents.length ? 82 : 0) + (profile.note ? Math.max(48, Math.ceil(profile.note.length / 58) * 24) : 0)
    : 0;
  const rightHeight = profile
    ? 242 + (profile.substats.length ? 76 + profile.substats.length * 18 : 0) + (detailHeight > 60 ? detailHeight + 16 : 0) + 32
    : 0;
  const height = Math.max(520, 190 + Math.max(leftHeight, rightHeight));

  return new ImageResponse(
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        flexDirection: "column",
        gap: 20,
        color: "#f7f7f7",
        background: "#05060a",
        padding: "32px 36px",
        fontFamily: "Anuphan",
        position: "relative",
      }}
    >
      <div style={{ position: "relative", zIndex: 1, display: "flex", flex: 1, flexDirection: "column", gap: 20 }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
        <div style={{ display: "flex", color: "#f0b72f", fontSize: 16, fontWeight: 700 }}>
          อาร์ติแฟกต์และสเตตัสที่แนะนำ
        </div>
        <div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>
          อาร์ติแฟกต์และค่าสถานะ
        </div>
      </div>

      <div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
        <div style={{ display: "flex", flex: profile ? 1.2 : 1, flexDirection: "column", gap: 16 }}>
          {guide.groups.map((group, groupIndex) => (
            <div
              key={group.id}
              style={{
                display: "flex",
                flexDirection: "column",
                overflow: "hidden",
                border: "1px solid #34343d",
                borderRadius: 14,
                background: "#1d1d25",
              }}
            >
              <div style={{ display: "flex", padding: "16px 20px", fontSize: 22, fontWeight: 700 }}>
                {group.name === "Late Game" ? "เลทเกม" : group.name}
              </div>
              <div style={{ display: "flex", flexDirection: "column", padding: "0 20px 14px" }}>
                {group.rows.map((row, rowIndex) => (
                  <div key={row.id} style={{ display: "flex", minHeight: groupRowHeights[groupIndex][rowIndex], alignItems: "center", gap: 14, borderRadius: 6, background: rowIndex % 2 === 0 ? "#34343d" : "#272730", padding: "5px 8px" }}>
                    <div style={{ display: "flex", width: row.second ? 94 : 58 }}>
                      {groupAssets[groupIndex][rowIndex].first ? (
                        <div style={{ display: "flex", width: 58, height: 58, overflow: "hidden", border: "1px solid #ffffff2a", borderRadius: 10, background: rarityGradient(row.first.rarity) }}>
                          <img src={groupAssets[groupIndex][rowIndex].first!} alt="" width={58} height={58} style={{ objectFit: "contain" }} />
                        </div>
                      ) : null}
                      {row.second && groupAssets[groupIndex][rowIndex].second ? (
                        <div style={{ display: "flex", width: 58, height: 58, overflow: "hidden", marginLeft: -22, border: "1px solid #ffffff2a", borderRadius: 10, background: rarityGradient(row.second.rarity) }}>
                          <img src={groupAssets[groupIndex][rowIndex].second!} alt="" width={58} height={58} style={{ objectFit: "contain" }} />
                        </div>
                      ) : null}
                    </div>
                    <div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 5 }}>
                      <div style={{ display: "flex", fontSize: 18, fontWeight: 700 }}>
                        {artifactTierCount(row.second?.name ?? null)}{" "}
                        {row.first.name}{row.second ? ` + ${row.second.name}` : ""}
                      </div>
                      {row.note ? <div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, lineHeight: 1.55 }}>{row.note}</div> : null}
                    </div>
                    <div style={{ display: "flex", color: "#f0b72f", fontSize: 26, fontWeight: 700 }}>
                      {metric(row.percent)}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        {profile ? (
          <div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 16 }}>
            <div style={{ display: "flex", flexDirection: "column", overflow: "hidden", border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25" }}>
              <div style={{ display: "flex", justifyContent: "center", background: "#ddb45a", color: "#211a0d", padding: "14px 20px", fontSize: 24, fontWeight: 700 }}>
                ออฟหลัก
              </div>
              <div style={{ display: "flex" }}>
                {[
                  { label: "นาฬิกา", values: profile.sands, icon: statIconAssets[0] },
                  { label: "ถ้วย", values: profile.goblet, icon: statIconAssets[1] },
                  { label: "หัว", values: profile.circlet, icon: statIconAssets[2] },
                ].map((stat) => (
                  <div key={stat.label} style={{ display: "flex", flex: 1, minHeight: 176, flexDirection: "column", alignItems: "center", gap: 10, borderRight: stat.label === "มงกุฎ" ? "none" : "1px solid #34343d", padding: "16px 10px", textAlign: "center" }}>
                    <img src={stat.icon} alt="" width={48} height={48} style={{ objectFit: "contain" }} />
                    <div style={{ display: "flex", fontSize: 17, fontWeight: 700 }}>{stat.label}</div>
                    <div style={{ display: "flex", width: "100%", borderTop: "1px solid #34343d" }} />
                    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, fontSize: 14, lineHeight: 1.45 }}>
                      {stat.values.length ? stat.values.map((value, index) => <span key={`${value}-${index}`} style={{ color: statPriorityColor(index), whiteSpace: "normal", wordBreak: "break-word" }}>{statLabel(value)}</span>) : "—"}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {profile.substats.length ? (
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "16px", fontSize: 14, textAlign: "center" }}>
                <strong>ลำดับค่าสถานะ:</strong>
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
                  {profile.substats.map((stat, index) => <span key={`${stat}-${index}`} style={{ color: statPriorityColor(index) }}>{statLabel(stat)}</span>)}
                </div>
              </div>
            ) : null}

            {detailHeight > 60 ? (
              <div style={{ display: "flex", flexDirection: "column", gap: 14, border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "18px 20px" }}>
                <div style={{ display: "flex", fontSize: 20, fontWeight: 700 }}>รายละเอียดเพิ่มเติม</div>
                {profile.targets.length ? (
                  <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                    <div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, fontWeight: 700 }}>ค่าสถานะเป้าหมาย</div>
                    {profile.targets.map((target, index) => {
                      const iconIndex = targetStatOptions.findIndex((stat) => stat === normalizeTargetStat(target.stat));
                      return (
                      <div key={`${target.stat}-${target.value}`} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, borderRadius: 6, background: index % 2 === 0 ? "#34343d" : "#272730", padding: "5px 8px", fontSize: 15 }}>
                        <span style={{ display: "flex", alignItems: "center", gap: 8 }}>{iconIndex >= 0 ? <img src={targetStatAssets[iconIndex]} alt="" width={28} height={28} style={{ objectFit: "contain" }} /> : null}{normalizeTargetStat(target.stat) ?? target.stat}</span><strong>{target.value}</strong>
                      </div>
                      );
                    })}
                  </div>
                ) : null}
                {talents.length ? (
                  <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                    <div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, fontWeight: 700 }}>ลำดับการอัพพรสวรรค์</div>
                    <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 17, fontWeight: 700 }}>
                      {talents.map((talent, index) => (
                        <div key={talent.type} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                          {talentAssets[index] ? <img src={talentAssets[index]!} alt="" width={42} height={42} style={{ objectFit: "contain" }} /> : null}
                          <span style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                            <span>{talent.type}{talent.level ? ` เลเวล ${talent.level}+` : ""}</span>
                            <span style={{ color: "#b9b9c2", fontSize: 13, fontWeight: 400 }}>{talentTypeLabel(talent.type)}</span>
                          </span>
                          {index < talents.length - 1 ? <span>{talent.relationToNext === "gte" ? ">=" : ">"}</span> : null}
                        </div>
                      ))}
                    </div>
                  </div>
                ) : null}
                {profile.note ? (
                  <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
                    <div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, fontWeight: 700 }}>โน็ต</div>
                    <div style={{ display: "flex", fontSize: 14, lineHeight: 1.55 }}>{profile.note}</div>
                  </div>
                ) : null}
              </div>
            ) : null}
          </div>
        ) : null}
      </div>
      </div>
    </div>,
    {
      width: 1200,
      height,
      fonts: fonts.length ? fonts : undefined,
      headers: {
        "Cache-Control": "no-store",
        "Content-Disposition": imageContentDisposition(`${guide.guideName} อาร์ติแฟกต์`, "artifacts"),
        "Content-Type": "image/png",
      },
    },
  );
}