// =============================================================================
// Texas Hold X Replay — viewer logic
// -----------------------------------------------------------------------------
// Architecture overview:
//   * `state`   — single mutable runtime store; never read directly by render
//                 helpers, instead passed via the active frame snapshot.
//   * `el`      — cached DOM references (set once on load, not per render).
//   * Frames    — pre-computed, immutable per-hand snapshots produced by
//                 buildFrames(). Each frame carries the full visual state
//                 (board cards, pot, players, active speaker, action kind),
//                 making renderFrame() a pure function of state.frameIndex.
//   * Avatars   — pixel-art sprites styled in CSS via 8x8 box-shadow grids.
//                 Per-player palette is derived deterministically from
//                 player_id so the same player always looks identical.
//   * Animation — seat sprites get a transient `act-${kind}` class that maps
//                 to an avatar @keyframes animation in styles.css.
// =============================================================================

const state = {
  game: null,
  hands: [],
  currentHandIndex: 0,
  frames: [],
  frameIndex: 0,
  playing: false,
  timer: null,
  pollTimer: null,
  source: "",
};

const el = {
  subtitle: document.querySelector("#subtitle"),
  sourceBadge: document.querySelector("#sourceBadge"),
  pollBadge: document.querySelector("#pollBadge"),
  serverUrl: document.querySelector("#serverUrl"),
  gameId: document.querySelector("#gameId"),
  fetchBtn: document.querySelector("#fetchBtn"),
  fileInput: document.querySelector("#fileInput"),
  autoPoll: document.querySelector("#autoPoll"),
  pollSeconds: document.querySelector("#pollSeconds"),
  handSelect: document.querySelector("#handSelect"),
  pace: document.querySelector("#pace"),
  prevBtn: document.querySelector("#prevBtn"),
  playBtn: document.querySelector("#playBtn"),
  nextBtn: document.querySelector("#nextBtn"),
  resetBtn: document.querySelector("#resetBtn"),
  progressBar: document.querySelector("#progressBar"),
  gameStatus: document.querySelector("#gameStatus"),
  playerCount: document.querySelector("#playerCount"),
  handCount: document.querySelector("#handCount"),
  blindLevel: document.querySelector("#blindLevel"),
  handBadge: document.querySelector("#handBadge"),
  streetLabel: document.querySelector("#streetLabel"),
  potLabel: document.querySelector("#potLabel"),
  boardCards: document.querySelector("#boardCards"),
  tableMessage: document.querySelector("#tableMessage"),
  seatLayer: document.querySelector("#seatLayer"),
  eventLog: document.querySelector("#eventLog"),
};

// ---------------------------------------------------------------------------
// Static label tables. Kept module-scope so render functions are fully pure.
// ---------------------------------------------------------------------------
const STREET_LABELS = {
  setup: "准备",
  preflop: "翻牌前",
  flop: "翻牌",
  turn: "转牌",
  river: "河牌",
  showdown: "摊牌",
  awards: "结算",
};

const ACTION_LABELS = {
  small_blind: "小盲",
  big_blind: "大盲",
  fold: "弃牌",
  check: "过牌",
  call: "跟注",
  bet: "下注",
  raise: "加注",
  all_in: "全下",
  award: "赢得",
  showdown: "亮牌",
  deal: "发牌",
};

// Bubble color category — bucket many actions into a few visual classes.
// (The .speech.kind-* CSS classes paint distinct backgrounds for fold/
// call/check/bet/raise/all_in/award. Blinds are rendered as bet-style.)

// ---------------------------------------------------------------------------
// Pixel avatar palette — picked from a small 8-bit-friendly set so every
// player is visually distinct. Derivation is deterministic via FNV-1a over
// player_id, so a given player always renders with the same colors across
// frames and hands.
// ---------------------------------------------------------------------------
const AVATAR_PALETTE = {
  skin:  ["#f7c98a", "#e2a96b", "#c98c5a", "#8b5a3c", "#f2d4ad"],
  hair:  ["#2a1e16", "#5b3a23", "#a85d2a", "#d8a13a", "#7a3b8e", "#3a4d8a", "#b9362f"],
  shirt: ["#c44c4c", "#3a7fbf", "#3a9b62", "#b87a1f", "#7a3b8e", "#2a3a5a", "#d8a13a"],
};

