import React, { useState, useEffect } from 'react';
import { Shuffle, RotateCcw, HelpCircle, X, Info, Trophy, Clock } from 'lucide-react';

export default function SolitairePlus() {
  // Game state
  const [deck, setDeck] = useState([]);
  const [tableau, setTableau] = useState([[], [], [], []]);
  const [foundation, setFoundation] = useState([[], [], [], []]);
  const [hand, setHand] = useState([]);
  const [score, setScore] = useState(0);
  const [moves, setMoves] = useState(0);
  const [gameOver, setGameOver] = useState(false);
  const [showRules, setShowRules] = useState(false);
  const [selectedCard, setSelectedCard] = useState(null);
  const [selectedSource, setSelectedSource] = useState(null);
  const [gameWon, setGameWon] = useState(false);
  const [showInfo, setShowInfo] = useState(true);
  const [gameTime, setGameTime] = useState(0);
  const [gameActive, setGameActive] = useState(false);

  // Initialize game
  useEffect(() => {
    newGame();
  }, []);

  // Game timer
  useEffect(() => {
    let interval;
    if (gameActive && !gameOver) {
      interval = setInterval(() => {
        setGameTime(prevTime => prevTime + 1);
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [gameActive, gameOver]);

  // Check for win condition
  useEffect(() => {
    if (foundation.every(pile => pile.length === 13)) {
      setGameWon(true);
      setGameOver(true);
      setGameActive(false);
    }
  }, [foundation]);

  const formatTime = (seconds) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };

  const newGame = () => {
    // Create and shuffle deck
    const suits = ['hearts', 'diamonds', 'clubs', 'spades'];
    const values = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
    const newDeck = [];
    
    for (const suit of suits) {
      for (let i = 0; i < values.length; i++) {
        newDeck.push({
          suit,
          value: values[i],
          numValue: i + 1,
          color: suit === 'hearts' || suit === 'diamonds' ? 'red' : 'black',
          id: `${values[i]}-${suit}`
        });
      }
    }
    
    // Fisher-Yates shuffle
    for (let i = newDeck.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [newDeck[i], newDeck[j]] = [newDeck[j], newDeck[i]];
    }
    
    // Set up initial tableau
    const newTableau = [[], [], [], []];
    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 4; j++) {
        newTableau[i].push(newDeck.pop());
      }
    }
    
    setDeck(newDeck);
    setTableau(newTableau);
    setFoundation([[], [], [], []]);
    setHand([]);
    setScore(0);
    setMoves(0);
    setGameOver(false);
    setGameWon(false);
    setSelectedCard(null);
    setSelectedSource(null);
    setGameTime(0);
    setGameActive(true);
  };

  const drawCard = () => {
    if (deck.length === 0 || gameOver) return;
    
    const newHand = [...hand];
    const newDeck = [...deck];
    
    newHand.push(newDeck.pop());
    
    setHand(newHand);
    setDeck(newDeck);
    setMoves(moves + 1);
  };

  const selectCard = (card, source, index, pileIndex = null) => {
    if (gameOver) return;
    
    // If a card is already selected, try to move it
    if (selectedCard) {
      if (source === selectedSource && index === selectedCard.index && pileIndex === selectedCard.pileIndex) {
        // Deselect if clicking the same card
        setSelectedCard(null);
        setSelectedSource(null);
        return;
      }
      
      // Try to move the selected card to the new location
      moveCard(selectedSource, selectedCard.index, selectedCard.pileIndex, source, index, pileIndex);
      setSelectedCard(null);
      setSelectedSource(null);
    } else {
      // Select the card
      setSelectedCard({ card, index, pileIndex });
      setSelectedSource(source);
    }
  };

  const moveCard = (fromSource, fromIndex, fromPileIndex, toSource, toIndex, toPileIndex) => {
    // Handle different move scenarios
    if (fromSource === 'hand' && toSource === 'foundation') {
      moveFromHandToFoundation(fromIndex, toPileIndex);
    } else if (fromSource === 'tableau' && toSource === 'foundation') {
      moveFromTableauToFoundation(fromPileIndex, fromIndex, toPileIndex);
    } else if (fromSource === 'tableau' && toSource === 'tableau') {
      moveFromTableauToTableau(fromPileIndex, fromIndex, toPileIndex);
    } else if (fromSource === 'hand' && toSource === 'tableau') {
      moveFromHandToTableau(fromIndex, toPileIndex);
    }
  };

  const moveFromHandToFoundation = (handIndex, foundationIndex) => {
    const card = hand[handIndex];
    const foundationPile = foundation[foundationIndex];
    
    // Check if valid move (A on empty or same suit and one higher value)
    if (
      (foundationPile.length === 0 && card.value === 'A') ||
      (foundationPile.length > 0 && 
       foundationPile[foundationPile.length - 1].suit === card.suit && 
       foundationPile[foundationPile.length - 1].numValue === card.numValue - 1)
    ) {
      const newHand = [...hand];
      const newFoundation = [...foundation];
      
      // Remove from hand
      newHand.splice(handIndex, 1);
      
      // Add to foundation
      newFoundation[foundationIndex] = [...foundationPile, card];
      
      setHand(newHand);
      setFoundation(newFoundation);
      setScore(score + 10);
      setMoves(moves + 1);
    }
  };

  const moveFromTableauToFoundation = (tableauIndex, cardIndex, foundationIndex) => {
    const tableauPile = tableau[tableauIndex];
    if (cardIndex !== tableauPile.length - 1) return; // Only top card can be moved
    
    const card = tableauPile[cardIndex];
    const foundationPile = foundation[foundationIndex];
    
    // Check if valid move
    if (
      (foundationPile.length === 0 && card.value === 'A') ||
      (foundationPile.length > 0 && 
       foundationPile[foundationPile.length - 1].suit === card.suit && 
       foundationPile[foundationPile.length - 1].numValue === card.numValue - 1)
    ) {
      const newTableau = [...tableau];
      const newFoundation = [...foundation];
      
      // Remove from tableau
      newTableau[tableauIndex] = tableauPile.slice(0, -1);
      
      // Add to foundation
      newFoundation[foundationIndex] = [...foundationPile, card];
      
      setTableau(newTableau);
      setFoundation(newFoundation);
      setScore(score + 10);
      setMoves(moves + 1);
    }
  };

  const moveFromTableauToTableau = (fromPileIndex, cardIndex, toPileIndex) => {
    const fromPile = tableau[fromPileIndex];
    const toPile = tableau[toPileIndex];
    
    if (cardIndex !== fromPile.length - 1) return; // Only top card can be moved
    if (fromPileIndex === toPileIndex) return; // Can't move to same pile
    
    const card = fromPile[cardIndex];
    
    // Check if valid move (K on empty or different color and one lower value)
    if (
      (toPile.length === 0 && card.value === 'K') ||
      (toPile.length > 0 && 
       toPile[toPile.length - 1].color !== card.color && 
       toPile[toPile.length - 1].numValue === card.numValue + 1)
    ) {
      const newTableau = [...tableau];
      
      // Remove from source pile
      newTableau[fromPileIndex] = fromPile.slice(0, -1);
      
      // Add to destination pile
      newTableau[toPileIndex] = [...toPile, card];
      
      setTableau(newTableau);
      setScore(score + 5);
      setMoves(moves + 1);
    }
  };

  const moveFromHandToTableau = (handIndex, tableauIndex) => {
    const card = hand[handIndex];
    const tableauPile = tableau[tableauIndex];
    
    // Check if valid move
    if (
      (tableauPile.length === 0 && card.value === 'K') ||
      (tableauPile.length > 0 && 
       tableauPile[tableauPile.length - 1].color !== card.color && 
       tableauPile[tableauPile.length - 1].numValue === card.numValue + 1)
    ) {
      const newHand = [...hand];
      const newTableau = [...tableau];
      
      // Remove from hand
      newHand.splice(handIndex, 1);
      
      // Add to tableau
      newTableau[tableauIndex] = [...tableauPile, card];
      
      setHand(newHand);
      setTableau(newTableau);
      setScore(score + 5);
      setMoves(moves + 1);
    }
  };

  const renderCard = (card, source, index, pileIndex = null) => {
    if (!card) return null;
    
    const isSelected = 
      selectedCard && 
      selectedSource === source && 
      selectedCard.index === index && 
      selectedCard.pileIndex === pileIndex;
    
    const suitSymbol = {
      'hearts': '♥',
      'diamonds': '♦',
      'clubs': '♣',
      'spades': '♠'
    };

    const suitColor = card.color === 'red' ? 'text-red-600' : 'text-gray-900';
    
    return (
      <div 
        key={card.id}
        className={`relative flex items-center justify-center w-24 h-36 bg-white rounded-xl shadow-lg border-2 
          ${isSelected ? 'border-blue-500 ring-4 ring-blue-300' : 'border-gray-200'} 
          cursor-pointer transition-all duration-200 hover:shadow-xl
          ${isSelected ? 'transform -translate-y-3' : 'hover:-translate-y-1'}`}
        onClick={() => selectCard(card, source, index, pileIndex)}
      >
        <div className={`absolute top-2 left-2 ${suitColor} font-bold text-xl`}>
          {card.value}
        </div>
        <div className={`${suitColor} text-4xl`}>
          {suitSymbol[card.suit]}
        </div>
        <div className={`absolute bottom-2 right-2 ${suitColor} font-bold text-xl`}>
          {card.value}
        </div>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-emerald-800 to-emerald-950 p-6 flex flex-col">
      {/* Header */}
      <div className="flex flex-col md:flex-row justify-between items-center mb-8 text-white">
        <h1 className="text-4xl font-bold mb-4 md:mb-0 text-center md:text-left">
          <span className="text-yellow-300">Solitaire</span> Plus
        </h1>
        <div className="flex flex-wrap justify-center gap-3">
          <div className="bg-emerald-900/80 p-3 rounded-xl shadow-md flex items-center gap-2">
            <Trophy size={20} className="text-yellow-300" />
            <span className="font-bold text-lg">{score}</span>
          </div>
          <div className="bg-emerald-900/80 p-3 rounded-xl shadow-md flex items-center gap-2">
            <Clock size={20} className="text-blue-300" />
            <span className="font-bold text-lg">{formatTime(gameTime)}</span>
          </div>
          <div className="bg-emerald-900/80 p-3 rounded-xl shadow-md flex items-center gap-2">
            <span className="text-gray-300">Moves:</span>
            <span className="font-bold text-lg">{moves}</span>
          </div>
          <button 
            onClick={() => newGame()} 
            className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-xl shadow-md transition-all hover:shadow-lg"
          >
            <RotateCcw size={18} /> New Game
          </button>
          <button 
            onClick={() => setShowRules(true)} 
            className="flex items-center gap-2 bg-gray-700 hover:bg-gray-800 text-white px-4 py-3 rounded-xl shadow-md transition-all hover:shadow-lg"
          >
            <HelpCircle size={18} /> Rules
          </button>
        </div>
      </div>

      {/* Game area */}
      <div className="flex-1 flex flex-col gap-10 items-center">
        {/* Foundation area */}
        <div className="flex justify-center gap-4 md:gap-6">
          {foundation.map((pile, pileIndex) => (
            <div 
              key={`foundation-${pileIndex}`} 
              className={`w-24 h-36 rounded-xl border-2 border-dashed 
                ${pile.length > 0 ? 'border-transparent' : 'border-white/40'} 
                flex items-center justify-center transition-all
                ${selectedCard && selectedSource !== 'foundation' ? 'hover:bg-white/10' : ''}`}
              onClick={() => {
                if (selectedCard && selectedSource !== 'foundation') {
                  moveCard(selectedSource, selectedCard.index, selectedCard.pileIndex, 'foundation', 0, pileIndex);
                  setSelectedCard(null);
                  setSelectedSource(null);
                }
              }}
            >
              {pile.length > 0 ? (
                renderCard(pile[pile.length - 1], 'foundation', pile.length - 1, pileIndex)
              ) : (
                <div className="text-white/60 text-xs text-center font-medium">
                  <div className="text-2xl mb-1">♠♥♦♣</div>
                  Foundation {pileIndex + 1}
                </div>
              )}
            </div>
          ))}
        </div>

        {/* Tableau area */}
        <div className="flex flex-wrap justify-center gap-4 md:gap-6">
          {tableau.map((pile, pileIndex) => (
            <div 
              key={`tableau-${pileIndex}`} 
              className="flex flex-col items-center"
            >
              {pile.length > 0 ? (
                pile.map((card, cardIndex) => (
                  <div 
                    key={card.id} 
                    className={`${cardIndex > 0 ? '-mt-24' : ''}`}
                  >
                    {renderCard(card, 'tableau', cardIndex, pileIndex)}
                  </div>
                ))
              ) : (
                <div 
                  className={`w-24 h-36 rounded-xl border-2 border-dashed border-white/40 
                    flex items-center justify-center
                    ${selectedCard ? 'hover:bg-white/10' : ''}`}
                  onClick={() => {
                    if (selectedCard) {
                      moveCard(selectedSource, selectedCard.index, selectedCard.pileIndex, 'tableau', 0, pileIndex);
                      setSelectedCard(null);
                      setSelectedSource(null);
                    }
                  }}
                >
                  <div className="text-white/60 text-sm text-center">
                    <div className="text-lg mb-1">K</div>
                    Empty
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>

        {/* Hand and deck area */}
        <div className="flex justify-center gap-8 mt-4">
          <div 
            className={`w-24 h-36 bg-emerald-900/80 rounded-xl border-2 border-white/30 
              flex items-center justify-center cursor-pointer shadow-md 
              transition-transform hover:shadow-lg ${deck.length > 0 ? 'hover:-translate-y-1' : ''}`}
            onClick={drawCard}
          >
            {deck.length > 0 ? (
              <div className="flex flex-col items-center">
                <div className="w-20 h-32 bg-blue-800 rounded-lg flex items-center justify-center shadow-inner">
                  <Shuffle className="text-white" size={28} />
                </div>
                <div className="text-white text-xs mt-1 font-medium">{deck.length} cards left</div>
              </div>
            ) : (
              <div className="text-white/60 text-sm">Empty Deck</div>
            )}
          </div>

          <div className="flex gap-4">
            {hand.map((card, index) => (
              <div key={card.id} className="transition-all">
                {renderCard(card, 'hand', index)}
              </div>
            ))}
            {hand.length === 0 && (
              <div className="w-24 h-36 rounded-xl border-2 border-dashed border-white/40 flex items-center justify-center">
                <div className="text-white/60 text-sm text-center">
                  Hand
                  <div className="text-xs mt-1">Draw cards from the deck</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Game over modal */}
      {gameOver && (
        <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-10">
          <div className="bg-white p-8 rounded-2xl max-w-md text-center shadow-2xl transform transition-all animate-fadeIn">
            <div className="mb-6">
              {gameWon ? (
                <div className="w-20 h-20 mx-auto bg-yellow-100 rounded-full flex items-center justify-center">
                  <Trophy size={40} className="text-yellow-500" />
                </div>
              ) : (
                <div className="w-20 h-20 mx-auto bg-blue-100 rounded-full flex items-center justify-center">
                  <Info size={40} className="text-blue-500" />
                </div>
              )}
            </div>
            <h2 className="text-3xl font-bold mb-4">{gameWon ? 'You Won!' : 'Game Over'}</h2>
            <p className="text-xl mb-6 text-gray-700">
              {gameWon 
                ? 'Congratulations! You completed the game.' 
                : 'No more possible moves.'}
            </p>
            <div className="text-lg mb-8 bg-gray-100 p-4 rounded-xl">
              <div className="flex justify-between items-center mb-2">
                <span className="text-gray-600">Final Score:</span>
                <span className="font-bold text-xl">{score}</span>
              </div>
              <div className="flex justify-between items-center mb-2">
                <span className="text-gray-600">Moves Made:</span>
                <span className="font-bold">{moves}</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-gray-600">Time:</span>
                <span className="font-bold">{formatTime(gameTime)}</span>
              </div>
            </div>
            <button 
              onClick={() => newGame()} 
              className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-xl text-lg font-bold transition-all hover:shadow-lg w-full"
            >
              Play Again
            </button>
          </div>
        </div>
      )}

      {/* Rules modal */}
      {showRules && (
        <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-10">
          <div className="bg-white p-8 rounded-2xl max-w-2xl shadow-2xl m-4 max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-bold">How to Play Solitaire Plus</h2>
              <button 
                onClick={() => setShowRules(false)}
                className="text-gray-500 hover:text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-full p-2 transition-colors"
              >
                <X size={24} />
              </button>
            </div>
            <div className="text-gray-700 space-y-6">
              <div className="bg-blue-50 p-4 rounded-xl">
                <p className="font-medium text-lg">
                  <strong>Objective:</strong> Move all cards to the foundation piles, sorted by suit from Ace to King.
                </p>
              </div>
              
              <div>
                <h3 className="text-xl font-bold mb-3">Game Elements:</h3>
                <ul className="list-none space-y-3">
                  <li className="flex items-start gap-3">
                    <div className="bg-emerald-100 p-2 rounded-full text-emerald-700 mt-0.5">1</div>
                    <div>
                      <strong>Tableau:</strong> Four columns where you build descending sequences with alternating colors (red and black).
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="bg-emerald-100 p-2 rounded-full text-emerald-700 mt-0.5">2</div>
                    <div>
                      <strong>Foundation:</strong> Four piles at the top where you build ascending sequences by suit, starting with Aces.
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="bg-emerald-100 p-2 rounded-full text-emerald-700 mt-0.5">3</div>
                    <div>
                      <strong>Deck:</strong> Cards you can draw from when you need more options.
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="bg-emerald-100 p-2 rounded-full text-emerald-700 mt-0.5">4</div>
                    <div>
                      <strong>Hand:</strong> Cards drawn from the deck that you can play.
                    </div>
                  </li>
                </ul>
              </div>
              
              <div>
                <h3 className="text-xl font-bold mb-3">Rules:</h3>
                <ul className="list-disc pl-5 space-y-2">
                  <li>In the tableau, cards must be placed in descending order with alternating colors (e.g., black 10 can be placed on red Jack).</li>
                  <li>Only Kings can be placed on empty tableau spots.</li>
                  <li>In the foundation, cards must be placed in ascending order by suit (e.g., 2 of hearts on Ace of hearts).</li>
                  <li>Only Aces can be placed on empty foundation spots.</li>
                  <li>You can move cards from your hand to either the tableau or foundation.</li>
                  <li>Only the top card of each tableau pile can be moved.</li>
                </ul>
              </div>
              
              <div className="bg-gray-100 p-4 rounded-xl">
                <h3 className="text-xl font-bold mb-3">Scoring:</h3>
                <ul className="list-none space-y-2">
                  <li className="flex justify-between">
                    <span>Moving a card to the foundation:</span>
                    <span className="font-bold">10 points</span>
                  </li>
                  <li className="flex justify-between">
                    <span>Moving a card within the tableau:</span>
                    <span className="font-bold">5 points</span>
                  </li>
                </ul>
              </div>
            </div>
            <button 
              onClick={() => setShowRules(false)} 
              className="mt-8 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-xl font-bold transition-all hover:shadow-lg w-full"
            >
              Got it!
            </button>
          </div>
        </div>
      )}

      {/* Info tooltip */}
      {showInfo && (
        <div className="fixed bottom-6 right-6 bg-white p-5 rounded-xl shadow-xl max-w-md z-10 animate-fadeIn">
          <div className="flex justify-between items-center mb-3">
            <div className="flex items-center gap-2">
              <Info size={22} className="text-blue-600" />
              <h3 className="font-bold text-lg">Quick Tips</h3>
            </div>
            <button 
              onClick={() => setShowInfo(false)}
              className="text-gray-500 hover:text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-full p-1.5 transition-colors"
            >
              <X size={18} />
            </button>
          </div>
          <ul className="text-gray-700 space-y-2">
            <li className="flex items-start gap-2">
              <div className="text-blue-500 font-bold">•</div>
              <div>Click a card to select it, then click a destination to move it</div>
            </li>
            <li className="flex items-start gap-2">
              <div className="text-blue-500 font-bold">•</div>
              <div>Click the deck to draw new cards to your hand</div>
            </li>
            <li className="flex items-start gap-2">
              <div className="text-blue-500 font-bold">•</div>
              <div>Build descending sequences with alternating colors in the tableau</div>
            </li>
            <li className="flex items-start gap-2">
              <div className="text-blue-500 font-bold">•</div>
              <div>Build ascending sequences by suit in the foundation</div>
            </li>
          </ul>
        </div>
      )}

      {/* Add some CSS animations */}
      <style jsx>{`
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn {
          animation: fadeIn 0.3s ease-out forwards;
        }
      `}</style>
    </div>
  );
}