import { ImageResponse } from 'next/og';
import type { NextRequest } from 'next/server';
import { t } from '@/i18n';
import { api, safe } from '@/lib/api';
import { splitCompareSlugs } from '@/lib/compare-state';
import { OG_INK2, OG_INK3, OG_RULE, OG_SIZE_H, OG_SIZE_W, OgFrame, OgWordmark } from '../../og-shared';

export const revalidate = 3600;

/**
 * Social image for /compare/a/b/c — `GET /compare/og?slugs=canada,united-states,france`.
 * (A file-convention `opengraph-image` cannot live under a catch-all segment, so the page's metadata points here.)
 */
export async function GET(req: NextRequest) {
  const raw = req.nextUrl.searchParams.get('slugs') ?? '';
  const list = await safe(api.countries());
  const bySlug = new Map((list?.items ?? []).flatMap((c) => [[c.slug ?? '', c] as const, [c.id.toLowerCase(), c] as const]));
  const wanted = splitCompareSlugs(raw.split('/'));
  const countries = wanted.map((s) => bySlug.get(s)).filter((c): c is NonNullable<typeof c> => !!c);
  const names = countries.length ? countries.map((c) => c.name ?? c.id) : wanted.map((s) => s.replace(/-/g, ' '));
  const flagSize = countries.length > 5 ? 84 : countries.length > 3 ? 108 : 132;
  const nameSize = names.join('').length > 40 ? 40 : 56;
  return new ImageResponse(
    (
      <OgFrame>
        <OgWordmark size={28} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 20, marginTop: 44, flexWrap: 'wrap' }}>
          {countries.map((c) => (
            <div key={c.id} style={{ fontSize: flagSize, lineHeight: 1, display: 'flex' }}>
              {c.flag ?? ''}
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'baseline', marginTop: 28, fontSize: nameSize, fontWeight: 600, letterSpacing: -1, lineHeight: 1.1 }}>
          {names.map((n, i) => (
            <div key={n} style={{ display: 'flex', alignItems: 'baseline' }}>
              {i > 0 ? <span style={{ color: OG_INK3, fontSize: nameSize * 0.6, fontWeight: 400, margin: '0 14px' }}>{t('compare.vs')}</span> : null}
              <span>{n}</span>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', marginTop: 'auto', paddingTop: 20, borderTop: `1px solid ${OG_RULE}`, fontSize: 24, color: OG_INK2 }}>
          {t('compare.title')} · {t('home.compare.sub')}
        </div>
        <div style={{ position: 'absolute', right: 64, bottom: 24, fontSize: 20, color: OG_INK3 }}>{t('og.site')}</div>
      </OgFrame>
    ),
    { width: OG_SIZE_W, height: OG_SIZE_H },
  );
}