import { useEffect, useRef } from 'react';

interface AdSenseAdProps {
  adSlot: string;
  adFormat?: 'auto' | 'rectangle' | 'vertical' | 'horizontal';
  width?: number;
  height?: number;
  mobileWidth?: number;
  mobileHeight?: number;
  className?: string;
  lazy?: boolean;
}

export default function AdSenseAd({ 
  adSlot, 
  adFormat = 'auto',
  width,
  height,
  mobileWidth,
  mobileHeight,
  className = '',
  lazy = false
}: AdSenseAdProps) {
  const adRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const initializeAd = () => {
      const insElement = adRef.current?.querySelector('ins');
      if (!insElement || insElement.dataset.adsbygoogleStatus === 'done') return;

      try {
        // @ts-ignore
        (window.adsbygoogle = window.adsbygoogle || []).push({});
      } catch (error) {
        console.error('AdSense initialization error:', error);
      }
    };

    if (lazy) {
      // Lazy load with IntersectionObserver
      const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              initializeAd();
              observer.disconnect();
            }
          });
        },
        { threshold: 0.1 }
      );

      if (adRef.current) {
        observer.observe(adRef.current);
      }

      return () => observer.disconnect();
    } else {
      // Immediate initialization
      initializeAd();
    }
  }, [adSlot, lazy]);

  // Responsive configuration
  const hasResponsiveSizes = (width && height) || (mobileWidth && mobileHeight);
  
  if (hasResponsiveSizes) {
    // Responsive ads with different sizes for desktop/mobile
    return (
      <div 
        className={`adsense-wrapper w-full flex justify-center ${className}`} 
        ref={adRef}
        style={{ width: '100%', minWidth: '320px' }}
      >
        {/* Desktop ad */}
        <ins
          className="adsbygoogle hidden md:inline-block"
          style={{ 
            display: 'inline-block',
            width: width ? `${width}px` : '728px',
            height: height ? `${height}px` : '90px'
          }}
          data-ad-client="ca-pub-4465464714854276"
          data-ad-slot={adSlot}
        />
        {/* Mobile ad */}
        <ins
          className="adsbygoogle block md:hidden mx-auto"
          style={{ 
            display: 'inline-block',
            width: mobileWidth ? `${mobileWidth}px` : '300px',
            height: mobileHeight ? `${mobileHeight}px` : '250px'
          }}
          data-ad-client="ca-pub-4465464714854276"
          data-ad-slot={adSlot}
        />
      </div>
    );
  }

  // Standard configuration (non-responsive)
  const isFixedSize = width && height;
  const adStyle: React.CSSProperties = {
    display: 'inline-block'
  };

  if (isFixedSize) {
    adStyle.width = `${width}px`;
    adStyle.height = `${height}px`;
  } else {
    adStyle.width = '100%';
    adStyle.height = '90px';
  }

  return (
    <div 
      className={`adsense-wrapper w-full flex justify-center ${className}`} 
      ref={adRef}
      style={{ width: '100%', minWidth: '320px' }}
    >
      <ins
        className="adsbygoogle"
        style={adStyle}
        data-ad-client="ca-pub-4465464714854276"
        data-ad-slot={adSlot}
        {...(isFixedSize ? {} : { 
          'data-ad-format': adFormat,
          'data-full-width-responsive': 'true'
        })}
      />
    </div>
  );
}