import React, { useState, useEffect, useCallback } from 'react';
import { 
  Dice, Home, Trophy, Users, Bot, 
  Volume2, VolumeX, Undo, HelpCircle 
} from 'lucide-react';

// Game Constants
const GAME_MODES = {
  LOCAL: 'local',
  AI: 'ai',
  ONLINE: 'online'
};

const COLORS = {
  red: { primary: '#FF6B6B', secondary: '#FFE3E3', text: 'white' },
  green: { primary: '#51CF66', secondary: '#D8F5A2', text: 'white' },
  blue: { primary: '#339AF0', secondary: '#D0EBFF', text: 'white' },
  yellow: { primary: '#FCC419', secondary: '#FFF3BF', text: 'black' }
};

const START_POSITIONS = {
  red: 0,
  green: 13,
  blue: 26,
  yellow: 39
};

// Token Component
const Token = ({ color, onClick, size = 24, disabled }) => {
  return (
    <div
      onClick={disabled ? null : onClick}
      className={`
        rounded-full shadow-md transition-all duration-300 
        ${disabled ? 'opacity-60' : 'hover:scale-110 cursor-pointer'}
      `}
      style={{
        backgroundColor: COLORS[color].primary,
        width: size,
        height: size
      }}
    />
  );
};

// Dice Component
const DiceComponent = ({ value, isRolling, onRoll, disabled }) => {
  return (
    <div 
      className={`
        w-16 h-16 bg-white rounded-xl shadow-lg
        flex items-center justify-center cursor-pointer
        ${isRolling ? 'animate-bounce' : 'hover:shadow-xl'}
        ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
      `}
      onClick={disabled ? null : onRoll}
    >
      {isRolling ? (
        <Dice className="w-8 h-8 text-gray-600 animate-spin" />
      ) : (
        <span className="text-2xl font-bold">{value || '?'}</span>
      )}
    </div>
  );
};

// Game Board Cell
const Cell = ({ position, tokens, isHighlighted, onClick }) => {
  return (
    <div 
      className={`
        w-12 h-12 border border-gray-200
        flex items-center justify-center relative
        ${isHighlighted ? 'bg-blue-100' : 'bg-white'}
      `}
      onClick={onClick}
    >
      {tokens.map((token, index) => (
        <Token
          key={`${token.color}-${token.id}`}
          color={token.color}
          onClick={() => onClick(token)}
          disabled={!token.canMove}
        />
      ))}
    </div>
  );
};

// Player Info Component
const PlayerInfo = ({ color, isCurrentPlayer, tokens, onTokenSelect }) => {
  return (
    <div 
      className={`
        p-4 rounded-lg mb-2
        ${isCurrentPlayer ? 'bg-gray-100' : 'bg-white'}
      `}
    >
      <div className="flex items-center justify-between mb-2">
        <span className="capitalize font-semibold" style={{ color: COLORS[color].primary }}>
          {color}
        </span>
        <span>{tokens.filter(t => t.completed).length} / 4</span>
      </div>
      <div className="flex gap-2">
        {tokens.map(token => (
          <Token
            key={token.id}
            color={color}
            size={20}
            onClick={() => onTokenSelect(token)}
            disabled={!token.canMove}
          />
        ))}
      </div>
    </div>
  );
};

