/**
 * 상단 광고 배너 (PRD §3.10) — Google AdSense 배너 유닛 + placeholder
 * ADS_ENABLED=true 이고 광고 단위가 있으면 실제 AdSense 코드, 아니면 placeholder.
 * 광고 로드 실패/미수신에도 본문 정상 동작 (C-10 비차단).
 * Phase B: MD3 디자인 토큰 적용 (placeholder 영역)
 */
import { useEffect, useRef } from 'react';
import styled from 'styled-components';

const AD_CLIENT = import.meta.env.VITE_ADS_CLIENT ?? '';
const AD_SLOT = import.meta.env.VITE_ADS_SLOT ?? '';
const ADS_ENABLED = import.meta.env.VITE_ADS_ENABLED === 'true';

const Banner = styled.div`
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--md3-surface-variant);
  color: var(--md3-on-surface-variant);
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  overflow: hidden;
  text-align: center;
`;

export default function AdBanner() {
  const ref = useRef<HTMLDivElement>(null);
  const useAdsense = ADS_ENABLED && AD_CLIENT && AD_SLOT;

  useEffect(() => {
    if (!useAdsense || !ref.current) return;
    try {
      // @ts-expect-error adsbygoogle 전역
      (window.adsbygoogle = window.adsbygoogle || []).push({});
    } catch {
      /* 광고 실패 시 placeholder 유지 (비차단) */
    }
  }, [useAdsense]);

  if (useAdsense) {
    return (
      <Banner as="div" ref={ref}>
        <ins
          className="adsbygoogle"
          style={{ display: 'block', minHeight: 50 }}
          data-ad-client={AD_CLIENT}
          data-ad-slot={AD_SLOT}
          data-ad-format="auto"
          data-full-width-responsive="true"
        />
      </Banner>
    );
  }
  return (
    <Banner>
      <span>AD</span>
    </Banner>
  );
}