folx-tv/client/src/components/adsense.tsx

import { useEffect, useMemo, useRef, useState } from "react";
import ArtistPatternBg from "./artist-pattern-bg";

type AdFormat = "auto" | "fluid" | "rectangle" | "horizontal" | "vertical" | "autorelaxed";

interface AdSenseProps {
  slot: string;
  format?: AdFormat;
  responsive?: boolean;
  className?: string;
  style?: Record<string, string>;
  layout?: string;
  layoutKey?: string;
  onAdStatus?: (filled: boolean) => void;
}

export default function AdSense({
  slot,
  format = "auto",
  responsive = true,
  className = "",
  style,
  layout,
  layoutKey,
  onAdStatus,
}: AdSenseProps) {
  const adRef = useRef<HTMLModElement>(null);
  const pushed = useRef(false);

  useEffect(() => {
    if (pushed.current) return;
    try {
      const adsbygoogle = (window as any).adsbygoogle || [];
      adsbygoogle.push({});
      pushed.current = true;
    } catch (e) {
    }

    if (onAdStatus) {
      const checkAd = () => {
        if (adRef.current) {
          const ins = adRef.current;
          const status = ins.getAttribute("data-ad-status");
          if (status === "filled") {
            onAdStatus(true);
            return;
          }
          if (status === "unfilled") {
            onAdStatus(false);
            return;
          }
          if (ins.clientHeight > 10) {
            onAdStatus(true);
            return;
          }
        }
      };
      const t1 = setTimeout(checkAd, 2000);
      const t2 = setTimeout(checkAd, 5000);
      return () => { clearTimeout(t1); clearTimeout(t2); };
    }
  }, []);

  return (
    <div className={`ad-container ${className}`} data-testid={`ad-slot-${slot}`}>
      <ins
        ref={adRef}
        className="adsbygoogle"
        style={style || { display: "block" }}
        data-ad-client="ca-pub-4465464714854276"
        data-ad-slot={slot}
        data-ad-format={format}
        data-full-width-responsive={responsive ? "true" : undefined}
        {...(layout ? { "data-ad-layout": layout } : {})}
        {...(layoutKey ? { "data-ad-layout-key": layoutKey } : {})}
      />
    </div>
  );
}

let adSeedCounter = 1;

export function ArticleCardAd() {
  const seed = useMemo(() => adSeedCounter++, []);
  return (
    <ArtistPatternBg className="rounded-md border border-card-border h-full bg-card" seed={seed}>
      <AdSense
        slot="3854634730"
        format="fluid"
        layoutKey="-6r+cy-10+8a-3"
        style={{ display: "block" }}
      />
    </ArtistPatternBg>
  );
}

export function InArticleAd() {
  return (
    <div className="my-8 py-4 border-y border-border/30">
      <div className="text-[10px] text-muted-foreground/40 text-center mb-2 uppercase tracking-widest">Anzeige</div>
      <AdSense
        slot="4154017639"
        format="fluid"
        layout="in-article"
        style={{ display: "block", textAlign: "center" }}
      />
    </div>
  );
}

export function MultiplexAd() {
  return (
    <div className="bg-card rounded-md border border-card-border overflow-hidden">
      <AdSense
        slot="4593001335"
        format="autorelaxed"
        style={{ display: "block" }}
        className="w-full min-h-[250px]"
      />
    </div>
  );
}

export function PageSideAds({ contentHalfWidth = 640 }: { contentHalfWidth?: number }) {
  const gap = 10;
  const offset = contentHalfWidth + gap;
  const [footerVisible, setFooterVisible] = useState(false);

  useEffect(() => {
    const footer = document.querySelector("footer");
    if (!footer) return;
    const observer = new IntersectionObserver(
      ([entry]) => setFooterVisible(entry.isIntersecting),
      { threshold: 0 }
    );
    observer.observe(footer);
    return () => observer.disconnect();
  }, []);

  return (
    <div className="relative">
      <div
        className="hidden 2xl:flex fixed top-0 bottom-0 w-[160px] z-10 items-center justify-center pointer-events-none transition-opacity duration-300"
        style={{ left: `calc(50% - ${offset}px - 160px)`, opacity: footerVisible ? 0 : 1 }}
        data-testid="ad-left-sidebar"
      >
        <div className="pointer-events-auto">
          <AdSense
            slot="2398082838"
            format="vertical"
            style={{ display: "block", width: "160px", height: "600px" }}
          />
        </div>
      </div>
      <div
        className="hidden 2xl:flex fixed top-0 bottom-0 w-[160px] z-10 items-center justify-center pointer-events-none transition-opacity duration-300"
        style={{ right: `calc(50% - ${offset}px - 160px)`, opacity: footerVisible ? 0 : 1 }}
        data-testid="ad-right-sidebar"
      >
        <div className="pointer-events-auto">
          <AdSense
            slot="2398082838"
            format="vertical"
            style={{ display: "block", width: "160px", height: "600px" }}
          />
        </div>
      </div>
    </div>
  );
}

export function SidebarAd() {
  const [visible, setVisible] = useState(false);

  return (
    <div className={`sticky top-4 ${visible ? "" : "hidden"}`}>
      <div className="bg-card rounded-md border border-card-border p-4 mt-4">
        <AdSense
          slot="2398082838"
          format="auto"
          onAdStatus={(filled) => setVisible(filled)}
        />
      </div>
    </div>
  );
}