/**
 * revealjs-plugin.js
 * ==================
 * Client-side helper for mkdocs-revealjs.
 *
 * Responsibilities
 * ─────────────────
 * 1. Inject a toolbar (fullscreen button) above each .mkdocs-revealjs-wrapper.
 * 2. Toggle fullscreen via the button OR the F key.
 * 3. Notify Reveal.js to re-layout after fullscreen changes.
 *
 * Light / dark theme switching is handled entirely in plugin.py's inline
 * <script> block via a MutationObserver — this file does NOT touch themes.
 *
 * The deck instance is exposed as window._mkdocsRevealDeck so custom JS
 * files (the "js" option) can interact with it after initialisation.
 */

(function () {
  "use strict";

  // ── Icons ──────────────────────────────────────────────────────────────────

  var ICON_ENTER =
    '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">' +
    '<path d="M3 3h6v2H5v4H3V3zm12 0h6v6h-2V5h-4V3zM3 15h2v4h4v2H3v-6zm14 4h-4v2h6v-6h-2v4z"/>' +
    "</svg>";

  var ICON_EXIT =
    '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">' +
    '<path d="M5 7H3V3h6v2H5v2zm9-4h2v4h4V5h-6V3zm4 12h2v4h-6v-2h4v-2zM7 17H5v-2H3v4h4v-2z"/>' +
    "</svg>";

  // ── Fullscreen helpers ─────────────────────────────────────────────────────

  function isFullscreen(el) {
    var d = document;
    return (
      d.fullscreenElement       === el ||
      d.webkitFullscreenElement === el ||
      d.mozFullScreenElement    === el
    );
  }

  function enterFullscreen(el) {
    var fn =
      el.requestFullscreen       ||
      el.webkitRequestFullscreen ||
      el.mozRequestFullScreen;
    if (fn) fn.call(el);
  }

  function leaveFullscreen() {
    var fn =
      document.exitFullscreen       ||
      document.webkitExitFullscreen ||
      document.mozCancelFullScreen;
    if (fn) fn.call(document);
  }

  function toggleFullscreen(wrapper) {
    isFullscreen(wrapper) ? leaveFullscreen() : enterFullscreen(wrapper);
  }

  // ── Toolbar ────────────────────────────────────────────────────────────────

  function buildToolbar(wrapper) {
    var toolbar = document.createElement("div");
    toolbar.className = "mkdocs-revealjs-toolbar";

    var btn = document.createElement("button");
    btn.title = "Fullscreen  (F)";
    btn.setAttribute("aria-label", "Toggle fullscreen");
    btn.innerHTML = ICON_ENTER + "&nbsp;Fullscreen";

    btn.addEventListener("click", function () {
      toggleFullscreen(wrapper);
    });

    toolbar.appendChild(btn);
    return { toolbar: toolbar, btn: btn };
  }

  function syncButton(wrapper, btn) {
    var fs = isFullscreen(wrapper);
    btn.innerHTML = fs
      ? ICON_EXIT  + "&nbsp;Exit fullscreen"
      : ICON_ENTER + "&nbsp;Fullscreen";

    // Tell Reveal.js to recalculate layout after resize
    if (window._mkdocsRevealDeck) {
      window._mkdocsRevealDeck.layout();
    }
  }

  // ── Init ───────────────────────────────────────────────────────────────────

  function init() {
    var wrappers = document.querySelectorAll(".mkdocs-revealjs-wrapper");
    if (!wrappers.length) return;

    wrappers.forEach(function (wrapper) {
      var parts = buildToolbar(wrapper);

      // Toolbar sits above the .reveal div
      wrapper.insertBefore(parts.toolbar, wrapper.firstChild);

      // Sync button icon whenever fullscreen state changes
      ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange"]
        .forEach(function (evt) {
          document.addEventListener(evt, function () {
            syncButton(wrapper, parts.btn);
          });
        });
    });

    // Global F-key handler — fires when focus is on body or inside a wrapper
    document.addEventListener("keydown", function (e) {
      if (e.key !== "f" && e.key !== "F") return;

      var wrapper = document.querySelector(".mkdocs-revealjs-wrapper");
      if (!wrapper) return;

      var active = document.activeElement;
      if (!active || active === document.body || wrapper.contains(active)) {
        toggleFullscreen(wrapper);
        e.preventDefault();
      }
    });
  }

  // ── Boot ───────────────────────────────────────────────────────────────────

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }

})();
