export async function generateMetadata({
  searchParams,
}: Props): Promise<Metadata> {
  const id = searchParams?.id || '1';
  const [user] = await api.user(id);

  return {
    openGraph: {
      title: user.name,
      images: [`/api/user-image?id=${id}`],
    },
  };
}

export const runtime = 'edge';

export async function GET(request: Request) {
  const { searchParams, origin } = new URL(request.url);
  const id = searchParams.get('id');

  if (!id) return new Response('Missing id', { status: 400 });

  let user;

  try {
    user = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`).then(
      (res) => res.json(),
    );
  } catch (error) {
    console.error(error);
    return new Response('Error', { status: 500 });
  }

  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          textAlign: 'center',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <span
          style={{ fontFamily: 'Righteous', color: stringToColour(user.name) }}
        >
          {user.name}
        </span>
        <span style={{ position: 'absolute', top: 0, left: 20 }}>🤯</span>
        <span style={{ position: 'absolute', top: 0, right: 20 }}>🥳</span>
        <span
          style={{ position: 'absolute', bottom: 10, left: 10, fontSize: 14 }}
        >
          {id}
        </span>
        <svg
          style={{ position: 'absolute', bottom: 20, right: 20 }}
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 170 61"
          width="170px"
          height="61px"
        >
          <path
            fillRule="evenodd"
            fill="black"
            d="M14.959 59.996L7.05 50.543H5.742v9.461H.001V38.907l5.14-6.566h6.347c2.227 0 4.252.658 5.858 1.926 1.582 1.247 2.702 3.037 3.155 5.32.34 1.718.238 3.492-.323 5.095-.557 1.591-1.546 3.017-2.982 4.076l-.003-.005a8.71 8.71 0 0 1-2.943 1.427l8.213 9.816h-7.504zm45.979 0l-6.535-18.254-6.684 18.254h-6.111l10.129-27.668 5.383.024 9.897 27.644h-6.079zm-21.465 0H24.161l-.02-20.914 5.141-6.742h10.735v5.818H32.08l-2.218 2.907.002 2.451h9.609v5.818h-9.604l.005 4.843h9.599v5.819zm111.681-27.647l-9.871 27.652h-5.382l-9.838-27.652h6.075l6.458 18.153 6.48-18.153h6.078zm-51.46 27.645v-21.85h-8.686V32.34h23.113v5.804h-8.685v21.85h-5.742zm17.681-.002V32.341h5.742v27.651h-5.742zm52.071.007h-17.694l-.02-20.92 5.167-6.739h13.095v5.788h-10.298l-2.243 2.926.003 2.478h11.99v5.788h-11.985l.005 4.89h11.98v5.789zm-53.557-54.02h-8.094c-1.497 0-4.194.753-4.175 2.614.025 2.467 2.661 2.489 4.572 2.682 1.494.152 3.272.348 4.94 1.019 2.113.851 3.85 2.333 4.444 5.027.698 3.158-.312 6.088-2.82 8.143-1.909 1.565-4.501 2.381-6.896 2.381h-8.094v-5.784h8.094c1.448 0 3.887-.51 4.161-2.411.107-.741-.113-1.637-1.019-2.001-.944-.38-2.259-.523-3.371-.634-3.527-.358-7.451-1.134-9.061-4.766-.771-1.737-.886-3.988-.339-5.808 1.245-4.133 5.505-6.245 9.564-6.245h8.094v5.783zM79.119.19l.001 18.75c0 .857.388 1.525.97 1.998.917.745 2.26 1.12 3.565 1.12v.01l5.681-.001V.19h5.741v27.656l-11.422.004v.011c-2.496 0-5.177-.805-7.153-2.411-1.872-1.522-3.123-3.693-3.123-6.51V.19h5.74zM0 27.846V6.892L5.273.19h10.962v5.811H8.026L5.741 8.905v2.735h9.24v5.805h-9.24v10.401H0zM37.817 8.272a7.982 7.982 0 0 0-5.695-2.385 8.04 8.04 0 0 0-1.92.222 7.61 7.61 0 0 0-1.275.44l-4.734 6.01a8.414 8.414 0 0 0-.125 1.47 8.16 8.16 0 0 0 2.359 5.757 7.99 7.99 0 0 0 5.695 2.384 7.99 7.99 0 0 0 5.695-2.384 8.158 8.158 0 0 0 2.359-5.757 8.155 8.155 0 0 0-2.359-5.757zM32.122-.015c3.836 0 7.309 1.573 9.822 4.114a14.076 14.076 0 0 1 4.07 9.93c0 3.877-1.556 7.388-4.07 9.929-2.513 2.541-5.986 4.114-9.822 4.114-3.835 0-7.309-1.573-9.822-4.114-3.873-3.915-4.78-8.865-3.462-14.055l6.344-8.054c1.226-.645 2.289-1.121 3.652-1.457a13.726 13.726 0 0 1 3.288-.407zM70.11 27.844c-2.726 0-5.548.058-8.249-.005-3.646-.086-6.94-1.617-9.343-4.047a13.856 13.856 0 0 1-4.007-9.776c0-3.818 1.531-7.275 4.007-9.779C54.993 1.736 58.412.188 62.189.188h7.921v5.804h-7.921a7.875 7.875 0 0 0-5.613 2.349 8.05 8.05 0 0 0-2.324 5.675 8.05 8.05 0 0 0 2.324 5.674 7.917 7.917 0 0 0 4.105 2.205c1.161.224 2.534.156 3.71.155h5.718l.001 5.794zm17.644 32.153c-2.726 0-5.547.058-8.248-.006-3.647-.085-6.941-1.616-9.344-4.046a13.861 13.861 0 0 1-4.006-9.777c0-3.818 1.53-7.276 4.006-9.778 2.475-2.502 5.894-4.05 9.671-4.05h7.921v5.804h-7.921a7.864 7.864 0 0 0-5.612 2.35 8.04 8.04 0 0 0-2.324 5.674c0 2.215.888 4.222 2.324 5.674a7.895 7.895 0 0 0 4.104 2.204c1.161.225 2.535.157 3.711.157l5.718-.001v5.795zM5.742 44.703h5.753c.509 0 .973-.062 1.379-.185.361-.112.677-.265.936-.46l.022-.022c.451-.333.764-.786.941-1.293a3.863 3.863 0 0 0 .121-2.016c-.164-.828-.535-1.45-1.047-1.853-.579-.457-1.395-.693-2.359-.693H7.894l-2.152 2.748v3.774z"
          ></path>
        </svg>
      </div>
    ),
    {
      width: 1200,
      height: 600,
      fonts: [
        {
          name: 'Righteous',
          data: await getFont({ origin }),
          weight: 400,
          style: 'normal',
        },
      ],
    },
  );
}

function getFont({ origin }: { origin: string }) {
  return fetch(`${origin}/fonts/Righteous-Regular.ttf`).then((res) =>
    res.arrayBuffer(),
  );
}