// Undercooked — the play screen (phase 07 task 02).
//
// The kitchen's frame: the canvas host (`#kcanvas` — hidden until the
// task-04 renderer sizes and unhides it), the HUD root (`#hud`, filled
// by task 04), the *Leave* control, the reconnecting overlay (its
// *logic* lands in phase 08; this task shows the sign), the emote row
// (the `docs/PROTOCOL.md` whitelist: `wave`, `cheer`, `thumbs_up`,
// `thumbs_down`, `angry`, `star`), the spectator notice (a join during
// `COUNTDOWN`/`PLAYING`/`ROUND_END` watches, per the wire contract) and
// the banner region (non-fatal `err` codes, e.g. a `start` refusal).

import { el, frag } from "./dom.js";

/** The emote whitelist (docs/PROTOCOL.md "EmoteMsg"): id → label. */
const EMOTES = [
  ["wave", "Wave", "👋"],
  ["cheer", "Cheer", "🎉"],
  ["thumbs_up", "Thumbs up", "👍"],
  ["thumbs_down", "Thumbs down", "👎"],
  ["angry", "Angry", "😠"],
  ["star", "Star", "⭐"],
];

let overlay = null;
let bannerEl = null;

export function mount(target, _data, app) {
  overlay = el(
    "div",
    { id: "reconnect-overlay", class: "overlay", hidden: true, role: "status" },
    el("p", {}, "Connection lost — reconnecting… (phase 08)"),
  );
  bannerEl = el("p", {
    id: "play-banner",
    class: "status",
    role: "status",
    "aria-live": "polite",
    hidden: true,
  });
  target.append(
    el("div", { class: "play-screen" },
      el("div", { class: "play-head" },
        el("p", {
          id: "spectator-note",
          class: "hint",
          hidden: !app.spectator,
        }, "You are watching — the room is full."),
        el("button", {
          id: "leave-btn",
          class: "btn",
          type: "button",
          onClick: () => app.leave(),
        }, "Leave"),
      ),
      bannerEl,
      el("canvas", { id: "kcanvas", hidden: true, "aria-hidden": "true" }),
      el("div", { id: "hud", class: "hud" }),
      el("div", { class: "emote-row", role: "group", "aria-label": "Emotes" },
        frag(
          ...EMOTES.map(([id, label, glyph]) =>
            el(
              "button",
              {
                class: "btn emote",
                type: "button",
                "aria-label": label,
                "data-emote": id,
                onClick: () => app.emote(id),
              },
              el("span", { "aria-hidden": "true" }, glyph),
            ),
          ),
        ),
      ),
      overlay,
    ),
  );
}

/** The reconnecting overlay (populated in phase 08). */
export function showReconnecting(visible) {
  if (overlay !== null) overlay.hidden = !visible;
}

export function setBanner(message) {
  if (bannerEl === null) return;
  bannerEl.textContent = message ?? "";
  bannerEl.hidden = message === null || message === "";
}

export function unmount() {
  overlay = null;
  bannerEl = null;
}