/**
 * Hash a string into a non-negative 32-bit integer using FNV-1a.
 * Used to deterministically pick avatar palette entries from player_id.
 */
function fnv1a(value) {
  let hash = 0x811c9dc5;
  const text = String(value);
  for (let i = 0; i < text.length; i += 1) {
    hash ^= text.charCodeAt(i);
    hash = Math.imul(hash, 0x01000193) >>> 0;
  }
  return hash >>> 0;
}

/**
 * Pick a deterministic avatar palette for the given player_id.
 * Returns an object with { skin, hair, shirt } CSS colors.
 */
function avatarPalette(playerId) {
  const hash = fnv1a(playerId);
  const pickFrom = (list, salt) => list[(hash >>> salt) % list.length];
  return {
    skin:  pickFrom(AVATAR_PALETTE.skin, 0),
    hair:  pickFrom(AVATAR_PALETTE.hair, 5),
    shirt: pickFrom(AVATAR_PALETTE.shirt, 11),
  };
}

// 8x8 sprite map for the player portrait.
//   . = transparent / dark frame backdrop
//   H = hair    S = skin    E = eye    M = mouth (red)    T = shirt body
// Two side hair pixels on rows 2-3 give a cohesive helmet shape; row 5 mouth
// adds personality. Row 7 is full shirt body so the avatar reads as a bust.
const AVATAR_SPRITE = [
  ".HHHHHH.",
  "HHHHHHHH",
  "HSSSSSSH",
  ".SESSESS",
  ".SSSSSS.",
  ".SSMMSS.",
  ".TTTTTT.",
  "TTTTTTTT",
];

/**
 * Build an inline SVG string for a pixel-art avatar using the player's
 * deterministic palette. Each filled cell becomes a 1x1 <rect> in an 8x8
 * viewBox; SVG `shape-rendering="crispEdges"` keeps the squares sharp.
 */
function avatarSvg(playerId) {
  const palette = avatarPalette(playerId);
  const colors = {
    H: palette.hair,
    S: palette.skin,
    E: "#1c0e08",
    M: "#b9362f",
    T: palette.shirt,
  };
  let rects = "";
  for (let y = 0; y < AVATAR_SPRITE.length; y += 1) {
    const row = AVATAR_SPRITE[y];
    for (let x = 0; x < row.length; x += 1) {
      const ch = row[x];
      const fill = colors[ch];
      if (!fill) continue;
      rects += `<rect x="${x}" y="${y}" width="1" height="1" fill="${fill}"/>`;
    }
  }
  return `<svg viewBox="0 0 8 8" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">${rects}</svg>`;
}

// ---------------------------------------------------------------------------
// Card rendering helpers.
// ---------------------------------------------------------------------------
function cardParts(raw) {
  if (!raw || raw === "back") return { rank: "", suit: "", red: false, back: true };
  const suitCode = raw.slice(-1).toLowerCase();
  const rank = raw.slice(0, -1).toUpperCase();
  const suits = { h: "♥", d: "♦", c: "♣", s: "♠" };
  return {
    rank,
    suit: suits[suitCode] || suitCode,
    red: suitCode === "h" || suitCode === "d",
    back: false,
  };
}

function renderCard(raw) {
  const parts = cardParts(raw);
  const card = document.createElement("div");
  card.className = `card${parts.red ? " red" : ""}${parts.back ? " back" : ""}`;
  if (!parts.back) {
    card.innerHTML = `<span class="rank">${parts.rank}</span><span class="suit">${parts.suit}</span><span class="rank bottom">${parts.rank}</span>`;
  }
  return card;
}

function money(value) {
  return Number(value || 0).toLocaleString("en-US");
}

