import { useState } from "react";
import "./app.css";
import { motion } from "motion/react";

export function Welcome() {
  const [rolling, setRolling] = useState(false);
  const [showResetPopup, setShowResetPopup] = useState(false);

  const handleRollClick = () => {
    if (!rolling) {
      setRolling(true);
    }
  };

  const handleAnimationComplete = () => {
    setShowResetPopup(true);
  };

  const handleReset = () => {
    setRolling(false);
    setShowResetPopup(false);
  };

  const rollButtonVariants = {
    initial: { scale: 1, rotateY: 0 },
    clicked: {
      scale: [1, 1.1, 1],
      rotateY: [0, 20, 0],
      transition: { duration: 0.5, ease: "easeInOut" },
    },
  };

  return (
    <div className="bg-gray-800">
      <h1 className="text-white text-3xl text-center">
        Welcome to Aindustries' casino
      </h1>
      <p className="text-center text-white">
        Mind that gambling isn't that dangerous
      </p>

      <div className="w-full h-100 bg-gray-500 mx-auto flex items-center justify-center mt-10 relative">
        <div className="flex flex-col items-center mt-10">
          <div className="w-full overflow-hidden mt-4">
            <motion.div
              className="flex space-x-3"
              animate={rolling ? { x: [15000, -15110] } : null}
              transition={
                rolling
                  ? {
                      duration: 8,
                      ease: [0.23, 1, 0.32, 1],
                    }
                  : { duration: 0 }
              }
              onAnimationComplete={handleAnimationComplete}
            >
              {Array.from({ length: 150 }).map((_, index) => (
                <div
                  key={index}
                  className="w-80 h-40 bg-gray-200 shadow flex items-center justify-center text-3xl"
                >
                  {(() => {
                    const chance = Math.random();
                    let colorClass = "text-blue-500";
                    if (chance < 0.7) {
                      colorClass = "text-blue-500";
                    } else if (chance < 0.9) {
                      colorClass = "text-yellow-500";
                    } else {
                      colorClass = "text-red-500";
                    }
                    return <span className={colorClass}>{index + 1}</span>;
                  })()}
                </div>
              ))}
            </motion.div>
          </div>
          <motion.div
            className="w-40 h-20 bg-green-500 rounded-lg flex items-center justify-center mt-4 mx-1.25 cursor-pointer"
            onClick={handleRollClick}
            variants={rollButtonVariants}
            animate={rolling ? "clicked" : "initial"}
          >
            <h1 className="text-white text-4xl glow-text">ROLL</h1>
          </motion.div>
          <div className="flex items-center justify-center mt-2 space-x-2">
            <span className="text-white text-xl">Cost per roll :</span>
            <span className="text-white text-xl">6</span>
            <span className="text-green-500 text-xl">$</span>
          </div>
        </div>

        {showResetPopup && (
          <div className="absolute inset-0 bg-gray-400 bg-opacity-90 flex items-center justify-center">
            <div className="bg-white p-6 rounded-lg shadow-xl">
              <h2 className="text-xl mb-4">Dragon Lore</h2>
              <p className="mb-4">Would you like to reset?</p>
              <button
                className="px-4 py-2 bg-blue-500 text-white rounded"
                onClick={handleReset}
              >
                Reset
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}