/** تصویر اشتراک‌گذاری هر محصول: تصویر برداری محصول + نام لاتین برند + لوگو */
import { ImageResponse } from "next/og";
import { ProductArt } from "@/components/product/ProductArt";
import { site } from "@/lib/site";
import { getProductById } from "@/server/services/catalog";
import { flatten, photoDataUri, OG_HEADERS, OG_SIZE, wordmarkDataUri } from "../../shared";

export const revalidate = 3600;

export async function GET(_req: Request, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const data = /^\d{1,9}$/.test(id) ? await getProductById(Number(id)) : undefined;
  if (!data) return new Response("Not found", { status: 404 });
  const { product, brand } = data;
  const tone = product.variants.find((v) => v.colorHex)?.colorHex ?? product.tone;
  const [logo, photo] = await Promise.all([wordmarkDataUri(), product.images[0] ? photoDataUri(product.images[0].url) : undefined]);

  return new ImageResponse(
    (
      <div style={{ width: "100%", height: "100%", display: "flex", background: "#ffffff" }}>
        <div style={{ width: 630, height: 630, display: "flex", alignItems: "center", justifyContent: "center", background: "#f3f3f1" }}>
          {photo ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={photo} width={630} height={630} alt="" />
          ) : (
            flatten(<ProductArt shape={product.shape} tone={tone} label="ZAHORA" size={540} />)
          )}
        </div>
        <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "space-between", padding: "64px 56px" }}>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src={logo} width={300} height={44} alt="" />
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div style={{ fontSize: 64, fontWeight: 700, letterSpacing: 4, color: "#0b0b0b" }}>{brand.nameEn}</div>
          </div>
          <div style={{ fontSize: 24, color: "#6b6b68" }}>{new URL(site.url).host}</div>
        </div>
      </div>
    ),
    { ...OG_SIZE, headers: OG_HEADERS },
  );
}