// ---------------------------------------------------------------------------
// Game normalization: hydrate the raw JSON into a uniform shape with
// player list and per-hand starting stacks.
// ---------------------------------------------------------------------------
function uniquePlayers(game) {
  const byId = new Map();
  for (const player of game.players || []) {
    byId.set(player.player_id, {
      player_id: player.player_id,
      name: player.name || player.player_id,
      seat: Number(player.seat || 0),
      stack: Number(player.stack || 0),
    });
  }
  for (const hand of game.hands || []) {
    for (const action of hand.actions || []) {
      if (!byId.has(action.player_id)) {
        byId.set(action.player_id, {
          player_id: action.player_id,
          name: action.player_id,
          seat: byId.size,
          stack: Number(game.starting_stack || 0),
        });
      }
    }
  }
  return Array.from(byId.values()).sort((a, b) => a.seat - b.seat);
}

function inferHandStarts(game) {
  const players = uniquePlayers(game);
  const stacks = new Map(players.map((player) => [player.player_id, Number(game.starting_stack || player.stack || 0)]));
  const starts = new Map();
  for (const hand of game.hands || []) {
    starts.set(hand.hand_number, new Map(stacks));
    for (const action of hand.actions || []) {
      if (stacks.has(action.player_id)) stacks.set(action.player_id, Number(action.stack || 0));
    }
    for (const award of hand.awards || []) {
      const winners = award.winners || [];
      const share = winners.length ? Math.floor(Number(award.amount || 0) / winners.length) : 0;
      for (const winner of winners) stacks.set(winner, Number(stacks.get(winner) || 0) + share);
    }
  }
  return starts;
}

function normalizeGame(raw) {
  const game = raw.game && raw.game.hands ? raw.game : raw;
  if (!game || !Array.isArray(game.hands)) throw new Error("JSON 中未找到 hands 数组");
  const players = uniquePlayers(game);
  const starts = inferHandStarts(game);
  const hands = game.hands.map((hand) => ({ ...hand, startingStacks: starts.get(hand.hand_number) || new Map() }));
  return { ...game, players, hands };
}

function clonePlayersForHand(game, hand) {
  return game.players.map((player) => ({
    ...player,
    stack: Number(hand.startingStacks.get(player.player_id) ?? game.starting_stack ?? player.stack ?? 0),
    folded: false,
    all_in: false,
    in_hand: Number(hand.startingStacks.get(player.player_id) ?? game.starting_stack ?? player.stack ?? 0) > 0,
    street_bet: 0,
    total_bet: 0,
    hole_cards: [],
  }));
}

