{% extends "base.html" %}

{% block title %}CNC-Maschinen — Takoma{% endblock %}

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

  <div style="display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px;">
    <div>
      <h1 style="margin:0;">🏭 CNC-Maschinen</h1>
      <p style="color:#94a3b8; margin:4px 0 0;">
        Konfiguriere deine CNC-Steuerungen — RS232, Netzwerk-Share oder USB-Export.
      </p>
    </div>
    <button onclick="openAddModal()"
            style="background:linear-gradient(135deg,#356692,#284e72); color:white; padding:10px 22px;
                   border-radius:8px; font-weight:600; border:none; cursor:pointer;">
      + Maschine hinzufügen
    </button>
  </div>

  {% if machines %}
  <div style="background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10);
              border-radius:12px; overflow:hidden;">
    <table style="width:100%; border-collapse:collapse;">
      <thead>
        <tr style="background:rgba(0,0,0,0.3); border-bottom:1px solid rgba(255,255,255,0.1);">
          <th style="text-align:left; padding:12px 16px; font-size:11px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em;">Maschine</th>
          <th style="text-align:left; padding:12px 16px; font-size:11px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em;">Hersteller / Modell</th>
          <th style="text-align:left; padding:12px 16px; font-size:11px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em;">Verbindung</th>
          <th style="text-align:left; padding:12px 16px; font-size:11px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em;">Konfig</th>
          <th style="text-align:center; padding:12px 16px; font-size:11px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em;">Status</th>
          <th style="text-align:right; padding:12px 16px; font-size:11px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em;">Aktionen</th>
        </tr>
      </thead>
      <tbody>
        {% for m in machines %}
        <tr style="border-bottom:1px solid rgba(255,255,255,0.05);">
          <td style="padding:12px 16px;">
            <div style="color:#fafafa; font-weight:500;">{{ m.name }}</div>
            {% if m.machine_no or m.location %}
            <div style="color:#64748b; font-size:12px;">
              {% if m.machine_no %}#{{ m.machine_no }}{% endif %}
              {% if m.location %} · {{ m.location }}{% endif %}
            </div>
            {% endif %}
          </td>
          <td style="padding:12px 16px; color:#cbd5e1; font-size:13px;">
            {{ m.manufacturer or '—' }}
            {% if m.model %}<br><span style="color:#64748b; font-size:12px;">{{ m.model }}</span>{% endif %}
          </td>
          <td style="padding:12px 16px;">
            {% set ct = connection_types.get(m.connection_type, {}) %}
            <span style="font-size:13px;">{{ ct.get('icon', '') }} {{ ct.get('label', m.connection_type) }}</span>
          </td>
          <td style="padding:12px 16px; font-family:monospace; font-size:11px; color:#94a3b8;">
            {% if m.connection_type == 'rs232' %}
              {{ m.config.port or 'kein Port' }} · {{ m.config.baudrate }} {{ m.config.bytesize }}{{ m.config.parity }}{{ m.config.stopbits }} · {{ m.config.handshake }}
            {% elif m.connection_type == 'network_share' %}
              {{ m.config.network_path or '—' }}
            {% elif m.connection_type == 'usb_export' %}
              {{ m.config.file_extension or '.nc' }}-Dateien
            {% endif %}
          </td>
          <td style="padding:12px 16px; text-align:center;">
            {% if m.active %}
              <span style="background:#16a34a; color:white; padding:2px 8px; border-radius:8px; font-size:11px;">AKTIV</span>
            {% else %}
              <span style="background:#94a3b8; color:white; padding:2px 8px; border-radius:8px; font-size:11px;">AUS</span>
            {% endif %}
          </td>
          <td style="padding:12px 16px; text-align:right;">
            <button onclick="editMachine({{ m.id }})"
                    style="background:rgba(53,102,146,0.3); color:#add5f4; border:1px solid rgba(53,102,146,0.5);
                           padding:5px 12px; border-radius:6px; font-size:12px; cursor:pointer;">
              ✏ Bearbeiten
            </button>
            <button onclick="deleteMachine({{ m.id }}, '{{ m.name }}')"
                    style="background:rgba(220,38,38,0.2); color:#fca5a5; border:1px solid rgba(220,38,38,0.4);
                           padding:5px 10px; border-radius:6px; font-size:12px; cursor:pointer; margin-left:4px;">
              🗑
            </button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div style="background:rgba(255,255,255,0.04); border:1px dashed rgba(255,255,255,0.2);
              border-radius:12px; padding:48px; text-align:center; color:#94a3b8;">
    <div style="font-size:42px; margin-bottom:10px;">🏭</div>
    <h2 style="color:#cbd5e1; margin:0 0 6px;">Noch keine Maschine konfiguriert</h2>
    <p style="margin:0 0 16px;">Lege deine erste CNC an um Programme zu übertragen.</p>
    <button onclick="openAddModal()"
            style="background:linear-gradient(135deg,#356692,#284e72); color:white; padding:10px 22px;
                   border-radius:8px; font-weight:600; border:none; cursor:pointer;">
      + Maschine hinzufügen
    </button>
  </div>
  {% endif %}

  <div style="margin-top:24px; padding:14px 18px; background:rgba(53,102,146,0.08);
              border-left:3px solid #356692; border-radius:6px; font-size:13px; color:#cbd5e1;">
    💡 <strong>Tipp:</strong> Hast du sowohl alte (RS232) als auch neue (Netzwerk) Maschinen?
    Lege jede einzeln an — Takoma routet beim Senden automatisch.
  </div>
