// Undercooked — the error screen (phase 07 task 02).
//
// Friendly copy per failure (the `err` codes of docs/PROTOCOL.md and
// the close codes the connection classifies), with the *right* retry
// affordance for each: a `4400` protocol mismatch must not auto-retry
// (the client is out of date), a `4401` room-gone must not retry the
// dead code, a `4402` full room points at another room — and the room
// code is shown for support.

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

/** code → { title, detail, retry } (retry = "a retry is offered"). */
const COPY = {
  room_gone: {
    title: "That kitchen is gone",
    detail: "It may have closed, or the code was mistyped.",
    retry: false,
  },
  room_full: {
    title: "That kitchen is full",
    detail: "Every seat is taken. Start your own room, or try another code.",
    retry: false,
  },
  protocol_mismatch: {
    title: "Protocol mismatch",
    detail:
      "This server speaks a protocol version this client does not. Retrying will not help — the client needs an update.",
    retry: false,
  },
  evicted: {
    title: "You are on another tab",
    detail: "A second tab took this seat. Use the other tab, or come back later.",
    retry: false,
  },
  internal: {
    title: "The kitchen hit an internal error",
    detail: "The round was aborted for everyone. Start a new room.",
    retry: false,
  },
  closed: {
    title: "The connection closed",
    detail: "The server closed the socket. You can try the same room again.",
    retry: true,
  },
  unreachable: {
    title: "Cannot reach the server",
    detail: "The socket could not be opened. Check the address and try again.",
    retry: true,
  },
};

export function mount(target, data, app) {
  const code = data.code ?? "closed";
  const copy = COPY[code] ?? COPY.closed;
  const buttonRow = el(
    "div",
    { class: "error-actions" },
    el("button", {
      id: "error-back",
      class: "btn btn-primary",
      type: "button",
      onClick: () => app.backToLanding(),
    }, "Back to landing"),
  );
  if (copy.retry && app.roomCode !== "") {
    buttonRow.prepend(
      el("button", {
        id: "error-retry",
        class: "btn",
        type: "button",
        onClick: () => app.retryJoin(),
      }, "Try again"),
    );
  }
  const children = [
    el("h2", { id: "error-title" }, copy.title),
    el("p", { id: "error-detail" }, copy.detail),
  ];
  if (app.roomCode !== "") {
    children.push(el("p", { id: "error-code" }, `Room code: ${app.roomCode}`));
  }
  target.append(el("div", { class: "panel error" }, el("div", { role: "alert" }, ...children), buttonRow));
}

export function unmount() {
  /* static */
}