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

export const runtime = 'edge'

// Génération d'images Open Graph dynamiques pour les articles de blog
export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const title = searchParams.get('title')?.slice(0, 100) ?? 'fsociety - Expert IT Sénégal'
    const category = searchParams.get('category') ?? 'IT'

    return new ImageResponse(
      (
        <div
          style={{
            background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)',
            width: '100%',
            height: '100%',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            fontFamily: 'Inter, sans-serif',
            position: 'relative',
            overflow: 'hidden',
          }}
        >
          {/* Background elements */}
          <div
            style={{
              position: 'absolute',
              top: '10%',
              left: '10%',
              width: '300px',
              height: '300px',
              borderRadius: '50%',
              background: 'rgba(254, 159, 0, 0.1)',
              filter: 'blur(30px)',
            }}
          />
          <div
            style={{
              position: 'absolute',
              bottom: '10%',
              right: '10%',
              width: '200px',
              height: '200px',
              borderRadius: '50%',
              background: 'rgba(204, 127, 0, 0.1)',
              filter: 'blur(30px)',
            }}
          />

          {/* Logo/Brand */}
          <div
            style={{
              position: 'absolute',
              top: '40px',
              left: '40px',
              display: 'flex',
              alignItems: 'center',
              gap: '10px',
            }}
          >
            <div
              style={{
                width: '40px',
                height: '40px',
                borderRadius: '8px',
                background: 'linear-gradient(135deg, #fe9f00, #cc7f00)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '20px',
              }}
            >
              💻
            </div>
            <div
              style={{
                fontSize: '24px',
                fontWeight: 'bold',
                color: '#fe9f00',
              }}
            >
              fsociety
            </div>
          </div>

          {/* Category badge */}
          <div
            style={{
              position: 'absolute',
              top: '40px',
              right: '40px',
              padding: '12px 24px',
              background: '#fe9f00',
              borderRadius: '25px',
              fontSize: '16px',
              fontWeight: '600',
              color: 'white',
            }}
          >
            {category}
          </div>

          {/* Main content */}
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              textAlign: 'center',
              maxWidth: '900px',
              padding: '0 60px',
            }}
          >
            <h1
              style={{
                fontSize: '56px',
                fontWeight: 'bold',
                color: 'white',
                lineHeight: '1.1',
                marginBottom: '30px',
                textShadow: '0 2px 10px rgba(0, 0, 0, 0.3)',
              }}
            >
              {title}
            </h1>

            <div
              style={{
                fontSize: '20px',
                color: 'rgba(255, 255, 255, 0.8)',
                marginBottom: '40px',
              }}
            >
              Expert en solutions informatiques au Sénégal 🇸🇳
            </div>

            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: '30px',
                fontSize: '16px',
                color: 'rgba(255, 255, 255, 0.7)',
              }}
            >
              <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                📍 Dakar, Sénégal
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                📞 +221 75 221 21 46
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                🌐 fsociety.sn
              </div>
            </div>
          </div>

          {/* Bottom decorative element */}
          <div
            style={{
              position: 'absolute',
              bottom: '0',
              left: '0',
              right: '0',
              height: '4px',
              background: 'linear-gradient(90deg, #fe9f00, #cc7f00, #fe9f00)',
            }}
          />
        </div>
      ),
      {
        width: 1200,
        height: 630,
      },
    )
  } catch (e: any) {
    console.log(`${e.message}`)
    return new Response(`Failed to generate image`, {
      status: 500,
    })
  }
}