import { useState, useEffect } from 'react';
import Card from './Card';

const GameBoard = () => {
  const emojis = ['🎮', '🎲', '🎯', '🎨', '🎭', '🎪', '🎸', '🎺'];
  const [cards, setCards] = useState([]);
  const [selectedCards, setSelectedCards] = useState([]);
  const [matchedPairs, setMatchedPairs] = useState(0);
  const [moves, setMoves] = useState(0);
  const [isChecking, setIsChecking] = useState(false);
  const [gameWon, setGameWon] = useState(false);

  const initializeGame = () => {
    const gameCards = [...emojis, ...emojis]
      .sort(() => Math.random() - 0.5)
      .map((emoji, index) => ({ id: index, emoji, isFlipped: false, isMatched: false }));
    setCards(gameCards);
    setSelectedCards([]);
    setMatchedPairs(0);
    setMoves(0);
    setGameWon(false);
    setIsChecking(false);
  };

  useEffect(() => {
    initializeGame();
  }, []);

  useEffect(() => {
    if (selectedCards.length === 2) {
      setIsChecking(true);
      setMoves(moves + 1);
      const [first, second] = selectedCards;
      
      if (first.emoji === second.emoji) {
        setTimeout(() => {
          setCards(cards.map(card => 
            card.id === first.id || card.id === second.id 
              ? { ...card, isMatched: true } 
              : card
          ));
          setMatchedPairs(matchedPairs + 1);
          setSelectedCards([]);
          setIsChecking(false);
        }, 600);
      } else {
        setTimeout(() => {
          setCards(cards.map(card => 
            card.id === first.id || card.id === second.id 
              ? { ...card, isFlipped: false } 
              : card
          ));
          setSelectedCards([]);
          setIsChecking(false);
        }, 1000);
      }
    }
  }, [selectedCards]);

  useEffect(() => {
    if (matchedPairs === emojis.length && emojis.length > 0) {
      setGameWon(true);
    }
  }, [matchedPairs]);

  const handleCardClick = (clickedCard) => {
    if (isChecking || clickedCard.isFlipped || clickedCard.isMatched) return;
    
    setCards(cards.map(card => 
      card.id === clickedCard.id 
        ? { ...card, isFlipped: true } 
        : card
    ));
    
    setSelectedCards([...selectedCards, clickedCard]);
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-indigo-100 to-purple-100 p-4">
      <div className="text-center mb-8">
        <h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Memory Game</h1>
        <p className="text-lg text-gray-600">Match the pairs to win!</p>
      </div>
      
      <div className="bg-white rounded-xl shadow-xl p-6 mb-6">
        <div className="flex justify-between items-center mb-4">
          <div className="text-lg font-semibold text-gray-700">
            Moves: <span className="text-blue-600">{moves}</span>
          </div>
          <div className="text-lg font-semibold text-gray-700">
            Pairs: <span className="text-green-600">{matchedPairs}/{emojis.length}</span>
          </div>
        </div>
        
        <div className="grid grid-cols-4 gap-3 md:gap-4">
          {cards.map((card) => (
            <Card
              key={card.id}
              card={card}
              onClick={() => handleCardClick(card)}
              isFlipped={card.isFlipped}
              isMatched={card.isMatched}
            />
          ))}
        </div>
      </div>
      
      <button
        onClick={initializeGame}
        className="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg shadow-lg hover:from-blue-600 hover:to-purple-700 transform hover:scale-105 transition-all duration-200"
      >
        New Game
      </button>
      
      {gameWon && (
        <div className="mt-6 p-4 bg-green-100 border-2 border-green-400 rounded-lg">
          <p className="text-xl font-bold text-green-800">Congratulations! You won in {moves} moves!</p>
        </div>
      )}
    </div>
  );
};

export default GameBoard;