import { ImageResponse } from 'next/og';
import { getPostBySlug } from '@/lib/blog';

export const runtime = 'nodejs';

export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug: string } }) {
  const post = await getPostBySlug(slug, locale);

  if (!post) {
    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: 'column',
          alignItems: 'flex-start',
          justifyContent: 'flex-end',
          backgroundColor: '#001a4d',
          padding: '80px',
          position: 'relative',
        }}
      >
        {/* Background Image Overlay if available */}
        {post.frontmatter.featuredImage && (
          <img
            src={post.frontmatter.featuredImage.startsWith('http') ? post.frontmatter.featuredImage : `https://klz-cables.com${post.frontmatter.featuredImage}`}
            alt=""
            style={{
              position: 'absolute',
              inset: 0,
              width: '100%',
              height: '100%',
              objectFit: 'cover',
              opacity: 0.4,
            }}
          />
        )}
        
        {/* Gradient Overlay */}
        <div
          style={{
            position: 'absolute',
            inset: 0,
            background: 'linear-gradient(to top, rgba(0,26,77,1) 0%, rgba(0,26,77,0.4) 100%)',
          }}
        />

        <div style={{ display: 'flex', flexDirection: 'column', position: 'relative', zIndex: 10 }}>
          {post.frontmatter.category && (
            <div
              style={{
                fontSize: '20px',
                fontWeight: 'bold',
                color: '#00ff99',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
                marginBottom: '16px',
                backgroundColor: 'rgba(0,255,153,0.1)',
                padding: '4px 12px',
                borderRadius: '4px',
              }}
            >
              {post.frontmatter.category}
            </div>
          )}
          <div
            style={{
              fontSize: '64px',
              fontWeight: '900',
              color: 'white',
              lineHeight: '1.1',
              maxWidth: '900px',
              marginBottom: '24px',
            }}
          >
            {post.frontmatter.title}
          </div>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <div
              style={{
                fontSize: '24px',
                color: 'rgba(255,255,255,0.6)',
                fontWeight: '500',
              }}
            >
              KLZ Cables Blog
            </div>
            <div style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: '#00ff99', margin: '0 16px' }} />
            <div
              style={{
                fontSize: '24px',
                color: 'rgba(255,255,255,0.6)',
              }}
            >
              {new Date(post.frontmatter.date).toLocaleDateString(locale, { year: 'numeric', month: 'long', day: 'numeric' })}
            </div>
          </div>
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}