import { useState, useEffect } from 'react';
import { Coins, RefreshCcw, Plus, Minus, Volume2, VolumeX } from 'lucide-react';

export default function BlackjackGame() {
  const [playerName, setPlayerName] = useState('');
  const [balance, setBalance] = useState(1000);
  const [bet, setBet] = useState(100);
  const [playerHand, setPlayerHand] = useState([]);
  const [dealerHand, setDealerHand] = useState([]);
  const [deck, setDeck] = useState([]);
  const [gameState, setGameState] = useState('betting');
  const [message, setMessage] = useState('Place your bet to start!');
  const [soundEnabled, setSoundEnabled] = useState(true);
  const [lastAction, setLastAction] = useState(null);

  const playSound = (action) => {
    if (!soundEnabled) return;
    const sounds = {
      card: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-cards-sliding-in-stack-2001.mp3'),
      win: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-winning-chimes-2015.mp3'),
      lose: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-losing-bleeps-2026.mp3'),
      chip: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-poker-chips-handling-2003.mp3')
    };
    sounds[action]?.play().catch(() => {});
  };

  const createDeck = () => {
    const suits = ['♠', '♣', '♥', '♦'];
    const values = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];
    const newDeck = [];
    
    for (let suit of suits) {
      for (let value of values) {
        newDeck.push({ suit, value });
      }
    }
    
    return shuffle([...newDeck]);
  };

  const shuffle = (array) => {
    let currentIndex = array.length;
    while (currentIndex !== 0) {
      const randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex--;
      [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
    }
    return array;
  };

  const drawCard = () => {
    if (deck.length === 0) {
      setDeck(createDeck());
    }
    return deck.pop();
  };

  const calculateHand = (hand) => {
    let sum = 0;
    let aces = 0;

    for (let card of hand) {
      if (card.value === 'A') {
        aces += 1;
        sum += 11;
      } else if (['K', 'Q', 'J'].includes(card.value)) {
        sum += 10;
      } else {
        sum += parseInt(card.value);
      }
    }

    while (sum > 21 && aces > 0) {
      sum -= 10;
      aces -= 1;
    }

    return sum;
  };

  const startGame = () => {
    if (balance < bet) {
      setMessage("Not enough balance!");
      return;
    }

    const newDeck = createDeck();
    const playerCards = [newDeck.pop(), newDeck.pop()];
    const dealerCards = [newDeck.pop()];
    
    setBalance(prev => prev - bet);
    setDeck(newDeck);
    setPlayerHand(playerCards);
    setDealerHand(dealerCards);
    setGameState('playing');
    setMessage('Your turn! Hit or Stand?');
    playSound('card');
  };

  const hit = () => {
    const newHand = [...playerHand, drawCard()];
    setPlayerHand(newHand);
    
    if (calculateHand(newHand) > 21) {
      setGameState('finished');
      setMessage('Bust! You lose!');
      playSound('lose');
    }
  };

  const stand = () => {
    setGameState('dealer');
    let currentDealerHand = [...dealerHand];
    
    while (calculateHand(currentDealerHand) < 17) {
      currentDealerHand.push(drawCard());
    }
    
    setDealerHand(currentDealerHand);
    const dealerScore = calculateHand(currentDealerHand);
    const playerScore = calculateHand(playerHand);
    
    setGameState('finished');
    
    if (dealerScore > 21) {
      setBalance(prev => prev + bet * 2);
      setMessage('Dealer bust! You win!');
      playSound('win');
    } else if (dealerScore > playerScore) {
      setMessage('Dealer wins!');
      playSound('lose');
    } else if (dealerScore < playerScore) {
      setBalance(prev => prev + bet * 2);
      setMessage('You win!');
      playSound('win');
    } else {
      setBalance(prev => prev + bet);
      setMessage('Push!');
    }
  };

  const doubleDown = () => {
    if (balance < bet) {
      setMessage("Not enough balance for double down!");
      return;
    }

    setBalance(prev => prev - bet);
    setBet(prev => prev * 2);
    playSound('chip');

    const newCard = drawCard();
    const newHand = [...playerHand, newCard];
    setPlayerHand(newHand);
    playSound('card');

    if (calculateHand(newHand) > 21) {
      setGameState('finished');
      setMessage('Bust! You lose!');
      playSound('lose');
    } else {
      stand();
    }
  };

  const handleNameSubmission = () => {
    const trimmedName = playerName.trim();
    if (trimmedName.length >= 2) {
      setPlayerName(trimmedName);
    } else {
      setMessage("Please enter a valid name (at least 2 characters)");
    }
  };

  const renderCard = (card, index, isDealer = false) => {
    if (isDealer && index === 1 && gameState === 'playing') {
      return (
        <div 
          key={index}
          className="card-back w-32 h-48 rounded-xl shadow-xl transform transition-transform hover:scale-105"
          style={{
            background: 'linear-gradient(45deg, #b71234, #e71234)',
            backgroundImage: `url('https://www.transparenttextures.com/patterns/diamond-upholstery.png')`,
            border: '8px solid white'
          }}
        />
      );
    }

    const isRed = card.suit === '♥' || card.suit === '♦';
    const suitSymbols = {
      '♠': '♠',
      '♣': '♣',
      '♥': '♥',
      '♦': '♦'
    };

    return (
      <div
        key={index}
        className={`relative w-32 h-48 bg-white rounded-xl shadow-xl transform transition-transform hover:scale-105 ${
          lastAction === 'draw' ? 'animate-slide-in' : ''
        }`}
        style={{
          border: '8px solid white',
          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08)'
        }}
      >
        <div className={`absolute top-2 left-2 ${isRed ? 'text-red-600' : 'text-black'}`}>
          <div className="text-2xl font-bold">{card.value}</div>
          <div className="text-3xl">{suitSymbols[card.suit]}</div>
        </div>
        <div className={`absolute bottom-2 right-2 ${isRed ? 'text-red-600' : 'text-black'}`}>
          <div className="text-2xl font-bold transform rotate-180">{card.value}</div>
          <div className="text-3xl transform rotate-180">{suitSymbols[card.suit]}</div>
        </div>
        <div 
          className={`absolute inset-0 flex items-center justify-center ${isRed ? 'text-red-600' : 'text-black'}`}
        >
          <div className="text-6xl">{suitSymbols[card.suit]}</div>
        </div>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-green-900 to-green-800 p-8 text-white">
      <div className="max-w-6xl mx-auto">
        {!playerName.trim() ? (
          <div className="flex flex-col items-center space-y-6 bg-black/30 backdrop-blur-sm p-12 rounded-2xl shadow-2xl">
            <h1 className="text-5xl font-bold mb-8 text-yellow-400">Virtual Blackjack</h1>
            <div className="flex flex-col items-center gap-4 w-full max-w-md">
              <input
                type="text"
                placeholder="Enter your name (min 2 characters)"
                className="w-full px-6 py-3 rounded-xl text-black text-xl focus:ring-2 focus:ring-yellow-400 outline-none"
                value={playerName}
                onChange={(e) => setPlayerName(e.target.value)}
                onKeyPress={(e) => {
                  if (e.key === 'Enter') {
                    handleNameSubmission();
                  }
                }}
              />
              <button
                className="w-full bg-yellow-400 text-black px-8 py-3 rounded-xl text-xl font-bold hover:bg-yellow-300 transform transition-all hover:scale-105 hover:shadow-xl flex items-center justify-center gap-2"
                onClick={handleNameSubmission}
              >
                Enter Game
                <svg 
                  xmlns="http://www.w3.org/2000/svg" 
                  className="h-6 w-6" 
                  fill="none" 
                  viewBox="0 0 24 24" 
                  stroke="currentColor"
                >
                  <path 
                    strokeLinecap="round" 
                    strokeLinejoin="round" 
                    strokeWidth={2} 
                    d="M13 7l5 5m0 0l-5 5m5-5H6" 
                  />
                </svg>
              </button>
            </div>
          </div>
        ) : (
          <div className="space-y-8">
            <div className="flex justify-between items-center bg-black/30 backdrop-blur-sm p-4 rounded-xl">
              <div className="flex items-center space-x-4">
                <Coins className="text-yellow-400 w-8 h-8" />
                <span className="text-2xl font-bold">${balance}</span>
              </div>
              <div className="text-2xl font-bold">{playerName}</div>
              <button
                onClick={() => setSoundEnabled(!soundEnabled)}
                className="p-2 hover:bg-white/10 rounded-lg transition-colors"
              >
                {soundEnabled ? <Volume2 /> : <VolumeX />}
              </button>
            </div>

            {gameState === 'betting' && (
              <div className="flex flex-col items-center space-y-4 bg-black/30 backdrop-blur-sm p-6 rounded-xl">
                <div className="flex items-center space-x-4">
                  <button
                    className="bg-red-500 p-2 rounded-full hover:bg-red-600 transition-colors"
                    onClick={() => setBet(Math.max(10, bet - 10))}
                  >
                    <Minus size={20} />
                  </button>
                  <span className="text-2xl font-bold">${bet}</span>
                  <button
                    className="bg-green-500 p-2 rounded-full hover:bg-green-600 transition-colors"
                    onClick={() => setBet(Math.min(balance, bet + 10))}
                  >
                    <Plus size={20} />
                  </button>
                </div>
                <button
                  className="bg-yellow-400 text-black px-8 py-3 rounded-xl text-xl font-bold hover:bg-yellow-300 transform transition-all hover:scale-105"
                  onClick={startGame}
                >
                  Deal
                </button>
              </div>
            )}

            {gameState !== 'betting' && (
              <div className="space-y-8">
                <div className="bg-black/30 backdrop-blur-sm p-6 rounded-xl">
                  <h2 className="text-2xl mb-4 font-bold">Dealer's Hand</h2>
                  <div className="flex flex-wrap gap-4 justify-center">
                    {dealerHand.map((card, index) => renderCard(card, index, true))}
                  </div>
                </div>

                <div className="bg-black/30 backdrop-blur-sm p-6 rounded-xl">
                  <h2 className="text-2xl mb-4 font-bold">Your Hand</h2>
                  <div className="flex flex-wrap gap-4 justify-center">
                    {playerHand.map((card, index) => renderCard(card, index))}
                  </div>
                </div>

                <div className="text-center text-2xl font-bold bg-black/30 backdrop-blur-sm p-4 rounded-xl">
                  {message}
                </div>

                {gameState === 'playing' && (
                  <div className="flex justify-center space-x-4">
                    <button
                      className="bg-red-500 px-8 py-3 rounded-xl text-xl font-bold hover:bg-red-600 transform transition-all hover:scale-105"
                      onClick={hit}
                    >
                      Hit
                    </button>
                    <button
                      className="bg-blue-500 px-8 py-3 rounded-xl text-xl font-bold hover:bg-blue-600 transform transition-all hover:scale-105"
                      onClick={stand}
                    >
                      Stand
                    </button>
                    {playerHand.length === 2 && balance >= bet && (
                      <button
                        className="bg-purple-500 px-8 py-3 rounded-xl text-xl font-bold hover:bg-purple-600 transform transition-all hover:scale-105"
                        onClick={doubleDown}
                      >
                        Double Down
                      </button>
                    )}
                  </div>
                )}

                {gameState === 'finished' && (
                  <div className="flex justify-center">
                    <button
                      className="bg-yellow-400 text-black px-8 py-3 rounded-xl text-xl font-bold hover:bg-yellow-300 transform transition-all hover:scale-105"
                      onClick={() => {
                        setGameState('betting');
                        setPlayerHand([]);
                        setDealerHand([]);
                        setMessage('Place your bet to start!');
                        setBet(Math.min(100, balance));
                      }}
                    >
                      <RefreshCcw className="inline mr-2" />
                      Play Again
                    </button>
                  </div>
                )}
              </div>
            )}
          </div>
        )}
      </div>

      <style jsx global>{`
        @keyframes slideIn {
          from {
            transform: translateY(-100px);
            opacity: 0;
          }
          to {
            transform: translateY(0);
            opacity: 1;
          }
        }
        .animate-slide-in {
          animation: slideIn 0.3s ease-out;
        }
      `}</style>
    </div>
  );
}