import { useState, useEffect } from 'react';
import { X, Circle, RotateCcw } from 'lucide-react';

export default function TicTacToe() {
  // Game state
  const [board, setBoard] = useState(Array(9).fill(null));
  const [isXNext, setIsXNext] = useState(true);
  const [winner, setWinner] = useState(null);
  const [xMoves, setXMoves] = useState([]);
  const [oMoves, setOMoves] = useState([]);
  const [gameHistory, setGameHistory] = useState([]);

  // Handle cell click
  const handleClick = (index) => {
    // Return if cell is already filled or game is won
    if (winner || board[index] !== null) return;

    const currentPlayer = isXNext ? 'X' : 'O';
    const currentMoves = isXNext ? xMoves : oMoves;
    const newBoard = [...board];

    // If player already has 3 pieces on the board, remove the oldest one
    if (currentMoves.length >= 3) {
      const oldestMoveIndex = currentMoves[0];
      newBoard[oldestMoveIndex] = null;
      
      if (isXNext) {
        setXMoves(xMoves.slice(1).concat(index));
      } else {
        setOMoves(oMoves.slice(1).concat(index));
      }
    } else {
      // Add the new move
      if (isXNext) {
        setXMoves([...xMoves, index]);
      } else {
        setOMoves([...oMoves, index]);
      }
    }

    // Place the new piece
    newBoard[index] = currentPlayer;
    setBoard(newBoard);
    
    // Add to game history
    setGameHistory([...gameHistory, { 
      board: newBoard.slice(), 
      player: currentPlayer, 
      position: index 
    }]);

    // Check for winner
    const gameWinner = calculateWinner(newBoard);
    if (gameWinner) {
      setWinner(gameWinner);
    } else {
      // Switch turns
      setIsXNext(!isXNext);
    }
  };

  // Reset the game
  const resetGame = () => {
    setBoard(Array(9).fill(null));
    setIsXNext(true);
    setWinner(null);
    setXMoves([]);
    setOMoves([]);
    setGameHistory([]);
  };

  // Calculate winner
  const calculateWinner = (squares) => {
    const lines = [
      [0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
      [0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
      [0, 4, 8], [2, 4, 6]             // diagonals
    ];

    for (let i = 0; i < lines.length; i++) {
      const [a, b, c] = lines[i];
      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
        return squares[a];
      }
    }
    return null;
  };

  // Get status message
  const getStatus = () => {
    if (winner) {
      return `Winner: ${winner}`;
    } else {
      return `Next player: ${isXNext ? 'X' : 'O'}`;
    }
  };

  // Render a cell
  const renderCell = (index) => {
    return (
      <button
        className={`w-20 h-20 border-2 border-indigo-400 flex items-center justify-center text-4xl font-bold transition-all duration-300 hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 rounded-md ${
          board[index] ? 'cursor-not-allowed' : 'cursor-pointer'
        }`}
        onClick={() => handleClick(index)}
        disabled={winner !== null}
        aria-label={`Cell ${index}, ${board[index] || 'empty'}`}
      >
        {board[index] === 'X' && <X className="text-indigo-600 w-12 h-12" />}
        {board[index] === 'O' && <Circle className="text-rose-500 w-10 h-10" />}
      </button>
    );
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-indigo-50 to-purple-50 p-4">
      <div className="max-w-md w-full bg-white rounded-xl shadow-lg p-6 mb-6">
        <h1 className="text-3xl font-bold text-center text-indigo-700 mb-6">Tic Tac Toe</h1>
        <p className="text-gray-600 text-center mb-6">
          Each player can only have 3 pieces on the board. When you place a 4th piece, your oldest piece disappears.
        </p>
        
        <div className="mb-6">
          <div className="text-xl font-semibold text-center mb-4">{getStatus()}</div>
          <div className="grid grid-cols-3 gap-2 mx-auto w-fit">
            {Array(9).fill(null).map((_, index) => (
              <div key={index}>{renderCell(index)}</div>
            ))}
          </div>
        </div>
        
        <div className="flex justify-between items-center">
          <div className="text-indigo-600 font-medium">
            X pieces: {xMoves.length}/3
          </div>
          <button
            className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md transition-colors"
            onClick={resetGame}
          >
            <RotateCcw className="w-4 h-4" /> Reset Game
          </button>
          <div className="text-rose-500 font-medium">
            O pieces: {oMoves.length}/3
          </div>
        </div>
      </div>
      
      {gameHistory.length > 0 && (
        <div className="max-w-md w-full bg-white rounded-xl shadow-lg p-6">
          <h2 className="text-xl font-bold text-center text-indigo-700 mb-4">Game History</h2>
          <div className="max-h-60 overflow-y-auto">
            <ul className="space-y-2">
              {gameHistory.map((move, index) => (
                <li key={index} className="text-gray-700 border-b border-gray-100 pb-2">
                  Move {index + 1}: Player {move.player} placed at position {move.position + 1}
                </li>
              ))}
            </ul>
          </div>
        </div>
      )}
    </div>
  );
}