import { getCountryCode } from '@project/i18n';
import { getTranslations } from 'next-intl/server';
import { Inter } from 'next/font/google';
import { ImageResponse } from 'next/og';

import { ogImageSchema } from '@/lib/validations/og';

const inter = Inter({
  subsets: ['latin'],
  weight: ['400', '700'],
});

const [interRegular, interBold] = await Promise.all([
  fetch(new URL('/fonts/Inter-Regular.ttf', process.env.NEXT_BASE_URL)).then(
    (res) => res.arrayBuffer(),
  ),
  fetch(new URL('/fonts/Inter-Bold.ttf', process.env.NEXT_BASE_URL)).then(
    (res) => res.arrayBuffer(),
  ),
]);

export async function GET(req: Request) {
  try {
    const url = new URL(req.url);
    const { title, type, locale, country } = ogImageSchema.parse(
      Object.fromEntries(url.searchParams),
    );

    const t = await getTranslations({ locale, namespace: 'Og' });

    const fontSize = title.length > 80 ? '55px' : '70px';
    const paint = '#fff';

    const countryCode = country ? getCountryCode(country) : null;
    const flagUrl = countryCode
      ? `https://flagcdn.com/${countryCode}.svg`
      : null;
    let flagImage;
    if (flagUrl) {
      console.log('Fetching flag image...');
      const flagRes = await fetch(flagUrl);
      flagImage = await flagRes.arrayBuffer();
      console.log('Flag image fetched.');
    }

    console.log('Image generated. Will respond now.');

    return new ImageResponse(
      (
        <div
          tw="flex relative flex-col p-12 w-full h-full items-start text-white"
          style={{
            color: paint,
            background: 'linear-gradient(90deg, #000 0%, #111 100%)',
          }}
        >
          <div tw="flex flex-col flex-1 py-2">
            <div
              tw="flex text-3xl font-bold tracking-tight"
              style={{ fontFamily: 'Inter Bold', fontWeight: 'normal' }}
            >
              Project
            </div>
            <div
              tw="flex text-xl uppercase font-bold tracking-tight"
              style={{ fontFamily: 'Inter', fontWeight: 'normal' }}
            >
              {t(type)}
            </div>
            <div
              tw="flex leading-[1.1] text-[80px] font-bold pt-6"
              style={{
                fontFamily: 'Inter Bold',
                fontWeight: 'bold',
                marginLeft: '-3px',
                fontSize,
              }}
            >
              {title}
            </div>
          </div>
          <div tw="flex items-center w-full justify-between">
            <div
              tw="flex text-xl"
              style={{ fontFamily: 'Inter', fontWeight: 'normal' }}
            >
              project.com
            </div>
            {flagImage && (
              <img
                src={flagUrl!}
                width={96}
                height={64}
                style={{
                  borderRadius: '4px',
                  boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
                }}
              />
            )}
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 630,
        fonts: [
          {
            name: 'Inter',
            data: interRegular,
            weight: 400,
          },
          {
            name: 'Inter Bold',
            data: interBold,
            weight: 700,
          },
        ],
      },
    );
  } catch (error) {
    console.error('OG Image generation error:', error);
    return new Response(`Failed to generate image`, {
      status: 500,
    });
  }
}