import { useEffect, useState } from "react";

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

export function HowItWorksModal({ isOpen, onClose }: HowItWorksModalProps) {
  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">How It Works</h2>

        <div className="space-y-4">
          {[
            { step: "Sign In or Connect Your Wallet", desc: "Log in with X, Google, or connect your wallet. A secure wallet is created instantly with Privy." },
            { step: "Create or Join a Game", desc: "Start a game with your own entry amount or join one that's already waiting." },
            { step: "Enter the Game", desc: "Confirm your entry and stay on the website—the game will start automatically once all players are ready." },
            { step: "Win and Get Paid", desc: "Win the match and your prize goes straight to your wallet." },
          ].map(({ step, desc }, index) => (
            <div key={index}>
              <h3 className="text-[rgb(248,144,22)] font-bold text-lg">
                {index + 1}. {step}
              </h3>
              <p className="text-xs text-gray-400 font-mono">{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>
  );
}