// Undercooked — the countdown screen (phase 07 task 02).
//
// The 3-second `COUNTDOWN` in big numerals (one `countdown` frame per
// whole second: 3, 2, 1). The pulse is decorative: under
// `prefers-reduced-motion` the numeral just changes (the CSS in
// `screens.css` gates the animation), and a re-mount per numeral is the
// only motion machinery.

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

let numEl = null;

export function mount(target, data, app) {
  numEl = el("p", { id: "countdown-num", class: "countdown-num" }, String(data.n ?? 3));
  target.append(
    el("div", { class: "panel countdown" },
      el("h2", {}, "Get ready"),
      numEl,
    ),
  );
}

/** A `countdown` frame landed (same-screen re-show): the numeral
 *  replaces itself so the (motion-gated) pulse restarts. */
export function update(data, _app) {
  if (numEl === null) return;
  numEl.textContent = String(data.n ?? "");
  const parent = numEl.parentElement;
  if (parent !== null) {
    const fresh = el("p", { id: "countdown-num", class: "countdown-num" }, numEl.textContent);
    parent.replaceChildren(fresh);
    numEl = fresh;
  }
}

export function unmount() {
  numEl = null;
}