import { ImageResponse } from 'next/og';
import { t } from '@/i18n';
import { api, safe } from '@/lib/api';
import { compact, grouped } from '@/lib/format';
import { OG_INK2, OG_INK3, OG_SIZE_H, OG_SIZE_W, OgFigures, OgFrame, OgWordmark } from './og-shared';

export const alt = 'CountryAtlas — Explore the world through data.';
export const size = { width: OG_SIZE_W, height: OG_SIZE_H };
export const contentType = 'image/png';
export const revalidate = 3600;

/** Default share card: dark editorial "wallpaper" with the world map, wordmark, tagline and the live headline counts. */
export default async function OpenGraphImage() {
  const home = await safe(api.home());
  const s = home?.snapshot;
  const figures = [
    { label: t('og.countries'), value: grouped(s?.n_countries ?? 218) },
    { label: t('og.indicators'), value: `${grouped(s?.n_indicators ?? 260)}+` },
    { label: t('og.observations'), value: s?.n_observations ? compact(s.n_observations, 2) : '2M+' },
    { label: t('og.sources'), value: grouped(s?.n_sources ?? 9) },
  ];
  return new ImageResponse(
    (
      <OgFrame map>
        <OgWordmark size={40} />
        <div style={{ display: 'flex', flexDirection: 'column', marginTop: 'auto', maxWidth: 760 }}>
          <div style={{ fontSize: 66, lineHeight: 1.05, fontWeight: 600, letterSpacing: -1.8, display: 'flex' }}>{t('site.tagline')}</div>
          <div style={{ marginTop: 18, fontSize: 26, color: OG_INK2, lineHeight: 1.35, display: 'flex' }}>{t('og.sub')}</div>
          <div style={{ marginTop: 34, display: 'flex' }}>
            <OgFigures items={figures} />
          </div>
        </div>
        <div style={{ position: 'absolute', left: 64, bottom: 24, fontSize: 20, color: OG_INK3, display: 'flex' }}>{t('og.site')}</div>
      </OgFrame>
    ),
    { ...size },
  );
}