import { emit } from '../lib/socket';
import { forbiddenGuess } from '../lib/gameRules';
import { GUESS_BUTTON } from '../lib/boardTheme';

interface Props {
  cardsInRound: number;
  guesses: Record<string, number>;
  myOrder: number;
  activePlayer: number;
  activePlayerName: string;
  desktop?: boolean;
}

export default function GuessControls({ cardsInRound, guesses, myOrder, activePlayer, activePlayerName, desktop = true }: Props) {
  const isMyTurn = activePlayer === myOrder;
  const forbidden = forbiddenGuess(cardsInRound, guesses);

  if (!isMyTurn) {
    return (
      <p className="text-center text-[14px] text-green-dim py-3">
        Čaká sa na tip:{' '}
        <span className="font-serif text-gold">{activePlayerName}</span>
      </p>
    );
  }

  const options = Array.from({ length: cardsInRound + 1 }, (_, i) => i);
  const btn = desktop ? GUESS_BUTTON.desktop : GUESS_BUTTON.mobile;

  return (
    <div className="flex flex-col items-center gap-3 py-3">
      <p className="font-serif italic text-gold-dim text-[14px]">Zadaj svoj tip (počet kopiek)</p>
      <div className="flex flex-wrap gap-2 justify-center">
        {options.map((n) => {
          const isForbidden = n === forbidden;
          return (
            <button
              key={n}
              disabled={isForbidden}
              onClick={() => emit.addGuess(n)}
              title={isForbidden ? 'Zakázaná hodnota (súčet = počet kopiek)' : undefined}
              style={{ width: btn.size, height: btn.size, fontSize: btn.font }}
              className={[
                'rounded-full font-serif border-2 transition-colors',
                isForbidden
                  ? 'border-[#5a2a2a] text-[#7a4040] opacity-40 cursor-not-allowed'
                  : 'border-gold/50 text-gold hover:bg-gold hover:text-table hover:border-gold active:scale-95',
              ].join(' ')}
            >
              {n}
            </button>
          );
        })}
      </div>
    </div>
  );
}