// ---------------------------------------------------------------------------
// Frame builder — converts a hand's chronological action list into a list of
// fully-resolved frame snapshots. Each frame is independent and renderable.
// ---------------------------------------------------------------------------
function buildFrames(game, hand) {
  const players = clonePlayersForHand(game, hand);
  const byId = new Map(players.map((player) => [player.player_id, player]));
  const frames = [];
  const pot = { value: 0 };
  let street = "preflop";
  let boardCount = 0;

  // `actionKind` is what drives the seat sprite animation classes. It maps
  // the raw action verb (fold/call/raise/...) onto a CSS animation token.
  const snapshot = (type, message, activePlayerId = null, key = `${type}:${frames.length}`, extras = {}) => ({
    key: `hand:${hand.hand_number}:${key}`,
    type,
    message,
    activePlayerId,
    street,
    pot: pot.value,
    board: (hand.board || []).slice(0, boardCount),
    players: players.map((player) => ({ ...player, hole_cards: [...player.hole_cards] })),
    ...extras,
  });

  frames.push(snapshot("setup", `第 ${hand.hand_number} 手牌开始`, null, "setup"));

  const revealStreet = (nextStreet) => {
    const counts = { flop: 3, turn: 4, river: 5 };
    const nextCount = counts[nextStreet] || boardCount;
    for (const player of players) player.street_bet = 0;
    if (nextCount > boardCount) {
      street = nextStreet;
      boardCount = Math.min(nextCount, (hand.board || []).length);
      frames.push(snapshot("deal", `${STREET_LABELS[nextStreet]}发出`, null, `deal:${nextStreet}:${boardCount}`));
    } else {
      street = nextStreet;
    }
  };

  for (const [actionIndex, action] of (hand.actions || []).entries()) {
    if (action.street !== street && action.street !== "preflop") revealStreet(action.street);
    const player = byId.get(action.player_id);
    if (!player) continue;
    const previousTotal = Number(player.total_bet || 0);
    player.street_bet = Number(action.street_bet || 0);
    player.stack = Number(action.stack || 0);
    if (action.action === "fold") player.folded = true;
    if (action.action === "all_in" || player.stack === 0) player.all_in = true;
    player.total_bet = previousTotal + Math.max(0, Number(action.amount || 0));
    pot.value += Math.max(0, Number(action.amount || 0));
    frames.push(snapshot(
      "action",
      actionText(action),
      action.player_id,
      actionKey(action, actionIndex),
      { actionKind: action.action, bubbleText: bubbleTextFor(action) },
    ));
  }

  if ((hand.board || []).length > boardCount) {
    for (const nextStreet of ["flop", "turn", "river"]) {
      if (({ flop: 3, turn: 4, river: 5 }[nextStreet] || 0) > boardCount) revealStreet(nextStreet);
    }
  }

  const shown = hand.showdown_hands || {};
  for (const [playerId, cards] of Object.entries(shown)) {
    const player = byId.get(playerId);
    if (player) player.hole_cards = cards;
  }
  if (Object.keys(shown).length) {
    street = "showdown";
    frames.push(snapshot("showdown", "摊牌亮牌", null, `showdown:${Object.keys(shown).sort().join(",")}`));
  }

  street = "awards";
  for (const [awardIndex, award] of (hand.awards || []).entries()) {
    const winners = award.winners || [];
    const share = winners.length ? Math.floor(Number(award.amount || 0) / winners.length) : 0;
    const remainder = winners.length ? Number(award.amount || 0) % winners.length : 0;
    winners.forEach((winnerId, index) => {
      const player = byId.get(winnerId);
      if (player) player.stack += share + (index < remainder ? 1 : 0);
    });
    pot.value = Math.max(0, pot.value - Number(award.amount || 0));
    frames.push(snapshot(
      "award",
      awardText(award),
      winners[0] || null,
      awardKey(award, awardIndex),
      { actionKind: "award", bubbleText: `赢得 ${money(award.amount)}` },
    ));
  }

  if (frames.length === 1) frames.push(snapshot("empty", "这手牌没有可回放动作", null, "empty"));
  return frames;
}

function actionKey(action, index) {
  return [
    "action", index, action.street, action.player_id, action.action,
    Number(action.amount || 0), Number(action.street_bet || 0), Number(action.stack || 0),
  ].join(":");
}

function awardKey(award, index) {
  return [
    "award", index, Number(award.amount || 0),
    (award.winners || []).join(","),
    award.hand_value?.name || "",
  ].join(":");
}

function actionText(action) {
  const label = ACTION_LABELS[action.action] || action.action;
  if (["check", "fold"].includes(action.action)) return `${action.player_id} ${label}`;
  return `${action.player_id} ${label} ${money(action.amount)}`;
}

/**
 * Build a SHORT speech-bubble label (player_id is implicit since the bubble
 * already points at the seat). Keeps text readable inside narrow bubbles.
 */
function bubbleTextFor(action) {
  const label = ACTION_LABELS[action.action] || action.action;
  if (["check", "fold"].includes(action.action)) return label;
  return `${label} ${money(action.amount)}`;
}

function awardText(award) {
  const winners = (award.winners || []).join(", ");
  const handName = award.hand_value?.name ? ` · ${award.hand_value.name}` : "";
  return `${winners} 赢得 ${money(award.amount)}${handName}`;
}

// ---------------------------------------------------------------------------
// Seat layout — six radial presets, with mobile fallback.
// Returned (x, y) values are percentages relative to the poker-table box
// (NOT the felt-shell). The poker-table reserves vertical padding so the
// top/bottom seats and their bubbles never overlap the table headers.
// ---------------------------------------------------------------------------
function seatPosition(index, count) {
  const mobile = window.matchMedia("(max-width: 760px)").matches;
  const presets = mobile ? mobileSeatPreset(count) : desktopSeatPreset(count);
  if (presets[index]) return presets[index];
  const radiusX = mobile ? 36 : 39;
  const radiusY = mobile ? 41 : 39;
  const start = -90;
  const angle = (start + index * (360 / Math.max(count, 1))) * Math.PI / 180;
  return {
    x: 50 + Math.cos(angle) * radiusX,
    y: 50 + Math.sin(angle) * radiusY,
  };
}

