web/src/components/GameInfo.tsx

/// <reference path="../react-app-env.d.ts" />
import * as React from 'react';
const { useState, useEffect } = React;
import { getGameState } from '../services/api';
import { setSoundEnabled, isSoundEnabled, playSound } from '../services/soundService';

interface GameInfoProps {
  boardTheme: 'brown' | 'grey';
  onThemeChange: (theme: 'brown' | 'grey') => void;
}

const GameInfo: React.FC<GameInfoProps> = ({ boardTheme, onThemeChange }) => {
  const [soundOn, setSoundOn] = useState(true);
  const [gameState, setGameState] = useState<any>(null);
  const [moveHistory, setMoveHistory] = useState<string[]>([]);
  const [analysis, setAnalysis] = useState<any>(null);
  const [whiteCaptured, setWhiteCaptured] = useState<string[]>([]);
  const [blackCaptured, setBlackCaptured] = useState<string[]>([]);

  useEffect(() => {
    fetchGameInfo();
    const interval = setInterval(fetchGameInfo, 2000); // Poll every 2 seconds
    
    return () => clearInterval(interval);
  }, []);

  const fetchGameInfo = async () => {
    try {
      const response = await getGameState();
      
      // Track captured pieces by comparing current board with previous board
      if (gameState && response.board_state && response.board_state.fen) {
        const previousPieces = parseFen(gameState.board_state.fen);
        const currentPieces = parseFen(response.board_state.fen);
        
        // Find pieces that were captured in the last move
        const capturedWhitePieces = findCapturedPieces(previousPieces, currentPieces, 'white');
        const capturedBlackPieces = findCapturedPieces(previousPieces, currentPieces, 'black');
        
        if (capturedWhitePieces.length > 0) {
          setWhiteCaptured(prev => [...prev, ...capturedWhitePieces]);
        }
        
        if (capturedBlackPieces.length > 0) {
          setBlackCaptured(prev => [...prev, ...capturedBlackPieces]);
        }
      }
      
      setGameState(response);
      
      if (response.last_analysis) {
        setAnalysis(response.last_analysis);
      }
      
      // Update move history if available
      if (response.board_state && response.board_state.move_count > moveHistory.length) {
        // In a real implementation, you would get the actual moves from the API
        // For now, we'll create placeholder moves with algebraic notation
        if (response.player_move && response.ai_move) {
          setMoveHistory(prev => [
            ...prev, 
            response.player_move, 
            response.ai_move
          ]);
        } else if (response.player_move) {
          setMoveHistory(prev => [...prev, response.player_move]);
        } else if (response.ai_move) {
          setMoveHistory(prev => [...prev, response.ai_move]);
        } else {
          // Fallback if no specific moves are provided
          setMoveHistory(prev => [...prev, `Move ${prev.length + 1}`]);
        }
      }
    } catch (error) {
      console.error('Error fetching game info:', error);
    }
  };
  
  // Helper function to parse FEN string and get pieces
  const parseFen = (fenString: string): {type: string, color: string}[] => {
    const pieces: {type: string, color: string}[] = [];
    const fenParts = fenString.split(' ');
    const ranks = fenParts[0].split('/');
    
    ranks.forEach((rank) => {
      let fileIndex = 0;
      
      for (let i = 0; i < rank.length; i++) {
        const char = rank[i];
        
        if (!isNaN(parseInt(char))) {
          fileIndex += parseInt(char);
        } else {
          const color = char === char.toUpperCase() ? 'white' : 'black';
          const type = char.toLowerCase();
          
          pieces.push({
            type,
            color
          });
          
          fileIndex++;
        }
      }
    });
    
    return pieces;
  };
  
  // Helper function to find captured pieces
  const findCapturedPieces = (
    previousPieces: {type: string, color: string}[], 
    currentPieces: {type: string, color: string}[], 
    color: string
  ): string[] => {
    const captured: string[] = [];
    
    // Count pieces by type in previous and current board
    const previousCount: Record<string, number> = {};
    const currentCount: Record<string, number> = {};
    
    previousPieces.forEach(piece => {
      if (piece.color === color) {
        const key = piece.type;
        previousCount[key] = (previousCount[key] || 0) + 1;
      }
    });
    
    currentPieces.forEach(piece => {
      if (piece.color === color) {
        const key = piece.type;
        currentCount[key] = (currentCount[key] || 0) + 1;
      }
    });
    
    // Find pieces that were captured (more in previous than current)
    Object.keys(previousCount).forEach(type => {
      const diff = previousCount[type] - (currentCount[type] || 0);
      for (let i = 0; i < diff; i++) {
        captured.push(type);
      }
    });
    
    return captured;
  };

  const renderGameStatus = () => {
    if (!gameState) return <p className="text-gradio-text-secondary text-lg">Loading game state...</p>;
    
    const { status, board_state, player_color } = gameState;
    
    let statusText = 'Game in progress';
    let statusClass = 'text-gradio-blue';
    
    if (status === 'game_over') {
      statusText = gameState.result === 'draw' 
        ? 'Game ended in a draw' 
        : `${gameState.winner} wins by ${gameState.reason}`;
      statusClass = 'text-gradio-red';
    } else if (board_state.game_state === 'check') {
      statusText = `${board_state.turn} is in check`;
      statusClass = 'text-gradio-orange';
    }
    
    return (
      <div className="mb-5 p-4 bg-gradio-bg rounded-lg">
        <h3 className="text-xl font-medium mb-3 text-gradio-green">Game Status</h3>
        <p className={`font-medium text-lg ${statusClass} mb-2`}>{statusText}</p>
        <div className="grid grid-cols-2 gap-3 text-lg">
          <div>Turn: <span className="font-medium text-gradio-text">{board_state.turn}</span></div>
          <div>Playing as: <span className="font-medium text-gradio-text">{player_color}</span></div>
          {gameState.difficulty && (
            <div>Difficulty: <span className="font-medium text-gradio-text">{gameState.difficulty}</span></div>
          )}
        </div>
      </div>
    );
  };

  const renderAnalysis = () => {
    if (!analysis) return null;
    
    return (
      <div className="mb-4">
        <h3 className="text-lg font-medium mb-2">Position Analysis</h3>
        
        <div className="space-y-1">
          <p>
            Evaluation: <span className="font-medium">
              {analysis.evaluation.total > 0 ? '+' : ''}{analysis.evaluation.total.toFixed(2)}
            </span>
          </p>
          
          <div className="h-2 bg-gray-200 rounded overflow-hidden">
            <div 
              className={`h-full ${analysis.evaluation.total > 0 ? 'bg-blue-600' : 'bg-black'}`}
              style={{ 
                width: `${Math.min(Math.abs(analysis.evaluation.total) * 10, 100)}%`,
                marginLeft: analysis.evaluation.total > 0 ? '50%' : undefined,
                marginRight: analysis.evaluation.total < 0 ? '50%' : undefined,
              }}
            ></div>
          </div>
          
          <p className="text-sm text-gray-600">
            Material: {analysis.evaluation.material.toFixed(2)} | 
            Position: {analysis.evaluation.positional.toFixed(2)} | 
            Safety: {analysis.evaluation.safety.toFixed(2)}
          </p>
        </div>
      </div>
    );
  };

  const renderMoveHistory = () => {
    if (moveHistory.length === 0) return <p>No moves yet</p>;
    
    // Group moves by pairs (white and black)
    const moveGroups = [];
    for (let i = 0; i < moveHistory.length; i += 2) {
      moveGroups.push({
        number: Math.floor(i / 2) + 1,
        white: moveHistory[i],
        black: i + 1 < moveHistory.length ? moveHistory[i + 1] : null
      });
    }
    
    return (
      <div className="overflow-y-auto max-h-48 border rounded">
        <table className="w-full text-sm">
          <thead className="bg-gray-100 sticky top-0">
            <tr>
              <th className="py-1 px-2 text-left">#</th>
              <th className="py-1 px-2 text-left">White</th>
              <th className="py-1 px-2 text-left">Black</th>
            </tr>
          </thead>
          <tbody>
            {moveGroups.map((group) => (
              <tr key={group.number} className="hover:bg-gray-50">
                <td className="py-1 px-2 font-medium">{group.number}.</td>
                <td className="py-1 px-2">{group.white}</td>
                <td className="py-1 px-2">{group.black}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  };

  // Initialize sound settings
  useEffect(() => {
    setSoundEnabled(soundOn);
  }, [soundOn]);

  return (
    <div className="bg-gradio-card rounded-lg shadow-lg p-5 text-gradio-text">
      <h2 className="text-2xl font-bold mb-5 text-gradio-text">Game Information</h2>
      
      {/* Sound Controls */}
      <div className="mb-6 p-4 bg-gradio-bg rounded-lg">
        <h3 className="text-xl font-medium mb-3 text-gradio-yellow">Settings</h3>
        
        <div className="flex flex-col space-y-4">
          {/* Theme selection removed but kept in code for future reference
          <div className="flex items-center justify-between">
            <span className="text-lg">Board Theme:</span>
            <select
              className="px-3 py-2 bg-gradio-card border border-gradio-border rounded text-gradio-text"
              value={boardTheme}
              onChange={(e) => {
                const newTheme = e.target.value as 'brown' | 'grey';
                console.log(`Theme changed to: ${newTheme}`);
                onThemeChange(newTheme);
              }}
            >
              <option value="brown">Brown</option>
              <option value="grey">Grey</option>
            </select>
          </div>
          */}
          
          <div className="flex items-center justify-between">
            <span className="text-lg">Sound Effects:</span>
            <button
              className={`px-4 py-2 ${soundOn ? 'bg-gradio-green' : 'bg-gradio-border'} text-white rounded-lg transition-colors flex items-center gap-2`}
              onClick={() => {
                setSoundOn(!soundOn);
                setSoundEnabled(!soundOn);
                if (!soundOn) {
                  // Play a test sound when turning sound back on
                  playSound('move');
                }
              }}
            >
              <span className="text-xl">{soundOn ? '🔊' : '🔇'}</span>
              <span>{soundOn ? 'On' : 'Off'}</span>
            </button>
          </div>
        </div>
      </div>
      
      {renderGameStatus()}
      
      <div className="mb-5">
        <h3 className="text-xl font-medium mb-3 text-gradio-blue">Captured Pieces</h3>
        <div className="flex justify-between p-3 bg-gradio-bg rounded-lg">
          <div>
            <p className="font-medium mb-1">White captured:</p>
            <div className="flex gap-1">
              {whiteCaptured.map((piece, index) => (
                <span key={index} className="text-lg" title={piece}>
                  {piece === 'p' ? '♙' : 
                   piece === 'r' ? '♖' : 
                   piece === 'n' ? '♘' : 
                   piece === 'b' ? '♗' : 
                   piece === 'q' ? '♕' : '♔'}
                </span>
              ))}
              {whiteCaptured.length === 0 && <span className="text-gradio-text-secondary">None</span>}
            </div>
          </div>
          <div>
            <p className="font-medium mb-1">Black captured:</p>
            <div className="flex gap-1">
              {blackCaptured.map((piece, index) => (
                <span key={index} className="text-lg" title={piece}>
                  {piece === 'p' ? '♟' : 
                   piece === 'r' ? '♜' : 
                   piece === 'n' ? '♞' : 
                   piece === 'b' ? '♝' : 
                   piece === 'q' ? '♛' : '♚'}
                </span>
              ))}
              {blackCaptured.length === 0 && <span className="text-gradio-text-secondary">None</span>}
            </div>
          </div>
        </div>
      </div>
      
      <div className="mb-5">
        <h3 className="text-xl font-medium mb-3 text-gradio-orange">Move History</h3>
        <div className="overflow-y-auto max-h-48 border border-gradio-border rounded-lg">
          <table className="w-full text-base">
            <thead className="bg-gradio-bg sticky top-0">
              <tr>
                <th className="py-2 px-3 text-left">#</th>
                <th className="py-2 px-3 text-left">White</th>
                <th className="py-2 px-3 text-left">Black</th>
              </tr>
            </thead>
            <tbody>
              {moveHistory.length === 0 ? (
                <tr>
                  <td colSpan={3} className="py-3 px-3 text-center text-gradio-text-secondary">No moves yet</td>
                </tr>
              ) : (
                Array.from({ length: Math.ceil(moveHistory.length / 2) }).map((_, i) => (
                  <tr key={i} className="hover:bg-gradio-bg transition-colors">
                    <td className="py-2 px-3 font-medium">{i + 1}.</td>
                    <td className="py-2 px-3">{moveHistory[i * 2] || ''}</td>
                    <td className="py-2 px-3">{moveHistory[i * 2 + 1] || ''}</td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>
      
      {analysis && (
        <div className="mb-5">
          <h3 className="text-xl font-medium mb-3 text-gradio-purple">Position Analysis</h3>
          <div className="p-3 bg-gradio-bg rounded-lg">
            <p className="mb-2">
              Evaluation: <span className="font-medium text-gradio-text">
                {analysis.evaluation.total > 0 ? '+' : ''}{analysis.evaluation.total.toFixed(2)}
              </span>
            </p>
            
            <div className="h-3 bg-gradio-border rounded-full overflow-hidden mb-3">
              <div 
                className={`h-full ${analysis.evaluation.total > 0 ? 'bg-gradio-blue' : 'bg-gradio-red'}`}
                style={{ 
                  width: `${Math.min(Math.abs(analysis.evaluation.total) * 10, 100)}%`,
                  marginLeft: analysis.evaluation.total > 0 ? '50%' : undefined,
                  marginRight: analysis.evaluation.total < 0 ? '50%' : undefined,
                }}
              ></div>
            </div>
            
            <div className="grid grid-cols-2 gap-2 text-sm">
              <div>Material: <span className="font-medium">{analysis.evaluation.material.toFixed(2)}</span></div>
              <div>Position: <span className="font-medium">{analysis.evaluation.positional.toFixed(2)}</span></div>
              <div>Safety: <span className="font-medium">{analysis.evaluation.safety.toFixed(2)}</span></div>
              <div>Mobility: <span className="font-medium">{analysis.evaluation.mobility.toFixed(2)}</span></div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default GameInfo;