{% extends "base.html" %}

{% block title %}Werkzeugplan — {{ machine.name }}{% endblock %}
{% block heading %}Werkzeugplan: {{ machine.name }}{% endblock %}

{% block topbar_actions %}
  <a href="/settings/cnc-machines" class="btn btn-secondary btn-sm">← Maschinen</a>
  <a href="/tools/cnc-mapping" class="btn btn-secondary btn-sm">🔢 Tool-Pool / T-Mapping</a>
{% endblock %}

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

  <!-- Maschinen-Info -->
  <div class="card" style="margin-bottom:14px;">
    <div class="card-body" style="padding:14px 18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;">
      <div>
        <strong style="color:#fafafa;font-size:14px;">{{ machine.name }}</strong>
        {% if machine.manufacturer or machine.model %}
          <span style="color:#94a3b8;font-size:12px;margin-left:8px;">
            {{ machine.manufacturer }}{% if machine.model %} · {{ machine.model }}{% endif %}
          </span>
        {% endif %}
        {% if machine.machine_no %}
          <span class="badge" style="margin-left:8px;">{{ machine.machine_no }}</span>
        {% endif %}
        {% if machine.location %}
          <span style="color:#64748b;font-size:11px;margin-left:8px;">📍 {{ machine.location }}</span>
        {% endif %}
      </div>
      <div style="display:flex;gap:8px;align-items:center;">
        <span style="color:#64748b;font-size:11px;">Kapazität:</span>
        <input type="number" id="capacity-input" value="{{ capacity }}" min="1" max="200"
               style="width:60px;padding:4px 8px;font-size:12px;border-radius:4px;
                      border:1px solid rgba(255,255,255,0.15);background:rgba(0,0,0,0.3);color:#fafafa;"
               onchange="adjustCapacity(this.value)">
        <span style="color:#94a3b8;font-size:11px;">Slots</span>
      </div>
    </div>
  </div>

  <!-- Hinweis -->
  <div class="card" style="margin-bottom:14px;background:rgba(53,102,146,0.05);border-color:rgba(53,102,146,0.25);">
    <div class="card-body" style="padding:12px 16px;font-size:12px;color:#cbd5e1;line-height:1.5;">
      <strong style="color:#add5f4;">🔧 So funktioniert der Werkzeugplan</strong> &nbsp;
      Jede Zeile = ein Slot im Revolver / Magazin der Maschine. Wähle pro Slot ein Werkzeug aus dem
      Pool aus, hinterlege optional Längen- und Radius-Korrektur. Beim Senden eines NC-Programms wird
      automatisch geprüft, ob alle im Code aufgerufenen <code>T</code>-Nummern auch tatsächlich
      gerüstet sind.
    </div>
  </div>

  <!-- Slot-Tabelle -->
  <div class="card">
    <div class="card-header">
      <h3 style="margin:0;">Slot-Belegung</h3>
      <p class="sub" style="margin:2px 0 0;">
        Belegt: <strong style="color:#10b981;">{{ slots|selectattr('tool_id')|list|length }}</strong>
        / {{ capacity }} Slots
      </p>
    </div>

    <div class="card-body" style="padding:0;">
      <table class="data-table" style="width:100%;font-size:13px;">
        <thead>
          <tr>
            <th style="width:60px;text-align:center;">Slot</th>
            <th style="width:280px;">Werkzeug</th>
            <th style="width:100px;text-align:right;">T-Nr (aus Tool)</th>
            <th style="width:120px;">Ø / Material</th>
            <th style="width:120px;">Längenkorr. [mm]</th>
            <th style="width:120px;">Radiuskorr. [mm]</th>
            <th>Notiz</th>
            <th style="width:140px;text-align:center;">Aktion</th>
          </tr>
        </thead>
        <tbody id="slot-tbody">
          {% set slots_by_no = {} %}
          {% for s in slots %}{% set _ = slots_by_no.update({s.slot_no: s}) %}{% endfor %}

          {% for slot_no in range(1, capacity + 1) %}
            {% set s = slots_by_no.get(slot_no) %}
            <tr data-slot="{{ slot_no }}" class="slot-row {% if s and s.tool_id %}is-filled{% endif %}">
              <td style="text-align:center;font-family:monospace;font-weight:700;font-size:14px;color:#fbbf24;">
                {{ slot_no }}
              </td>
              <td>
                <select class="select tool-select" data-slot="{{ slot_no }}"
                        style="width:100%;font-size:12px;"
                        onchange="onSlotChange({{ slot_no }})">
                  <option value="">— leer —</option>
                  {% for p in pool %}
                  <option value="{{ p.id }}"
                          data-cnc-no="{{ p.cnc_t_no or '' }}"
                          data-diameter="{{ p.diameter_mm or '' }}"
                          data-material="{{ p.material or '' }}"
                          {% if s and s.tool_id == p.id %}selected{% endif %}>
                    {{ p.ident }} · {{ p.name }}
                    {%- if p.cnc_t_no %} [{{ p.cnc_t_no }}]{% endif %}
                  </option>
                  {% endfor %}
                </select>
              </td>
              <td style="text-align:right;font-family:monospace;color:#add5f4;" class="cell-tno">
                {% if s and s.cnc_t_no %}{{ s.cnc_t_no }}{% else %}—{% endif %}
              </td>
              <td class="cell-meta" style="font-size:11px;color:#cbd5e1;">
                {% if s %}
                  {% if s.diameter_mm %}Ø {{ '%.1f'|format(s.diameter_mm) }}{% endif %}
                  {% if s.material %}{% if s.diameter_mm %} · {% endif %}{{ s.material }}{% endif %}
                {% endif %}
              </td>
              <td>
                <input type="number" step="0.001" class="input length-off"
                       data-slot="{{ slot_no }}"
                       value="{{ '%.3f'|format(s.length_offset_mm) if s and s.length_offset_mm is not none else '' }}"
                       placeholder="—"
                       style="width:100%;font-size:12px;text-align:right;"
                       onchange="onSlotChange({{ slot_no }})">
              </td>
              <td>
                <input type="number" step="0.001" class="input radius-off"
                       data-slot="{{ slot_no }}"
                       value="{{ '%.3f'|format(s.radius_offset_mm) if s and s.radius_offset_mm is not none else '' }}"
                       placeholder="—"
                       style="width:100%;font-size:12px;text-align:right;"
                       onchange="onSlotChange({{ slot_no }})">
              </td>
              <td>
                <input type="text" class="input slot-notes"
                       data-slot="{{ slot_no }}"
                       value="{{ s.notes if s and s.notes else '' }}"
                       placeholder="—"
                       style="width:100%;font-size:12px;"
                       onchange="onSlotChange({{ slot_no }})">
              </td>
              <td style="text-align:center;">
                <span class="status-cell" id="status-{{ slot_no }}">
                  {% if s and s.tool_id %}<span style="color:#10b981;">✓ gerüstet</span>
                  {% else %}<span style="color:#64748b;">leer</span>{% endif %}
                </span>
                {% if s and s.tool_id %}
                <button type="button" onclick="clearSlot({{ slot_no }})"
                        class="btn btn-secondary btn-xs" style="margin-left:6px;font-size:10px;
                               color:#ef4444;border-color:rgba(239,68,68,0.3);">
                  ✕
                </button>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- Hilfetext am Ende -->
  <div class="card" style="margin-top:14px;background:rgba(245,158,11,0.05);border-color:rgba(245,158,11,0.25);">
    <div class="card-body" style="padding:12px 16px;font-size:11px;color:#cbd5e1;line-height:1.6;">
      <strong style="color:#fbbf24;">⚠ Konvention</strong><br>
      Die T-Nummer wird automatisch aus dem Werkzeug-Pool übernommen (Spalte „CNC-T-Nr" im
      <a href="/tools/cnc-mapping" style="color:#add5f4;">Tool-Mapping</a>).
      Längen- und Radius-Korrekturen sind <em>maschinen-spezifisch</em> — dasselbe Werkzeug kann auf
      verschiedenen Maschinen unterschiedliche Werte haben. Standardmäßig wird der Mittelwert aus dem
      Tool-Stammsatz übernommen, falls leer gelassen.
    </div>
  </div>