// Coordinates expressed in percent of the poker-table box (which already
// includes vertical padding around the felt). `y < ~25` lands above the
// felt (top rail), `y > ~75` lands below the felt (bottom rail).
function desktopSeatPreset(count) {
  const presets = {
    2: [{ x: 50, y: 18 }, { x: 50, y: 82 }],
    3: [{ x: 50, y: 18 }, { x: 80, y: 72 }, { x: 20, y: 72 }],
    4: [{ x: 50, y: 18 }, { x: 84, y: 60 }, { x: 50, y: 84 }, { x: 16, y: 60 }],
    5: [{ x: 50, y: 18 }, { x: 84, y: 44 }, { x: 72, y: 84 }, { x: 28, y: 84 }, { x: 16, y: 44 }],
    6: [{ x: 50, y: 18 }, { x: 82, y: 33 }, { x: 82, y: 70 }, { x: 50, y: 86 }, { x: 18, y: 70 }, { x: 18, y: 33 }],
  };
  return presets[count] || [];
}

function mobileSeatPreset(count) {
  const presets = {
    2: [{ x: 50, y: 16 }, { x: 50, y: 84 }],
    3: [{ x: 50, y: 15 }, { x: 80, y: 78 }, { x: 20, y: 78 }],
    4: [{ x: 50, y: 14 }, { x: 83, y: 60 }, { x: 50, y: 86 }, { x: 17, y: 60 }],
  };
  return presets[count] || [];
}

/**
 * Map a seat coordinate to a `seat-top|bottom|left|right|mid` zone class.
 * The CSS uses this to flip the speech bubble below the seat for top-rail
 * seats so it never extends outside the visible table area.
 */
function seatZone(pos) {
  if (pos.y < 32) return "seat-top";
  if (pos.y > 70) return "seat-bottom";
  if (pos.x < 34) return "seat-left";
  if (pos.x > 66) return "seat-right";
  return "seat-mid";
}

// ---------------------------------------------------------------------------
// DOM rendering: assemble a single seat element from a frame's player snapshot.
// Extracted into its own function so renderFrame stays declarative.
// ---------------------------------------------------------------------------
function renderSeat(player, position, frame, hand) {
  const zone = seatZone(position);
  const isActive = player.player_id === frame.activePlayerId;
  const isDealer = player.seat === hand.button_seat;
  const isCurrentActor = isActive && (frame.type === "action" || frame.type === "award");

  const seat = document.createElement("div");
  seat.className = [
    "seat",
    zone,
    isActive ? "active" : "",
    player.folded ? "folded" : "",
    isDealer ? "dealer-seat" : "",
    // The transient act-* class is what triggers the avatar's reaction
    // animation (shake/nod/fold/cheer). Only apply on the actor's frame.
    isCurrentActor && frame.actionKind ? `act-${frame.actionKind}` : "",
  ].filter(Boolean).join(" ");
  seat.style.setProperty("--x", `${position.x}%`);
  seat.style.setProperty("--y", `${position.y}%`);

  // Speech bubble — shown on the active player's action/award frames using
  // a SHORT label (e.g. "加注 50") so it fits the small bubble width.
  const bubbleHtml = (isCurrentActor && frame.bubbleText)
    ? `<div class="speech kind-${frame.actionKind || "info"}">${escapeHtml(frame.bubbleText)}</div>`
    : "";

  // Avatar — inline SVG pixel-art sprite, deterministic per player_id so
  // the same player keeps a stable look across hands.
  const avatarMarkup = `<div class="avatar" aria-hidden="true">${avatarSvg(player.player_id)}</div>`;

  seat.innerHTML = `
    ${bubbleHtml}
    <div class="player-box">
      <div class="player-head">
        ${avatarMarkup}
        <span class="player-name">${escapeHtml(player.name || player.player_id)}</span>
        <span class="dealer">D</span>
      </div>
      <div class="player-meta">
        <span class="stack">Stack ${money(player.stack)}</span>
        <span class="bet">${player.folded ? "Folded" : player.all_in ? "All In" : player.street_bet ? `Bet ${money(player.street_bet)}` : ""}</span>
      </div>
    </div>
  `;

  // Hole cards live inside the player-box so they share its layout flow.
  const hole = document.createElement("div");
  hole.className = "card-row hole-cards";
  for (const card of knownCardsForPlayer(player, hand, frame)) hole.appendChild(renderCard(card));
  seat.querySelector(".player-box").appendChild(hole);

  return seat;
}

