(function initChangelogShell(global) {
  "use strict";

  function createElement(tagName, className, text) {
    var node = global.document.createElement(tagName);
    if (className) {
      node.className = className;
    }
    if (typeof text === "string") {
      node.textContent = text;
    }
    return node;
  }

  function appendList(canvas, title, items) {
    if (!Array.isArray(items) || items.length === 0) {
      return;
    }

    canvas.appendChild(createElement("h3", "myron-heading sg-changelog-section-title", title)).setAttribute("data-level", "6");

    var list = createElement("ul", "myron-list myron-list--style-bulleted myron-list--density-sm");
    items.forEach(function addItem(item) {
      if (typeof item !== "string" || item.trim() === "") {
        return;
      }
      list.appendChild(createElement("li", "myron-list-item", item));
    });

    if (list.children.length > 0) {
      canvas.appendChild(list);
    }
  }

  function appendCodeBlock(canvas, title, snippets) {
    if (!Array.isArray(snippets) || snippets.length === 0) {
      return;
    }

    canvas.appendChild(createElement("h3", "myron-heading sg-changelog-section-title", title)).setAttribute("data-level", "6");

    snippets.forEach(function addSnippet(snippet) {
      if (typeof snippet !== "string" || snippet.trim() === "") {
        return;
      }
      var pre = createElement("pre", "myron-code-block myron-code-block--density-sm");
      var code = createElement("code", "", snippet);
      pre.appendChild(code);
      canvas.appendChild(pre);
    });
  }

  function renderEntry(entry, index) {
    var wrapper = createElement("article", "sg-specimen sg-changelog-entry");
    var label = createElement(
      "span",
      "sg-specimen__label",
      (entry.version || "version-unknown") + " · " + (entry.releasedAt || "date-unknown") + " · #" + String(index + 1)
    );
    var canvas = createElement("div", "sg-specimen__canvas");

    var meta = createElement("div", "sg-changelog-meta");
    meta.appendChild(createElement("span", "sg-changelog-tag", "Version: " + (entry.version || "unknown")));
    meta.appendChild(createElement("span", "sg-changelog-tag", "Released: " + (entry.releasedAt || "unknown")));
    meta.appendChild(createElement("span", "sg-changelog-tag", "Codename: " + (entry.codename || "unknown")));

    var title = createElement("h2", "myron-heading", entry.title || "Release update");
    title.setAttribute("data-level", "4");

    var summary = createElement(
      "p",
      "myron-paragraph",
      entry.summary || "No summary provided for this release entry."
    );

    canvas.appendChild(meta);
    canvas.appendChild(title);
    canvas.appendChild(summary);

    appendList(canvas, "Highlights", entry.highlights);
    appendList(canvas, "Notes", entry.notes);
    appendCodeBlock(canvas, "Commands", entry.commands);

    wrapper.appendChild(label);
    wrapper.appendChild(canvas);
    return wrapper;
  }

  function renderFallback(root, message, muted) {
    root.innerHTML = "";

    var specimen = createElement("div", "sg-specimen");
    var label = createElement("span", "sg-specimen__label", "Change Log Status");
    var canvas = createElement("div", "sg-specimen__canvas");
    var paragraphClass = muted ? "myron-paragraph myron-paragraph--muted sg-changelog-empty" : "myron-paragraph sg-changelog-empty";

    canvas.appendChild(createElement("p", paragraphClass, message));
    specimen.appendChild(label);
    specimen.appendChild(canvas);
    root.appendChild(specimen);
  }

  function normalizeEntries(payload) {
    if (!payload || typeof payload !== "object") {
      return [];
    }

    if (!Array.isArray(payload.entries)) {
      return [];
    }

    return payload.entries.filter(function isRecord(entry) {
      return entry && typeof entry === "object";
    });
  }

  function renderChangelog() {
    var root = global.document.getElementById("sg-changelog-root");
    if (!root) {
      return;
    }

    fetch("/app/data/changelog.json", { cache: "no-store" })
      .then(function onResponse(response) {
        if (!response.ok) {
          throw new Error("HTTP " + response.status);
        }
        return response.json();
      })
      .then(function onPayload(payload) {
        var entries = normalizeEntries(payload);
        root.innerHTML = "";

        if (entries.length === 0) {
          renderFallback(root, "No change log entries are available yet.", true);
          return;
        }

        entries.forEach(function appendEntry(entry, index) {
          root.appendChild(renderEntry(entry, index));
        });
      })
      .catch(function onError(error) {
        renderFallback(
          root,
          "Unable to load /app/data/changelog.json. Ensure the page is served from the app workspace and the ledger file is valid JSON. " +
            "Load error: " + error.message,
          true
        );
      });
  }

  if (global.document.readyState === "loading") {
    global.document.addEventListener("DOMContentLoaded", renderChangelog, { once: true });
  } else {
    renderChangelog();
  }
})(window);
