import { readFile } from "node:fs/promises";
import { join } from "node:path";
import { ImageResponse } from "next/og";
import { BRAND_HEX, SITE_NAME } from "@/lib/seo";

/**
 * The default social card for every route that does not define its own.
 * Rendered at build/request time by Satori — no binary asset to keep in sync.
 */
export const alt = `${SITE_NAME} — from a topic idea to a finished podcast in minutes`;
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

/**
 * The real brand mark, inlined as a data URI. Satori cannot fetch a relative URL
 * (there is no origin while rendering), so the PNG is read off disk and embedded.
 */
async function brandMarkDataUri() {
  const file = await readFile(join(process.cwd(), "app", "icon.png"));
  return `data:image/png;base64,${file.toString("base64")}`;
}

export default async function OpengraphImage() {
  const mark = await brandMarkDataUri();

  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          background: "#0d0d0d",
          padding: 72,
        }}
      >
        {/* Brand accent — a soft corner glow. Satori has no blur filter, so the
            falloff is a radial gradient rather than an opaque disc, which would
            otherwise cut a hard edge straight through the headline. */}
        <div
          style={{
            position: "absolute",
            top: -340,
            right: -300,
            width: 900,
            height: 900,
            borderRadius: 9999,
            background: `radial-gradient(circle, ${BRAND_HEX}cc 0%, ${BRAND_HEX}33 45%, ${BRAND_HEX}00 70%)`,
            display: "flex",
          }}
        />

        <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src={mark} alt="" width={64} height={64} />
          <div style={{ display: "flex", fontSize: 30, fontWeight: 700, color: "#ffffff" }}>
            {SITE_NAME}
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          <div
            style={{
              display: "flex",
              fontSize: 76,
              fontWeight: 800,
              lineHeight: 1.08,
              letterSpacing: -2,
              color: "#ffffff",
              maxWidth: 940,
            }}
          >
            From a topic idea to a finished podcast in minutes
          </div>
          <div style={{ display: "flex", fontSize: 30, color: "#a3a3a3", maxWidth: 900 }}>
            AI writes the script, records multi-voice audio, and designs the cover art.
          </div>
        </div>

        <div style={{ display: "flex", fontSize: 26, color: BRAND_HEX, fontWeight: 600 }}>
          Script · Voice · Cover art — one workflow
        </div>
      </div>
    ),
    size
  );
}