{% extends "base.html" %}
{% from "_macros.html" import help %}
{% block title %}Updates — BackupWatch{% endblock %}
{% block subnav %}{% set subnav_active = 'advanced' %}{% include "_settings_subnav.html" %}{% endblock %}
{% block content %}
<style>
  .apply-spinner { display:inline-block; width:14px; height:14px; border-radius:50%;
    border:2px solid var(--line); border-top-color:var(--accent, #1666d8);
    animation:apply-spin .7s linear infinite; vertical-align:middle; margin-right:8px; }
  @keyframes apply-spin { to { transform:rotate(360deg); } }
</style>
<h1>Updates</h1>
{% if msg %}<div class="banner ok">{{ msg }}</div>{% endif %}
{% if err %}<div class="banner error">{{ err }}</div>{% endif %}

{% if restarting %}
<div class="banner ok">Update to <strong>v{{ applied_version }}</strong> applied — the app is restarting. This page will reload automatically once it's back (usually a few seconds).</div>
<noscript><meta http-equiv="refresh" content="12;url=/updates"></noscript>
<script>
// Wait for the restarted app to actually come back before navigating — don't reload on a blind
// timer. During the restart the reverse proxy has no upstream and returns 502, so a fixed-delay
// refresh can land on an nginx error page. Instead, poll /healthz until the NEW version answers
// (the old process lingers ~1.5s after apply and still reports the previous version), tolerating
// failed requests (502 / connection refused) while the process is down.
(function () {
  var target = {{ applied_version|tojson }};
  function reload() { window.location.href = "/updates?msg=" + encodeURIComponent("Updated to v" + target); }
  function poll() {
    fetch("/healthz", {cache: "no-store"})
      .then(function (r) { return r.ok ? r.json() : null; })
      .then(function (d) { if (d && d.version === target) { reload(); } else { setTimeout(poll, 2000); } })
      .catch(function () { setTimeout(poll, 2000); });
  }
  setTimeout(poll, 3000);   // let the old process exit and the restart begin
})();
</script>
{% endif %}

<div class="panel">
  <h2 style="margin-top:0">Current version</h2>
  <p>Running <strong>v{{ version }}</strong>.</p>
  {% if not writable %}
  <div class="banner error">The app directory isn't writable by the service user, so in-app updates are disabled. See the upgrade prerequisites in <span class="mono">docs/DEPLOY.md</span>.</div>
  {% endif %}
</div>

{% if not restarting %}
  {% if staged_version %}
  <div class="panel">
    <h2 style="margin-top:0">Ready to install: v{{ staged_version }}</h2>
    <p class="note">Applying will back up the database and current code to <span class="mono">instance/backups/</span>, install any new dependencies, swap in the new files, and restart the app on <strong>v{{ staged_version }}</strong> (current: v{{ version }}).</p>
    {% if staged_changelog %}<details><summary>Release notes</summary><pre class="email-text">{{ staged_changelog }}</pre></details>{% endif %}
    <div class="actions">
      <form method="post" action="/updates/apply" id="apply-form" onsubmit="return startApply()">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <button type="submit" id="apply-btn">Apply v{{ staged_version }} &amp; restart</button>
      </form>
      <form method="post" action="/updates/cancel">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <button type="submit" class="btn-secondary">Cancel</button>
      </form>
    </div>
    <p id="apply-progress" hidden style="margin-top:12px">
      <span class="apply-spinner"></span><span id="apply-step">Starting…</span>
    </p>
  </div>
  <script>
    function startApply() {
      if (!confirm('Install v{{ staged_version }} and restart the app now?')) return false;
      document.getElementById('apply-btn').disabled = true;
      document.getElementById('apply-progress').hidden = false;
      // The POST this form is about to submit gives no feedback until it's completely done —
      // poll a status endpoint on a separate connection for the duration of that same request.
      // The browser's own navigation (to the restarting page, or back to /updates?err=... on
      // failure) ends this polling automatically; nothing here needs to detect completion itself.
      (function poll() {
        fetch("/updates/status", {cache: "no-store"})
          .then(function (r) { return r.ok ? r.json() : null; })
          .then(function (d) {
            if (d && d.step) { document.getElementById('apply-step').textContent = d.step; }
            setTimeout(poll, 1000);
          })
          .catch(function () { setTimeout(poll, 1000); });
      })();
      return true;
    }
  </script>
  {% else %}
  <div class="panel">
    <h2 style="margin-top:0">Install an update {{ help("Upload the release .zip you were sent. It's validated and previewed before anything changes; applying backs up your data and restarts the app on the new version.") }}</h2>
    <form method="post" action="/updates/upload" enctype="multipart/form-data" class="stack">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <input type="file" name="zipfile" accept=".zip" required>
      <label class="inline"><input type="checkbox" name="force"> Allow installing the same or an older version</label>
      <button type="submit" class="btn-secondary">Upload release</button>
    </form>
    <p class="note">Releases are distributed as a <span class="mono">.zip</span>. Your database, settings and <span class="mono">secret.key</span> are never modified by an update — a DB + code backup is written to <span class="mono">instance/backups/</span> before applying.</p>
  </div>
  {% endif %}
{% endif %}
{% endblock %}