import React from 'react';

interface OGImageTemplateProps {
  title: string;
  description?: string;
  label?: string;
  image?: string;
  logo?: string;
  mode?: 'dark' | 'light' | 'image';
}

export function OGImageTemplate({
  title,
  description,
  label,
  image,
  logo,
  mode = 'dark',
}: OGImageTemplateProps) {
  const backgroundDark = '#1a1a1a';
  const primaryGreen = '#0e7a5c';

  const containerStyle: React.CSSProperties = {
    height: '100%',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-start',
    justifyContent: 'center',
    backgroundColor: mode === 'light' ? '#ffffff' : backgroundDark,
    padding: '80px',
    position: 'relative',
    fontFamily: 'Inter',
  };

  return (
    <div style={containerStyle}>
      {/* Background Image with Overlay */}
      {image && (
        <div
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            display: 'flex',
          }}
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={image}
            alt=""
            width="1200"
            height="630"
            style={{
              width: '100%',
              height: '100%',
              objectFit: 'cover',
            }}
          />
          <div
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              background: 'linear-gradient(135deg, rgba(26,26,26,0.98) 0%, rgba(26,26,26,0.85) 40%, rgba(14,122,92,0.4) 100%)',
            }}
          />
        </div>
      )}

      {/* Decorative Brand Accent (Top Right) */}
      <div
        style={{
          position: 'absolute',
          top: '-300px',
          right: '-200px',
          width: '800px',
          height: '1200px',
          backgroundColor: `${primaryGreen}1A`,
          transform: 'rotate(25deg)',
          display: 'flex',
        }}
      />

      <div style={{ display: 'flex', flexDirection: 'column', position: 'relative', zIndex: 10 }}>
        {/* Label / Category */}
        {label && (
          <div
            style={{
              fontSize: '24px',
              fontWeight: 700,
              color: primaryGreen,
              textTransform: 'uppercase',
              letterSpacing: '0.3em',
              marginBottom: '32px',
              display: 'flex',
            }}
          >
            {label}
          </div>
        )}

        {/* Title */}
        <div
          style={{
            fontSize: title.length > 40 ? '64px' : '82px',
            fontWeight: 700,
            color: 'white',
            lineHeight: '1.05',
            maxWidth: '950px',
            marginBottom: '40px',
            display: 'flex',
            letterSpacing: '-0.02em',
          }}
        >
          {title}
        </div>

        {/* Description */}
        {description && (
          <div
            style={{
              fontSize: '32px',
              color: 'rgba(255,255,255,0.7)',
              maxWidth: '850px',
              lineHeight: '1.4',
              display: 'flex',
              fontWeight: 400,
            }}
          >
            {description.length > 160 ? description.substring(0, 157) + '...' : description}
          </div>
        )}
      </div>

      {/* Brand Footer */}
      <div
        style={{
          position: 'absolute',
          bottom: '80px',
          left: '80px',
          display: 'flex',
          alignItems: 'center',
        }}
      >
        {logo ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={logo}
            alt="E-TIB GmbH"
            height="48"
            style={{ marginRight: '24px', objectFit: 'contain' }}
          />
        ) : (
          <div
            style={{
              width: '80px',
              height: '6px',
              backgroundColor: primaryGreen,
              borderRadius: '3px',
              marginRight: '24px',
            }}
          />
        )}
        {!logo && (
          <div
            style={{
              fontSize: '24px',
              fontWeight: 700,
              color: 'white',
              textTransform: 'uppercase',
              letterSpacing: '0.15em',
              display: 'flex',
            }}
          >
            E-TIB GmbH
          </div>
        )}
      </div>

      {/* Primary Green Brand Strip */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          right: 0,
          width: '12px',
          height: '100%',
          backgroundColor: primaryGreen,
        }}
      />
    </div>
  );
}