</div>

<!-- Add/Edit-Modal -->
<div id="cnc-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:24px 28px; border-radius:14px;
              width:min(640px,94vw); max-height:90vh; overflow-y:auto;
              border:1px solid rgba(255,255,255,0.10); color:#e5e5e5;">
    <h2 id="cnc-modal-title" style="margin:0 0 16px; color:#add5f4;">CNC-Maschine</h2>

    <!-- Preset-Auswahl -->
    <div style="margin-bottom:14px;">
      <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:4px;">Schnell-Setup (Preset)</label>
      <select id="cnc-preset" onchange="applyPreset()"
              style="width:100%; padding:8px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                     background:rgba(0,0,0,0.3); color:#fafafa;">
        <option value="">— Manuell eintragen —</option>
        {% for k, p in presets.items() %}
        <option value="{{ k }}">{{ p.manufacturer }} {{ p.model }}</option>
        {% endfor %}
      </select>
    </div>

    <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
      <div>
        <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:3px;">Name</label>
        <input id="cnc-name" required placeholder="z.B. Hermle C400"
               style="width:100%; padding:7px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                      background:rgba(0,0,0,0.3); color:#fafafa;">
      </div>
      <div>
        <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:3px;">Maschinen-Nr</label>
        <input id="cnc-machine-no" placeholder="z.B. M-03"
               style="width:100%; padding:7px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                      background:rgba(0,0,0,0.3); color:#fafafa;">
      </div>
      <div>
        <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:3px;">Hersteller</label>
        <input id="cnc-manufacturer" placeholder="Heidenhain"
               style="width:100%; padding:7px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                      background:rgba(0,0,0,0.3); color:#fafafa;">
      </div>
      <div>
        <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:3px;">Modell</label>
        <input id="cnc-model" placeholder="TNC 530"
               style="width:100%; padding:7px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                      background:rgba(0,0,0,0.3); color:#fafafa;">
      </div>
      <div>
        <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:3px;">Standort (Halle/Position)</label>
        <input id="cnc-location" placeholder="Halle 1, Pos 3"
               style="width:100%; padding:7px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                      background:rgba(0,0,0,0.3); color:#fafafa;">
      </div>
      <div>
        <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:3px;">G-Code-Profil</label>
        <select id="cnc-profile"
                style="width:100%; padding:7px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                       background:rgba(0,0,0,0.3); color:#fafafa;">
          {% for k, p in profiles.items() %}
          <option value="{{ k }}">{{ p.name }}</option>
          {% endfor %}
        </select>
      </div>
    </div>

    <div style="margin-top:14px;">
      <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:3px;">Verbindungs-Art</label>
      <select id="cnc-conn-type" onchange="updateConnFields()"
              style="width:100%; padding:8px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                     background:rgba(0,0,0,0.3); color:#fafafa;">
        {% for k, ct in connection_types.items() %}
        <option value="{{ k }}">{{ ct.icon }} {{ ct.label }}</option>
        {% endfor %}
      </select>
    </div>

    <!-- RS232-Felder -->
    <div id="conn-rs232" style="margin-top:14px; padding:14px; background:rgba(53,102,146,0.06);
                                  border-radius:8px; border:1px solid rgba(53,102,146,0.2); display:none;">
      <div style="font-size:12px; color:#add5f4; font-weight:600; margin-bottom:10px;">🔌 RS232-Einstellungen</div>
      <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;">
        <div>
          <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:3px;">Port</label>
          <select id="cnc-port"
                  style="width:100%; padding:7px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                         background:rgba(0,0,0,0.3); color:#fafafa;">
            <option value="">— wählen —</option>
            {% for p in ports %}
            <option value="{{ p.port }}">{{ p.port }} ({{ p.description }})</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:3px;">Baudrate</label>
          <select id="cnc-baud"
                  style="width:100%; padding:7px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                         background:rgba(0,0,0,0.3); color:#fafafa;">
            <option>110</option><option>300</option><option>600</option><option>1200</option>
            <option>2400</option><option selected>4800</option><option>9600</option>
            <option>19200</option><option>38400</option><option>57600</option><option>115200</option>
          </select>
        </div>
        <div>
          <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:3px;">Handshake</label>
          <select id="cnc-handshake"
                  style="width:100%; padding:7px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                         background:rgba(0,0,0,0.3); color:#fafafa;">
            <option value="xon_xoff" selected>XON/XOFF</option>
            <option value="rts_cts">RTS/CTS</option>
            <option value="none">Keine</option>
          </select>
        </div>
        <div>
          <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:3px;">Datenbits</label>
          <select id="cnc-bytesize"
                  style="width:100%; padding:7px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                         background:rgba(0,0,0,0.3); color:#fafafa;">
            <option>7</option><option selected>8</option>
          </select>
        </div>
        <div>
          <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:3px;">Parität</label>
          <select id="cnc-parity"
                  style="width:100%; padding:7px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                         background:rgba(0,0,0,0.3); color:#fafafa;">
            <option value="N" selected>N</option><option value="E">E</option><option value="O">O</option>
          </select>
        </div>
        <div>
          <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:3px;">Stop</label>
          <select id="cnc-stopbits"
                  style="width:100%; padding:7px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                         background:rgba(0,0,0,0.3); color:#fafafa;">
            <option selected>1</option><option>2</option>
          </select>
        </div>
      </div>
    </div>

    <!-- Network-Share-Felder -->
    <div id="conn-network" style="margin-top:14px; padding:14px; background:rgba(53,102,146,0.06);
                                    border-radius:8px; border:1px solid rgba(53,102,146,0.2); display:none;">
      <div style="font-size:12px; color:#add5f4; font-weight:600; margin-bottom:10px;">🌐 Netzwerk-Share</div>
      <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:3px;">
        Netzwerk-Pfad (SMB/NFS gemountet, oder lokales freigegebenes Verzeichnis)
      </label>
      <input id="cnc-network-path" placeholder="/Volumes/CNC-Programs/   oder   /Users/Shared/CNC/   oder   //192.168.1.50/cnc"
             style="width:100%; padding:7px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                    background:rgba(0,0,0,0.3); color:#fafafa; font-family:monospace; font-size:12px;">
      <div style="margin-top:10px;">
        <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:3px;">Datei-Endung</label>
        <input id="cnc-net-ext" value=".nc" placeholder=".nc"
               style="width:140px; padding:7px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                      background:rgba(0,0,0,0.3); color:#fafafa; font-family:monospace; font-size:12px;">
      </div>
      <div style="font-size:11px; color:#64748b; margin-top:8px;">
        Beispiele: <code style="background:rgba(0,0,0,0.3);padding:1px 4px;border-radius:3px;">/Volumes/CNC/</code>
        (Mac SMB-Mount) ·
        <code style="background:rgba(0,0,0,0.3);padding:1px 4px;border-radius:3px;">/Users/Shared/CNC/</code>
        (lokales Verzeichnis freigegeben via SMB für die CNC)
      </div>
    </div>

    <!-- USB-Export-Felder -->
    <div id="conn-usb" style="margin-top:14px; padding:14px; background:rgba(53,102,146,0.06);
                                border-radius:8px; border:1px solid rgba(53,102,146,0.2); display:none;">
      <div style="font-size:12px; color:#add5f4; font-weight:600; margin-bottom:10px;">💾 USB-Export</div>
      <div style="font-size:13px; color:#cbd5e1; line-height:1.5; margin-bottom:10px;">
        Beim Senden wählt der Operator das USB-Volume — Takoma schreibt das Programm drauf.
      </div>
      <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:3px;">Datei-Endung</label>
      <input id="cnc-usb-ext" value=".nc" placeholder=".nc"
             style="width:140px; padding:7px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                    background:rgba(0,0,0,0.3); color:#fafafa; font-family:monospace; font-size:12px;">
      {% if usb_volumes %}
      <div style="margin-top:10px; font-size:11px; color:#64748b;">
        Aktuell gemountet:
        {% for v in usb_volumes %}<br>· <code style="background:rgba(0,0,0,0.3);padding:1px 4px;border-radius:3px;">{{ v.path }}</code> ({{ v.free_gb }} GB frei){% endfor %}
      </div>
      {% endif %}
    </div>

    <div style="margin-top:14px;">
      <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:3px;">Notizen (optional)</label>
      <textarea id="cnc-notes" rows="2" placeholder="z.B. 'CNC steht in Halle 1, hat Heidenhain TNC 426'"
                style="width:100%; padding:7px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                       background:rgba(0,0,0,0.3); color:#fafafa; font-size:13px;"></textarea>
    </div>

    <div style="display:flex; gap:10px; margin-top:18px;">
      <button onclick="saveMachine()" id="btn-save"
              style="flex:1; background:linear-gradient(135deg,#16a34a,#15803d); color:white;
                     padding:10px; border:none; border-radius:6px; font-weight:600; cursor:pointer;">
        💾 Speichern
      </button>
      <button onclick="closeModal()"
              style="background:rgba(255,255,255,0.06); color:#cbd5e1; border:1px solid rgba(255,255,255,0.15);
                     padding:10px 16px; border-radius:6px; cursor:pointer;">Abbrechen</button>
    </div>

    <div id="cnc-modal-result" style="margin-top:12px; font-size:13px;"></div>
  </div>
