// lib/og-image-component.tsx
import { OgImageParams } from './og-image-generator';

interface OgImageComponentProps {
  params: OgImageParams;
  baseUrl: string;
}

export function OgImageComponent({ params, baseUrl }: OgImageComponentProps) {
  const { showAmsoilLogo, dealerLogoUrl, businessName, contactName, location, heroImageUrl } =
    params;

  // Resolve relative URLs to absolute (validates protocol to prevent injection)
  const resolveUrl = (url: string) => {
    if (url.startsWith('https://') || url.startsWith('http://')) return url;
    if (url.startsWith('/')) return `${baseUrl}${url}`;
    return `${baseUrl}/${url}`;
  };

  const amsoilLogoUrl = resolveUrl('/images/logo/amsoil-logo.png');
  const backgroundUrl = resolveUrl(heroImageUrl);

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        position: 'relative',
      }}
    >
      {/* Background Hero Image */}
      {/* eslint-disable-next-line @next/next/no-img-element -- OG image rendering (Satori) requires native <img>, not Next.js <Image /> */}
      <img
        src={backgroundUrl}
        alt=""
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          objectFit: 'cover',
        }}
      />

      {/* Dark overlay for text contrast */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          background:
            'linear-gradient(135deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.4) 100%)',
        }}
      />

      {/* Top-Left Stack: AMSOIL Logo, Dealer Logo, Business Name */}
      <div
        style={{
          position: 'absolute',
          top: '40px',
          left: '40px',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-start',
          gap: '12px',
        }}
      >
        {/* AMSOIL Logo */}
        {showAmsoilLogo && (
          /* eslint-disable-next-line @next/next/no-img-element -- OG image rendering (Satori) requires native <img> */
          <img
            src={amsoilLogoUrl}
            alt="AMSOIL"
            style={{
              height: '50px',
              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.5))',
            }}
          />
        )}

        {/* Dealer Logo */}
        {dealerLogoUrl && (
          /* eslint-disable-next-line @next/next/no-img-element -- OG image rendering (Satori) requires native <img> */
          <img
            src={resolveUrl(dealerLogoUrl)}
            alt=""
            style={{
              maxHeight: '40px',
              maxWidth: '150px',
              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.5))',
            }}
          />
        )}

        {/* Business Name */}
        <div
          style={{
            display: 'flex',
            padding: '8px 16px',
            backgroundColor: 'rgba(0,0,0,0.6)',
            borderRadius: '4px',
          }}
        >
          <span
            style={{
              color: 'white',
              fontSize: '28px',
              fontWeight: 'bold',
              textShadow: '0 2px 4px rgba(0,0,0,0.5)',
            }}
          >
            {businessName}
          </span>
        </div>
      </div>

      {/* Bottom-Right Stack: Contact Name, Location */}
      {(contactName || location) && (
        <div
          style={{
            position: 'absolute',
            bottom: '40px',
            right: '40px',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'flex-end',
            gap: '8px',
          }}
        >
          {/* Contact Name */}
          {contactName && (
            <div
              style={{
                display: 'flex',
                padding: '6px 12px',
                backgroundColor: 'rgba(0,0,0,0.6)',
                borderRadius: '4px',
              }}
            >
              <span
                style={{
                  color: 'white',
                  fontSize: '20px',
                  textShadow: '0 2px 4px rgba(0,0,0,0.5)',
                }}
              >
                {contactName}
              </span>
            </div>
          )}

          {/* Location Badge */}
          {location && (
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: '6px',
                padding: '8px 16px',
                backgroundColor: 'rgba(0,0,0,0.6)',
                borderRadius: '4px',
              }}
            >
              <span style={{ fontSize: '18px' }}>📍</span>
              <span
                style={{
                  color: 'white',
                  fontSize: '22px',
                  fontWeight: '500',
                  textShadow: '0 2px 4px rgba(0,0,0,0.5)',
                }}
              >
                {location}
              </span>
            </div>
          )}
        </div>
      )}
    </div>
  );
}