"use client";

import { useEffect, useState } from "react";
import { GoogleAd } from "./GoogleAd";

interface AdInterstitialProps {
  onClose: () => void;
  countdownSeconds?: number;
}

export function AdInterstitial({
  onClose,
  countdownSeconds = 5,
}: AdInterstitialProps) {
  const [countdown, setCountdown] = useState(countdownSeconds);

  useEffect(() => {
    if (countdown <= 0) return;
    const timer = setTimeout(() => setCountdown((c) => c - 1), 1000);
    return () => clearTimeout(timer);
  }, [countdown]);

  return (
    <div
      className="fixed inset-0 z-[9999] flex items-center justify-center"
      style={{ background: "rgba(0,0,0,0.85)" }}
    >
      <div
        className="relative w-full max-w-lg mx-4 rounded-2xl overflow-hidden flex flex-col"
        style={{
          background: "var(--bg-secondary)",
          border: "1px solid var(--border)",
        }}
      >
        {/* Header */}
        <div
          className="flex items-center justify-between px-4 py-3"
          style={{ borderBottom: "1px solid var(--border)" }}
        >
          <span
            className="text-xs font-semibold"
            style={{ color: "var(--text-muted)" }}
          >
            Advertisement
          </span>
          <button
            onClick={countdown <= 0 ? onClose : undefined}
            disabled={countdown > 0}
            className="flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold transition-all"
            style={{
              background:
                countdown <= 0 ? "var(--accent)" : "var(--btn-ghost)",
              color: countdown <= 0 ? "#fff" : "var(--text-muted)",
              cursor: countdown <= 0 ? "pointer" : "not-allowed",
            }}
          >
            {countdown > 0 ? (
              <span>{countdown}s</span>
            ) : (
              <>
                <svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2.5"
                >
                  <line x1="18" y1="6" x2="6" y2="18" />
                  <line x1="6" y1="6" x2="18" y2="18" />
                </svg>
                Skip
              </>
            )}
          </button>
        </div>

        {/* Ad */}
        <div className="p-4">
          <GoogleAd placement="others" />
        </div>
      </div>
    </div>
  );
}