// Undercooked — the landing screen (phase 07 task 02).
//
// The door of the app: *Create lobby* (a `POST /api/rooms`, the token in
// the body — the session is minted server-side and returned once) and the
// join form (code normalised to five uppercase characters, remembered in
// `sessionStorage` so a reload rejoins fast). Server refusals that land
// here — the process's `room_full` on create, an unreachable server —
// render in the status region, which stays on the screen (the app only
// leaves for a real room).

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

let statusEl = null;
let joinInput = null;
let bannerText = "";

export function mount(target, _data, app) {
  bannerText = app.banner ?? "";
  statusEl = el(
    "p",
    { id: "status", class: "status", role: "status", "aria-live": "polite" },
    bannerText || "Pick a kitchen to start.",
  );
  joinInput = el("input", {
    id: "join-code",
    name: "code",
    type: "text",
    inputmode: "text",
    autocapitalize: "characters",
    spellcheck: "false",
    maxlength: String(CODE_LENGTH),
    size: String(CODE_LENGTH),
    placeholder: "ABCDE",
    "aria-describedby": "join-hint",
    required: true,
    value: app.lastCode || "",
  });
  const form = el("form", { id: "join-form", class: "panel", autocomplete: "off" },
    el("h2", { id: "lobby-heading" }, "Kitchen lobby"),
    el("p", { id: "lobby-help", class: "tagline" },
      "Create a kitchen and read its 5-character code out loud, or join one that is already open. Nothing is saved and nothing is asked for."),
    el("button", {
      id: "create-lobby",
      class: "btn btn-primary",
      type: "button",
      onClick: () => {
        app.banner = null;
        app.createLobby();
      },
    }, "Create lobby"),
    el("label", { for: "join-code" }, "Room code"),
    el("div", { class: "join-row" }, joinInput, el("button", { class: "btn", type: "submit" }, "Join")),
    el("p", { id: "join-hint", class: "hint" },
      "Five characters, letters and digits, never ",
      el("code", {}, "I"), ", ",
      el("code", {}, "L"), ", ",
      el("code", {}, "O"), " or ",
      el("code", {}, "U"), "."),
    statusEl,
  );
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    const code = normalizeCode(joinInput.value);
    joinInput.value = code;
    if (code.length !== CODE_LENGTH) {
      setBanner(`A room code is ${CODE_LENGTH} characters.`);
      joinInput.focus();
      return;
    }
    app.banner = null;
    app.join(code);
  });
  target.append(frag(form));
}

export function unmount() {
  /* no timers; the app's show() clears the root */
}

export function setBanner(message) {
  if (statusEl === null) return;
  bannerText = message;
  statusEl.textContent = message || "Pick a kitchen to start.";
}