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 domain = searchParams.get('domain') || 'example.com'
    const price = parseFloat(searchParams.get('price') || '0')
    const featured = searchParams.get('featured') === 'true'

    const parts = domain.split('.')
    const sld = parts[0]
    const tld = parts.slice(1).join('.')

    return new ImageResponse(
      (
        <div
          style={{
            height: '100%',
            width: '100%',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: '#0a0a0a',
            backgroundImage: featured
              ? 'radial-gradient(circle at 25% 25%, rgba(251, 191, 36, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(239, 68, 68, 0.1) 0%, transparent 50%)'
              : '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%)',
          }}
        >
          {/* Featured Badge */}
          {featured && (
            <div
              style={{
                position: 'absolute',
                top: 40,
                right: 60,
                display: 'flex',
                alignItems: 'center',
                gap: 12,
                padding: '12px 24px',
                backgroundColor: 'rgba(251, 191, 36, 0.1)',
                border: '2px solid rgba(251, 191, 36, 0.3)',
                borderRadius: 12,
              }}
            >
              <span style={{ fontSize: 28 }}>⭐</span>
              <span
                style={{
                  fontSize: 20,
                  fontWeight: 700,
                  color: '#fbbf24',
                  letterSpacing: '0.05em',
                }}
              >
                FEATURED
              </span>
            </div>
          )}

          {/* 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',
            }}
          >
            {/* Domain */}
            <div
              style={{
                display: 'flex',
                alignItems: 'baseline',
                marginBottom: 40,
              }}
            >
              <span
                style={{
                  fontSize: 96,
                  fontWeight: 900,
                  color: '#ffffff',
                  letterSpacing: '-0.04em',
                }}
              >
                {sld}
              </span>
              <span
                style={{
                  fontSize: 96,
                  fontWeight: 900,
                  color: '#10b981',
                  letterSpacing: '-0.04em',
                }}
              >
                .{tld}
              </span>
            </div>

            {/* For Sale Badge */}
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: 16,
                padding: '16px 32px',
                backgroundColor: 'rgba(16, 185, 129, 0.1)',
                borderRadius: 16,
                border: '2px solid rgba(16, 185, 129, 0.3)',
                marginBottom: 30,
              }}
            >
              <span
                style={{
                  fontSize: 28,
                  fontWeight: 700,
                  color: '#10b981',
                  letterSpacing: '0.05em',
                }}
              >
                FOR SALE
              </span>
            </div>

            {/* Price */}
            {price > 0 && (
              <div
                style={{
                  fontSize: 72,
                  fontWeight: 700,
                  color: '#ffffff',
                }}
              >
                ${price.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
              </div>
            )}
          </div>

          {/* Footer */}
          <div
            style={{
              position: 'absolute',
              bottom: 40,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              width: '100%',
              gap: 40,
            }}
          >
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: 12,
              }}
            >
              <div
                style={{
                  width: 8,
                  height: 8,
                  borderRadius: '50%',
                  backgroundColor: '#10b981',
                }}
              />
              <span
                style={{
                  fontSize: 24,
                  color: '#71717a',
                }}
              >
                Instant Transfer
              </span>
            </div>

            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: 12,
              }}
            >
              <div
                style={{
                  width: 8,
                  height: 8,
                  borderRadius: '50%',
                  backgroundColor: '#10b981',
                }}
              />
              <span
                style={{
                  fontSize: 24,
                  color: '#71717a',
                }}
              >
                0% Commission
              </span>
            </div>

            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: 12,
              }}
            >
              <div
                style={{
                  width: 8,
                  height: 8,
                  borderRadius: '50%',
                  backgroundColor: '#10b981',
                }}
              />
              <span
                style={{
                  fontSize: 24,
                  color: '#71717a',
                }}
              >
                Secure Escrow
              </span>
            </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,
    })
  }
}

