import { App } from '../main.js';

export class JoinScreen {
  private app: App;

  constructor(app: App) {
    this.app = app;
    this.init();
  }

  private init(): void {
    const joinBtn = document.getElementById('join-btn')!;
    const roomInput = document.getElementById('room-input') as HTMLInputElement;
    const nameInput = document.getElementById('name-input') as HTMLInputElement;
    const errorEl = document.getElementById('join-error')!;

    // Pre-fill room code from URL if present
    const params = new URLSearchParams(window.location.search);
    const roomParam = params.get('room');
    if (roomParam) {
      roomInput.value = roomParam.toUpperCase();
    }

    joinBtn.addEventListener('click', () => {
      const roomCode = roomInput.value.trim().toUpperCase();
      const playerName = nameInput.value.trim();

      if (!roomCode || roomCode.length !== 4) {
        errorEl.textContent = 'Enter a 4-character room code';
        return;
      }
      if (!playerName) {
        errorEl.textContent = 'Enter your name';
        return;
      }

      errorEl.textContent = '';
      joinBtn.textContent = 'Joining...';
      joinBtn.disabled = true;

      this.app.socket.emit('mobile:joinRoom', { roomCode, playerName }, (res) => {
        joinBtn.textContent = 'Join Race';
        joinBtn.disabled = false;
        if (!res.ok) {
          errorEl.textContent = res.error || 'Failed to join';
        }
      });
    });
  }
}