// Lobby UI for room management / 房间管理大厅 UI

/**
 * Renders and manages the lobby interface for room creation and joining / 渲染和管理用于创建和加入房间的大厅界面
 */
export class LobbyUI {
  constructor(container) {
    this.container = container
    // Event callbacks / 事件回调
    this.onCreateRoom = null
    this.onJoinRoom = null
    this.onRefreshRooms = null
    this.onReady = null
    this.onStartGame = null
    this.onLeaveRoom = null
    this.render()
  }

  // Render the initial lobby view / 渲染初始大厅视图
  render() {
    this.container.innerHTML = `
      <div class="lobby">
        <h1>ZP2</h1>
        <div class="lobby-form">
          <input type="text" id="playerName" placeholder="Your name" maxlength="16" />
          <div class="lobby-actions">
            <button id="createRoom">Create Room</button>
            <button id="refreshRooms">Refresh Rooms</button>
          </div>
        </div>
        <div id="roomList" class="room-list"></div>
      </div>
    `

    // Bind create room button / 绑定创建房间按钮
    this.container.querySelector('#createRoom').onclick = () => {
      const name = this.container.querySelector('#playerName').value.trim() || 'Player'
      if (this.onCreateRoom) this.onCreateRoom(name)
    }

    // Bind refresh rooms button / 绑定刷新房间按钮
    this.container.querySelector('#refreshRooms').onclick = () => {
      if (this.onRefreshRooms) this.onRefreshRooms()
    }

    this.container.style.display = 'block'
  }

  // Update the room list display / 更新房间列表显示
  updateRoomList(rooms) {
    const listEl = this.container.querySelector('#roomList')
    if (!rooms || rooms.length === 0) {
      listEl.innerHTML = '<p class="empty">No rooms available</p>'
      return
    }

    listEl.innerHTML = rooms.map(r => `
      <div class="room-item" data-id="${r.id}">
        <span class="room-name">${r.hostName || r.id}'s Room</span>
        <span class="room-players">${r.playerCount}/4</span>
        <button class="join-btn" data-id="${r.id}">Join</button>
      </div>
    `).join('')

    // Bind join buttons / 绑定加入按钮
    listEl.querySelectorAll('.join-btn').forEach(btn => {
      btn.onclick = () => {
        const name = this.container.querySelector('#playerName').value.trim() || 'Player'
        if (this.onJoinRoom) this.onJoinRoom(btn.dataset.id, name)
      }
    })
  }

  // Show the room view with player list / 显示带有玩家列表的房间视图
  showRoom(data, isHost, playerId) {
    const players = data.players || []
    this.container.innerHTML = `
      <div class="lobby room-view">
        <h2>${data.roomName || data.roomId}</h2>
        <div class="player-list">
          ${players.map(p => `
            <div class="player-item ${p.ready ? 'ready' : ''}">
              <span>${p.name}${p.id === playerId ? ' (you)' : ''}</span>
              <span class="ready-status">${p.ready ? 'READY' : 'NOT READY'}</span>
            </div>
          `).join('')}
        </div>
        <div class="room-actions">
          <button id="readyBtn">Ready</button>
          ${isHost ? '<button id="startBtn">Start Game</button>' : ''}
          <button id="leaveBtn">Leave</button>
        </div>
      </div>
    `

    // Bind ready button / 绑定准备按钮
    this.container.querySelector('#readyBtn').onclick = () => {
      if (this.onReady) this.onReady()
    }

    // Bind start game button (host only) / 绑定开始游戏按钮（仅房主）
    const startBtn = this.container.querySelector('#startBtn')
    if (startBtn) {
      startBtn.onclick = () => {
        if (this.onStartGame) this.onStartGame()
      }
    }

    // Bind leave button / 绑定离开按钮
    this.container.querySelector('#leaveBtn').onclick = () => {
      if (this.onLeaveRoom) this.onLeaveRoom()
    }
  }
}
