import { useState, useEffect } from 'react';
import { ChevronDown, Crown, Timer, RotateCcw, Settings } from 'lucide-react';

export default function ChessApp() {
  const [board, setBoard] = useState(initializeBoard());
  const [selectedPiece, setSelectedPiece] = useState(null);
  const [currentPlayer, setCurrentPlayer] = useState('white');
  const [gameMode, setGameMode] = useState('ai'); // 'ai', 'local', 'online'
  const [gameTime, setGameTime] = useState(600); // 10 minutes per player
  const [whiteTime, setWhiteTime] = useState(gameTime);
  const [blackTime, setBlackTime] = useState(gameTime);
  const [isTimerRunning, setIsTimerRunning] = useState(false);

  useEffect(() => {
    let interval;
    if (isTimerRunning) {
      interval = setInterval(() => {
        if (currentPlayer === 'white') {
          setWhiteTime(prev => Math.max(0, prev - 1));
        } else {
          setBlackTime(prev => Math.max(0, prev - 1));
        }
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [isTimerRunning, currentPlayer]);

  function initializeBoard() {
    const board = Array(8).fill().map(() => Array(8).fill(null));
    // Initialize pawns
    for (let i = 0; i < 8; i++) {
      board[1][i] = { type: 'pawn', color: 'black' };
      board[6][i] = { type: 'pawn', color: 'white' };
    }
    // Initialize other pieces
    const backRow = ['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook'];
    backRow.forEach((piece, i) => {
      board[0][i] = { type: piece, color: 'black' };
      board[7][i] = { type: piece, color: 'white' };
    });
    return board;
  }

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

  function handleSquareClick(row, col) {
    if (!selectedPiece) {
      if (board[row][col] && board[row][col].color === currentPlayer) {
        setSelectedPiece({ row, col });
      }
    } else {
      // Move validation would go here
      const newBoard = [...board];
      newBoard[row][col] = board[selectedPiece.row][selectedPiece.col];
      newBoard[selectedPiece.row][selectedPiece.col] = null;
      setBoard(newBoard);
      setSelectedPiece(null);
      setCurrentPlayer(current => current === 'white' ? 'black' : 'white');
      if (!isTimerRunning) setIsTimerRunning(true);
    }
  }

  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <div className="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
        <div className="p-6">
          <div className="flex justify-between items-center mb-6">
            <h1 className="text-3xl font-bold text-gray-800 flex items-center gap-2">
              Chess <Crown className="h-8 w-8 text-yellow-500" />
            </h1>
            <div className="flex gap-4">
              <button className="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                <Settings className="h-5 w-5" />
                Settings
              </button>
              <select 
                className="px-4 py-2 bg-gray-100 rounded-lg appearance-none hover:bg-gray-200 transition-colors cursor-pointer"
                value={gameMode}
                onChange={(e) => setGameMode(e.target.value)}
              >
                <option value="ai">vs AI</option>
                <option value="local">Local Game</option>
                <option value="online">Online</option>
              </select>
            </div>
          </div>

          <div className="flex gap-8">
            <div className="flex-1">
              <div className="grid grid-cols-8 gap-0.5 bg-gray-300 p-0.5 rounded-lg">
                {board.map((row, rowIndex) => (
                  row.map((piece, colIndex) => {
                    const isSelected = selectedPiece?.row === rowIndex && selectedPiece?.col === colIndex;
                    const isLight = (rowIndex + colIndex) % 2 === 0;
                    return (
                      <div
                        key={`${rowIndex}-${colIndex}`}
                        className={`
                          aspect-square flex items-center justify-center text-2xl
                          ${isLight ? 'bg-amber-50' : 'bg-amber-800'}
                          ${isSelected ? 'ring-4 ring-blue-400' : ''}
                          cursor-pointer hover:opacity-80 transition-opacity
                        `}
                        onClick={() => handleSquareClick(rowIndex, colIndex)}
                      >
                        {piece && getPieceSymbol(piece)}
                      </div>
                    );
                  })
                ))}
              </div>
            </div>

            <div className="w-64 space-y-6">
              <div className="bg-gray-100 p-4 rounded-lg">
                <h3 className="text-lg font-semibold mb-2">Game Info</h3>
                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="flex items-center gap-2">
                      <Timer className="h-4 w-4" /> White
                    </span>
                    <span className="font-mono">{formatTime(whiteTime)}</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="flex items-center gap-2">
                      <Timer className="h-4 w-4" /> Black
                    </span>
                    <span className="font-mono">{formatTime(blackTime)}</span>
                  </div>
                </div>
              </div>

              <div className="space-y-2">
                <button 
                  className="w-full px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors flex items-center justify-center gap-2"
                  onClick={() => {
                    setBoard(initializeBoard());
                    setCurrentPlayer('white');
                    setWhiteTime(gameTime);
                    setBlackTime(gameTime);
                    setIsTimerRunning(false);
                  }}
                >
                  <RotateCcw className="h-4 w-4" />
                  New Game
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function getPieceSymbol(piece) {
  const symbols = {
    'white': {
      'king': '♔',
      'queen': '♕',
      'rook': '♖',
      'bishop': '♗',
      'knight': '♘',
      'pawn': '♙'
    },
    'black': {
      'king': '♚',
      'queen': '♛',
      'rook': '♜',
      'bishop': '♝',
      'knight': '♞',
      'pawn': '♟'
    }
  };
  return symbols[piece.color][piece.type];
}