import { ImageResponse } from 'next/og'
import { NextRequest } from 'next/server'

export const runtime = 'edge'

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const tld = searchParams.get('tld') || 'com'
    const price = parseFloat(searchParams.get('price') || '0')
    const trend = parseFloat(searchParams.get('trend') || '0')

    const trendText = trend > 0 ? `+${trend.toFixed(1)}%` : `${trend.toFixed(1)}%`
    const trendColor = trend > 0 ? '#ef4444' : '#10b981'

    return new ImageResponse(
      (
        <div
          style={{
            height: '100%',
            width: '100%',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: '#0a0a0a',
            backgroundImage: 'radial-gradient(circle at 25% 25%, rgba(16, 185, 129, 0.05) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(59, 130, 246, 0.05) 0%, transparent 50%)',
          }}
        >
          {/* Logo/Brand */}
          <div
            style={{
              position: 'absolute',
              top: 40,
              left: 60,
              display: 'flex',
              alignItems: 'center',
              gap: 16,
            }}
          >
            <div
              style={{
                width: 48,
                height: 48,
                borderRadius: '50%',
                background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 28,
              }}
            >
              🐆
            </div>
            <span
              style={{
                fontSize: 32,
                fontWeight: 700,
                color: '#ffffff',
                letterSpacing: '-0.02em',
              }}
            >
              Pounce
            </span>
          </div>

          {/* Main Content */}
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              padding: '60px',
            }}
          >
            {/* TLD */}
            <div
              style={{
                fontSize: 120,
                fontWeight: 900,
                color: '#ffffff',
                letterSpacing: '-0.04em',
                marginBottom: 20,
              }}
            >
              .{tld.toUpperCase()}
            </div>

            {/* Price */}
            <div
              style={{
                fontSize: 64,
                fontWeight: 700,
                color: '#10b981',
                marginBottom: 30,
              }}
            >
              ${price.toFixed(2)}
            </div>

            {/* Trend */}
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: 16,
                padding: '16px 32px',
                backgroundColor: 'rgba(255, 255, 255, 0.05)',
                borderRadius: 16,
                border: '1px solid rgba(255, 255, 255, 0.1)',
              }}
            >
              <span
                style={{
                  fontSize: 28,
                  color: '#a1a1aa',
                }}
              >
                1Y Trend:
              </span>
              <span
                style={{
                  fontSize: 36,
                  fontWeight: 700,
                  color: trendColor,
                }}
              >
                {trendText}
              </span>
            </div>
          </div>

          {/* Footer */}
          <div
            style={{
              position: 'absolute',
              bottom: 40,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              width: '100%',
            }}
          >
            <div
              style={{
                fontSize: 24,
                color: '#71717a',
                letterSpacing: '0.02em',
              }}
            >
              Domain Intelligence • Real-time Market Data
            </div>
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 630,
      }
    )
  } catch (e: any) {
    console.log(`Failed to generate image: ${e.message}`)
    return new Response(`Failed to generate image`, {
      status: 500,
    })
  }
}