{% extends "base.html" %}

{% block title %}Lizenz & Backup{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/settings" class="hover:underline">Einstellungen</a> / Lizenz</p>{% endblock %}
{% block heading %}Lizenz · Datensicherung{% endblock %}

{% block content %}
<div class="max-w-3xl space-y-4">

  {% if reason == 'hard_stop' %}
  <div class="card" style="border-color:#ef4444;background:rgba(239,68,68,0.10);">
    <div class="p-4 text-sm" style="color:#fca5a5;font-weight:600;">
      ⚠ Software gesperrt — Lizenz seit über 90 Tagen abgelaufen.
      Bitte erneuern oder kontaktiere uns: support@takoma-digital.com
    </div>
  </div>
  {% endif %}

  {# ============== AKTUELLER LIZENZ-STATUS ============== #}
  {% set st = license_state %}
  <div class="card" style="border-left: 4px solid {%
      if st.state == 'active' %}#10b981{%
      elif st.state == 'expiring_soon' or st.state == 'grace' %}#f59e0b{%
      elif st.state == 'readonly' or st.state == 'hard_stop' or st.state == 'tampered' %}#ef4444{%
      else %}#737373{% endif %};">
    <div class="card-header"><div>
      <h2>Lizenz-Status</h2>
      <p class="sub">{{ st.message }}</p>
    </div></div>
    {% if st.license_id %}
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
      <div>
        <p class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Lizenz-ID</p>
        <p class="nums font-bold mt-1">{{ st.license_id }}</p>
      </div>
      <div>
        <p class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Status</p>
        <p class="mt-1">
          {% if st.state == 'active' %}<span class="badge badge-emerald">Aktiv</span>
          {% elif st.state == 'expiring_soon' %}<span class="badge badge-amber">Läuft bald ab</span>
          {% elif st.state == 'grace' %}<span class="badge badge-amber">Grace-Period</span>
          {% elif st.state == 'readonly' %}<span class="badge badge-red">Read-only</span>
          {% elif st.state == 'hard_stop' %}<span class="badge badge-red">Gesperrt</span>
          {% elif st.state == 'tampered' %}<span class="badge badge-red">Manipuliert</span>
          {% else %}<span class="badge badge-neutral">Keine Lizenz</span>{% endif %}
        </p>
      </div>
      <div>
        <p class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Kunde</p>
        <p class="mt-1">{{ st.customer or '—' }}</p>
      </div>
      <div>
        <p class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Plan</p>
        <p class="mt-1">{{ st.plan or '—' }} · {{ st.users or '?' }} MA</p>
      </div>
      <div>
        <p class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Gültig bis</p>
        <p class="nums mt-1">
          {{ st.valid_until[:10] if st.valid_until else 'unbegrenzt (Lifetime)' }}
          {% if st.days_left is not none %}
            <span class="text-xs" style="color: var(--card-text-muted);">
              ({{ '%.0f'|format(st.days_left) }} Tage)
            </span>
          {% endif %}
        </p>
      </div>
      <div>
        <p class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Letzter Heartbeat</p>
        <p class="nums mt-1">
          {% if st.last_heartbeat %}{{ st.last_heartbeat.at | string }}{% else %}—{% endif %}
        </p>
      </div>
    </div>
    {% endif %}
    <div class="px-5 py-4 border-t flex gap-2 flex-wrap" style="border-color: var(--card-border-2);">
      <a class="btn btn-primary" href="{{ buy_url }}" target="_blank">Lizenz kaufen / verlängern</a>
      {% if st.license_id %}
      <button class="btn btn-secondary" type="button" id="hb-now-btn">Heartbeat jetzt</button>
      <form method="post" action="/api/license/remove" style="display:inline;"
            onsubmit="event.preventDefault();
              if (!confirm('Lizenz vom Gerät entfernen? Software wird danach blockiert.')) return;
              fetch(this.action,{method:'POST'}).then(()=>location.reload());">
        <button class="btn btn-secondary" type="submit"
                style="color:#ef4444;border-color:#ef4444;">Lizenz entfernen</button>
      </form>
      {% endif %}
    </div>
  </div>

  {# ============== KEY EINGEBEN ============== #}
  <div class="card">
    <div class="card-header"><div>
      <h2>{% if st.license_id %}Anderen{% else %}{% endif %} Lizenz-Schlüssel eintragen</h2>
      <p class="sub">Nach dem Kauf erhältst du eine E-Mail mit dem Schlüssel. Hier einfügen.</p>
    </div></div>
    <div class="p-5 space-y-3">
      <textarea id="license-token" class="input w-full" rows="5"
                style="font-family:monospace;font-size:11px;"
                placeholder="TKM1.eyJjdXN0IjoiLi4uIn0.…"></textarea>
      <button type="button" class="btn btn-primary" id="activate-btn">Lizenz aktivieren</button>
      <div id="activate-result" style="margin-top:8px;font-size:13px;"></div>
    </div>
  </div>

  {# ============== UPDATE-CHECK ============== #}
  <div class="card">
    <div class="card-header"><div>
      <h2>Software-Updates</h2>
      <p class="sub">Prüft beim Anbieter ob eine neuere Version verfügbar ist (cached 24h).</p>
    </div></div>
    <div class="p-5 space-y-3" id="update-block">
      <p class="text-sm" style="color: var(--card-text-muted);">Lade Versionsstand …</p>
    </div>
    <div class="px-5 py-4 border-t" style="border-color: var(--card-border-2);">
      <button type="button" class="btn btn-secondary" id="update-now-btn">Jetzt prüfen</button>
    </div>
  </div>

  {# ============== BACKUP ============== #}
  <div class="card">
    <div class="card-header"><div>
      <h2>Datensicherung</h2>
      <p class="sub">
        Backup-Verantwortung liegt beim Kunden. Klick erzeugt ein ZIP mit
        kompletter DB + allen Anhängen (Zeichnungen, CNC-Programme, Komment-Fotos).
      </p>
    </div></div>
    <div class="p-5 space-y-3">
      <button type="button" class="btn btn-primary" id="backup-now-btn">+ Backup jetzt erstellen</button>
      <p id="backup-status" class="text-sm" style="color: var(--card-text-muted);"></p>
      <div id="backup-list" class="text-xs"></div>
    </div>
  </div>
</div>

<script>
(function () {
  const tokenEl = document.getElementById('license-token');
  const result  = document.getElementById('activate-result');
  document.getElementById('activate-btn')?.addEventListener('click', () => {
    const t = tokenEl.value.trim();
    if (!t) { result.innerHTML = '<span style="color:#fca5a5;">Bitte Schlüssel einfügen.</span>'; return; }
    fetch('/api/license/activate', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({token: t}),
    }).then(r => r.json()).then(d => {
      if (d.ok) {
        result.innerHTML = '<span style="color:#6ee7b7;">✓ ' + d.message + '</span>';
        setTimeout(() => location.reload(), 800);
      } else {
        result.innerHTML = '<span style="color:#fca5a5;">✗ ' + d.message + '</span>';
      }
    });
  });

  document.getElementById('hb-now-btn')?.addEventListener('click', e => {
    const btn = e.target;
    btn.disabled = true; btn.textContent = '… läuft';
    fetch('/api/license/heartbeat', {method:'POST'})
      .then(r => r.json()).then(d => {
        btn.disabled = false; btn.textContent = 'Heartbeat jetzt';
        if (window.toast) toast(d.ok ? 'Heartbeat OK' : ('Server-Fehler: ' + (d.error || '')), d.ok ? 'success' : 'error');
        if (d.ok) setTimeout(() => location.reload(), 800);
      });
  });

  // Backup
  function loadBackups() {
    fetch('/api/backup/list').then(r => r.json()).then(d => {
      const list = document.getElementById('backup-list');
      if (!d.backups || !d.backups.length) {
        list.innerHTML = '<div style="color:var(--card-text-muted);">Noch keine Backups erstellt.</div>';
        return;
      }
      list.innerHTML = '<div style="color:var(--card-text-muted);margin-bottom:6px;">Backups in: <code>' + d.dir + '</code></div>' +
        d.backups.map(b => `<div style="padding:4px 0;">📦 ${b.name} <span style="color:var(--card-text-muted);">· ${(b.size/1024/1024).toFixed(1)} MB · ${b.mtime.slice(0,16)}</span></div>`).join('');
    });
  }
  document.getElementById('backup-now-btn')?.addEventListener('click', e => {
    const btn = e.target;
    btn.disabled = true; btn.textContent = '… läuft';
    document.getElementById('backup-status').textContent = 'Backup wird erstellt …';
    fetch('/api/backup/now', {method:'POST'}).then(r => r.json()).then(d => {
      btn.disabled = false; btn.textContent = '+ Backup jetzt erstellen';
      if (d.ok) {
        document.getElementById('backup-status').innerHTML =
          '✓ Backup erstellt: <code>' + d.file + '</code> · ' +
          (d.size/1024/1024).toFixed(1) + ' MB · ' + d.files + ' Dateien';
        loadBackups();
      } else {
        document.getElementById('backup-status').innerHTML =
          '<span style="color:#fca5a5;">' + (d.error || 'Backup fehlgeschlagen') + '</span>';
      }
    });
  });
  loadBackups();

  // Update-Check
  function loadUpdate(force) {
    const block = document.getElementById('update-block');
    block.innerHTML = '<p class="text-sm" style="color:var(--card-text-muted);">Prüfe …</p>';
    fetch('/api/version/check' + (force ? '?force=1' : ''))
      .then(r => r.json()).then(d => {
        if (!d.ok) {
          block.innerHTML = '<p class="text-sm" style="color:#fca5a5;">Update-Server nicht erreichbar — ' + (d.error || '') + '</p>';
          return;
        }
        const cur = d.current || '?'; const latest = d.latest || '?';
        if (d.is_outdated) {
          block.innerHTML = `
            <div style="padding:10px 14px;background:rgba(245,158,11,0.18);
                 color:#fbbf24;border-radius:8px;font-weight:600;">
              ⚠ Update verfügbar: <strong>${latest}</strong> (installiert: ${cur})
            </div>
            <p class="text-xs mt-2" style="color:var(--card-text-muted);">
              ${d.release_notes_url ? '<a href="'+d.release_notes_url+'" target="_blank" style="color:#f2581b;">Was ist neu?</a> · ' : ''}
              <a href="${d.download_url}" target="_blank" style="color:#f2581b;">Update herunterladen</a>
            </p>`;
        } else {
          block.innerHTML = `
            <p class="text-sm">✓ Du bist auf der aktuellen Version <strong>${cur}</strong>.</p>
            <p class="text-xs mt-1" style="color:var(--card-text-muted);">
              Nächster automatischer Check in ${Math.max(0, Math.round((d.checked_at + 24*3600 - Math.floor(Date.now()/1000)) / 3600))} Stunden.
            </p>`;
        }
      }).catch(e => {
        block.innerHTML = '<p class="text-sm" style="color:#fca5a5;">Fehler: ' + e + '</p>';
      });
  }
  document.getElementById('update-now-btn')?.addEventListener('click', () => loadUpdate(true));
  loadUpdate(false);
})();
</script>
{% endblock %}