function renderFrame() {
  const hand = state.hands[state.currentHandIndex];
  const frame = state.frames[state.frameIndex];
  const game = state.game;
  const hasData = Boolean(game && hand && frame);

  el.handBadge.textContent = hasData ? `Hand ${hand.hand_number}` : "Hand -";
  el.streetLabel.textContent = hasData ? (STREET_LABELS[frame.street] || frame.street) : "未加载";
  el.potLabel.textContent = hasData ? `Pot ${money(frame.pot)}` : "Pot 0";
  el.tableMessage.textContent = hasData ? frame.message : "上传 JSON 或从游戏服务获取快照";
  el.tableMessage.style.display = hasData ? "" : "block";
  el.progressBar.style.width = hasData ? `${((state.frameIndex + 1) / state.frames.length) * 100}%` : "0";

  el.boardCards.replaceChildren();
  for (const card of hasData ? frame.board : []) el.boardCards.appendChild(renderCard(card));

  el.seatLayer.replaceChildren();
  if (hasData) {
    frame.players.forEach((player, index) => {
      const position = seatPosition(index, frame.players.length);
      el.seatLayer.appendChild(renderSeat(player, position, frame, hand));
    });
  }

  renderLog();
  syncControls();
}

function knownCardsForPlayer(player, hand, frame) {
  const futureHoleCards = hand.hole_cards?.[player.player_id] || hand.private_hands?.[player.player_id];
  const canRevealShowdown = ["showdown", "awards"].includes(frame.street) || ["showdown", "award"].includes(frame.type);
  const showdownCards = canRevealShowdown ? hand.showdown_hands?.[player.player_id] : null;
  const shown = futureHoleCards || showdownCards || player.hole_cards;
  if (shown && shown.length) return shown;
  if (!player.in_hand && !player.folded) return [];
  return ["back", "back"];
}

// ---------------------------------------------------------------------------
// Event log — one line per visible event, with auto-scroll keeping the
// current item in view. Items past the current frame index are dimmed via
// the `.past` class.
// ---------------------------------------------------------------------------
function renderLog() {
  const hand = state.hands[state.currentHandIndex];
  el.eventLog.replaceChildren();
  if (!hand) return;
  const events = [
    { text: `第 ${hand.hand_number} 手牌开始`, kind: "setup" },
    ...(hand.actions || []).map((action) => ({ text: actionText(action), kind: "action" })),
    ...(hand.awards || []).map((award) => ({ text: awardText(award), kind: "award" })),
  ];
  let currentLi = null;
  events.forEach((event, index) => {
    const li = document.createElement("li");
    li.textContent = `${index + 1}. ${event.text}`;
    if (index < state.frameIndex) li.classList.add("past");
    if (index === state.frameIndex) {
      li.classList.add("current");
      currentLi = li;
    }
    el.eventLog.appendChild(li);
  });
  // Keep the focused event visible without yanking the page when an event
  // is already in view.
  if (currentLi) {
    currentLi.scrollIntoView({ block: "nearest", behavior: "smooth" });
  }
}

function syncControls() {
  const loaded = Boolean(state.game);
  const hasPreviousFrame = state.frameIndex > 0 || state.currentHandIndex > 0;
  const hasNextFrame = state.frameIndex < state.frames.length - 1 || state.currentHandIndex < state.hands.length - 1;
  el.playBtn.disabled = !loaded;
  el.prevBtn.disabled = !loaded || !hasPreviousFrame;
  el.nextBtn.disabled = !loaded || !hasNextFrame;
  el.resetBtn.disabled = !loaded;
  el.playBtn.textContent = state.playing ? "Ⅱ" : "▶";
}

