{% load i18n version_tags %}
{% translate "A new version of this site is available." as version_message %}
{% translate "Refresh" as refresh_label %}
{% translate "Version" as version_label %}
{% translate "Revision" as revision_label %}
{% with local_version_info=None %}
  {% if request.user.is_staff %}
    {% version_check_info as local_version_info %}
  {% endif %}
<script>
(function () {
  const CHECK_URL = "{% url 'version-info' %}";
  const MESSAGE_TEXT = "{{ version_message|escapejs }}";
  const REFRESH_TEXT = "{{ refresh_label|escapejs }}";
  const VERSION_LABEL = "{{ version_label|escapejs }}";
  const REVISION_LABEL = "{{ revision_label|escapejs }}";
  const LOCAL_VERSION = "{{ local_version_info.version|escapejs }}";
  const LOCAL_REVISION = "{{ local_version_info.revision|escapejs }}";
  const CHECK_INTERVAL = 120000;
  const REMOTE_CHECK_INTERVAL = 600000;
  const STORAGE_KEY = "version-check-state-v1";
  const LOCK_KEY = "version-check-lock-v1";
  const LOCK_TTL = 15000;
  if (!CHECK_URL) {
    return;
  }
  if (window.__versionCheckInitialized) {
    return;
  }
  window.__versionCheckInitialized = true;

  function start() {
    const styleId = "version-update-style";
    if (!document.getElementById(styleId)) {
      const style = document.createElement("style");
      style.id = styleId;
      style.textContent = `
.version-update-banner {
  align-items: center;
  align-self: stretch;
  background-color: #0b5ed7;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: center;
  margin: 0;
  padding: 0.75rem 1.5rem;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1100;
}
.version-update-text {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  justify-content: center;
  font-weight: 600;
}
.version-update-details {
  font-weight: 400;
  opacity: 0.9;
  margin-left: 0.25rem;
}
.version-update-refresh {
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  padding: 0.35rem 1rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.version-update-refresh:hover,
.version-update-refresh:focus,
.version-update-refresh:focus-visible {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  outline: none;
}
`; 
      document.head.appendChild(style);
    }

    const normalizedLocalVersion = (LOCAL_VERSION || "").trim();
    const normalizedLocalRevision = (LOCAL_REVISION || "").trim();
    const hasLocalInfo = Boolean(normalizedLocalVersion || normalizedLocalRevision);
    let currentVersion = null;
    let currentRevision = null;
    let bannerElement;
    let detailsElement;

    function readStoredState() {
      try {
        const raw = window.localStorage.getItem(STORAGE_KEY);
        if (!raw) {
          return null;
        }
        const parsed = JSON.parse(raw);
        if (!parsed || typeof parsed !== "object") {
          return null;
        }
        return {
          version: typeof parsed.version === "string" ? parsed.version : "",
          revision: typeof parsed.revision === "string" ? parsed.revision : "",
          checkedAt: typeof parsed.checkedAt === "number" ? parsed.checkedAt : 0,
        };
      } catch (error) {
        return null;
      }
    }

    function writeStoredState(info) {
      try {
        const payload = {
          version: info.version || "",
          revision: info.revision || "",
          checkedAt: Date.now(),
        };
        window.localStorage.setItem(STORAGE_KEY, JSON.stringify(payload));
      } catch (error) {
        // Ignore storage errors (private mode, quota, etc).
      }
    }

    function syncWithStoredState(stored) {
      if (!stored) {
        return;
      }
      if (stored.version !== currentVersion || stored.revision !== currentRevision) {
        currentVersion = stored.version;
        currentRevision = stored.revision;
        updateBanner({ version: stored.version, revision: stored.revision });
      }
    }

    function shouldSkipRemoteFetch() {
      const stored = readStoredState();
      if (!stored) {
        return false;
      }
      syncWithStoredState(stored);
      const age = Date.now() - stored.checkedAt;
      return age < REMOTE_CHECK_INTERVAL;
    }

    function acquireLock() {
      try {
        const now = Date.now();
        const raw = window.localStorage.getItem(LOCK_KEY);
        if (raw) {
          const lock = JSON.parse(raw);
          if (lock && typeof lock.timestamp === "number" && now - lock.timestamp < LOCK_TTL) {
            return false;
          }
        }
        window.localStorage.setItem(LOCK_KEY, JSON.stringify({ timestamp: now }));
        return true;
      } catch (error) {
        return true;
      }
    }

    function shortRevision(value) {
      return value ? value.slice(0, 7) : "";
    }

    function ensureBanner() {
      if (!bannerElement) {
        bannerElement = document.createElement("div");
        bannerElement.className = "version-update-banner";
        bannerElement.setAttribute("role", "status");
        bannerElement.setAttribute("aria-live", "polite");

        const textWrapper = document.createElement("span");
        textWrapper.className = "version-update-text";
        const messageNode = document.createElement("span");
        messageNode.className = "version-update-message";
        messageNode.textContent = MESSAGE_TEXT;
        detailsElement = document.createElement("span");
        detailsElement.className = "version-update-details";

        textWrapper.appendChild(messageNode);
        textWrapper.appendChild(detailsElement);

        const refreshLink = document.createElement("a");
        refreshLink.href = "#";
        refreshLink.className = "version-update-refresh";
        refreshLink.textContent = REFRESH_TEXT;
        refreshLink.addEventListener("click", function (event) {
          event.preventDefault();
          window.location.reload();
        });

        bannerElement.appendChild(textWrapper);
        bannerElement.appendChild(refreshLink);
      }

      if (!bannerElement.isConnected && document.body) {
        document.body.prepend(bannerElement);
      }

      return bannerElement;
    }

    function updateBanner(info) {
      const banner = ensureBanner();
      const parts = [];
      if (info.version) {
        parts.push(`${VERSION_LABEL} ${info.version}`);
      }
      if (info.revision) {
        parts.push(`${REVISION_LABEL} ${shortRevision(info.revision)}`);
      }
      if (detailsElement) {
        detailsElement.textContent = parts.length ? `(${parts.join(" · ")})` : "";
      }
      return banner;
    }

    async function fetchInfo() {
      if (document.visibilityState === "hidden") {
        return;
      }
      if (shouldSkipRemoteFetch()) {
        return;
      }
      if (!acquireLock()) {
        return;
      }
      try {
        const response = await fetch(CHECK_URL, {
          credentials: "same-origin",
          cache: "no-store",
        });
        if (!response.ok) {
          return;
        }
        const data = await response.json();
        const version = typeof data.version === "string" ? data.version : "";
        const revision = typeof data.revision === "string" ? data.revision : "";
        writeStoredState({ version, revision });
        if (currentVersion === null && currentRevision === null) {
          currentVersion = version;
          currentRevision = revision;
          return;
        }
        if (version !== currentVersion || revision !== currentRevision) {
          currentVersion = version;
          currentRevision = revision;
          updateBanner({ version, revision });
        }
      } catch (error) {
        // Network issues are ignored to avoid interrupting the user experience.
      }
    }

    const stored = readStoredState();
    if (hasLocalInfo) {
      currentVersion = normalizedLocalVersion;
      currentRevision = normalizedLocalRevision;
      if (
        !stored ||
        stored.version !== normalizedLocalVersion ||
        stored.revision !== normalizedLocalRevision
      ) {
        writeStoredState({ version: normalizedLocalVersion, revision: normalizedLocalRevision });
      }
    } else if (stored) {
      currentVersion = stored.version;
      currentRevision = stored.revision;
    }

    fetchInfo();
    window.setInterval(fetchInfo, CHECK_INTERVAL);

    window.addEventListener("storage", function (event) {
      if (event.key !== STORAGE_KEY) {
        return;
      }
      syncWithStoredState(readStoredState());
    });

    document.addEventListener("visibilitychange", function () {
      if (document.visibilityState === "visible") {
        fetchInfo();
      }
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", start, { once: true });
  } else {
    start();
  }
})();
</script>
{% endwith %}