// Main Game Component
const LudoGame = () => {
  const [gameState, setGameState] = useState({
    mode: null,
    players: [],
    currentPlayer: null,
    tokens: {},
    diceValue: null,
    isRolling: false,
    winner: null,
    moveHistory: []
  });

  const [settings, setSettings] = useState({
    sound: true,
    showHelp: false
  });

  // Game initialization
  const initGame = useCallback((mode, numPlayers) => {
    const players = Object.keys(COLORS).slice(0, numPlayers);
    const tokens = {};
    
    players.forEach(color => {
      tokens[color] = Array(4).fill(null).map((_, id) => ({
        id,
        color,
        position: 'home',
        completed: false,
        canMove: false
      }));
    });

    setGameState({
      mode,
      players,
      currentPlayer: players[0],
      tokens,
      diceValue: null,
      isRolling: false,
      winner: null,
      moveHistory: []
    });
  }, []);

  // Handle dice roll
  const handleDiceRoll = useCallback(() => {
    if (gameState.isRolling || gameState.winner) return;

    setGameState(prev => ({ ...prev, isRolling: true }));

    setTimeout(() => {
      const value = Math.floor(Math.random() * 6) + 1;
      
      if (settings.sound) {
        // Play dice sound
        new Audio('/dice.mp3').play().catch(() => {});
      }

      setGameState(prev => ({
        ...prev,
        diceValue: value,
        isRolling: false,
        tokens: updateValidMoves(prev.tokens, prev.currentPlayer, value)
      }));
    }, 1000);
  }, [gameState.isRolling, gameState.winner, settings.sound]);

  // Handle token movement
  const handleTokenMove = useCallback((token) => {
    if (!token.canMove || gameState.winner) return;

    const newState = moveToken(gameState, token);
    
    if (settings.sound) {
      // Play move sound
      new Audio('/move.mp3').play().catch(() => {});
    }

    setGameState(newState);
  }, [gameState, settings.sound]);

  // AI move handler
  useEffect(() => {
    if (gameState.mode === GAME_MODES.AI && 
        gameState.currentPlayer !== gameState.players[0] && 
        !gameState.winner) {
      const timer = setTimeout(() => {
        // AI logic here
        const aiMove = calculateAIMove(gameState);
        if (aiMove) {
          handleTokenMove(aiMove);
        }
      }, 1000);

      return () => clearTimeout(timer);
    }
  }, [gameState, handleTokenMove]);

  // Render game setup screen
  if (!gameState.mode) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="bg-white p-8 rounded-xl shadow-xl max-w-md w-full">
          <h1 className="text-3xl font-bold text-center mb-8">Ludo Game</h1>
          <div className="space-y-4">
            <button 
              className="w-full p-4 bg-blue-500 text-white rounded-lg flex items-center justify-center gap-2"
              onClick={() => initGame(GAME_MODES.LOCAL, 4)}
            >
              <Users /> Local Multiplayer
            </button>
            <button 
              className="w-full p-4 bg-green-500 text-white rounded-lg flex items-center justify-center gap-2"
              onClick={() => initGame(GAME_MODES.AI, 2)}
            >
              <Bot /> Play vs AI
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 p-4 lg:p-8">
      <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Game Board */}
        <div className="lg:col-span-2 bg-white rounded-xl shadow-lg p-4">
          <div className="grid grid-cols-15 gap-0">
            {/* Render board cells */}
          </div>
        </div>

        {/* Game Controls */}
        <div className="space-y-4">
          {/* Game Status */}
          <div className="bg-white p-4 rounded-xl shadow-lg">
            {gameState.winner ? (
              <div className="flex items-center justify-center gap-2">
                <Trophy className="text-yellow-500" />
                <span className="font-bold">Winner: {gameState.winner}</span>
              </div>
            ) : (
              <div className="flex items-center justify-between">
                <span>Current Player:</span>
                <span 
                  className="font-bold capitalize"
                  style={{ color: COLORS[gameState.currentPlayer].primary }}
                >
                  {gameState.currentPlayer}
                </span>
              </div>
            )}
          </div>

          {/* Dice */}
          <div className="bg-white p-4 rounded-xl shadow-lg flex justify-center">
            <DiceComponent
              value={gameState.diceValue}
              isRolling={gameState.isRolling}
              onRoll={handleDiceRoll}
              disabled={!!gameState.winner}
            />
          </div>

          {/* Players */}
          <div className="bg-white p-4 rounded-xl shadow-lg">
            {gameState.players.map(color => (
              <PlayerInfo
                key={color}
                color={color}
                isCurrentPlayer={color === gameState.currentPlayer}
                tokens={gameState.tokens[color]}
                onTokenSelect={handleTokenMove}
              />
            ))}
          </div>

          {/* Controls */}
          <div className="flex justify-center gap-4">
            <button
              className="p-2 rounded-lg bg-gray-100 hover:bg-gray-200"
              onClick={() => setSettings(prev => ({ ...prev, sound: !prev.sound }))}
            >
              {settings.sound ? <Volume2 /> : <VolumeX />}
            </button>
            <button
              className="p-2 rounded-lg bg-gray-100 hover:bg-gray-200"
              onClick={() => setSettings(prev => ({ ...prev, showHelp: !prev.showHelp }))}
            >
              <HelpCircle />
            </button>
          </div>
        </div>
      </div>

      {/* Help Modal */}
      {settings.showHelp && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
          <div className="bg-white p-6 rounded-xl max-w-2xl max-h-[80vh] overflow-y-auto">
            <h2 className="text-2xl font-bold mb-4">How to Play</h2>
            {/* Add rules content */}
            <button
              className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
              onClick={() => setSettings(prev => ({ ...prev, showHelp: false }))}
            >
              Close
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default LudoGame;