</div>

<style>
.slot-row.is-filled {
  background: rgba(16,185,129,0.04);
}
.slot-row:hover {
  background: rgba(255,255,255,0.03);
}
</style>

<script>
const MACHINE_ID = {{ machine.id }};

function onSlotChange(slotNo) {
  const row = document.querySelector('tr[data-slot="' + slotNo + '"]');
  const toolSelect = row.querySelector('.tool-select');
  const toolId = toolSelect.value;
  const lengthOff = row.querySelector('.length-off').value;
  const radiusOff = row.querySelector('.radius-off').value;
  const notes = row.querySelector('.slot-notes').value;
  const statusEl = document.getElementById('status-' + slotNo);

  // Spiegel: T-Nr und Ø/Material aus Selection-Option live in die Zelle ziehen
  const selOpt = toolSelect.selectedOptions[0];
  if (selOpt && selOpt.dataset.cncNo) {
    row.querySelector('.cell-tno').textContent = selOpt.dataset.cncNo;
  } else if (toolId === '') {
    row.querySelector('.cell-tno').textContent = '—';
  }
  if (selOpt) {
    const d = selOpt.dataset.diameter, m = selOpt.dataset.material;
    let meta = '';
    if (d) meta += 'Ø ' + parseFloat(d).toFixed(1);
    if (m) meta += (d ? ' · ' : '') + m;
    row.querySelector('.cell-meta').textContent = meta;
  }
  row.classList.toggle('is-filled', toolId !== '');

  if (toolId === '' && !lengthOff && !radiusOff && !notes) {
    // Slot komplett leer → entfernen
    clearSlot(slotNo, true);
    return;
  }

  statusEl.innerHTML = '<span style="color:#fbbf24;">⏳ speichere...</span>';

  const fd = new FormData();
  fd.append('tool_id', toolId);
  fd.append('length_offset_mm', lengthOff);
  fd.append('radius_offset_mm', radiusOff);
  fd.append('notes', notes);

  fetch('/api/cnc-machines/' + MACHINE_ID + '/slots/' + slotNo, {
    method: 'POST',
    body: fd
  })
  .then(r => r.json())
  .then(d => {
    if (d.ok) {
      if (toolId) {
        statusEl.innerHTML = '<span style="color:#10b981;">✓ gerüstet</span>';
      } else {
        statusEl.innerHTML = '<span style="color:#64748b;">leer</span>';
      }
    } else {
      statusEl.innerHTML = '<span style="color:#ef4444;" title="' + (d.error || 'Fehler') + '">✗ Fehler</span>';
    }
  })
  .catch(e => {
    statusEl.innerHTML = '<span style="color:#ef4444;">✗ Netzwerk</span>';
  });
}

function clearSlot(slotNo, silent) {
  if (!silent && !confirm('Slot ' + slotNo + ' wirklich leeren?')) return;
  const row = document.querySelector('tr[data-slot="' + slotNo + '"]');
  fetch('/api/cnc-machines/' + MACHINE_ID + '/slots/' + slotNo + '/clear', {method:'POST'})
    .then(r => r.json())
    .then(d => {
      if (d.ok) {
        row.querySelector('.tool-select').value = '';
        row.querySelector('.length-off').value = '';
        row.querySelector('.radius-off').value = '';
        row.querySelector('.slot-notes').value = '';
        row.querySelector('.cell-tno').textContent = '—';
        row.querySelector('.cell-meta').textContent = '';
        row.classList.remove('is-filled');
        document.getElementById('status-' + slotNo).innerHTML = '<span style="color:#64748b;">leer</span>';
      }
    });
}

function adjustCapacity(newCap) {
  // Persistiert nicht – nur Anzeige. Real wird capacity über cnc_machines.config_json gespeichert.
  // Für Reload mit neuer Anzeige: Reload mit ?capacity=N query
  const n = parseInt(newCap, 10) || 12;
  location.href = location.pathname + '?capacity=' + n;
}
</script>
{% endblock %}