import { footer, pageHead } from "../chrome";
import { el } from "../dom";

/**
 * A failure the player can do nothing about: the control plane is unreachable,
 * or something threw where nothing was meant to.
 *
 * Not a dead end. The two ways out are the only two that ever help — ask again,
 * or start over from the root.
 */
export function errorScreen(message: string, retry: () => void): Node[] {
  const again = el("button", { type: "button", textContent: "Try again" });
  again.addEventListener("click", () => {
    again.disabled = true;
    again.textContent = "Retrying…";
    retry();
  });

  const home = el("button", {
    type: "button",
    className: "secondary",
    textContent: "Go home",
  });
  home.addEventListener("click", () => {
    // A full navigation rather than a re-render: whatever state got the app
    // here is not worth carrying over.
    window.location.assign("/");
  });

  return [
    pageHead("Sorry, we've encountered an issue."),
    el("section", { className: "card" }, [
      el("p", { className: "error", role: "alert", textContent: message }),
      el("p", {
        className: "hint",
        textContent:
          "I'll be honest, we can't afford error monitoring, so you'll have to DM @permadeath.com a screenshot.",
      }),
      el("div", { className: "row" }, [again, home]),
    ]),
    footer(),
  ];
}