'use client';
import { useEffect, useState, Suspense } from 'react';
import { useSearchParams } from 'next/navigation';

function AdContent() {
  const searchParams = useSearchParams();
  const destinationUrl = searchParams.get('url');
  const [countdown, setCountdown] = useState(3);

  useEffect(() => {
    if (!destinationUrl) return;

    if (countdown > 0) {
      const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
      return () => clearTimeout(timer);
    } else {
      // Countdown finished, redirect
      window.location.replace(destinationUrl);
    }
  }, [countdown, destinationUrl]);

  if (!destinationUrl) {
    return <div className="p-8 text-center text-red-500">Invalid routing parameters.</div>;
  }

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center p-4">
      <div className="max-w-2xl w-full bg-white rounded-2xl shadow-xl overflow-hidden text-center">
        
        {/* Ad Placeholder Header */}
        <div className="bg-indigo-600 p-4 text-white">
          <p className="text-sm uppercase tracking-wider font-semibold opacity-80">Advertisement</p>
          <h1 className="text-2xl font-bold mt-1">Upgrade to CK-QR Pro to remove ads!</h1>
        </div>
        
        {/* Ad Content Body */}
        <div className="p-12">
          <div className="w-full h-48 bg-gray-200 rounded-lg border-2 border-dashed border-gray-300 flex items-center justify-center mb-8">
            <span className="text-gray-400 font-medium">[ Ad Space ]</span>
          </div>
          
          <div className="text-gray-600">
            <p className="mb-2">You are being redirected to your destination in...</p>
            <div className="text-5xl font-black text-indigo-600 my-4">{countdown}</div>
            <p className="text-sm">seconds</p>
          </div>
        </div>

      </div>
    </div>
  );
}

export default function AdRedirectPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AdContent />
    </Suspense>
  );
}