</div>

<script>
const presets = {{ presets | tojson }};
const connectionTypes = {{ connection_types | tojson }};
const machineData = {{ machines | tojson }};
let editingId = null;

function openAddModal() {
  editingId = null;
  document.getElementById('cnc-modal-title').textContent = 'Neue CNC-Maschine';
  ['cnc-name','cnc-machine-no','cnc-manufacturer','cnc-model','cnc-location',
   'cnc-network-path','cnc-notes'].forEach(id => document.getElementById(id).value = '');
  document.getElementById('cnc-net-ext').value = '.nc';
  document.getElementById('cnc-usb-ext').value = '.nc';
  document.getElementById('cnc-preset').value = '';
  document.getElementById('cnc-conn-type').value = 'rs232';
  updateConnFields();
  document.getElementById('cnc-modal').style.display = 'flex';
}

function editMachine(id) {
  const m = machineData.find(x => x.id === id);
  if (!m) return;
  editingId = id;
  document.getElementById('cnc-modal-title').textContent = `Bearbeiten: ${m.name}`;
  document.getElementById('cnc-name').value = m.name || '';
  document.getElementById('cnc-machine-no').value = m.machine_no || '';
  document.getElementById('cnc-manufacturer').value = m.manufacturer || '';
  document.getElementById('cnc-model').value = m.model || '';
  document.getElementById('cnc-location').value = m.location || '';
  document.getElementById('cnc-profile').value = m.machine_profile || 'iso_generic';
  document.getElementById('cnc-conn-type').value = m.connection_type;
  document.getElementById('cnc-notes').value = m.notes || '';
  const cfg = m.config || {};
  if (m.connection_type === 'rs232') {
    document.getElementById('cnc-port').value = cfg.port || '';
    document.getElementById('cnc-baud').value = cfg.baudrate || 4800;
    document.getElementById('cnc-handshake').value = cfg.handshake || 'xon_xoff';
    document.getElementById('cnc-bytesize').value = cfg.bytesize || 8;
    document.getElementById('cnc-parity').value = cfg.parity || 'N';
    document.getElementById('cnc-stopbits').value = cfg.stopbits || 1;
  } else if (m.connection_type === 'network_share') {
    document.getElementById('cnc-network-path').value = cfg.network_path || '';
    document.getElementById('cnc-net-ext').value = cfg.file_extension || '.nc';
  } else if (m.connection_type === 'usb_export') {
    document.getElementById('cnc-usb-ext').value = cfg.file_extension || '.nc';
  }
  updateConnFields();
  document.getElementById('cnc-modal').style.display = 'flex';
}

