import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import { RotateCcw } from "lucide-react";
import "./Wheel.css";

const prizes = [
  "10% Réduction",
  "5€ Offerts",
  "Livraison Gratuite",
  "Merci, retentez !",
  "Produit Gratuit",
  "15% Réduction",
  "Un Cadeau Surprise",
  "Merci, retentez !",
];

export default function FortuneWheel() {
  const [rotation, setRotation] = useState(0);
  const [selectedPrize, setSelectedPrize] = useState(null);
  const [spinning, setSpinning] = useState(false);

  const spinWheel = () => {
    if (spinning) return;
    setSpinning(true);
    
    const randomSpin = 1800 + Math.floor(Math.random() * 360); // Tourne au moins 5 fois
    const newRotation = rotation + randomSpin;
    setRotation(newRotation);

    setTimeout(() => {
      const adjustedRotation = (newRotation % 360) + (360 / prizes.length) / 2;
      const index = Math.floor(adjustedRotation / (360 / prizes.length)) % prizes.length;
      
      setSelectedPrize(prizes[index]);
      setSpinning(false);
    }, 4000);
  };

  return (
    <div className="flex flex-col items-center p-6">
      <h1 className="text-3xl font-bold mb-4">Tentez votre chance !</h1>
      <div className="relative w-64 h-64 flex justify-center items-center">
        <motion.div
          className="wheel"
          animate={{ rotate: rotation }}
          transition={{ type: "tween", duration: 3, ease: "easeOut" }}
        >
          <div className="wheel-inner">
            {prizes.map((prize, i) => (
              <div key={i} className="wheel-section" style={{ transform: `rotate(${i * (360 / prizes.length)}deg)` }}>
                {prize}
              </div>
            ))}
          </div>
        </motion.div>
        <div className="absolute top-1/2 transform -translate-y-1/2 text-red-600 text-3xl">▼</div>
      </div>
      <Button onClick={spinWheel} className="mt-4" disabled={spinning}>
        Tourner la roue <RotateCcw className="ml-2" />
      </Button>
      {selectedPrize && <p className="mt-4 text-xl font-semibold">🎉 {selectedPrize} 🎉</p>}
    </div>
  );
}