{% extends "base.html" %}
{% block title %}Update — Neto{% endblock %}

{% block content %}
<div class="page-title">Update Neto</div>

{% if success %}
<div style="max-width:560px">
  <div style="background:#f0fdf4;border:1px solid #86efac;border-radius:10px;padding:20px 24px;margin-bottom:24px">
    <div style="font-weight:600;color:#15803d;font-size:15px;margin-bottom:4px">✓ Update applied successfully</div>
    <div style="font-size:13px;color:#166534">The service is restarting. This page will reload in a few seconds.</div>
  </div>
  <div style="background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden">
    <div style="padding:10px 16px;background:var(--bg3);border-bottom:1px solid var(--border);font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em">Update log</div>
    <div style="padding:16px;font-family:monospace;font-size:13px;line-height:2">
      {% for line in log %}
        <div style="color:{% if '✓' in line %}#15803d{% else %}var(--muted){% endif %}">{{ line }}</div>
      {% endfor %}
    </div>
  </div>
</div>
<script>
function tryReload() {
  fetch('/').then(r => { if (r.ok) location.href = '/'; else setTimeout(tryReload, 1000); }).catch(() => setTimeout(tryReload, 1000));
}
setTimeout(tryReload, 4000);
</script>

{% else %}

<div style="max-width:600px">

  <!-- OTA section -->
  <div class="card" style="margin-bottom:20px">
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:16px">
      <div>
        <h3 style="font-size:15px;font-weight:600;margin-bottom:2px">Automatic updates</h3>
        <div style="font-size:13px;color:var(--muted)">Current version: <strong id="current-ver" style="color:var(--text)">{{ version }}</strong></div>
      </div>
      <div style="display:flex;gap:8px">
        <select id="ota-channel" style="background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:6px;font-size:13px">
          <option value="stable">Stable</option>
          <option value="beta">Beta</option>
        </select>
        <button onclick="checkOTA()" id="check-btn"
          style="background:var(--accent);color:#fff;border:none;padding:7px 16px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500">
          Check for updates
        </button>
      </div>
    </div>

    <div id="ota-status" style="font-size:13px;color:var(--muted)">Click "Check for updates" to check the update server.</div>

    <div id="ota-update-available" style="display:none;margin-top:14px;background:#eff6ff;border:1px solid #93c5fd;border-radius:8px;padding:14px 16px">
      <div style="font-weight:600;color:#1d4ed8;margin-bottom:4px">Update available</div>
      <div style="font-size:13px;color:#1e40af;margin-bottom:10px" id="ota-notes"></div>
      <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
        <span style="font-size:13px;color:var(--muted)">→ <strong id="ota-remote-ver" style="color:var(--text)"></strong></span>
        <button onclick="installOTA()" id="install-btn"
          style="background:#15803d;color:#fff;border:none;padding:7px 16px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500">
          ↓ Download &amp; install
        </button>
      </div>
    </div>

    <div id="ota-up-to-date" style="display:none;margin-top:14px;background:#f0fdf4;border:1px solid #86efac;border-radius:8px;padding:12px 16px;font-size:13px;color:#15803d">
      ✓ You're on the latest version.
    </div>

    <div id="ota-progress" style="display:none;margin-top:14px">
      <div style="font-size:13px;color:var(--muted);margin-bottom:8px" id="ota-progress-msg">Downloading…</div>
      <div style="height:4px;background:var(--bg3);border-radius:2px;overflow:hidden">
        <div id="ota-bar" style="height:100%;background:var(--accent);width:0%;transition:width .3s;border-radius:2px"></div>
      </div>
    </div>

  </div>

  <!-- Manual upload section -->
  <div class="card">
    <h3 style="font-size:15px;font-weight:600;margin-bottom:4px">Manual update</h3>
    <p style="font-size:13px;color:var(--muted);margin-bottom:16px">Upload a neto.zip directly. Your database, settings and credentials will not be touched.</p>

    <div style="background:var(--bg3);border:2px dashed var(--border);border-radius:10px;padding:28px 20px;text-align:center;transition:border-color .2s" id="drop-zone">
      <div style="font-size:28px;margin-bottom:8px">📦</div>
      <div style="font-size:14px;font-weight:500;margin-bottom:4px">Drop neto.zip here or click to browse</div>
      <form method="post" enctype="multipart/form-data" id="upload-form" style="margin-top:14px">
        <input type="file" name="zipfile" id="file-input" accept=".zip" style="display:none" onchange="handleFile(this)">
        <button type="button" onclick="document.getElementById('file-input').click()"
          style="background:var(--accent);color:#fff;border:none;padding:8px 18px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;font-family:var(--font)">
          Choose file
        </button>
      </form>
      <div id="file-chosen" style="margin-top:12px;font-size:13px;color:var(--muted);display:none">
        <span id="file-name"></span>
        <button onclick="submitUpload()"
          style="margin-left:10px;background:#15803d;color:#fff;border:none;padding:6px 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;font-family:var(--font)">
          Install ↑
        </button>
      </div>
    </div>
    <div id="progress" style="display:none;margin-top:14px;text-align:center;font-size:13px;color:var(--muted)">
      ⏳ Applying update… please wait.
    </div>
  </div>

