import React, { useState, useEffect } from 'react';
import ChessBoard from './components/ChessBoard';
import GameControls from './components/GameControls';
import GameInfo from './components/GameInfo';

const App: React.FC = () => {
  // Theme state kept but not exposed in UI
  const [boardTheme] = useState<'brown' | 'grey'>('brown');
  
  // Add useEffect to log when the component mounts
  React.useEffect(() => {
    console.log('Chess UI App mounted - Version 1.0');
    
    // Force a refresh of styles
    const style = document.createElement('style');
    style.textContent = `
      .chess-board {
        width: 800px !important;
        max-width: 100% !important;
      }
      .chess-piece {
        width: 85% !important;
        height: 85% !important;
      }
      .rank-label, .file-label {
        font-size: 0.9rem !important;
      }
      .rank-label {
        left: 8px !important;
        top: 8px !important;
      }
      .file-label {
        right: 8px !important;
        bottom: 8px !important;
      }
    `;
    document.head.appendChild(style);
    
    return () => {
      document.head.removeChild(style);
    };
  }, []);
  
  return (
    <div className="min-h-screen bg-gradio-bg text-gradio-text py-8">
      <div className="container mx-auto px-4">
        
        <div className="flex flex-col lg:flex-row gap-8 game-layout">
          <div className="flex-1 flex flex-col items-center">
            <ChessBoard theme={boardTheme} />
          </div>
          
          <div className="w-full lg:w-96 flex flex-col">
            <GameInfo boardTheme={boardTheme} onThemeChange={() => {}} />
            <div className="mt-6">
              <GameControls />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;