import { motion } from "framer-motion";
import { ChefHat, Sparkles } from "lucide-react";

interface CookingLoaderProps {
  /** Message affiché sous l'animation */
  label?: string;
  /** Taille (rayon) : 'sm' = 64px, 'md' = 96px, 'lg' = 128px */
  size?: "sm" | "md" | "lg";
}

/**
 * Un loader moderne avec un chapeau de chef qui flotte et tourne doucement,
 * entouré d'étincelles orbitales. Remplace l'ancien "pot qui bouillonne"
 * dessiné en CSS.
 */
export function CookingLoader({ label, size = "md" }: CookingLoaderProps) {
  const sizePx = size === "sm" ? 64 : size === "lg" ? 128 : 96;
  const iconSize = size === "sm" ? 28 : size === "lg" ? 56 : 42;

  return (
    <div className="flex flex-col items-center justify-center gap-4 py-8">
      <div
        className="relative flex items-center justify-center"
        style={{ width: sizePx, height: sizePx }}
      >
        {/* Halo pulsant */}
        <motion.div
          className="absolute inset-0 rounded-full bg-gradient-to-br from-orange-400/30 to-amber-400/30 blur-xl"
          animate={{
            scale: [1, 1.25, 1],
            opacity: [0.5, 0.8, 0.5],
          }}
          transition={{
            duration: 2.5,
            repeat: Infinity,
            ease: "easeInOut",
          }}
        />

        {/* Anneau rotatif */}
        <motion.div
          className="absolute inset-0 rounded-full border-2 border-dashed border-orange-400/40"
          animate={{ rotate: 360 }}
          transition={{
            duration: 8,
            repeat: Infinity,
            ease: "linear",
          }}
        />

        {/* Chapeau de chef qui flotte */}
        <motion.div
          className="relative z-10"
          animate={{
            y: [-4, 4, -4],
            rotate: [-3, 3, -3],
          }}
          transition={{
            duration: 3,
            repeat: Infinity,
            ease: "easeInOut",
          }}
        >
          <ChefHat
            className="text-orange-600 drop-shadow-lg"
            style={{ width: iconSize, height: iconSize }}
            strokeWidth={1.5}
          />
        </motion.div>

        {/* Étincelles orbitales */}
        {[0, 1, 2].map((i) => (
          <motion.div
            key={i}
            className="absolute"
            style={{
              width: sizePx,
              height: sizePx,
            }}
            animate={{ rotate: 360 }}
            transition={{
              duration: 4 + i,
              repeat: Infinity,
              ease: "linear",
              delay: i * 0.4,
            }}
          >
            <motion.div
              className="absolute"
              style={{
                top: i === 0 ? "10%" : i === 1 ? "50%" : "80%",
                left: i === 0 ? "85%" : i === 1 ? "10%" : "60%",
              }}
              animate={{
                scale: [0.6, 1.1, 0.6],
                opacity: [0.4, 1, 0.4],
              }}
              transition={{
                duration: 2,
                repeat: Infinity,
                delay: i * 0.6,
              }}
            >
              <Sparkles
                className="text-amber-400"
                style={{ width: 14, height: 14 }}
              />
            </motion.div>
          </motion.div>
        ))}
      </div>

      {label && (
        <motion.p
          className="text-sm text-muted-foreground font-medium animate-pulse"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.2 }}
        >
          {label}
        </motion.p>
      )}
    </div>
  );
}
