{# RS232 Live-Werte-Widget — reusable Include (v1.14.0)
   Pollt alle 1 Sek das Backend nach neuen Werten vom seriellen Gerät.
   Schreibt Werte automatisch ins fokussierte Input mit Klasse `.meas-input`
   oder `.serial-target`.

   Verwendung in einem Formular:
       {% include '_serial_live_widget.html' %}

   Standard: pollt ALLE Geräte (device_id=None). Optional einschränken:
       {% with serial_device_id=42 %}{% include '_serial_live_widget.html' %}{% endwith %}
#}
<div id="serial-live-widget" data-device-id="{{ serial_device_id|default('') }}"
     style="position:fixed; bottom:24px; left:24px; width:300px; z-index:9998;
            background:linear-gradient(180deg,#1c1c1c,#151515);
            border:1px solid rgba(53,102,146,0.4); border-radius:12px;
            padding:14px 18px; box-shadow:0 10px 30px rgba(0,0,0,0.4);
            color:#e5e5e5; font-family:system-ui,sans-serif; font-size:13px;
            display:none;">
  <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
    <span style="display:inline-block; width:8px; height:8px; background:#16a34a;
                 border-radius:50%; animation:serialPulse 1.2s infinite;"></span>
    <span style="font-weight:600; color:#add5f4; font-size:11px; text-transform:uppercase; letter-spacing:0.08em;">
      🔌 RS232 Live
    </span>
    <span id="serial-status" style="margin-left:auto; color:#94a3b8; font-size:11px;">wartet …</span>
  </div>
  <div id="serial-value-display" style="font-family:'SF Mono',Menlo,monospace;
        font-size:22px; font-weight:600; color:#fafafa; margin:4px 0 6px;">
    —
  </div>
  <div id="serial-meta" style="font-size:11px; color:#64748b; min-height:14px;">
    Sobald ein Wert vom Messmittel kommt, wird er hier angezeigt und ins gerade aktive Feld übernommen.
  </div>
  <div style="margin-top:10px; display:flex; gap:6px;">
    <button id="serial-take-btn" disabled
            style="flex:1; background:rgba(53,102,146,0.4); color:#add5f4;
                   border:1px solid rgba(53,102,146,0.6); padding:6px 10px;
                   border-radius:6px; font-size:12px; cursor:pointer; opacity:0.5;">
      ↵ Übernehmen
    </button>
    <button id="serial-mute-btn"
            style="background:rgba(255,255,255,0.06); color:#94a3b8;
                   border:1px solid rgba(255,255,255,0.15); padding:6px 10px;
                   border-radius:6px; font-size:12px; cursor:pointer;">
      Schließen
    </button>
  </div>
</div>

<style>
  @keyframes serialPulse {
    0%, 100% { opacity:1; box-shadow:0 0 0 0 rgba(22,163,74,0.6); }
    50%      { opacity:0.6; box-shadow:0 0 0 6px rgba(22,163,74,0); }
  }
  .serial-flash {
    animation: serialFlash 0.6s ease-out;
  }
  @keyframes serialFlash {
    0% { background-color: rgba(53, 102, 146, 0.4); }
    100% { background-color: inherit; }
  }
</style>

<script>
(function() {
  'use strict';
  const widget = document.getElementById('serial-live-widget');
  const statusEl = document.getElementById('serial-status');
  const valueEl = document.getElementById('serial-value-display');
  const metaEl = document.getElementById('serial-meta');
  const takeBtn = document.getElementById('serial-take-btn');
  const muteBtn = document.getElementById('serial-mute-btn');
  if (!widget) return;

  const deviceFilter = widget.dataset.deviceId || null;
  let activeReading = null;
  let lastFocusedInput = null;
  let pollTimer = null;
  let pollIntervalMs = 1200;
  let muted = false;

  // Track focused input (any input with class meas-input or .serial-target,
  // or input/textarea inside a form)
  document.addEventListener('focusin', (e) => {
    const el = e.target;
    if (el.matches('input.meas-input, input.serial-target, .serial-target input')) {
      lastFocusedInput = el;
      el.style.outline = '2px solid rgba(53, 102, 146, 0.6)';
    } else if (el.matches('input[type="text"], input[type="number"], input[inputmode="decimal"]')) {
      lastFocusedInput = el;
    }
  });
  document.addEventListener('focusout', (e) => {
    if (e.target.style) e.target.style.outline = '';
  });

  async function poll() {
    if (muted) return;
    try {
      const url = '/api/serial/readings/unconsumed' +
                  (deviceFilter ? '?device_id=' + deviceFilter + '&limit=1' : '?limit=1');
      const resp = await fetch(url);
      if (!resp.ok) return;
      const data = await resp.json();
      if (data.readings && data.readings.length > 0) {
        const r = data.readings[0];
        // Nur anzeigen wenn neu (id differs)
        if (!activeReading || activeReading.id !== r.id) {
          activeReading = r;
          showReading(r);
          // Auto-Insert wenn fokussiertes Input
          if (lastFocusedInput) {
            insertValue(r);
          }
        }
      } else {
        if (activeReading) {
          // Nichts mehr da
          statusEl.textContent = 'wartet …';
        }
      }
    } catch (e) {
      console.warn('Serial poll error:', e);
    }
  }

  function showReading(r) {
    widget.style.display = 'block';
    valueEl.textContent = r.value + (r.unit ? ' ' + r.unit : '');
    statusEl.textContent = 'neuer Wert ⚡';
    statusEl.style.color = '#86efac';
    metaEl.textContent = 'von Gerät #' + r.device_id +
                         (lastFocusedInput
                          ? ' → eingefügt in „' + (lastFocusedInput.name || 'aktives Feld') + '"'
                          : ' (klicke ein Eingabefeld an, dann „Übernehmen")');
    takeBtn.disabled = !lastFocusedInput;
    takeBtn.style.opacity = lastFocusedInput ? '1' : '0.5';
  }

  function insertValue(reading) {
    if (!lastFocusedInput) return;
    // Wert ins Feld schreiben
    lastFocusedInput.value = reading.value;
    // Komma-Logik für deutsche Eingabe
    if (lastFocusedInput.dataset.localeKomma === 'true') {
      lastFocusedInput.value = String(reading.value).replace('.', ',');
    }
    // Trigger input event für Live-Validierung
    lastFocusedInput.dispatchEvent(new Event('input', { bubbles: true }));
    lastFocusedInput.classList.add('serial-flash');
    setTimeout(() => lastFocusedInput.classList.remove('serial-flash'), 600);
    // Auto-jump zum nächsten Input
    consumeReading(reading.id, () => {
      const inputs = Array.from(document.querySelectorAll('input.meas-input, input.serial-target'));
      const idx = inputs.indexOf(lastFocusedInput);
      if (idx >= 0 && idx + 1 < inputs.length) {
        inputs[idx + 1].focus();
      }
      activeReading = null;
      valueEl.textContent = '✓ übernommen';
      setTimeout(() => {
        if (!activeReading) {
          valueEl.textContent = '—';
          statusEl.textContent = 'wartet …';
          statusEl.style.color = '#94a3b8';
          metaEl.textContent = 'Bereit für nächste Messung.';
        }
      }, 1500);
    });
  }

  async function consumeReading(readingId, callback) {
    try {
      const fd = new FormData();
      if (lastFocusedInput && lastFocusedInput.form && lastFocusedInput.form.action) {
        const m = lastFocusedInput.form.action.match(/\/(\w+)\/(\d+)/);
        if (m) {
          fd.set('context_type', m[1]);
          fd.set('context_id', m[2]);
        }
      }
      await fetch('/api/serial/readings/' + readingId + '/consume',
                  { method: 'POST', body: fd });
    } catch (e) { console.warn(e); }
    if (callback) callback();
  }

  takeBtn.addEventListener('click', () => {
    if (activeReading && lastFocusedInput) insertValue(activeReading);
  });

  muteBtn.addEventListener('click', () => {
    muted = true;
    widget.style.display = 'none';
    if (pollTimer) clearInterval(pollTimer);
  });

  // Check ob überhaupt aktive Geräte existieren — sonst Widget gar nicht zeigen
  fetch('/api/serial/devices').then(r => r.json()).then(data => {
    const activeDevices = (data.devices || []).filter(d => d.active);
    if (activeDevices.length > 0) {
      widget.style.display = 'block';
      pollTimer = setInterval(poll, pollIntervalMs);
      poll(); // gleich beim Start
    }
  }).catch(() => {});
})();
</script>