// ---------------------------------------------------------------------------
// Game lifecycle: load / merge / select hand / step / play.
// ---------------------------------------------------------------------------
function loadGame(raw, source, options = {}) {
  const nextGame = normalizeGame(raw);
  const wasPlaying = state.playing;
  const mergeResult = options.allowMerge !== false ? mergeGame(nextGame) : { merged: false, advanced: false };
  if (!mergeResult.merged) {
    pause();
    state.game = nextGame;
    state.hands = state.game.hands;
    state.currentHandIndex = Math.max(0, state.hands.length - 1);
    state.frames = buildFrames(state.game, state.hands[state.currentHandIndex]);
    state.frameIndex = 0;
  }
  state.source = source;
  el.sourceBadge.textContent = source;
  el.subtitle.textContent = `${state.game.game_id || "未命名游戏"} · ${state.hands.length} hands`;
  renderSummary();
  populateHands();
  el.handSelect.value = String(state.currentHandIndex);
  renderFrame();
  if (mergeResult.merged && (wasPlaying || mergeResult.advanced)) play();
}

function mergeGame(nextGame) {
  if (!state.game || state.game.game_id !== nextGame.game_id) return { merged: false, advanced: false };
  const currentHand = state.hands[state.currentHandIndex];
  const nextHandIndex = nextGame.hands.findIndex((hand) => hand.hand_number === currentHand?.hand_number);
  if (nextHandIndex < 0) return { merged: false, advanced: false };

  const oldFrame = state.frames[state.frameIndex];
  const nextFrames = buildFrames(nextGame, nextGame.hands[nextHandIndex]);
  const oldKeyIndex = oldFrame ? nextFrames.findIndex((frame) => frame.key === oldFrame.key) : -1;
  const atKnownFrame = oldKeyIndex >= 0;
  const wasAtTail = state.frameIndex >= state.frames.length - 1;
  const hadNewFramesOnCurrentHand = nextFrames.length > state.frames.length;
  const currentWasLatestHand = state.currentHandIndex >= state.hands.length - 1;
  const hasNewLaterHandFromCurrent = currentWasLatestHand && nextGame.hands.length > state.hands.length;
  let advanced = false;

  state.game = nextGame;
  state.hands = nextGame.hands;
  state.currentHandIndex = nextHandIndex;
  state.frames = nextFrames;

  if (atKnownFrame) {
    advanced = shouldStepIntoIncrement(wasAtTail, hadNewFramesOnCurrentHand, hasNewLaterHandFromCurrent);
    state.frameIndex = advanced
      ? Math.min(oldKeyIndex + 1, nextFrames.length - 1)
      : oldKeyIndex;
  } else {
    state.frameIndex = Math.min(state.frameIndex, nextFrames.length - 1);
  }

  if (state.frameIndex >= state.frames.length - 1 && hasNewLaterHandFromCurrent) {
    state.currentHandIndex += 1;
    state.frames = buildFrames(state.game, state.hands[state.currentHandIndex]);
    state.frameIndex = 0;
    advanced = true;
  }

  return { merged: true, advanced };
}

function shouldStepIntoIncrement(wasAtTail, hadNewFramesOnCurrentHand, hasLaterHands) {
  return wasAtTail && (hadNewFramesOnCurrentHand || hasLaterHands);
}

function renderSummary() {
  const game = state.game;
  const hand = state.hands[state.currentHandIndex];
  const blinds = hand?.blinds || game;
  el.gameStatus.textContent = game?.status || "-";
  el.playerCount.textContent = game?.players?.length ?? "-";
  el.handCount.textContent = game?.hands?.length ?? "-";
  el.blindLevel.textContent = game ? `${money(blinds.small_blind)} / ${money(blinds.big_blind)}` : "-";
}

function populateHands() {
  el.handSelect.replaceChildren();
  state.hands.forEach((hand, index) => {
    const option = document.createElement("option");
    option.value = String(index);
    option.textContent = `Hand ${hand.hand_number} · ${hand.actions?.length || 0} actions`;
    el.handSelect.appendChild(option);
  });
}

function selectHand(index) {
  pause();
  state.currentHandIndex = Math.max(0, Math.min(index, state.hands.length - 1));
  state.frames = buildFrames(state.game, state.hands[state.currentHandIndex]);
  state.frameIndex = 0;
  el.handSelect.value = String(state.currentHandIndex);
  renderSummary();
  renderFrame();
}

