import { useState, useEffect } from 'react';
import { Smile, ThumbsUp, ThumbsDown, RefreshCw, Award } from 'lucide-react';

export default function JokeGenerator() {
  const [joke, setJoke] = useState('');
  const [punchline, setPunchline] = useState('');
  const [showPunchline, setShowPunchline] = useState(false);
  const [loading, setLoading] = useState(false);
  const [reaction, setReaction] = useState(null);
  const [likedJokes, setLikedJokes] = useState([]);
  const [jokeIndex, setJokeIndex] = useState(0);
  
  // Collection of jokes
  const jokes = [
    {
      setup: "Why don't scientists trust atoms?",
      punchline: "Because they make up everything!"
    },
    {
      setup: "Why did the scarecrow win an award?",
      punchline: "Because he was outstanding in his field!"
    },
    {
      setup: "What's the best thing about Switzerland?",
      punchline: "I don't know, but the flag is a big plus!"
    },
    {
      setup: "Did you hear about the mathematician who's afraid of negative numbers?",
      punchline: "He'll stop at nothing to avoid them!"
    },
    {
      setup: "Why don't eggs tell jokes?",
      punchline: "They'd crack each other up!"
    },
    {
      setup: "How do you organize a space party?",
      punchline: "You planet!"
    },
    {
      setup: "Why did the bicycle fall over?",
      punchline: "It was two tired!"
    },
    {
      setup: "What do you call a fake noodle?",
      punchline: "An impasta!"
    },
    {
      setup: "How does a penguin build its house?",
      punchline: "Igloos it together!"
    },
    {
      setup: "Why don't skeletons fight each other?",
      punchline: "They don't have the guts!"
    }
  ];

  // Load a joke on initial render
  useEffect(() => {
    getNewJoke();
  }, []);

  const getNewJoke = () => {
    setLoading(true);
    setShowPunchline(false);
    setReaction(null);
    
    // Simulate loading
    setTimeout(() => {
      const newIndex = (jokeIndex + 1) % jokes.length;
      setJokeIndex(newIndex);
      setJoke(jokes[newIndex].setup);
      setPunchline(jokes[newIndex].punchline);
      setLoading(false);
    }, 600);
  };

  const revealPunchline = () => {
    setShowPunchline(true);
    // Trigger a laugh animation
    setReaction('laugh');
    setTimeout(() => setReaction(null), 2000);
  };

  const rateJoke = (liked) => {
    if (liked) {
      setLikedJokes([...likedJokes, { setup: joke, punchline }]);
      setReaction('thumbsUp');
    } else {
      setReaction('thumbsDown');
    }
    
    setTimeout(() => {
      setReaction(null);
      getNewJoke();
    }, 1000);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-50 to-blue-50 flex flex-col items-center justify-center p-6 font-sans">
      <div className="w-full max-w-md bg-white rounded-xl shadow-xl overflow-hidden transform transition-all hover:scale-[1.01]">
        <div className="p-8">
          <div className="flex justify-between items-center mb-6">
            <h1 className="text-2xl font-bold text-purple-800 flex items-center">
              <Smile className="mr-2 text-purple-600" size={28} />
              Joke Generator
            </h1>
            <span className="bg-purple-100 text-purple-800 text-xs font-semibold px-3 py-1 rounded-full">
              {likedJokes.length} Liked
            </span>
          </div>
          
          <div className="min-h-[200px] flex flex-col justify-center">
            {loading ? (
              <div className="flex flex-col items-center justify-center py-10">
                <RefreshCw className="animate-spin text-purple-600 mb-3" size={40} />
                <p className="text-gray-500">Finding a good one...</p>
              </div>
            ) : (
              <>
                <div className="mb-6 text-center">
                  <p className="text-xl text-gray-800 font-medium mb-4">{joke}</p>
                  
                  {!showPunchline ? (
                    <button 
                      onClick={revealPunchline}
                      className="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-6 rounded-full shadow-md transition-all transform hover:scale-105"
                    >
                      Reveal Punchline
                    </button>
                  ) : (
                    <div className="mt-6 animate-fadeIn">
                      <p className="text-xl text-purple-800 font-bold mb-8">{punchline}</p>
                      <div className="flex justify-center space-x-4">
                        <button 
                          onClick={() => rateJoke(true)}
                          className="bg-teal-500 hover:bg-teal-600 text-white font-medium py-2 px-4 rounded-full shadow-md transition-all flex items-center"
                        >
                          <ThumbsUp size={18} className="mr-2" /> Funny!
                        </button>
                        <button 
                          onClick={() => rateJoke(false)}
                          className="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded-full shadow-md transition-all flex items-center"
                        >
                          <ThumbsDown size={18} className="mr-2" /> Next
                        </button>
                      </div>
                    </div>
                  )}
                </div>
              </>
            )}
          </div>
          
          {/* Reaction animations */}
          <div className="relative h-16 mt-4">
            {reaction === 'laugh' && (
              <div className="absolute inset-0 flex justify-center items-center">
                <div className="animate-bounce">
                  <Smile className="text-yellow-500" size={48} />
                </div>
              </div>
            )}
            {reaction === 'thumbsUp' && (
              <div className="absolute inset-0 flex justify-center items-center">
                <div className="animate-pulse">
                  <Award className="text-yellow-500" size={48} />
                </div>
              </div>
            )}
            {reaction === 'thumbsDown' && (
              <div className="absolute inset-0 flex justify-center items-center">
                <div className="animate-spin-slow">
                  <RefreshCw className="text-blue-500" size={36} />
                </div>
              </div>
            )}
          </div>
        </div>
        
        <div className="bg-gray-50 px-8 py-4 border-t border-gray-100">
          <button 
            onClick={getNewJoke}
            className="w-full bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-medium py-3 px-4 rounded-lg shadow-md transition-all flex items-center justify-center"
          >
            <RefreshCw size={18} className="mr-2" /> 
            Get Another Joke
          </button>
        </div>
      </div>
      
      {likedJokes.length > 0 && (
        <div className="mt-8 w-full max-w-md bg-white rounded-xl shadow-lg p-6">
          <h2 className="text-lg font-semibold text-purple-800 mb-4 flex items-center">
            <Award className="mr-2 text-yellow-500" size={20} />
            Your Favorite Jokes
          </h2>
          <div className="space-y-3 max-h-40 overflow-y-auto">
            {likedJokes.map((likedJoke, index) => (
              <div key={index} className="p-3 bg-purple-50 rounded-lg">
                <p className="text-sm font-medium text-gray-700">{likedJoke.setup}</p>
                <p className="text-sm text-purple-700 mt-1">{likedJoke.punchline}</p>
              </div>
            ))}
          </div>
        </div>
      )}
      
      <style jsx>{`
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn {
          animation: fadeIn 0.5s ease-out forwards;
        }
        .animate-spin-slow {
          animation: spin 3s linear infinite;
        }
        @keyframes spin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
      `}</style>
    </div>
  );
}