import { ImageResponse } from "next/og";

export const size = { width: 64, height: 64 };
export const contentType = "image/png";

/**
 * The mark on a rounded mill night tile.
 *
 * The tile matters as much as the mark here. A browser tab, a bookmark bar and
 * a phone home screen all sit the icon against an unknown background, and a
 * rounded dark plate keeps the gold thread readable on every one of them.
 *
 * Colours are literal rather than currentColor: this is rendered by Satori on
 * the server, with no cascade to inherit from.
 */

/**
 * A compact variant of the mark for the tile.
 *
 * The header lockup is roughly two to one, which leaves a square icon mostly
 * empty. Pulling the outer stars in and dropping them lower gives a triangular
 * arrangement that fills the plate while saying exactly the same thing: three
 * stars on one thread, apex highest.
 */
const THREAD = [
  "M1 37",
  "C 4 37, 7 31, 11 28",
  "C 15 24.5, 19 11, 24 11",
  "C 29 11, 33 24.5, 37 28",
  "C 41 31, 44 37, 47 37",
].join(" ");

const STARS = [
  { cx: 11, cy: 28, r: 6 },
  { cx: 24, cy: 11, r: 8 },
  { cx: 37, cy: 28, r: 6 },
];

export default function Icon() {
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          // Transparent outside the tile, so the rounded corners actually read
          // as rounded rather than as dark corners on a dark browser theme.
          background: "transparent",
        }}
      >
        <div
          style={{
            width: 64,
            height: 64,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            borderRadius: 16,
            background: "#0d1424",
            // A hairline lifts the tile off very dark chrome.
            border: "1px solid rgba(224,164,88,0.18)",
          }}
        >
          <svg width="48" height="42" viewBox="0 1 48 42" fill="none">
            <defs>
              <linearGradient id="icon-thread" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0%" stopColor="#e0a458" stopOpacity="0" />
                <stop offset="22%" stopColor="#e0a458" stopOpacity="0.55" />
                <stop offset="78%" stopColor="#e0a458" stopOpacity="0.55" />
                <stop offset="100%" stopColor="#e0a458" stopOpacity="0" />
              </linearGradient>
            </defs>

            <path
              d={THREAD}
              stroke="url(#icon-thread)"
              strokeWidth="1.8"
              strokeLinecap="round"
            />

            {STARS.map((star) => (
              <path
                key={star.cx}
                d={starPath(star.cx, star.cy, star.r, star.r * 0.42)}
                fill="#e0a458"
              />
            ))}
          </svg>
        </div>
      </div>
    ),
    size,
  );
}

function starPath(cx: number, cy: number, outer: number, inner: number): string {
  const points: string[] = [];
  for (let i = 0; i < 10; i++) {
    const radius = i % 2 === 0 ? outer : inner;
    const angle = (Math.PI / 5) * i - Math.PI / 2;
    points.push(
      `${(cx + radius * Math.cos(angle)).toFixed(2)} ${(cy + radius * Math.sin(angle)).toFixed(2)}`,
    );
  }
  return `M${points.join(" L")} Z`;
}