const AdCard = ({ ad }) => {
  const [height, setHeight] = React.useState(null);
  const [errored, setErrored] = React.useState(false);
  const [errorMsg, setErrorMsg] = React.useState('');
  const [visible, setVisible] = React.useState(false);

  const cardRef = React.useRef(null);
  const iframeRef = React.useRef(null);

  React.useEffect(() => {
    const el = cardRef.current;
    if (!el) return;
    const observer = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting) {
        setVisible(true);
        observer.disconnect();
      }
    }, { rootMargin: '300px' });
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  React.useEffect(() => {
    function onMessage(e) {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.adId !== ad.id) return;
      if (e.data.type === 'tb-ad-height' && e.data.height > 0) {
        setHeight(e.data.height);
      } else if (e.data.type === 'tb-ad-error') {
        setErrorMsg(e.data.error || '');
        setErrored(true);
      }
    }
    window.addEventListener('message', onMessage);
    return () => window.removeEventListener('message', onMessage);
  }, [ad.id]);

  React.useEffect(() => {
    if (!visible || height || errored) return;
    const timer = setTimeout(() => {
      setErrorMsg('Timeout');
      setErrored(true);
    }, 20000);
    return () => clearTimeout(timer);
  }, [visible, height, errored]);

  if (errored) {
    return (
      <div className="ad-card ad-card--fallback" ref={cardRef}>
        <div className="ad-card__fallback">
          Ingen preview tilgængelig
          {errorMsg && <span style={{display:'block',fontSize:'11px',marginTop:'4px',opacity:0.6}}>({errorMsg})</span>}
        </div>
      </div>
    );
  }

  return (
    <div
      className="ad-card"
      ref={cardRef}
      style={{ height: height ? `${height}px` : '450px' }}
    >
      {visible && (
        <iframe
          ref={iframeRef}
          src={`/preview-frame.html?id=${ad.id}&v=3`}
          scrolling="no"
          title={ad.headline}
        />
      )}
      {!height && (
        <div className="ad-card__loader">
          <div className="spinner" />
        </div>
      )}
    </div>
  );
};