import { ImageResponse } from 'next/og';

// Session 60 (night2/G, 6.3) — every shared player link unfurls as an
// intelligence card. Self-hosted standalone build → Node runtime (NOT edge;
// Session-53 rule — next/og breaks under edge off Vercel).
export const alt = 'VYNDR Player Intelligence';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

export default async function Image({ params }: { params: Promise<{ name: string }> }) {
  const { name } = await params;
  const player = decodeURIComponent(name || '').slice(0, 40) || 'Player';
  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          width: '100%',
          height: '100%',
          background: '#06060B',
          color: '#E8E8F0',
          padding: 72,
          fontFamily: 'monospace',
        }}
      >
        <div style={{ display: 'flex', position: 'absolute', top: 0, left: 0, right: 0, height: 6, background: '#00D4A0' }} />
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', fontSize: 26, letterSpacing: '0.22em', color: '#00D4A0', fontWeight: 700 }}>
            PLAYER INTELLIGENCE
          </div>
          <div style={{ display: 'flex', fontSize: 84, fontWeight: 900, letterSpacing: '-0.02em', marginTop: 18, color: '#FFFFFF' }}>
            {player}
          </div>
          <div style={{ display: 'flex', fontSize: 28, color: '#7A7A8E', marginTop: 20 }}>
            Archetype DNA · Active streaks · Prop DNA · Settled record
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', fontSize: 44, fontWeight: 900, letterSpacing: '0.08em' }}>
            <span style={{ color: '#FFFFFF' }}>VYND</span>
            <span style={{ color: '#00D4A0' }}>R</span>
          </div>
          <div style={{ display: 'flex', fontSize: 22, color: '#4A4A5E', letterSpacing: '0.12em' }}>
            EVERY NUMBER WITH CONTEXT
          </div>
        </div>
      </div>
    ),
    { ...size },
  );
}