{% extends "base.html" %}

{% block title %}MDE-Dashboard{% endblock %}
{% block heading %}Maschinendaten · Live{% endblock %}

{% block content %}
<div class="card">
  <div class="card-header"><div>
    <h2>Maschinen-Übersicht</h2>
    <p class="sub">Live-Status aller MDE-fähigen Maschinen ·
      Daten aktualisieren alle 15 s ·
      <a href="/team/machines">Konfiguration</a> ·
      <a href="https://docs.takoma-digital.com/mde" target="_blank">Doku</a></p>
  </div></div>
  <div class="card-body" style="padding:0;">
    <table class="data-table" style="width:100%;font-size:13px;">
      <thead>
        <tr>
          <th>Maschine</th>
          <th>Steuerung</th>
          <th>Status</th>
          <th class="text-right">Stückzähler</th>
          <th class="text-right">Spindel</th>
          <th>Programm</th>
          <th>Letztes Update</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="mde-tbody">
        {% for m in machines %}
        <tr data-machine-id="{{ m.machine_id }}">
          <td><strong>{{ m.name }}</strong></td>
          <td><span class="badge">{{ m.controller_type or '—' }}</span>
              {% if m.protocol == 'opcua' %}<span class="text-[10px] text-neutral-500">OPC-UA</span>{% endif %}</td>
          <td class="status-cell">
            {% set s = m.status or 'unknown' %}
            <span class="badge" style="background:
              {% if s=='run' %}rgba(16,185,129,0.2);color:#065f46
              {% elif s=='alarm' %}rgba(239,68,68,0.2);color:#991b1b
              {% elif s=='idle' %}rgba(148,163,184,0.2);color:#475569
              {% else %}rgba(251,191,36,0.2);color:#92400e{% endif %};">
              {% if s=='run' %}🟢 läuft
              {% elif s=='alarm' %}🔴 Alarm
              {% elif s=='idle' %}⚪ Stillstand
              {% else %}❓ unbekannt{% endif %}
            </span>
          </td>
          <td class="text-right nums part-cell">{{ m.part_count if m.part_count is not none else '—' }}</td>
          <td class="text-right nums spindle-cell">
            {% if m.spindle_rpm %}{{ m.spindle_rpm }} U/min{% else %}—{% endif %}
          </td>
          <td class="prog-cell" style="font-family:monospace;font-size:11px;">{{ m.current_nc or '—' }}</td>
          <td class="ts-cell" style="font-size:11px;color:var(--card-text-muted);">{{ m.ts or '—' }}</td>
          <td><a href="/mde/{{ m.machine_id }}" class="btn btn-sm btn-secondary">Detail</a></td>
        </tr>
        {% else %}
        <tr><td colspan="8" style="padding:40px;text-align:center;color:var(--card-text-muted);">
          Keine Maschinen konfiguriert. <a href="/team/machines">Maschine anlegen</a> →
          Protokoll auf <code>opcua</code> oder im Mock-Mode lassen.
        </td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <div class="card-footer" style="padding:10px 16px;font-size:11px;color:var(--card-text-muted);">
    {{ machines|length }} Maschinen · MDE-Worker pollt alle 15 s ·
    Mock-Mode liefert Synthese-Werte ohne echte Maschinen-Verbindung.
  </div>
</div>

<script>
(function() {
  'use strict';
  // Live-Update alle 15s — leicht versetzt zum Server-Polling damit immer
  // ein frischer Wert vorliegt.
  const STATUS_LABEL = {
    run:   ['🟢 läuft',     'rgba(16,185,129,0.2)', '#065f46'],
    alarm: ['🔴 Alarm',      'rgba(239,68,68,0.2)',  '#991b1b'],
    idle:  ['⚪ Stillstand',  'rgba(148,163,184,0.2)', '#475569'],
    unknown:['❓ unbekannt',  'rgba(251,191,36,0.2)',  '#92400e'],
  };

  function escapeHtml(s) {
    return String(s || '').replace(/[&<>"']/g, c => ({
      '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'
    })[c]);
  }

  function refresh() {
    fetch('/api/mde/latest', { headers: { 'Accept':'application/json' } })
      .then(r => r.ok ? r.json() : null)
      .then(data => {
        if (!data || !data.machines) return;
        data.machines.forEach(m => {
          const row = document.querySelector('tr[data-machine-id="' + m.machine_id + '"]');
          if (!row) return;
          const s = m.status || 'unknown';
          const [label, bg, fg] = STATUS_LABEL[s] || STATUS_LABEL.unknown;
          row.querySelector('.status-cell').innerHTML =
            '<span class="badge" style="background:' + bg + ';color:' + fg + ';">' + label + '</span>';
          row.querySelector('.part-cell').textContent = m.part_count != null ? m.part_count : '—';
          row.querySelector('.spindle-cell').textContent = m.spindle_rpm ? (m.spindle_rpm + ' U/min') : '—';
          row.querySelector('.prog-cell').textContent = m.current_nc || '—';
          row.querySelector('.ts-cell').textContent = m.ts || '—';
        });
      })
      .catch(() => {});
  }

  setInterval(refresh, 15000);
})();
</script>
{% endblock %}