{% extends "base.html" %}

{% block title %}RS232-Geräte — Takoma{% endblock %}

{% block content %}
<div style="max-width: 1180px; margin: 0 auto; padding: 24px;">

  <div style="display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px;">
    <h1 style="margin: 0;">🔌 RS232-Geräte</h1>
    {% if pyserial_ok %}
      <span style="background:#16a34a;color:white;padding:2px 10px;border-radius:10px;font-size:12px;">pyserial AKTIV</span>
    {% else %}
      <span style="background:#dc2626;color:white;padding:2px 10px;border-radius:10px;font-size:12px;">pyserial FEHLT</span>
    {% endif %}
  </div>
  <p style="color: #94a3b8; margin-bottom: 24px;">
    Messmittel, Waagen, Werkzeugvoreinstellgeräte, Barcode-Scanner via serielle Schnittstelle anbinden.
    USB-Serial-Adapter (FTDI / Prolific / CH340) anstecken → unten als Port wählen.
  </p>

  {% if not pyserial_ok %}
  <div style="background:#fee2e2;color:#7f1d1d;border-left:3px solid #dc2626;padding:14px 20px;border-radius:8px;margin-bottom:24px;">
    <strong>pyserial nicht installiert.</strong> Installation: <code>pip install pyserial</code>
  </div>
  {% endif %}

  <!-- Sektion: Verfügbare Ports -->
  <section style="background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); border-radius:12px; padding:20px 24px; margin-bottom:24px;">
    <h2 style="margin: 0 0 12px; font-size: 18px; color:#add5f4;">Verfügbare Serial-Ports am Host</h2>
    {% if available_ports %}
    <table style="width:100%; border-collapse:collapse;">
      <thead>
        <tr style="border-bottom:1px solid rgba(255,255,255,0.1);">
          <th style="text-align:left;padding:8px;font-size:12px;color:#94a3b8;">Port</th>
          <th style="text-align:left;padding:8px;font-size:12px;color:#94a3b8;">Beschreibung</th>
          <th style="text-align:left;padding:8px;font-size:12px;color:#94a3b8;">Hersteller</th>
          <th style="text-align:left;padding:8px;font-size:12px;color:#94a3b8;">VID:PID</th>
        </tr>
      </thead>
      <tbody>
        {% for p in available_ports %}
        <tr style="border-bottom:1px solid rgba(255,255,255,0.05);">
          <td style="padding:8px;font-family:monospace;color:#fafafa;">{{ p.port }}</td>
          <td style="padding:8px;color:#cbd5e1;">{{ p.description }}</td>
          <td style="padding:8px;color:#cbd5e1;">{{ p.manufacturer }} {{ p.product }}</td>
          <td style="padding:8px;font-family:monospace;color:#94a3b8;font-size:12px;">{{ p.vid_pid }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <p style="color:#94a3b8;margin:0;">
      Keine seriellen Ports gefunden. Stelle einen USB-Serial-Adapter an oder prüfe die Treiber.
    </p>
    {% endif %}
  </section>

  <!-- Sektion: Konfigurierte Geräte -->
  <section style="background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); border-radius:12px; padding:20px 24px; margin-bottom:24px;">
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;">
      <h2 style="margin:0; font-size:18px;">Konfigurierte Geräte ({{ devices|length }})</h2>
      <button onclick="document.getElementById('add-device-modal').style.display='flex'"
              style="background:linear-gradient(135deg,#356692,#284e72); color:white; padding:10px 20px;
                     border:none; border-radius:8px; font-weight:600; cursor:pointer;">
        + Neues Gerät
      </button>
    </div>

    {% if devices %}
    <table style="width:100%; border-collapse:collapse;">
      <thead>
        <tr style="border-bottom:1px solid rgba(255,255,255,0.1);">
          <th style="text-align:left;padding:10px;font-size:12px;color:#94a3b8;">Status</th>
          <th style="text-align:left;padding:10px;font-size:12px;color:#94a3b8;">Name</th>
          <th style="text-align:left;padding:10px;font-size:12px;color:#94a3b8;">Port</th>
          <th style="text-align:left;padding:10px;font-size:12px;color:#94a3b8;">Profil</th>
          <th style="text-align:left;padding:10px;font-size:12px;color:#94a3b8;">Letzter Wert</th>
          <th style="text-align:center;padding:10px;font-size:12px;color:#94a3b8;">Aktionen</th>
        </tr>
      </thead>
      <tbody>
        {% for d in devices %}
        <tr style="border-bottom:1px solid rgba(255,255,255,0.05);">
          <td style="padding:10px;">
            {% if d.active %}
              <span style="display:inline-block;width:10px;height:10px;background:#16a34a;border-radius:50%;"></span>
            {% else %}
              <span style="display:inline-block;width:10px;height:10px;background:#94a3b8;border-radius:50%;"></span>
            {% endif %}
          </td>
          <td style="padding:10px;color:#fafafa;font-weight:500;">{{ d.name }}</td>
          <td style="padding:10px;font-family:monospace;color:#cbd5e1;">{{ d.port }}</td>
          <td style="padding:10px;color:#cbd5e1;font-size:13px;">{{ d.profile_id }}</td>
          <td style="padding:10px;font-family:monospace;color:#add5f4;">
            {% if d.last_value %}
              {{ d.last_value }} {{ d.last_unit }}
              <small style="display:block;color:#64748b;font-size:11px;">{{ d.last_seen[:19].replace('T',' ') if d.last_seen else '—' }}</small>
            {% else %}
              <span style="color:#64748b;">—</span>
            {% endif %}
          </td>
          <td style="padding:10px;text-align:center;">
            <button onclick="readNow({{ d.id }})"
                    style="background:rgba(53,102,146,0.3); color:#add5f4; border:1px solid rgba(53,102,146,0.5);
                           padding:6px 12px; border-radius:6px; cursor:pointer; font-size:12px; margin-right:4px;">
              📊 Lesen
            </button>
            <button onclick="testDev({{ d.id }}, '{{ d.port }}', '{{ d.profile_id }}')"
                    style="background:rgba(242,88,27,0.2); color:#fcc09c; border:1px solid rgba(242,88,27,0.4);
                           padding:6px 12px; border-radius:6px; cursor:pointer; font-size:12px; margin-right:4px;">
              🔍 Test
            </button>
            <button onclick="deleteDev({{ d.id }})"
                    style="background:rgba(220,38,38,0.2); color:#fca5a5; border:1px solid rgba(220,38,38,0.4);
                           padding:6px 12px; border-radius:6px; cursor:pointer; font-size:12px;">
              🗑
            </button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <p style="color:#94a3b8;text-align:center;padding:24px;margin:0;">
      Keine Geräte konfiguriert. Klick „Neues Gerät" um anzufangen.
    </p>
    {% endif %}
  </section>

  <!-- Sektion: Verfügbare Profile (Hilfe) -->
  <section style="background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); border-radius:12px; padding:20px 24px;">
    <h2 style="margin: 0 0 12px; font-size: 18px;">Unterstützte Geräte-Profile ({{ profiles|length }})</h2>
    <details>
      <summary style="cursor:pointer; color:#add5f4; padding:8px 0;">Profile anzeigen</summary>
      <table style="width:100%; border-collapse:collapse; margin-top:12px;">
        <thead>
          <tr style="border-bottom:1px solid rgba(255,255,255,0.1);">
            <th style="text-align:left;padding:8px;font-size:12px;color:#94a3b8;">Profil-ID</th>
            <th style="text-align:left;padding:8px;font-size:12px;color:#94a3b8;">Name</th>
            <th style="text-align:left;padding:8px;font-size:12px;color:#94a3b8;">Bereich</th>
            <th style="text-align:left;padding:8px;font-size:12px;color:#94a3b8;">Config</th>
          </tr>
        </thead>
        <tbody>
          {% for p in profiles %}
          <tr style="border-bottom:1px solid rgba(255,255,255,0.05);">
            <td style="padding:8px;font-family:monospace;color:#cbd5e1;font-size:12px;">{{ p.id }}</td>
            <td style="padding:8px;color:#fafafa;font-size:13px;">{{ p.name }}</td>
            <td style="padding:8px;color:#cbd5e1;font-size:12px;">{{ p.domain }}</td>
            <td style="padding:8px;font-family:monospace;color:#94a3b8;font-size:12px;">{{ p.baudrate }} {{ p.config }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </details>
  </section>

  <!-- Result-Banner -->
  <div id="op-result" style="display:none;position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
                              padding:14px 24px;border-radius:10px;z-index:10001;
                              font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,0.3);"></div>
</div>

<!-- Add-Device-Modal -->
<div id="add-device-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);
                                    z-index:10000;align-items:center;justify-content:center;">
  <div style="background:linear-gradient(180deg,#1c1c1c,#151515); padding:32px; border-radius:16px;
              width:min(560px,92vw); border:1px solid rgba(255,255,255,0.1); color:#e5e5e5;">
    <h2 style="margin:0 0 20px; color:#add5f4;">Neues Serial-Gerät anlegen</h2>
    <form id="add-device-form" style="display:flex;flex-direction:column;gap:14px;">
      <div>
        <label style="display:block;font-weight:600;margin-bottom:4px;">Name</label>
        <input name="name" required placeholder="z.B. Mitutoyo Bügelmessschraube Station 1"
               style="width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.2);
                      background:rgba(0,0,0,0.3);color:#fafafa;">
      </div>
      <div>
        <label style="display:block;font-weight:600;margin-bottom:4px;">Port</label>
        <select name="port" required style="width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.2);
                                              background:rgba(0,0,0,0.3);color:#fafafa;">
          <option value="">— Port wählen —</option>
          {% for p in available_ports %}
          <option value="{{ p.port }}">{{ p.port }} ({{ p.description }})</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label style="display:block;font-weight:600;margin-bottom:4px;">Profil</label>
        <select name="profile_id" required style="width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.2);
                                                    background:rgba(0,0,0,0.3);color:#fafafa;">
          <option value="">— Profil wählen —</option>
          {% for p in profiles %}
          <option value="{{ p.id }}">{{ p.name }} ({{ p.baudrate }} {{ p.config }})</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label style="display:block;font-weight:600;margin-bottom:4px;">Notizen (optional)</label>
        <input name="notes" placeholder="z.B. Station Drehmaschine 5"
               style="width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.2);
                      background:rgba(0,0,0,0.3);color:#fafafa;">
      </div>
      <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
        <input type="checkbox" name="active" value="true" checked style="width:18px;height:18px;">
        <span>Aktiv (Background-Worker pollt das Gerät)</span>
      </label>
      <div style="display:flex;gap:10px;margin-top:8px;">
        <button type="submit"
                style="flex:1;background:linear-gradient(135deg,#356692,#284e72);color:white;padding:12px;
                       border:none;border-radius:8px;font-weight:600;cursor:pointer;">
          Anlegen
        </button>
        <button type="button" onclick="document.getElementById('add-device-modal').style.display='none'"
                style="flex:1;background:rgba(255,255,255,0.1);color:#cbd5e1;padding:12px;
                       border:1px solid rgba(255,255,255,0.2);border-radius:8px;cursor:pointer;">
          Abbrechen
        </button>
      </div>
    </form>
  </div>
</div>

<script>
function showResult(msg, kind) {
  const el = document.getElementById('op-result');
  el.textContent = msg;
  el.style.background = kind === 'success' ? '#16a34a' : kind === 'warn' ? '#f59e0b' : '#dc2626';
  el.style.color = 'white';
  el.style.display = 'block';
  setTimeout(() => { el.style.display = 'none'; }, 4000);
}

document.getElementById('add-device-form').addEventListener('submit', async function(e) {
  e.preventDefault();
  const fd = new FormData(e.target);
  if (!fd.get('active')) fd.set('active', 'false');
  const resp = await fetch('/api/serial/devices', { method: 'POST', body: fd });
  const data = await resp.json();
  if (data.ok) {
    showResult('✓ Gerät angelegt — Seite lädt neu', 'success');
    setTimeout(() => location.reload(), 800);
  } else {
    showResult('❌ ' + (data.error || 'Fehler'), 'error');
  }
});

async function testDev(id, port, profile) {
  const fd = new FormData();
  fd.set('port', port);
  fd.set('profile_id', profile);
  showResult('🔍 Teste Verbindung …', 'warn');
  const resp = await fetch('/api/serial/test', { method: 'POST', body: fd });
  const d = await resp.json();
  if (d.success) {
    showResult('✓ ' + (d.value !== null ? d.value + ' ' + (d.unit||'') + ' empfangen' : 'Verbindung OK ' + (d.message||'')), 'success');
  } else {
    showResult('❌ ' + d.error, 'error');
  }
}

async function readNow(id) {
  showResult('📊 Lese Wert …', 'warn');
  const resp = await fetch('/api/serial/devices/' + id + '/read-now', { method: 'POST', body: new FormData() });
  const d = await resp.json();
  if (d.success && d.value !== null) {
    showResult('✓ ' + d.value + ' ' + (d.unit||'') + ' gespeichert', 'success');
    setTimeout(() => location.reload(), 1200);
  } else {
    showResult('❌ ' + (d.error || 'Kein Wert'), 'error');
  }
}

async function deleteDev(id) {
  if (!confirm('Gerät wirklich entfernen?')) return;
  await fetch('/api/serial/devices/' + id + '/delete', { method: 'POST', body: new FormData() });
  location.reload();
}
</script>
{% endblock %}