{% extends "base.html" %}

{% block title %}NC-Programme — Takoma{% endblock %}

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

  <div style="display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px;">
    <div>
      <h1 style="margin: 0;">⚙ NC-Programme</h1>
      <p style="color:#94a3b8; margin: 4px 0 0;">CNC-/G-Code-Verwaltung mit Toolpath-Visualisierung</p>
    </div>
    <div style="display:flex; gap:10px;">
      <button type="button" onclick="openReceiveModal()"
              style="background:rgba(255,255,255,0.06); color:#cbd5e1; border:1px solid rgba(255,255,255,0.15);
                     padding:10px 18px; border-radius:8px; font-weight:600; cursor:pointer;">
        📥 Von CNC empfangen
      </button>
      <button type="button" onclick="document.getElementById('import-modal').style.display='flex'"
              style="background:rgba(255,255,255,0.06); color:#cbd5e1; border:1px solid rgba(255,255,255,0.15);
                     padding:10px 18px; border-radius:8px; font-weight:600; cursor:pointer;">
        ⬆ Datei importieren
      </button>
      <a href="/dnc/history"
         style="background:rgba(255,255,255,0.06); color:#cbd5e1; border:1px solid rgba(255,255,255,0.15);
                padding:10px 18px; border-radius:8px; font-weight:600; text-decoration:none; display:inline-block;">
        📊 DNC-Verlauf
      </a>
      <a href="/tools/cnc-mapping"
         title="T-Nummern (T01–T9999) den Werkzeugen zuordnen"
         style="background:rgba(255,255,255,0.06); color:#cbd5e1; border:1px solid rgba(255,255,255,0.15);
                padding:10px 18px; border-radius:8px; font-weight:600; text-decoration:none; display:inline-block;">
        🔢 T-Mapping
      </a>
      <a href="/machines/tool-plans"
         title="Werkzeugplan pro Maschine (Slot-Belegung im Revolver/Magazin)"
         style="background:rgba(255,255,255,0.06); color:#cbd5e1; border:1px solid rgba(255,255,255,0.15);
                padding:10px 18px; border-radius:8px; font-weight:600; text-decoration:none; display:inline-block;">
        🔧 Werkzeugpläne
      </a>
      <a href="/programs/new"
         style="background:linear-gradient(135deg,#356692,#284e72); color:white; padding:10px 22px;
                border-radius:8px; font-weight:600; text-decoration:none;">
        + Neues Programm
      </a>
    </div>
  </div>

  <!-- Suche + Filter -->
  <form method="GET" action="/programs"
        style="background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10);
               border-radius:10px; padding:14px 18px; margin-bottom:18px;
               display:grid; grid-template-columns: 2fr 1fr 1fr auto; gap:12px; align-items:end;">
    <div>
      <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:4px;">
        🔍 Suche (Name · Nummer · Werkstück · im Code)
      </label>
      <input type="text" name="q" value="{{ search_q|default('') }}"
             placeholder="z.B. Welle, Müller, G54, etc."
             style="width:100%; padding:7px 10px; 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:4px;">Status</label>
      <select name="status"
              style="width:100%; padding:7px 10px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                     background:rgba(0,0,0,0.3); color:#fafafa;">
        <option value="">— alle —</option>
        <option value="draft" {% if search_status == 'draft' %}selected{% endif %}>📝 Entwurf</option>
        <option value="released" {% if search_status == 'released' %}selected{% endif %}>✓ Freigegeben</option>
        <option value="archived" {% if search_status == 'archived' %}selected{% endif %}>📦 Archiv</option>
      </select>
    </div>
    <div>
      <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:4px;">Werkzeug-Nr</label>
      <input type="text" name="tool" value="{{ search_tool|default('') }}"
             placeholder="z.B. 17 (T17)"
             style="width:100%; padding:7px 10px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                    background:rgba(0,0,0,0.3); color:#fafafa;">
    </div>
    <button type="submit"
            style="padding:8px 16px; background:linear-gradient(135deg,#356692,#284e72); color:white;
                   border:none; border-radius:6px; font-weight:600; cursor:pointer;">
      Suchen
    </button>
  </form>

  {% if programs %}
  <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:12px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em;">Nr.</th>
          <th style="text-align:left; padding:12px 16px; font-size:12px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em;">Name</th>
          <th style="text-align:left; padding:12px 16px; font-size:12px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em;">Steuerung</th>
          <th style="text-align:left; padding:12px 16px; font-size:12px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em;">Werkstück</th>
          <th style="text-align:right; padding:12px 16px; font-size:12px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em;">Zeilen</th>
          <th style="text-align:right; padding:12px 16px; font-size:12px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em;">Zeit</th>
          <th style="text-align:center; padding:12px 16px; font-size:12px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em;">Status</th>
          <th style="text-align:right; padding:12px 16px; font-size:12px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em;">Geändert</th>
        </tr>
      </thead>
      <tbody>
        {% for p in programs %}
        <tr style="border-bottom:1px solid rgba(255,255,255,0.05); cursor:pointer;"
            onmouseover="this.style.background='rgba(53,102,146,0.08)'"
            onmouseout="this.style.background=''"
            onclick="window.location='/programs/{{ p.id }}'">
          <td style="padding:12px 16px; font-family:'SF Mono',Menlo,monospace; color:#add5f4; font-weight:500;">
            {{ p.program_no }}
          </td>
          <td style="padding:12px 16px; color:#fafafa;">{{ p.name }}</td>
          <td style="padding:12px 16px; color:#cbd5e1; font-size:13px;">
            {% set prof = profiles.get(p.machine_profile, {}) %}
            {{ prof.get('name', p.machine_profile) }}
          </td>
          <td style="padding:12px 16px; color:#cbd5e1; font-size:13px;">
            {{ p.workpiece or '—' }}
            {% if p.material %} <span style="color:#64748b;">· {{ p.material }}</span>{% endif %}
          </td>
          <td style="padding:12px 16px; text-align:right; font-family:monospace; color:#cbd5e1;">
            {{ p.code_lines }}
          </td>
          <td style="padding:12px 16px; text-align:right; font-family:monospace; color:#cbd5e1;">
            {% if p.cycle_time_sec %}
              {{ (p.cycle_time_sec // 60) }}:{{ '%02d' % (p.cycle_time_sec % 60) }}
            {% else %}—{% endif %}
          </td>
          <td style="padding:12px 16px; text-align:center;">
            {% if p.status == 'released' %}
              <span style="background:#16a34a; color:white; padding:2px 10px; border-radius:10px; font-size:11px;">FREIGEGEBEN</span>
            {% elif p.status == 'archived' %}
              <span style="background:#94a3b8; color:white; padding:2px 10px; border-radius:10px; font-size:11px;">ARCHIVIERT</span>
            {% else %}
              <span style="background:#f2581b; color:white; padding:2px 10px; border-radius:10px; font-size:11px;">ENTWURF</span>
            {% endif %}
          </td>
          <td style="padding:12px 16px; text-align:right; color:#64748b; font-size:12px;">
            {{ (p.updated_at or p.created_at)[:16].replace('T', ' ') }}
          </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:60px; text-align:center; color:#94a3b8;">
    <div style="font-size:48px; margin-bottom:12px;">⚙</div>
    <h2 style="color:#cbd5e1; margin:0 0 8px;">Noch keine NC-Programme</h2>
    <p style="margin:0 0 20px;">Lege dein erstes G-Code-Programm an — mit Live-Toolpath-Vorschau und Versionierung.</p>
    <a href="/programs/new"
       style="background:linear-gradient(135deg,#356692,#284e72); color:white; padding:10px 22px;
              border-radius:8px; font-weight:600; text-decoration:none; display:inline-block;">
      + Erstes Programm anlegen
    </a>
  </div>
  {% endif %}

  <div style="margin-top:24px; font-size:12px; color:#64748b;">
    Unterstützte Steuerungen: ISO/EIA · Heidenhain TNC (ISO + Klartext) · Siemens 810D/840D · FANUC
  </div>

</div>

<!-- Receive-Modal -->
<div id="receive-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(580px,94vw); border:1px solid rgba(255,255,255,0.10); color:#e5e5e5;">
    <h2 style="margin:0 0 6px; color:#add5f4; font-size:18px;">📥 Programm von CNC empfangen</h2>
    <p style="color:#94a3b8; font-size:13px; margin:0 0 16px;">
      Wähle Maschine — Takoma wartet auf eingehende Daten (max. 2 Min).
    </p>

    <div id="receive-machine-list" style="max-height:280px; overflow-y:auto; margin-bottom:14px;">
      <div style="text-align:center; color:#94a3b8; padding:20px;">Lade …</div>
    </div>

    <div id="receive-progress" style="display:none;">
      <div style="display:flex; justify-content:space-between; margin-bottom:6px;">
        <span id="recv-status" style="color:#fafafa; font-weight:500;">⏳ Warte …</span>
        <span id="recv-bytes" style="font-family:monospace; color:#add5f4;">0 KB</span>
      </div>
      <div style="background:rgba(255,255,255,0.06); border-radius:6px; height:6px; overflow:hidden; margin-bottom:14px;">
        <div id="recv-bar" style="background:linear-gradient(90deg,#16a34a,#86efac); height:100%; width:0%; transition:width 200ms;"></div>
      </div>
      <div id="recv-actions" style="display:flex; gap:10px;">
        <button onclick="abortReceive()"
                style="background:rgba(220,38,38,0.2); color:#fca5a5; border:1px solid rgba(220,38,38,0.4);
                       padding:8px 14px; border-radius:6px; cursor:pointer;">Abbrechen</button>
      </div>
      <div id="recv-save-form" style="display:none; margin-top:14px;">
        <input id="recv-name" placeholder="Name für das empfangene Programm"
               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; margin-bottom:10px;">
        <button onclick="saveReceived()"
                style="background:linear-gradient(135deg,#16a34a,#15803d); color:white;
                       padding:8px 18px; border:none; border-radius:6px; cursor:pointer; width:100%;">
          💾 Als neues Programm speichern
        </button>
      </div>
    </div>

    <button onclick="document.getElementById('receive-modal').style.display='none'"
            style="background:rgba(255,255,255,0.06); color:#cbd5e1; border:1px solid rgba(255,255,255,0.15);
                   padding:8px 16px; border-radius:6px; cursor:pointer; width:100%; margin-top:10px;">
      Schließen
    </button>
  </div>
</div>

<script>
let recvJobId = null;
let recvPollInterval = null;

async function openReceiveModal() {
  document.getElementById('receive-modal').style.display = 'flex';
  document.getElementById('receive-progress').style.display = 'none';
  document.getElementById('recv-save-form').style.display = 'none';
  try {
    const r = await fetch('/api/cnc-machines');
    const d = await r.json();
    const list = document.getElementById('receive-machine-list');
    const rs232Only = (d.machines || []).filter(m => m.connection_type === 'rs232');
    if (rs232Only.length === 0) {
      list.innerHTML = '<div style="text-align:center; color:#94a3b8; padding:20px;">'
        + 'Keine RS232-Maschine konfiguriert.<br>'
        + '<a href="/settings/cnc-machines" style="color:#add5f4;">→ Maschine anlegen</a></div>';
      return;
    }
    list.innerHTML = rs232Only.map(m => `
      <div onclick="startReceive(${m.id})" style="padding:12px 14px; border:1px solid rgba(255,255,255,0.10);
                                                    border-radius:8px; margin-bottom:6px; cursor:pointer;
                                                    background:rgba(255,255,255,0.02);"
           onmouseover="this.style.background='rgba(53,102,146,0.15)'"
           onmouseout="this.style.background='rgba(255,255,255,0.02)'">
        <div style="font-weight:600; color:#fafafa;">🔌 ${m.name}</div>
        <div style="font-size:11px; color:#94a3b8; margin-top:2px;">${m.manufacturer} ${m.model}</div>
        <div style="font-family:monospace; font-size:11px; color:#64748b; margin-top:3px;">
          ${m.config.port || '?'} · ${m.config.baudrate} ${m.config.bytesize}${m.config.parity}${m.config.stopbits}
        </div>
      </div>`).join('');
  } catch(e) {
    document.getElementById('receive-machine-list').innerHTML =
      '<div style="color:#fca5a5;">Fehler: ' + e + '</div>';
  }
}

async function startReceive(mid) {
  const r = await fetch('/api/cnc-machines');
  const d = await r.json();
  const m = (d.machines || []).find(x => x.id === mid);
  if (!m) return;

  document.getElementById('receive-machine-list').style.display = 'none';
  document.getElementById('receive-progress').style.display = 'block';

  const fd = new FormData();
  fd.append('port', m.config.port);
  fd.append('baudrate', m.config.baudrate);
  fd.append('bytesize', m.config.bytesize);
  fd.append('parity', m.config.parity);
  fd.append('stopbits', m.config.stopbits);
  fd.append('handshake', m.config.handshake);

  try {
    const resp = await fetch('/api/dnc/receive', {method: 'POST', body: fd});
    const data = await resp.json();
    if (!data.ok) {
      document.getElementById('recv-status').textContent = '❌ ' + data.error;
      return;
    }
    recvJobId = data.job_id;
    recvPollInterval = setInterval(pollReceive, 800);
  } catch(e) {
    document.getElementById('recv-status').textContent = '❌ ' + e.message;
  }
}

async function pollReceive() {
  if (!recvJobId) return;
  const r = await fetch('/api/dnc/job/' + recvJobId);
  const d = await r.json();
  if (!d.ok) return;
  const kb = (d.progress_bytes / 1024).toFixed(1);
  document.getElementById('recv-bytes').textContent = kb + ' KB';
  document.getElementById('recv-bar').style.width = Math.min(95, kb * 2) + '%';
  const txt = {
    'queued': '⏳ Warte auf Daten …',
    'running': d.progress_bytes > 0 ? '📥 Empfange …' : '⏳ Warte auf Daten …',
    'done': '✅ Empfang abgeschlossen',
    'error': '❌ ' + (d.error_msg || 'Fehler'),
    'aborted': '✗ Abgebrochen',
  }[d.status] || d.status;
  document.getElementById('recv-status').textContent = txt;
  if (d.status === 'done') {
    clearInterval(recvPollInterval);
    document.getElementById('recv-bar').style.width = '100%';
    document.getElementById('recv-name').value = d.program_no_recv || ('RECV-' + recvJobId);
    document.getElementById('recv-save-form').style.display = 'block';
  } else if (d.status === 'error' || d.status === 'aborted') {
    clearInterval(recvPollInterval);
  }
}

async function abortReceive() {
  if (recvJobId) await fetch('/api/dnc/job/' + recvJobId + '/abort', {method:'POST'});
}

async function saveReceived() {
  const fd = new FormData();
  fd.append('name', document.getElementById('recv-name').value);
  fd.append('machine_profile', 'iso_generic');
  const r = await fetch('/api/dnc/receive/' + recvJobId + '/save', {method: 'POST', body: fd});
  const d = await r.json();
  if (d.ok) {
    location.href = '/programs/' + d.program_id;
  } else {
    alert('Fehler: ' + d.error);
  }
}
</script>

<!-- Import-Modal -->
<div id="import-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;">
  <form method="POST" action="/programs/import" enctype="multipart/form-data"
        style="background:linear-gradient(180deg,#1c1c1c,#151515); padding:24px 28px; border-radius:14px;
               width:min(480px,94vw); border:1px solid rgba(255,255,255,0.10); color:#e5e5e5;">
    <h2 style="margin:0 0 6px; color:#add5f4; font-size:18px;">⬆ NC-Programm importieren</h2>
    <p style="color:#94a3b8; font-size:13px; margin:0 0 16px;">
      Datei-Endungen: .nc · .gcode · .cnc · .g · .h · .mpf · .spf
    </p>
    <div style="margin-bottom:14px;">
      <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:4px;">Datei</label>
      <input type="file" name="file" required accept=".nc,.gcode,.cnc,.g,.h,.mpf,.spf,.prg,.i,.iso,.tap,.txt"
             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;">
    </div>
    <div style="margin-bottom:18px;">
      <label style="display:block; font-size:11px; color:#94a3b8; margin-bottom:4px;">Steuerung</label>
      <select name="machine_profile"
              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, p in profiles.items() %}
        <option value="{{ k }}">{{ p.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div style="display:flex; gap:10px;">
      <button type="submit"
              style="flex:1; background:linear-gradient(135deg,#356692,#284e72); color:white;
                     padding:10px; border:none; border-radius:6px; font-weight:600; cursor:pointer;">
        ⬆ Importieren
      </button>
      <button type="button" onclick="document.getElementById('import-modal').style.display='none'"
              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>
  </form>
</div>
{% endblock %}