function closeModal() {
  document.getElementById('cnc-modal').style.display = 'none';
  document.getElementById('cnc-modal-result').innerHTML = '';
}

function applyPreset() {
  const k = document.getElementById('cnc-preset').value;
  if (!k || !presets[k]) return;
  const p = presets[k];
  document.getElementById('cnc-manufacturer').value = p.manufacturer;
  document.getElementById('cnc-model').value = p.model;
  document.getElementById('cnc-profile').value = p.machine_profile;
  document.getElementById('cnc-conn-type').value = 'rs232';
  if (p.rs232) {
    document.getElementById('cnc-baud').value = p.rs232.baudrate;
    document.getElementById('cnc-bytesize').value = p.rs232.bytesize;
    document.getElementById('cnc-parity').value = p.rs232.parity;
    document.getElementById('cnc-stopbits').value = p.rs232.stopbits;
    document.getElementById('cnc-handshake').value = p.rs232.handshake;
  }
  updateConnFields();
}

function updateConnFields() {
  const ct = document.getElementById('cnc-conn-type').value;
  document.getElementById('conn-rs232').style.display = ct === 'rs232' ? 'block' : 'none';
  document.getElementById('conn-network').style.display = ct === 'network_share' ? 'block' : 'none';
  document.getElementById('conn-usb').style.display = ct === 'usb_export' ? 'block' : 'none';
}

