class GamesTable {
  constructor(gamesBodyEl, battlesnakeUrl, onGameClick) {
    this._el = gamesBodyEl;
    this._battlesnakeUrl = battlesnakeUrl;
    this._onGameClick = onGameClick;
  }

  render(games, activeGameId) {
    this._el.innerHTML = games.map((g) => `
      <tr data-game-id="${g.game_id}">
        <td><a href="${this._battlesnakeUrl}/${g.game_id}"><code>${GamesTable._shortId(g.game_id)}</code></a><br><small>${Utils.safeString(GamesTable._displayGameTypeOrMap(g))}</small></td>
        <td>${Utils.toTitle(g.status)}</td>
        <td>${g.status === "running" ? "-" : g.winner_you ? "Win" : "Loss"}</td>
        <td>${Utils.safeString(g.final_turn)}</td>
      </tr>
    `).join("");

    for (const row of this._el.querySelectorAll("tr")) {
      row.addEventListener("click", (event) => {
        event.preventDefault();
        const gameId = row.getAttribute("data-game-id");
        if (gameId) this._onGameClick(gameId);
      });
    }

    if (activeGameId) this.setActive(activeGameId);
  }

  setActive(gameId) {
    this._clearActive();
    const active = this._el.querySelector(`tr[data-game-id="${gameId}"]`);
    if (active) active.classList.add("active");
  }

  _clearActive() {
    for (const row of this._el.querySelectorAll("tr")) {
      row.classList.remove("active");
    }
  }

  static _shortId(gameId) {
    return String(gameId || "-").slice(0, 8);
  }

  static _displayGameTypeOrMap(game) {
    const mapName = String((game && game.map) || "").trim();
    const gameType = String((game && game.game_type) || "").trim();
    if (gameType.toLowerCase() === "duel" && mapName.toLowerCase() === "standard") return "duel";
    if (mapName && mapName.toLowerCase() !== "empty") return mapName;
    return gameType || "-";
  }
}