import { useEffect, useState } from "react";
import { URL_WHITEPAPER, URL_TELEGRAM } from "../shared/constants";

interface FirstVisitModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export function FirstVisitModal({ isOpen, onClose }: FirstVisitModalProps) {
  const [shouldRender, setShouldRender] = useState(isOpen);
  const [animationClass, setAnimationClass] = useState("");

  useEffect(() => {
    if (isOpen) {
      setShouldRender(true);
      setAnimationClass("modal-enter");
    } else {
      setAnimationClass("modal-exit");
      // Wait for animation to finish before unmounting
      const timer = setTimeout(() => setShouldRender(false), 200); // match animation duration
      return () => clearTimeout(timer);
    }
  }, [isOpen]);

  if (!shouldRender) return null;

  return (
    <div
      className="fixed inset-0 bg-black/70 flex justify-center items-start pt-10 z-50"
      onClick={onClose}
    >
      <div
        className={`bg-[rgb(30,30,30)] text-white w-full max-w-lg p-6 rounded-2xl shadow-lg transform transition-transform duration-300 ${animationClass}`}
        onClick={(e) => e.stopPropagation()}
      >
        <h2 className="text-xl font-bold mb-4">Welcome to DuelFi.io!</h2>

        <div className="space-y-4">
          <p className="text-gray-300">
            Challenge your friends (or strangers) in head-to-head skill games and earn from your victories!
            <br />
            <br />  
            Create or join duels, set an entry fee, and the winner takes all.
          </p>
          
          {[
            { step: "New here? Check out our", desc: "Whitepaper to understand how everything works.", link: URL_WHITEPAPER },
            { step: "Got questions or just wanna vibe with the squad?", desc: "Join our Telegram.", link: URL_TELEGRAM },
          ].map(({ step, desc, link }, index) => (
            <div key={index} onClick={() => window.open(link, "_blank")}>
              <h3 className="text-[rgb(248,144,22)] font-bold text-lg">
                {step}
              </h3>
              <p className="text-s text-white font-bold ">{desc}</p>
            </div>
          ))}
        </div>

        <button
          className="mt-6 w-full bg-[rgb(248,144,22)] text-black font-semibold py-2 rounded-xl transition hover:bg-white hover:scale-105"
          onClick={onClose}
        >
          Okay
        </button>
      </div>
    </div>
  );
}