import React from 'react';
import { Box, Link as ChakraLink } from '@chakra-ui/react';
import { assetUrl } from '../../utils/url';

export interface Banner {
  id: number | string;
  name: string;
  image: string;
  url?: string;
  placement?: string;
  width?: number;
  height?: number;
  is_active?: boolean;
}

interface BannerDisplayProps {
  banners: Banner[];
  placement: 'homepage_top' | 'homepage_middle' | 'homepage_sidebar' | 'homepage_footer' | 'article_inline';
  containerStyle?: React.CSSProperties;
}

const BannerDisplay: React.FC<BannerDisplayProps> = ({ banners, placement, containerStyle }) => {
  // Filter active banners for this placement
  const activeBanners = (banners || []).filter(
    b => b.placement === placement && (b.is_active !== false)
  );

  if (activeBanners.length === 0) {
    return null;
  }

  const getContainerClass = () => {
    switch (placement) {
      case 'homepage_top':
        return 'banner-top';
      case 'homepage_middle':
        return 'banner-middle';
      case 'homepage_sidebar':
        return 'banner-sidebar';
      case 'homepage_footer':
        return 'banner-footer';
      case 'article_inline':
        return 'banner-article';
      default:
        return 'banner';
    }
  };

  const getDefaultContainerStyle = (): React.CSSProperties => {
    const base: React.CSSProperties = {
      margin: '24px 0',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      gap: '16px',
      flexWrap: 'wrap',
    };

    switch (placement) {
      case 'homepage_top':
        return {
          ...base,
          width: '100vw',
          position: 'relative',
          left: '50%',
          right: '50%',
          marginLeft: '-50vw',
          marginRight: '-50vw',
          backgroundColor: 'rgba(0, 0, 0, 0.02)',
          padding: '16px',
          borderTop: '1px solid rgba(0, 0, 0, 0.05)',
          borderBottom: '1px solid rgba(0, 0, 0, 0.05)',
        };
      case 'homepage_footer':
        return {
          ...base,
          width: '100vw',
          position: 'relative',
          left: '50%',
          right: '50%',
          marginLeft: '-50vw',
          marginRight: '-50vw',
          backgroundColor: 'rgba(0, 0, 0, 0.02)',
          padding: '24px 16px',
          borderTop: '1px solid rgba(0, 0, 0, 0.05)',
        };
      case 'homepage_sidebar':
        return {
          display: 'block',
          margin: '24px 0',
        };
      default:
        return base;
    }
  };

  const finalContainerStyle = { ...getDefaultContainerStyle(), ...containerStyle };

  return (
    <Box
      as="section"
      className={getContainerClass()}
      sx={finalContainerStyle}
    >
      {activeBanners.map((banner) => (
        <ChakraLink
          key={banner.id}
          href={banner.url || '#'}
          isExternal={!!banner.url}
          target={banner.url ? '_blank' : undefined}
          rel={banner.url ? 'noopener noreferrer' : undefined}
          display="inline-block"
          _hover={{ opacity: 0.9, transform: 'translateY(-2px)' }}
          transition="all 0.2s"
        >
          <img
            src={assetUrl(banner.image) || banner.image}
            alt={banner.name}
            style={{
              maxWidth: '100%',
              width: banner.width ? `${banner.width}px` : 'auto',
              height: banner.height ? `${banner.height}px` : 'auto',
              objectFit: 'contain',
              borderRadius: placement === 'homepage_sidebar' ? '8px' : '4px',
              boxShadow: placement === 'homepage_sidebar' ? '0 2px 8px rgba(0,0,0,0.1)' : 'none',
            }}
            loading="lazy"
          />
        </ChakraLink>
      ))}
    </Box>
  );
};

export default BannerDisplay;
