import { ImageResponse } from 'next/og';
import { isLocale } from '@/i18n';
import { getSegmentData } from '@/data/segments';

export const runtime = 'edge';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

export default function Image({ params }: { params: { lang: string; segment: string } }) {
  const lang = isLocale(params.lang) ? params.lang : 'fr';
  const data = getSegmentData(params.segment);
  const badge = data?.translations[lang].hero.badge ?? 'MyInfoMate';
  const title = data?.meta[lang].title ?? 'MyInfoMate';
  const description = data?.meta[lang].description ?? '';

  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          background: 'linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0f172a 100%)',
          fontFamily: 'system-ui, sans-serif',
          position: 'relative',
          overflow: 'hidden',
        }}
      >
        {/* Cyan glow top-left */}
        <div
          style={{
            position: 'absolute',
            top: '-120px',
            left: '-80px',
            width: '600px',
            height: '600px',
            borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(13,242,223,0.18) 0%, transparent 65%)',
          }}
        />
        {/* Purple glow bottom-right */}
        <div
          style={{
            position: 'absolute',
            bottom: '-160px',
            right: '-80px',
            width: '700px',
            height: '700px',
            borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(139,92,246,0.14) 0%, transparent 65%)',
          }}
        />

        {/* Content */}
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            textAlign: 'center',
            padding: '0 80px',
            zIndex: 1,
          }}
        >
          {/* Segment badge */}
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '10px',
              padding: '10px 24px',
              borderRadius: '999px',
              background: 'rgba(13,242,223,0.1)',
              border: '1px solid rgba(13,242,223,0.3)',
              marginBottom: '36px',
            }}
          >
            <div style={{ width: '10px', height: '10px', borderRadius: '50%', background: '#0df2df' }} />
            <span
              style={{
                color: '#0df2df',
                fontSize: '18px',
                fontWeight: 700,
                letterSpacing: '0.08em',
                textTransform: 'uppercase',
              }}
            >
              {badge}
            </span>
          </div>

          {/* Product name */}
          <div
            style={{
              fontSize: '72px',
              fontWeight: 900,
              color: '#ffffff',
              lineHeight: 1,
              marginBottom: '28px',
              letterSpacing: '-0.03em',
            }}
          >
            MyInfoMate
          </div>

          {/* Page title */}
          <div
            style={{
              fontSize: '26px',
              color: '#94a3b8',
              lineHeight: 1.4,
              maxWidth: '860px',
              marginBottom: '0px',
              display: '-webkit-box',
              WebkitLineClamp: 2,
              overflow: 'hidden',
            }}
          >
            {title.replace(' | MyInfoMate', '').replace(' — MyInfoMate', '')}
          </div>
        </div>

        {/* Bottom URL */}
        <div
          style={{
            position: 'absolute',
            bottom: '36px',
            color: '#475569',
            fontSize: '22px',
            fontWeight: 600,
            letterSpacing: '0.02em',
          }}
        >
          myinfomate.be
        </div>
      </div>
    ),
    { ...size }
  );
}