import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Badge } from '@/components/ui/badge';
import { Crown, Circle, RotateCcw, BookOpen, Trophy } from 'lucide-react';
import SocialShare from '@/components/SocialShare';

type Player = 0 | 1;
type CellState = 'empty' | 'penny' | 'gold';

interface GameState {
  track: CellState[];
  currentPlayer: Player;
  winner: Player | null;
  gameStarted: boolean;
  selectedCoin: number | null;
  moveHistory: string[];
}

const GoldCoinGame: React.FC = () => {
  const [gameState, setGameState] = useState<GameState>({
    track: Array(15).fill('empty'),
    currentPlayer: 0,
    winner: null,
    gameStarted: false,
    selectedCoin: null,
    moveHistory: []
  });

  const [showRules, setShowRules] = useState(false);
  const [showGameOver, setShowGameOver] = useState(false);

  const playerNames = ['Player 1', 'Player 2'];
  const playerColors = ['#3b82f6', '#ef4444'];

  const generateRandomBoard = (): CellState[] => {
    const track = Array(15).fill('empty') as CellState[];
    
    // Always place the gold coin at position 7-14 (random)
    const goldPosition = Math.floor(Math.random() * 8) + 7;
    track[goldPosition] = 'gold';
    
    // Place 3-5 pennies randomly in positions 0-6
    const numPennies = Math.floor(Math.random() * 3) + 3; // 3-5 pennies
    const availablePositions = Array.from({length: 7}, (_, i) => i); // positions 0-6
    
    for (let i = 0; i < numPennies; i++) {
      if (availablePositions.length > 0) {
        const randomIndex = Math.floor(Math.random() * availablePositions.length);
        const position = availablePositions.splice(randomIndex, 1)[0];
        track[position] = 'penny';
      }
    }
    
    return track;
  };

  const initializeGame = () => {
    setGameState({
      track: generateRandomBoard(),
      currentPlayer: 0,
      winner: null,
      gameStarted: true,
      selectedCoin: null,
      moveHistory: []
    });
  };

  const resetGame = () => {
    setGameState({
      track: Array(15).fill('empty'),
      currentPlayer: 0,
      winner: null,
      gameStarted: false,
      selectedCoin: null,
      moveHistory: []
    });
    setShowGameOver(false);
  };

  const canMoveCoin = (fromIndex: number, toIndex: number): boolean => {
    if (fromIndex <= toIndex) return false; // Can only move left
    if (toIndex < 0) return false; // Can't move off the track
    if (gameState.track[toIndex] !== 'empty') return false; // Can't move to a position with a coin
    
    // Check if there are any coins in the way
    for (let i = toIndex + 1; i < fromIndex; i++) {
      if (gameState.track[i] !== 'empty') {
        return false;
      }
    }
    
    return true;
  };

  const canTakeCoin = (index: number): boolean => {
    // Can only take the leftmost coin
    for (let i = 0; i < index; i++) {
      if (gameState.track[i] !== 'empty') {
        return false;
      }
    }
    return gameState.track[index] !== 'empty';
  };

  const getValidMovePositions = (fromIndex: number): number[] => {
    const validPositions: number[] = [];
    for (let i = 0; i < fromIndex; i++) {
      if (canMoveCoin(fromIndex, i)) {
        validPositions.push(i);
      }
    }
    return validPositions;
  };

  const handleCellClick = (index: number) => {
    if (gameState.winner !== null || !gameState.gameStarted) return;

    const cellState = gameState.track[index];
    
    // If a coin is selected, try to move it
    if (gameState.selectedCoin !== null) {
      // If clicking on the same coin, deselect it
      if (gameState.selectedCoin === index) {
        setGameState(prev => ({
          ...prev,
          selectedCoin: null
        }));
        return;
      }
      
      if (canMoveCoin(gameState.selectedCoin, index)) {
        const newTrack = [...gameState.track];
        newTrack[index] = newTrack[gameState.selectedCoin];
        newTrack[gameState.selectedCoin] = 'empty';
        
        const moveDescription = `Player ${gameState.currentPlayer + 1} moved ${newTrack[index] === 'gold' ? 'gold coin' : 'penny'} from position ${gameState.selectedCoin + 1} to position ${index + 1}`;
        
        setGameState(prev => ({
          ...prev,
          track: newTrack,
          currentPlayer: ((prev.currentPlayer + 1) % 2) as Player,
          selectedCoin: null,
          moveHistory: [...prev.moveHistory, moveDescription]
        }));
      }
      return;
    }
    
    // Select a coin if it's not empty
    if (cellState !== 'empty') {
      setGameState(prev => ({
        ...prev,
        selectedCoin: index
      }));
    }
  };

  const handleTakeCoin = () => {
    if (gameState.winner !== null || !gameState.gameStarted || gameState.selectedCoin === null) return;
    if (!canTakeCoin(gameState.selectedCoin)) return;

    const cellState = gameState.track[gameState.selectedCoin];
    const newTrack = [...gameState.track];
    newTrack[gameState.selectedCoin] = 'empty';
    
    const moveDescription = `Player ${gameState.currentPlayer + 1} took ${cellState === 'gold' ? 'gold coin' : 'penny'} from position ${gameState.selectedCoin + 1}`;
    
    // Check if this is a winning move
    const isWinningMove = cellState === 'gold';
    
    setGameState(prev => ({
      ...prev,
      track: newTrack,
      currentPlayer: isWinningMove ? prev.currentPlayer : ((prev.currentPlayer + 1) % 2) as Player,
      winner: isWinningMove ? prev.currentPlayer : null,
      selectedCoin: null,
      moveHistory: [...prev.moveHistory, moveDescription]
    }));

    if (isWinningMove) {
      setShowGameOver(true);
    }
  };

  const renderCell = (cellState: CellState, index: number) => {
    const isSelected = gameState.selectedCoin === index;
    const validPositions = gameState.selectedCoin !== null ? getValidMovePositions(gameState.selectedCoin) : [];
    const isValidMoveTarget = validPositions.includes(index);
    const isClickable = gameState.gameStarted && (cellState !== 'empty' || gameState.selectedCoin !== null);
    
    return (
      <div
        key={index}
        className={`
          relative w-14 h-14 border-2 rounded-lg flex items-center justify-center cursor-pointer
          transition-all duration-200 hover:scale-105 shadow-sm
          ${isSelected ? 'border-blue-500 bg-blue-50 shadow-md' : 'border-gray-300 bg-white'}
          ${isValidMoveTarget ? 'border-green-400 bg-green-50 shadow-md' : ''}
          ${!isClickable ? 'cursor-default hover:scale-100' : 'hover:shadow-md'}
        `}
        onClick={() => handleCellClick(index)}
      >
        {cellState === 'gold' && (
          <div className="flex items-center justify-center">
            <Crown className="w-7 h-7 text-yellow-500 drop-shadow-sm" />
          </div>
        )}
        {cellState === 'penny' && (
          <div className="flex items-center justify-center">
            <Circle className="w-7 h-7 text-orange-500 fill-orange-500 drop-shadow-sm" />
          </div>
        )}
        <div className="absolute -bottom-7 text-xs text-gray-500 font-mono font-medium">
          {index + 1}
        </div>
      </div>
    );
  };

  const getLeftmostCoin = (): { index: number; type: string } | null => {
    for (let i = 0; i < gameState.track.length; i++) {
      if (gameState.track[i] !== 'empty') {
        return { index: i, type: gameState.track[i] };
      }
    }
    return null;
  };

  const leftmostCoin = getLeftmostCoin();
  const canTakeSelectedCoin = gameState.selectedCoin !== null && canTakeCoin(gameState.selectedCoin);

  return (
    <div className="max-w-6xl mx-auto p-6 space-y-6">
      <Card className="shadow-lg">
        <CardHeader className="text-center pb-6">
          <CardTitle className="flex items-center justify-center gap-3 text-3xl">
            <Crown className="w-8 h-8 text-yellow-500" />
            The Gold Coin Game
            <Crown className="w-8 h-8 text-yellow-500" />
          </CardTitle>
          <CardDescription className="text-lg max-w-2xl mx-auto">
            A strategic two-player game where you move coins to the left or take the leftmost coin. 
            The player who takes the gold coin wins!
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-8">
          {/* Game Controls */}
          <div className="flex justify-center gap-4">
            {!gameState.gameStarted ? (
              <Button onClick={initializeGame} size="lg" className="px-8">
                Start Game
              </Button>
            ) : (
              <Button onClick={resetGame} variant="outline" size="lg" className="px-8">
                <RotateCcw className="w-4 h-4 mr-2" />
                Reset Game
              </Button>
            )}
            <Button onClick={() => setShowRules(true)} variant="outline" size="lg" className="px-8">
              <BookOpen className="w-4 h-4 mr-2" />
              Rules
            </Button>
          </div>

          {/* Game Status */}
          {gameState.gameStarted && (
            <div className="flex flex-col sm:flex-row items-center justify-between p-6 bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl border">
              <div className="flex items-center gap-4 mb-4 sm:mb-0">
                <span className="font-semibold text-lg">Current Player:</span>
                <Badge 
                  style={{ backgroundColor: playerColors[gameState.currentPlayer] }}
                  className="text-white text-lg px-4 py-2"
                >
                  {playerNames[gameState.currentPlayer]}
                </Badge>
              </div>
              {gameState.selectedCoin !== null && (
                <div className="text-sm text-blue-700 bg-blue-100 px-4 py-2 rounded-lg font-medium">
                  Selected coin at position {gameState.selectedCoin + 1}. Click a position to move it.
                </div>
              )}
            </div>
          )}

          {/* Game Board */}
          <div className="space-y-6">
            <div className="flex justify-center">
              <div className="bg-gray-100 p-8 rounded-2xl shadow-inner">
                <div className="flex gap-3 items-end">
                  {gameState.track.map((cellState, index) => (
                    <div key={index} className="flex flex-col items-center">
                      {renderCell(cellState, index)}
                    </div>
                  ))}
                </div>
              </div>
            </div>
            
            {/* Instructions */}
            <div className="text-center">
              <div className="inline-block bg-gray-50 px-6 py-3 rounded-lg border">
                <p className="text-sm text-gray-700 font-medium">
                  {!gameState.gameStarted ? (
                    "Click 'Start Game' to begin with a randomized board"
                  ) : gameState.selectedCoin !== null ? (
                    canTakeSelectedCoin ? (
                      "Use the take button below to remove this coin"
                    ) : (
                      "Click a highlighted position to move the selected coin"
                    )
                  ) : (
                    "Click on a coin to select it, then click a position to move it left, or take the leftmost coin"
                  )}
                </p>
              </div>
            </div>

            {/* Take Coin Button */}
            {canTakeSelectedCoin && (
              <div className="flex justify-center">
                <Button 
                  onClick={handleTakeCoin}
                  size="lg"
                  className="bg-green-600 hover:bg-green-700 text-white px-8"
                >
                  Take {gameState.track[gameState.selectedCoin!] === 'gold' ? 'Gold Coin' : 'Penny'}
                </Button>
              </div>
            )}
          </div>

          {/* Move History */}
          {gameState.moveHistory.length > 0 && (
            <div className="space-y-3">
              <h3 className="font-semibold text-lg text-center">Move History</h3>
              <div className="max-h-40 overflow-y-auto space-y-2 bg-gray-50 p-4 rounded-lg">
                {gameState.moveHistory.map((move, index) => (
                  <div key={index} className="text-sm text-gray-700 bg-white p-3 rounded border-l-4 border-blue-500">
                    {move}
                  </div>
                ))}
              </div>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Rules Dialog */}
      <Dialog open={showRules} onOpenChange={setShowRules}>
        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <BookOpen className="w-5 h-5" />
              The Gold Coin Game Rules
            </DialogTitle>
          </DialogHeader>
          <div className="space-y-6 text-sm">
            <div>
              <h4 className="font-semibold mb-2 text-lg">Objective</h4>
              <p className="text-gray-700">Be the first player to acquire the gold coin and win the game!</p>
            </div>
            
            <div>
              <h4 className="font-semibold mb-2 text-lg">Setup</h4>
              <p className="text-gray-700">The game starts with coins placed on a 15-position track. The gold coin is positioned farthest to the right.</p>
            </div>
            
            <div>
              <h4 className="font-semibold mb-2 text-lg">On Your Turn</h4>
              <p className="text-gray-700 mb-3">You have two options:</p>
              <ol className="list-decimal list-inside space-y-2 ml-4 text-gray-700">
                <li><strong>Move a coin:</strong> Move any coin to the left by one or more spaces. A coin cannot jump over another coin.</li>
                <li><strong>Take a coin:</strong> Take the leftmost coin on the track into your possession.</li>
              </ol>
            </div>
            
            <div>
              <h4 className="font-semibold mb-2 text-lg">Winning</h4>
              <p className="text-gray-700">The player who successfully takes the gold coin is declared the winner!</p>
            </div>
            
            <div>
              <h4 className="font-semibold mb-2 text-lg">Strategy Tips</h4>
              <ul className="list-disc list-inside space-y-2 ml-4 text-gray-700">
                <li>Try to control the position of the gold coin</li>
                <li>Use pennies to block your opponent's moves</li>
                <li>Plan several moves ahead</li>
                <li>Don't always take the first available coin</li>
                <li>Consider the spacing between coins carefully</li>
              </ul>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      {/* Game Over Dialog */}
      <Dialog open={showGameOver} onOpenChange={setShowGameOver}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle className="flex items-center justify-center gap-2">
              <Trophy className="w-6 h-6 text-yellow-500" />
              Game Over!
            </DialogTitle>
          </DialogHeader>
          <div className="text-center space-y-6">
            <div className="flex items-center justify-center gap-3">
              <Crown className="w-10 h-10 text-yellow-500" />
              <span className="text-2xl font-bold text-green-600">
                {playerNames[gameState.winner!]} wins!
              </span>
            </div>
            <p className="text-gray-600 text-lg">
              Congratulations! {playerNames[gameState.winner!]} successfully acquired the gold coin.
            </p>
            <Button onClick={resetGame} className="w-full" size="lg">
              Play Again
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      <SocialShare 
        title="The Gold Coin Game"
        description="A strategic two-player game where you move coins to acquire the gold coin!"
        url={window.location.href}
      />
    </div>
  );
};

export default GoldCoinGame;