</div>

<script>
async function checkOTA() {
  const channel = document.getElementById('ota-channel').value;
  const btn     = document.getElementById('check-btn');
  btn.textContent = 'Checking…'; btn.disabled = true;
  hide(['ota-update-available','ota-up-to-date']);

  const r = await fetch(`/api/ota/check?channel=${channel}`);
  const d = await r.json();
  btn.textContent = 'Check for updates'; btn.disabled = false;

  if (d.status === 'no_server') {
    document.getElementById('ota-no-server').style.display = 'block';
    document.getElementById('ota-status').textContent = '';
    return;
  }
  if (d.status === 'error') {
    document.getElementById('ota-status').textContent = '⚠️ ' + d.message;
    return;
  }

  document.getElementById('ota-status').textContent =
    `Last checked: just now  ·  Server: ${d.remote_version} (${channel})`;

  if (d.update_available) {
    document.getElementById('ota-remote-ver').textContent = d.remote_version;
    document.getElementById('ota-notes').textContent = d.notes || '';
    document.getElementById('ota-update-available').style.display = 'block';
  } else {
    document.getElementById('ota-up-to-date').style.display = 'block';
  }
}

async function installOTA() {
  const channel = document.getElementById('ota-channel').value;
  hide(['ota-update-available','ota-up-to-date']);
  const prog = document.getElementById('ota-progress');
  prog.style.display = 'block';

  const steps = ['Connecting to server…','Downloading update…','Verifying…','Installing…','Restarting service…'];
  let i = 0;
  const interval = setInterval(() => {
    document.getElementById('ota-progress-msg').textContent = steps[Math.min(i++, steps.length-1)];
    document.getElementById('ota-bar').style.width = Math.min(i * 18, 90) + '%';
  }, 2000);

  const r = await fetch('/api/ota/install', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({channel})
  });
  clearInterval(interval);
  const d = await r.json();
  document.getElementById('ota-bar').style.width = '100%';

  if (d.ok) {
    prog.style.display = 'none';
    // Reload after service restarts
    setTimeout(function poll() {
      fetch('/').then(r => { if(r.ok) location.reload(); else setTimeout(poll,2000); }).catch(()=>setTimeout(poll,2000));
    }, 4000);
  } else {
    document.getElementById('ota-progress-msg').textContent = '⚠️ ' + d.message;
  }
}

function hide(ids) { ids.forEach(id => document.getElementById(id).style.display = 'none'); }

function handleFile(input) {
  if (input.files.length > 0) {
    document.getElementById('file-name').textContent = input.files[0].name;
    document.getElementById('file-chosen').style.display = 'block';
  }
}
function submitUpload() {
  document.getElementById('file-chosen').style.display = 'none';
  document.getElementById('progress').style.display = 'block';
  document.getElementById('upload-form').submit();
}

// Drag and drop
const zone = document.getElementById('drop-zone');
zone.addEventListener('dragover', e => { e.preventDefault(); zone.style.borderColor='var(--accent)'; });
zone.addEventListener('dragleave', () => { zone.style.borderColor='var(--border)'; });
zone.addEventListener('drop', e => {
  e.preventDefault(); zone.style.borderColor='var(--border)';
  const file = e.dataTransfer.files[0];
  if (file && file.name.endsWith('.zip')) {
    const dt = new DataTransfer(); dt.items.add(file);
    document.getElementById('file-input').files = dt.files;
    handleFile(document.getElementById('file-input'));
  }
});

// Auto-load status on page load
fetch('/api/ota/status').then(r=>r.json()).then(d => {
  document.getElementById('ota-channel').value = d.channel || 'stable';
  document.getElementById('ota-status').textContent =
    d.checked_ts ? `Last checked: ${new Date(d.checked_ts*1000).toLocaleString('en-GB')}` : 'Never checked';
  if (d.update_available) {
    document.getElementById('ota-remote-ver').textContent = d.remote_version;
    document.getElementById('ota-notes').textContent = d.notes || '';
    document.getElementById('ota-update-available').style.display = 'block';
  }
});
</script>
{% endif %}
{% endblock %}