import { useState, useEffect } from "react";
import { X } from "lucide-react";
import AdSense from "./adsense";

const COUNTER_KEY = "folx-interstitial-count";
const DELAY_MS = 3000;

export default function InterstitialAd({ forceShow }: { forceShow?: boolean } = {}) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (forceShow) {
      const timer = setTimeout(() => setVisible(true), DELAY_MS);
      return () => clearTimeout(timer);
    }

    const raw = sessionStorage.getItem(COUNTER_KEY);
    const count = raw ? parseInt(raw, 10) : 0;
    const next = count + 1;
    sessionStorage.setItem(COUNTER_KEY, next.toString());

    const shouldShow = next % 2 === 1;
    if (!shouldShow) return;

    const timer = setTimeout(() => setVisible(true), DELAY_MS);
    return () => clearTimeout(timer);
  }, [forceShow]);

  useEffect(() => {
    if (visible) {
      document.body.style.overflow = "hidden";
    }
    return () => {
      document.body.style.overflow = "";
    };
  }, [visible]);

  if (!visible) return null;

  return (
    <div
      className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/70 animate-in fade-in duration-300"
      onClick={() => setVisible(false)}
      data-testid="interstitial-ad-overlay"
    >
      <div
        className="relative bg-card rounded-xl shadow-2xl w-[90vw] max-w-lg p-6"
        onClick={(e) => e.stopPropagation()}
        data-testid="interstitial-ad-container"
      >
        <button
          onClick={() => setVisible(false)}
          className="absolute top-3 right-3 z-10 w-8 h-8 flex items-center justify-center rounded-full bg-muted hover:bg-muted/80 text-foreground transition-colors"
          data-testid="button-interstitial-close"
          aria-label="Schließen"
        >
          <X className="w-5 h-5" />
        </button>
        <div className="text-[10px] text-muted-foreground/40 text-center mb-2 uppercase tracking-widest">Anzeige</div>
        <div className="min-h-[250px] flex items-center justify-center">
          <AdSense
            slot="4154017639"
            format="rectangle"
            responsive={false}
            style={{ display: "inline-block", width: "300px", height: "250px" }}
          />
        </div>
      </div>
    </div>
  );
}