async function saveMachine() {
  const ct = document.getElementById('cnc-conn-type').value;
  let config = {};
  if (ct === 'rs232') {
    config = {
      port: document.getElementById('cnc-port').value,
      baudrate: parseInt(document.getElementById('cnc-baud').value),
      bytesize: parseInt(document.getElementById('cnc-bytesize').value),
      parity: document.getElementById('cnc-parity').value,
      stopbits: parseInt(document.getElementById('cnc-stopbits').value),
      handshake: document.getElementById('cnc-handshake').value,
    };
  } else if (ct === 'network_share') {
    config = {
      network_path: document.getElementById('cnc-network-path').value,
      file_extension: document.getElementById('cnc-net-ext').value || '.nc',
    };
  } else if (ct === 'usb_export') {
    config = {
      file_extension: document.getElementById('cnc-usb-ext').value || '.nc',
    };
  }
  const fd = new FormData();
  fd.append('name', document.getElementById('cnc-name').value);
  fd.append('manufacturer', document.getElementById('cnc-manufacturer').value);
  fd.append('model', document.getElementById('cnc-model').value);
  fd.append('machine_no', document.getElementById('cnc-machine-no').value);
  fd.append('location', document.getElementById('cnc-location').value);
  fd.append('connection_type', ct);
  fd.append('config_json', JSON.stringify(config));
  fd.append('machine_profile', document.getElementById('cnc-profile').value);
  fd.append('notes', document.getElementById('cnc-notes').value);

  const url = editingId
    ? `/api/cnc-machines/${editingId}/update`
    : '/api/cnc-machines';
  const resp = await fetch(url, {method: 'POST', body: fd});
  const d = await resp.json();
  if (d.ok) {
    document.getElementById('cnc-modal-result').innerHTML =
      '<div style="background:#16a34a;color:white;padding:8px;border-radius:6px;">✓ Gespeichert</div>';
    setTimeout(() => location.reload(), 800);
  } else {
    document.getElementById('cnc-modal-result').innerHTML =
      '<div style="background:#dc2626;color:white;padding:8px;border-radius:6px;">❌ ' + (d.error || 'Fehler') + '</div>';
  }
}

async function deleteMachine(id, name) {
  if (!confirm('Maschine "' + name + '" wirklich löschen?')) return;
  await fetch(`/api/cnc-machines/${id}/delete`, {method: 'POST'});
  location.reload();
}
</script>
{% endblock %}