/* global React */
/* Dev Mode: a mirror of the production dashboard, revealed by the ?dev=1 URL,
 * where features that are not ready for production are built and shared. It rides
 * the same deploy as prod (same push to main), but every dev-only surface is
 * gated on window.DEV_MODE so it never shows in the primary interface. The flag
 * is set by a tiny inline script in index.html (so the dev-framed chrome is in
 * place before first paint); this module reads it and exposes the shared pieces:
 * the beaker toggle, the "DEV" chip, and the DevOnly gate. Toggling does a full
 * navigation so the flag re-evaluates cleanly. Written in the createElement idiom
 * to match the rest of dujour's src. */
(() => {
  const e = React.createElement;

  /* Build the current URL with ?dev flipped on or off, preserving path, other
   * query params (e.g. ?theme=), and the hash so deep links survive the toggle. */
  function devHref(on) {
    const u = new URL(window.location.href);
    if (on) u.searchParams.set("dev", "1");
    else u.searchParams.delete("dev");
    return u.pathname + u.search + u.hash;
  }

  /* The beaker: ldef-os's flask glyph, the shared Dev Mode mark across every site
   * (per the cross-site request). */
  function IconBeaker({ size = 15 }) {
    return e("svg", {
      width: size, height: size, viewBox: "0 0 24 24", fill: "none",
      stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round",
      strokeLinejoin: "round", "aria-hidden": "true",
    },
      e("path", { d: "M9 3h6" }),
      e("path", { d: "M10 3v6L4.6 18.4A1.5 1.5 0 0 0 5.9 20.7h12.2a1.5 1.5 0 0 0 1.3-2.3L14 9V3" }),
      e("path", { d: "M7 14h10" }));
  }

  /* Topbar beaker: enters Dev Mode from prod, exits back to prod from dev. A real
   * anchor so it deep-links and opens in a new tab cleanly. */
  function DevModeButton() {
    const on = !!window.DEV_MODE;
    return e("a", {
      className: "dev-beaker" + (on ? " is-on" : ""),
      href: devHref(!on),
      title: on ? "Exit Dev Mode (back to production)" : "Open Dev Mode",
      "aria-label": on ? "Exit Dev Mode" : "Open Dev Mode",
      "aria-pressed": on,
    }, e(IconBeaker, null));
  }

  /* The "DEV" chip shown in the topbar while in Dev Mode, so a shared link is
   * never mistaken for production. Pairs with the orange page frame (CSS). */
  function DevPill() {
    if (!window.DEV_MODE) return null;
    return e("span", {
      className: "topbar-dev-pill",
      title: "Dev Mode: work in progress, not production",
    }, "DEV");
  }

  /* Gate for dev-only work: e(DevOnly, null, …) renders its children only in Dev
   * Mode. Build here, it ships on the same deploy, but stays out of the primary
   * interface until it is promoted. */
  function DevOnly({ children }) {
    return window.DEV_MODE ? e(React.Fragment, null, children) : null;
  }

  Object.assign(window, { IconBeaker, DevModeButton, DevPill, DevOnly, devHref });
})();