import React, { useState } from 'react';
import { Player, GameState } from '../../types';
import { useGameStateContext } from '../../context/GameStateContext';

const SetupScreen: React.FC = () => {
  const { 
    gameState, 
    updatePlayers, 
    updateCardValues, 
    addPlayer, 
    startNewGame 
  } = useGameStateContext();
  
  const [newPlayerName, setNewPlayerName] = useState('');

  const handleAddPlayer = () => {
    if (newPlayerName.trim() && gameState.players.length < 10) {
      addPlayer(newPlayerName.trim());
      setNewPlayerName('');
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleAddPlayer();
    }
  };

  const handleCardValueChange = (suit: 'Schellen' | 'Schilten' | 'Eicheln' | 'Rosen', value: number) => {
    updateCardValues({
      ...gameState.cardValues,
      [suit]: value
    });
  };

  const resetCardValues = () => {
    updateCardValues({
      Schellen: 11,
      Schilten: 12,
      Eicheln: 10,
      Rosen: 10
    });
  };

  const startGame = () => {
    if (gameState.players.length >= 2) {
      startNewGame();
    }
  };

  return (
    <div className="screen setup-screen">
      <h1>🎴 Tschausepp - Jass Card Tracker</h1>
      <h2>Setup a New Game</h2>
      
      <div className="player-slots">
        {gameState.players.map((player: Player, index: number) => (
          <div key={player.id} className="player-slot">
            <h3>👤 {index + 1}. {player.name}</h3>
          </div>
        ))}
      </div>

      <div className="player-input">
        <label htmlFor="new-player">Add Player:</label>
        <input
          type="text"
          id="new-player"
          value={newPlayerName}
          onChange={(e) => setNewPlayerName(e.target.value)}
          onKeyDown={handleKeyDown}
          maxLength={20}
          placeholder="Enter player name"
        />
        <button onClick={handleAddPlayer} disabled={gameState.players.length >= 10}>
          Add Player
        </button>
      </div>

      <h3>Card Value Configuration</h3>
      <p className="card-config-help">Configure point values for each suit:</p>
      
      <div className="suit-config">
        <div className="suit-config-row">
          <span>Schellen:</span>
          <input
            type="number"
            value={gameState.cardValues.Schellen}
            onChange={(e) => handleCardValueChange('Schellen', Number(e.target.value))}
            min="1"
            max="20"
          />
        </div>
        <div className="suit-config-row">
          <span>Schilten:</span>
          <input
            type="number"
            value={gameState.cardValues.Schilten}
            onChange={(e) => handleCardValueChange('Schilten', Number(e.target.value))}
            min="1"
            max="20"
          />
        </div>
        <div className="suit-config-row">
          <span>Eicheln:</span>
          <input
            type="number"
            value={gameState.cardValues.Eicheln}
            onChange={(e) => handleCardValueChange('Eicheln', Number(e.target.value))}
            min="1"
            max="20"
          />
        </div>
        <div className="suit-config-row">
          <span>Rosen:</span>
          <input
            type="number"
            value={gameState.cardValues.Rosen}
            onChange={(e) => handleCardValueChange('Rosen', Number(e.target.value))}
            min="1"
            max="20"
          />
        </div>
      </div>
      
      <div className="points-input">
        <label htmlFor="points">All suits points:</label>
        <input
          type="number"
          id="points"
          placeholder="Enter base points (1-10)"
          value={gameState.cardValues.Rosen}
          onChange={(e) => {
            const value = Number(e.target.value);
            updateCardValues({
              Schellen: value,
              Schilten: value,
              Eicheln: value,
              Rosen: value
            });
          }}
        />
        <button onClick={resetCardValues} className="secondary">Reset to Defaults</button>
      </div>

      <div className="button-group">
        <button onClick={startGame} disabled={gameState.players.length < 2}>
          Start Game
        </button>
        <button onClick={() => gameState.setCurrentScreen('history')} className="secondary">
          View History
        </button>
      </div>
    </div>
  );
};

export default SetupScreen;