{% import 'partials/components/ui_macros.html' as ui %}
{% import 'partials/components/mobile_card_macros.html' as mc %}
{% from 'partials/components/ui_macros.html' import btn, btn_save %}

{# Gauge-Karte für die 2x2-Kachelreihe.
   style='ring' (Default, CPU/RAM): Desktop linearer Balken + caller()-Subtext
     (ausführlich, viel Platz), Mobile Ring (iOS/Android-Systemeinstellungen-
     Stil) + eigener, kompakter mobile_sub-Text -- zwei Ringe nebeneinander
     in schmalen Kacheln haben keinen Platz für den ausführlichen Desktop-Text
     (siehe .sysinfo-gauge-card--ring).
   style='bar' (DISK/Extra-Disks): auf Mobile UND Desktop derselbe lineare
     Balken + caller()-Subtext -- volle Breite, eigene Grid-Zeile
     (.sysinfo-gauge-card--wide).
   r=42 -> Umfang 2*pi*42 ≈ 263.9. #}
{% macro gauge_card(label, percent, color, style='ring', mobile_sub=none) %}
<div class="content-item on sysinfo-gauge-card {{ 'sysinfo-gauge-card--ring' if style == 'ring' else 'sysinfo-gauge-card--wide' }}" data-debug-label="content-item">
  <div class="sysinfo-card-header">{{ label }}</div>
  <div style="padding:0 18px 16px;">
    {% if style == 'ring' %}
    <div class="desktop-view">
      <div class="sysinfo-gauge-head">
        <div class="sysinfo-gauge-value">{{ percent }}<span class="sysinfo-gauge-unit">%</span></div>
      </div>
      <div class="sysinfo-gauge-bar-wrap">
        <div style="height:100%; width:{{ percent }}%; border-radius:99px; background:{{ color }}; transition:width 400ms;"></div>
      </div>
      <div class="sysinfo-gauge-sub" style="display:flex; flex-wrap:wrap; gap:2px 14px;">
        {{ caller() }}
      </div>
    </div>
    <div class="mobile-view sysinfo-gauge-ring-wrap">
      <svg class="sysinfo-gauge-ring" viewBox="0 0 100 100" width="72" height="72">
        <circle cx="50" cy="50" r="42" fill="none" stroke="var(--sel)" stroke-width="9"/>
        <circle cx="50" cy="50" r="42" fill="none" stroke="{{ color }}" stroke-width="9"
                stroke-linecap="round"
                stroke-dasharray="{{ (percent / 100 * 263.9) | round(1) }} 263.9"
                transform="rotate(-90 50 50)"
                style="transition:stroke-dasharray 400ms;"/>
      </svg>
      <div class="sysinfo-gauge-ring-value">{{ percent }}<span class="sysinfo-gauge-unit">%</span></div>
    </div>
    {% if mobile_sub %}
    <div class="mobile-view sysinfo-gauge-sub sysinfo-gauge-sub--compact">{{ mobile_sub }}</div>
    {% endif %}
    {% else %}
    <div class="sysinfo-gauge-head">
      <div class="sysinfo-gauge-value">{{ percent }}<span class="sysinfo-gauge-unit">%</span></div>
    </div>
    <div class="sysinfo-gauge-bar-wrap">
      <div style="height:100%; width:{{ percent }}%; border-radius:99px; background:{{ color }}; transition:width 400ms;"></div>
    </div>
    <div class="sysinfo-gauge-sub" style="display:flex; flex-wrap:wrap; gap:2px 14px;">
      {{ caller() }}
    </div>
    {% endif %}
  </div>{# /padding #}
</div>
{% endmacro %}
{% if not info.ok %}
<div id="system-metrics">
  <div class="empty-state">
    <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-info"></use></svg>
    <div class="empty-state-title">Systeminfo nicht verfügbar</div>
    <div class="empty-state-sub">{{ info.error }}</div>
  </div>
</div>
{% else %}
<div id="system-metrics" data-collected-at="{{ info.collected_at }}">

{# ── Haupt-Layout: linke Info-Karte + rechte 2×2-Gauges ───────────── #}
<div class="content-columns content-columns--wide">

{# ── Linke Karte: Anwendungen + System-Info ───────────────────────── #}
{# Paketnamen aus dem Updater sammeln (für Deduplizierung) #}
{% set ns = namespace(updater_names=[]) %}
{% if info.updater %}{% for p in info.updater.packages %}{% set ns.updater_names = ns.updater_names + [p.name] %}{% endfor %}{% endif %}

{# ── Karte 1: Anwendungen ────────────────────────────────────────── #}
<div class="content-item on sysinfo-info-card" data-debug-label="content-item">
  <div class="sysinfo-card-header">
    <span>Anwendungen</span>
    {% if info.updater %}
    <span style="display:flex; align-items:center; gap:10px;">
      {% if info.updater.last_checked %}
      <span class="sysinfo-last-checked" style="color:var(--text-3); font-size:11px;">Geprüft: {{ info.updater.last_checked }}</span>
      {% endif %}
      {% if info.updater.status in ('running', 'checking') %}
      <span style="color:var(--text-2); font-size:11px;">
        {{ 'Update läuft…' if info.updater.status == 'running' else 'Prüfung läuft…' }}
      </span>
      {% else %}
      {{ btn('Auf Updates prüfen', variant='primary', busy_label='Prüfe…', icon='refresh',
             attrs='hx-post="/ui/system/check" hx-target="#system-metrics" hx-swap="outerHTML"') }}
      {% endif %}
    </span>
    {% endif %}
  </div>
  {% if info.updater and info.updater.error %}
  {% set _warn = info.updater.status == 'warning' %}
  <div style="margin:0 16px 10px; padding:8px 12px; border-radius:var(--rad-lg); font-size:12px;
              background:{{ 'var(--warn-bg)' if _warn else 'var(--r-dim)' }};
              color:{{ 'var(--warn)' if _warn else 'var(--r)' }};">
    {{ info.updater.error }}
  </div>
  {% endif %}
  <div style="padding:0 16px 12px;" data-debug-label="content-subitem">
  <div class="desktop-view">
  <table class="ds-list-table">
    <tbody>
      {% if info.updater %}
        {% for pkg in info.updater.packages %}
        <tr class="on">
          <td>{{ pkg.name }}</td>
          <td>
            {{ pkg.installed }}
            {% if pkg.update_available %}
            <span style="color:var(--g); font-weight:600; margin-left:4px;">→ {{ pkg.latest }}</span>
            {% elif pkg.latest and pkg.latest != '—' %}
            <span style="color:var(--text-3); margin-left:4px;">aktuell</span>
            {% endif %}
          </td>
          <td>
            {% if pkg.update_available and info.updater.status not in ('running', 'checking') %}
            {{ btn('Update', variant='primary', size='', busy_label='Starte…',
                   attrs='style="white-space:nowrap; font-size:11px; padding:3px 10px;" hx-post="/ui/system/update" hx-target="#system-metrics" hx-swap="outerHTML"') }}
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      {% endif %}
      {% for key, val in info.software.items() %}
      {% if key not in ('psutil', 'Datenbank') and key not in ns.updater_names and key.startswith('python') %}
      <tr class="on">
        <td>{{ key }}</td>
        <td>{{ val }}</td>
        <td></td>
      </tr>
      {% endif %}
      {% endfor %}
      {% for key, val in info.software.items() %}
      {% if key not in ('psutil', 'Datenbank') and key not in ns.updater_names and not key.startswith('python') %}
      <tr class="on">
        <td>{{ key }}</td>
        <td>{{ val }}</td>
        <td></td>
      </tr>
      {% endif %}
      {% endfor %}
    </tbody>
  </table>
  </div>
  <div class="mobile-view">
    {# Eine einzige Liste für alle Pakete (getrackte Apps + reine
       Abhängigkeiten aus info.software), Reihenfolge unverändert -- Pakete
       mit Update werden nicht mehr herausgezogen, sondern zeigen nur inline
       den Versionssprung + Update-Button in ihrer eigenen Zeile. #}
    {% set ns_all = namespace(items=[]) %}
    {% if info.updater %}
      {% for pkg in info.updater.packages %}
      {% set ns_all.items = ns_all.items + [pkg] %}
      {% endfor %}
    {% endif %}
    {% for key, val in info.software.items() %}
    {% if key not in ('psutil', 'Datenbank') and key not in ns.updater_names %}
    {% set ns_all.items = ns_all.items + [{'name': key, 'installed': val, 'update_available': False}] %}
    {% endif %}
    {% endfor %}
    {% for pkg in ns_all.items %}
    <div class="sysinfo-update-list-row">
      <span class="sysinfo-update-list-name">{{ pkg.name }}</span>
      <span class="sysinfo-update-versions">
        {% if pkg.update_available %}{{ pkg.installed }} → <strong>{{ pkg.latest }}</strong>{% else %}{{ pkg.installed }}{% endif %}
      </span>
    </div>
    {% endfor %}
  </div>
  </div>
</div>

{# ── Rechte Spalte: System-Karte + Gauges ────────────────────────── #}
<div style="display:flex; flex-direction:column; gap:12px;">

{# ── Karte 2: System ─────────────────────────────────────────────── #}
<div class="content-item on sysinfo-info-card" data-debug-label="content-item">
  <div class="sysinfo-card-header">
    <span>System</span>
  </div>
  <div style="padding:0 16px 12px;" data-debug-label="content-subitem">
  <div class="desktop-view">
  <table class="ds-list-table">
    <tbody>
      <tr class="on">
        <td>OS</td>
        <td>{{ info.system.os_pretty }}</td>
        <td></td>
      </tr>
      <tr class="on">
        <td>User</td>
        <td>{{ info.system.user }}</td>
        <td></td>
      </tr>
      {% if info.software.get('Datenbank') %}
      <tr class="on">
        <td>Datenbank</td>
        <td>{{ info.software['Datenbank'] }}</td>
        <td></td>
      </tr>
      {% endif %}
    </tbody>
  </table>
  </div>
  <div class="mobile-view">
    {# kein mc.m_card()-Wrapper: der Titel "System" kommt schon von
       .sysinfo-card-header oberhalb, ein zweiter waere doppelt. #}
    {{ mc.m_card_row('OS', info.system.os_pretty) }}
    {{ mc.m_card_row('User', info.system.user) }}
    {% if info.software.get('Datenbank') %}{{ mc.m_card_row('Datenbank', info.software['Datenbank']) }}{% endif %}
  </div>
  </div>
</div>

{# ── Gauges: CPU, RAM, DISK, SWAP ─────────────────────────────────── #}
<div class="sysinfo-gauges-grid">

  {# CPU: Desktop hat Platz für Kerne+Freq+Modell, die schmale Mobile-Ring-
     Kachel bekommt nur "N Kerne" -- Freq/Modell würden dort nur umbrechen
     oder mitten im Wort abgeschnitten werden. #}
  {% call gauge_card('CPU', info.cpu.percent, 'var(--r)' if info.cpu.percent > 85 else ('var(--b)' if info.cpu.percent > 50 else 'var(--g)'), mobile_sub=(info.cpu.cores ~ ' Kerne')) %}
    {{ info.cpu.cores }} Kerne · {{ info.cpu.freq }}
    {% if info.cpu.model %}<div style="margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ info.cpu.model }}</div>{% endif %}
  {% endcall %}

  {# RAM: Desktop zeigt belegt/frei/gesamt einzeln, mobile kompakt als
     "belegt / gesamt" -- passt in eine Zeile statt umzubrechen. #}
  {% call gauge_card('RAM', info.mem.percent, 'var(--r)' if info.mem.percent > 85 else ('var(--b)' if info.mem.percent > 60 else 'var(--g)'), mobile_sub=(info.mem.used ~ ' / ' ~ info.mem.total)) %}
    <span>{{ info.mem.used }} belegt</span><span>{{ info.mem.free }} frei</span><span>{{ info.mem.total }} gesamt</span>
  {% endcall %}

  {# DISK (/) #}
  {% if info.root_disk %}
  {% call gauge_card('DISK', info.root_disk.percent, 'var(--r)' if info.root_disk.percent > 90 else ('var(--b)' if info.root_disk.percent > 70 else 'var(--g)'), style='bar') %}
    <span>{{ info.root_disk.used_fmt }} belegt</span><span>{{ info.root_disk.free_fmt }} frei</span><span>{{ info.root_disk.total_fmt }} gesamt</span>
  {% endcall %}
  {% else %}<div></div>{% endif %}

  {# Extra-Disks (aus Einstellungen oder configure()) #}
  {% for ed in info.extra_disks %}
  {% call gauge_card(ed.label, ed.percent, 'var(--r)' if ed.percent > 90 else ('var(--b)' if ed.percent > 70 else 'var(--g)'), style='bar') %}
    <span>{{ ed.used_fmt }} belegt</span><span>{{ ed.free_fmt }} frei</span><span>{{ ed.total_fmt }} gesamt</span>
  {% endcall %}
  {% endfor %}
  {% if not info.extra_disks %}<div></div>{% endif %}

</div>{# /sysinfo-gauges-grid #}
</div>{# /rechte Spalte #}
</div>{# /content-columns #}


{# ──────────────────────────────────────────────────────────────────── #}
{# LEGACY-ABSCHNITT ENTFERNT (gauges + app-grid) – neues Layout oben  #}

{# Dummy-Elemente damit ältere HTMX-Targets nicht brechen #}
<div class="sysinfo-gauges" style="display:none;"></div>
<div class="sysinfo-app-grid" style="display:none;"></div>


</div>{# /data-collected-at #}

{# ── Update-Fortschritt ──────────────────────────────────────────────────
   Bewusst kein Log-Modal: die pip-Ausgabe kommt blockweise gepuffert und
   taugt nicht als Fortschrittsanzeige. Hier nur der Zustand, danach Neustart
   abwarten und Seite neu laden. Das Skript ist idempotent – content.html
   wird bei jeder Prüfung neu eingetauscht. #}
<script>
(function () {
  var LAUFEND = {{ 'true' if info.updater and info.updater.status == 'running' else 'false' }};

  window.systemUpdateWatch = window.systemUpdateWatch || (function () {
    var timer = null, modal = null;

    function box(inhalt, mitSchliessen) {
      if (!modal) {
        modal = document.createElement('div');
        modal.id = 'system-update-modal';
        modal.className = 'ds-modal-backdrop';
        document.body.appendChild(modal);
      }
      modal.innerHTML =
        '<div class="ds-modal" style="max-width:460px;padding:24px 28px;">' +
        '<div class="ds-modal-header"><span class="ds-modal-title">Update</span></div>' +
        '<div style="padding:14px 0 4px;">' + inhalt + '</div>' +
        (mitSchliessen
          ? '<div class="ds-modal-footer ds-modal-footer--end">' +
            '<button type="button" class="btn btn-sm btn-ghost" ' +
            'onclick="document.getElementById(\'system-update-modal\').remove()">Schließen</button></div>'
          : '') +
        '</div>';
    }

    function zeile(text) {
      return '<div style="display:flex;align-items:center;gap:10px;">' +
             '<span class="btn__spinner" style="color:var(--b);"></span>' +
             '<span>' + text + '</span></div>';
    }

    function fertig(changed) {
      // Ueberdauert den Neustart, damit die neu geladene Seite es melden kann.
      try { sessionStorage.setItem('astrapiUpdateDone', JSON.stringify(changed || [])); }
      catch (e) { /* privater Modus o.ae. – dann eben ohne Meldung */ }
      box(zeile('Update installiert. Dienst startet neu …'), false);
      warteAufNeustart();
    }

    function warteAufNeustart() {
      var versuche = 0;
      var t = setInterval(function () {
        versuche++;
        fetch('/api/system/update/status', { cache: 'no-store' })
          .then(function (r) { if (r.ok) { clearInterval(t); location.reload(); } })
          .catch(function () { /* noch unten – weiter warten */ });
        if (versuche > 60) { clearInterval(t); box(
          '<div>Der Dienst meldet sich nicht zurück. Bitte Seite manuell neu laden.</div>', true); }
      }, 1000);
    }

    function start() {
      if (timer) return;
      box(zeile('Update wird installiert …'), false);
      timer = setInterval(function () {
        fetch('/api/system/update/status', { cache: 'no-store' })
          .then(function (r) { return r.json(); })
          .then(function (st) {
            if (st.status === 'running') return;
            clearInterval(timer); timer = null;
            if (st.status === 'done') { fertig(st.changed); return; }
            var farbe = st.status === 'warning' ? 'var(--warn)' : 'var(--r)';
            box('<div style="color:' + farbe + ';">' +
                (st.error || 'Update beendet: ' + st.status) + '</div>', true);
          })
          .catch(function () {
            // Verbindung weg: der Dienst startet vermutlich gerade neu.
            clearInterval(timer); timer = null; fertig(null);
          });
      }, 1000);
    }

    return { start: start };
  })();

  if (LAUFEND) window.systemUpdateWatch.start();

  // check_updates() laeuft seit T-106 in einem Hintergrund-Thread und die
  // Route liefert sofort zurueck, waehrend status="checking" steht. Ohne
  // dieses Polling wuerde "Prüfung läuft…" bis zum naechsten manuellen
  // Reload stehen bleiben.
  var PRUEFT = {{ 'true' if info.updater and info.updater.status == 'checking' else 'false' }};

  window.systemCheckWatch = window.systemCheckWatch || (function () {
    var timer = null;
    function start() {
      if (timer) return;
      timer = setInterval(function () {
        fetch('/api/system/update/status', { cache: 'no-store' })
          .then(function (r) { return r.json(); })
          .then(function (st) {
            if (st.status === 'checking') return;
            clearInterval(timer); timer = null;
            if (window.htmx) {
              htmx.ajax('GET', '/ui/system/metrics', { target: '#system-metrics', swap: 'outerHTML' });
            } else {
              location.reload();
            }
          })
          .catch(function () { clearInterval(timer); timer = null; });
      }, 1000);
    }
    return { start: start };
  })();

  if (PRUEFT) window.systemCheckWatch.start();

  // Nach dem Neustart: melden, was installiert wurde.
  try {
    var roh = sessionStorage.getItem('astrapiUpdateDone');
    if (roh !== null) {
      sessionStorage.removeItem('astrapiUpdateDone');
      var liste = JSON.parse(roh) || [];
      var text = liste.length
        ? liste.map(function (c) { return c.name + ' ' + c.from + ' → ' + c.to; }).join(', ')
        : 'Update abgeschlossen.';
      var hinweis = document.createElement('div');
      hinweis.style.cssText =
        'margin:0 0 16px;padding:10px 14px;border-radius:var(--rad-lg);' +
        'background:var(--g-dim,rgba(22,163,74,0.14));color:var(--g);font-size:13px;';
      hinweis.textContent = '✔ Installiert: ' + text;
      var ziel = document.getElementById('system-metrics');
      if (ziel) ziel.insertBefore(hinweis, ziel.firstChild);
    }
  } catch (e) { /* egal */ }
})();
</script>
{% endif %}