function nextFrame() {
  if (!state.frames.length) return;
  if (state.frameIndex < state.frames.length - 1) {
    state.frameIndex += 1;
    renderFrame();
    return;
  }
  if (state.currentHandIndex < state.hands.length - 1) {
    state.currentHandIndex += 1;
    state.frames = buildFrames(state.game, state.hands[state.currentHandIndex]);
    state.frameIndex = 0;
    el.handSelect.value = String(state.currentHandIndex);
    renderSummary();
    renderFrame();
    return;
  }
  pause();
}

function prevFrame() {
  pause();
  if (state.frameIndex === 0 && state.currentHandIndex > 0) {
    state.currentHandIndex -= 1;
    state.frames = buildFrames(state.game, state.hands[state.currentHandIndex]);
    state.frameIndex = state.frames.length - 1;
    el.handSelect.value = String(state.currentHandIndex);
    renderSummary();
    renderFrame();
    return;
  }
  state.frameIndex = Math.max(0, state.frameIndex - 1);
  renderFrame();
}

function play() {
  if (!state.game || state.playing) return;
  state.playing = true;
  tick();
  renderFrame();
}

function pause() {
  state.playing = false;
  if (state.timer) window.clearTimeout(state.timer);
  state.timer = null;
  syncControls();
}

function tick() {
  if (!state.playing) return;
  const frame = state.frames[state.frameIndex];
  const baseDelay = frame?.type === "deal" || frame?.type === "award" ? 1500 : 1150;
  const delay = baseDelay * Number(el.pace.value || 1);
  state.timer = window.setTimeout(() => {
    nextFrame();
    tick();
  }, delay);
}

// ---------------------------------------------------------------------------
// Network / file I/O.
// ---------------------------------------------------------------------------
async function fetchFromServer() {
  const base = el.serverUrl.value.trim();
  const gameId = el.gameId.value.trim();
  if (!base || !gameId) throw new Error("请填写游戏服务地址和 Game ID");
  const url = `/api/fetch-game?${new URLSearchParams({ base_url: base, game_id: gameId })}`;
  const response = await fetch(url);
  const payload = await response.json();
  if (!response.ok) throw new Error(payload.error || "获取失败");
  loadGame(payload.game, `Server · ${gameId}`);
}

function setAutoPoll(enabled) {
  if (state.pollTimer) window.clearInterval(state.pollTimer);
  state.pollTimer = null;
  el.pollBadge.textContent = enabled ? `Auto ${el.pollSeconds.value}s` : "Auto Off";
  if (!enabled) return;
  const interval = Math.max(5, Number(el.pollSeconds.value || 12)) * 1000;
  state.pollTimer = window.setInterval(() => {
    fetchFromServer().catch((error) => showMessage(error.message));
  }, interval);
}

function showMessage(message) {
  el.tableMessage.textContent = message;
  el.sourceBadge.textContent = "Error";
}

function escapeHtml(value) {
  return String(value)
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#039;");
}

// ---------------------------------------------------------------------------
// Wiring.
// ---------------------------------------------------------------------------
el.fetchBtn.addEventListener("click", () => {
  fetchFromServer().catch((error) => showMessage(error.message));
});

el.fileInput.addEventListener("change", async (event) => {
  const file = event.target.files?.[0];
  if (!file) return;
  try {
    const raw = JSON.parse(await file.text());
    loadGame(raw, `File · ${file.name}`);
  } catch (error) {
    showMessage(error.message);
  } finally {
    event.target.value = "";
  }
});

el.autoPoll.addEventListener("change", () => setAutoPoll(el.autoPoll.checked));
el.pollSeconds.addEventListener("change", () => setAutoPoll(el.autoPoll.checked));
el.handSelect.addEventListener("change", () => selectHand(Number(el.handSelect.value)));
el.playBtn.addEventListener("click", () => state.playing ? pause() : play());
el.nextBtn.addEventListener("click", () => nextFrame());
el.prevBtn.addEventListener("click", () => prevFrame());
el.resetBtn.addEventListener("click", () => selectHand(state.currentHandIndex));
window.addEventListener("resize", () => renderFrame());

syncControls();