/**
 * Watching.
 *
 * A connection the server gave no seat — one that carried no session the page
 * minted, or a second client from an address that already holds a seat — is
 * sent a snapshot with no `me` and no players: the score, the round, the
 * clock and the kill feed, and nothing at all that says where anybody is.
 * That is the whole point of it, so this view draws no map and no bodies. It
 * says what the match is doing and why this connection is only watching.
 */

import { roundOutcome } from "./prompt.js";

/** Is this a snapshot for a connection that has no seat? */
export const watching = (snap) => Boolean(snap) && (snap.spectator === true || !snap.me);

// Why the server handed this connection no seat. It says which, because the
// two have different answers: open the tab that is playing, or let the page
// keep its cookie.
const WHY = {
  address: "Somebody at this address is already playing — that tab holds the seat, and this one watches.",
  cookie: "This browser did not send the session cookie the page sets, so there is no seat to give it.",
};
const WHY_UNSAID = "This connection has no seat, so it is watching the match.";

const PHASE = { buy: "buy phase", live: "live", end: "round over" };

/** What the watching view says, in order. Plain strings, nothing drawn. */
export function watchLines(snap) {
  const score = snap.score ?? { red: 0, blue: 0 };
  // A round that has just ended says who took it and why, the same as a seat
  // is told — it is the one thing a watcher most wants to know.
  const outcome = snap.phase === "end" ? roundOutcome(snap) : null;
  const turned = outcome ? ` — ${outcome.winner} take it, ${outcome.why}` : "";
  return {
    title: "watching",
    why: WHY[snap.why] ?? WHY_UNSAID,
    phase: `round ${snap.round ?? 1} · ${PHASE[snap.phase] ?? "match over"}${turned} · ${snap.attackers ?? "—"} attacking${snap.result ? " · " + snap.result : ""}`,
    score: `red ${score.red ?? 0} — ${score.blue ?? 0} blue`,
    clock: `${Math.ceil(Math.max(0, Number(snap.clock) || 0))}s`,
    note: "No map and no bodies: a watching connection is never told where anybody is.",
  };
}

/** Break a line at the last space that still fits, measured by the canvas. */
export function wrap(ctx, text, maxWidth) {
  const lines = [];
  let line = "";
  for (const word of String(text).split(" ")) {
    const tried = line ? `${line} ${word}` : word;
    if (line && ctx.measureText(tried).width > maxWidth) {
      lines.push(line);
      line = word;
    } else line = tried;
  }
  if (line) lines.push(line);
  return lines;
}

/**
 * The view itself: the score, the round, the clock, and the sentence that
 * says why this connection is watching. Centred on a flat panel, because
 * there is no world here to stand it on.
 */
export function drawWatching(ctx, snap, width, height) {
  const lines = watchLines(snap);
  const mid = width / 2;
  const unit = Math.min(width / 900, height / 570);
  ctx.fillStyle = "#0b0d11";
  ctx.fillRect(0, 0, width, height);
  ctx.textAlign = "center";

  ctx.fillStyle = "#8b93a5";
  ctx.font = `${Math.round(22 * unit)}px system-ui, sans-serif`;
  ctx.fillText(lines.title, mid, height * 0.3);

  ctx.fillStyle = "#e7e9ee";
  ctx.font = `${Math.round(54 * unit)}px system-ui, sans-serif`;
  ctx.fillText(lines.score, mid, height * 0.42);

  ctx.font = `${Math.round(30 * unit)}px system-ui, sans-serif`;
  ctx.fillText(lines.clock, mid, height * 0.52);

  ctx.fillStyle = "#b9c0cf";
  ctx.font = `${Math.round(19 * unit)}px system-ui, sans-serif`;
  ctx.fillText(lines.phase, mid, height * 0.6);

  ctx.fillStyle = "#8b93a5";
  ctx.font = `${Math.round(17 * unit)}px system-ui, sans-serif`;
  let y = height * 0.7;
  for (const line of [...wrap(ctx, lines.why, width * 0.8), ...wrap(ctx, lines.note, width * 0.8)]) {
    ctx.fillText(line, mid, y);
    y += 24 * unit;
  }
  ctx.textAlign = "left";
  return lines;
}