import { ImageResponse } from 'next/og';
import { getProductBySlug } from '@/lib/mdx';

export const runtime = 'edge';

export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug: string[] } }) {
  const productSlug = slug[slug.length - 1];
  const product = await getProductBySlug(productSlug, locale);

  if (!product) {
    return new ImageResponse(
      <div style={{ display: 'flex', width: '100%', height: '100%', backgroundColor: '#001a4d' }} />
    );
  }

  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          backgroundColor: 'white',
          padding: '60px',
          position: 'relative',
        }}
      >
        {/* Left Side: Content */}
        <div style={{ display: 'flex', flexDirection: 'column', width: '55%' }}>
          <div
            style={{
              fontSize: '20px',
              fontWeight: 'bold',
              color: '#001a4d',
              textTransform: 'uppercase',
              letterSpacing: '0.2em',
              marginBottom: '20px',
              opacity: 0.6,
            }}
          >
            KLZ Cables | {product.frontmatter.categories[0]}
          </div>
          <div
            style={{
              fontSize: '72px',
              fontWeight: '900',
              color: '#001a4d',
              lineHeight: '1.1',
              marginBottom: '30px',
            }}
          >
            {product.frontmatter.title}
          </div>
          <div
            style={{
              fontSize: '28px',
              color: '#4a5568',
              lineHeight: '1.4',
            }}
          >
            {product.frontmatter.description}
          </div>
          
          {/* Accent Line */}
          <div
            style={{
              marginTop: '40px',
              width: '100px',
              height: '8px',
              backgroundColor: '#00ff99',
              borderRadius: '4px',
            }}
          />
        </div>

        {/* Right Side: Product Image */}
        <div
          style={{
            display: 'flex',
            width: '40%',
            height: '100%',
            alignItems: 'center',
            justifyContent: 'center',
            position: 'relative',
          }}
        >
          {product.frontmatter.images?.[0] && (
            <img
              src={product.frontmatter.images[0].startsWith('http') ? product.frontmatter.images[0] : `https://klz-cables.com${product.frontmatter.images[0]}`}
              alt=""
              style={{
                maxWidth: '100%',
                maxHeight: '80%',
                objectFit: 'contain',
              }}
            />
          )}
          {/* Subtle shadow under product */}
          <div
            style={{
              position: 'absolute',
              bottom: '10%',
              width: '60%',
              height: '20px',
              backgroundColor: 'rgba(0,0,0,0.05)',
              borderRadius: '50%',
              filter: 'blur(10px)',
            }}
          />
        </div>

        {/* Branding Corner */}
        <div
          style={{
            position: 'absolute',
            bottom: '40px',
            right: '60px',
            display: 'flex',
            alignItems: 'center',
          }}
        >
          <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#001a4d' }}>KLZ</div>
          <div style={{ fontSize: '24px', fontWeight: 'normal', color: '#00ff99', marginLeft: '4px' }}>Cables</div>
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}