import React, { useState } from 'react';
import { Motion } from 'lucide-react';

// Main component
const WishingWell = () => {
  const [wish, setWish] = useState('');
  const [droppedWishes, setDroppedWishes] = useState([]);
  const [showCongrats, setShowCongrats] = useState(false);
  const [isDragging, setIsDragging] = useState(false);
  const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });

  // Handle wish submission
  const handleSubmit = (e) => {
    e.preventDefault();
    if (wish.trim()) {
      setDroppedWishes([...droppedWishes, wish]);
      setWish('');
      setShowCongrats(true);
      setTimeout(() => setShowCongrats(false), 3000);
    }
  };

  // Handle drag start
  const handleDragStart = (e) => {
    setIsDragging(true);
    const rect = e.target.getBoundingClientRect();
    setDragPosition({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top
    });
  };

  // Handle drag end
  const handleDragEnd = () => {
    setIsDragging(false);
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-purple-50 flex flex-col items-center justify-center p-8">
      {/* Header */}
      <h1 className="text-4xl font-serif text-purple-800 mb-8">Make a Wish</h1>

      {/* Wishing Well SVG */}
      <div className="relative w-64 h-64 mb-8">
        <svg viewBox="0 0 200 200" className="w-full h-full">
          {/* Well Base */}
          <circle cx="100" cy="100" r="60" fill="#e2e8f0" className="animate-pulse" />
          <circle cx="100" cy="100" r="50" fill="#90cdf4" className="animate-pulse" />
          
          {/* Well Rim */}
          <path
            d="M40,100 A60,60 0 0,1 160,100"
            fill="none"
            stroke="#4a5568"
            strokeWidth="4"
            className="animate-pulse"
          />
          
          {/* Decorative Elements */}
          <circle cx="100" cy="100" r="45" fill="none" stroke="#fff" strokeWidth="2" opacity="0.5">
            <animate
              attributeName="r"
              values="43;46;43"
              dur="4s"
              repeatCount="indefinite"
            />
          </circle>
        </svg>

        {/* Dropped Wishes Animation */}
        {droppedWishes.map((droppedWish, index) => (
          <div
            key={index}
            className="absolute text-xs text-purple-600 opacity-50 animate-fall"
            style={{
              left: `${Math.random() * 100}%`,
              animationDelay: `${index * 0.2}s`
            }}
          >
            ✨
          </div>
        ))}
      </div>

      {/* Wish Input Form */}
      <form onSubmit={handleSubmit} className="w-full max-w-md">
        <div className="relative">
          <input
            type="text"
            value={wish}
            onChange={(e) => setWish(e.target.value)}
            placeholder="Type your wish..."
            className="w-full px-4 py-2 rounded-full bg-white/80 backdrop-blur-sm border border-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-300 text-purple-800 placeholder-purple-400"
            draggable={!!wish}
            onDragStart={handleDragStart}
            onDragEnd={handleDragEnd}
          />
          <Motion 
            className="absolute right-3 top-2.5 text-purple-400"
            size={20}
          />
        </div>
      </form>

      {/* Congratulatory Message */}
      {showCongrats && (
        <div className="fixed top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white/90 backdrop-blur-sm px-6 py-3 rounded-full shadow-lg text-purple-800 animate-fade-in">
          ✨ Your wish has been cast into the well ✨
        </div>
      )}

      {/* Instructions */}
      <p className="mt-8 text-purple-600 text-sm text-center max-w-md">
        Type your wish and drag it into the well. Watch as it transforms into stardust and joins the cosmic energy of hopes and dreams.
      </p>
    </div>
  );
};

export default WishingWell;