{% extends "base.html" %}

{% block title %}CNC-Werkzeug-Mapping{% endblock %}
{% block heading %}CNC-Werkzeug-Mapping (T0101 – T9999){% endblock %}

{% block topbar_actions %}
  <a href="/tools" class="btn btn-secondary btn-sm">← Werkzeug-Liste</a>
  <a href="/programs" class="btn btn-secondary btn-sm">NC-Programme</a>
  <button type="button" class="btn btn-primary btn-sm" onclick="autoFill()">
    ⚡ Auto-Befüllen (T01, T02, …)
  </button>
{% endblock %}

{% block content %}

<div class="card" style="margin-bottom:14px;">
  <div class="card-body" style="padding:14px 18px;font-size:13px;line-height:1.55;color:var(--card-text-muted);">
    <strong style="color:var(--card-text);">Was ist das?</strong> &nbsp;
    Maschinen-Programme (G-Code) referenzieren Werkzeuge per <em>T-Nummer</em> &mdash;
    z.B. <code style="background:rgba(0,0,0,0.25);padding:1px 5px;border-radius:3px;">T0101</code>
    (Tool 01, Korrektur 01, FANUC-Dreh-Stil) oder
    <code style="background:rgba(0,0,0,0.25);padding:1px 5px;border-radius:3px;">T17</code>
    (Fräs-Stil). Ordne hier deinen Werkzeugen die T-Nummern zu, dann
    zeigt der NC-Editor beim Hover über T-Nummern automatisch den
    Werkzeug-Namen, Durchmesser, Material und Standort an.
    <br>
    <span style="color:#94a3b8;">Speichern erfolgt automatisch bei Verlassen des Feldes.</span>
  </div>
</div>

{# Gruppieren nach tool_type (akzeptiert beliebige Schreibweisen aus der DB) #}
{% set by_type = {} %}
{% for t in tools %}
  {% set raw_type = (t.tool_type or 'Sonstiges') %}
  {% set _ = by_type.setdefault(raw_type, []).append(t) %}
{% endfor %}

{# Display-Namen für bekannte Typen (case-insensitive Fallback) #}
{% set type_label_map = {
  'drehmeissel':  'Drehmeißel',
  'drehmeißel':   'Drehmeißel',
  'dreher':       'Drehmeißel',
  'fraeser':      'Fräser',
  'fräser':       'Fräser',
  'bohrer':       'Bohrer',
  'schleifkoerper':'Schleifkörper',
  'schleifkörper':'Schleifkörper',
  'gewindebohrer':'Gewindebohrer',
  'reibahle':     'Reibahle',
  'senker':       'Senker',
  'messwerkzeug': 'Messwerkzeug',
  'sonstiges':    'Sonstiges',
  'sonst':        'Sonstiges'
} %}

{% if tools|length == 0 %}
<div class="card">
  <div class="card-body" style="padding:40px;text-align:center;color:var(--card-text-muted);">
    Keine Werkzeuge im Bestand. <a href="/tools" style="color:#add5f4;">Lege zuerst Werkzeuge an &rarr;</a>
  </div>
</div>
{% endif %}

{% for tt, group in by_type|dictsort %}
  <div class="card" style="margin-bottom:14px;">
    <div class="card-header" style="display:flex;align-items:center;justify-content:space-between;">
      <div>
        <h3 style="margin:0;">{{ type_label_map.get(tt|lower, tt) }}</h3>
        <p class="sub" style="margin:2px 0 0;">{{ group|length }} Werkzeug{% if group|length != 1 %}e{% endif %}</p>
      </div>
      <span style="color:#64748b;font-size:11px;">
        zugeordnet:
        <strong style="color:#10b981;">
          {{ group | selectattr('cnc_t_no') | list | length }}
        </strong>
        / {{ group|length }}
      </span>
    </div>

    <div class="card-body" style="padding:0;">
      <table class="data-table" style="width:100%;font-size:13px;">
        <thead>
          <tr>
            <th style="width:140px;">CNC T-Nr</th>
            <th>Ident (intern)</th>
            <th>Bezeichnung</th>
            <th style="width:80px;">Ø</th>
            <th style="width:100px;">Material</th>
            <th>Hersteller</th>
            <th style="width:90px;text-align:center;">Status</th>
          </tr>
        </thead>
        <tbody>
          {% for t in group %}
          <tr data-tool-id="{{ t.id }}">
            <td>
              <input type="text"
                     class="input cnc-t-input"
                     value="{{ t.cnc_t_no or '' }}"
                     placeholder="z.B. T01"
                     data-tool-id="{{ t.id }}"
                     style="width:120px;font-family:monospace;font-weight:600;text-transform:uppercase;"
                     onblur="saveTNo(this)"
                     onkeydown="if(event.key==='Enter'){this.blur();focusNextInput(this);}">
            </td>
            <td style="font-family:monospace;font-size:11px;color:#94a3b8;">{{ t.ident }}</td>
            <td><strong>{{ t.name }}</strong></td>
            <td>{% if t.diameter_mm %}{{ "%.1f"|format(t.diameter_mm) }} mm{% else %}—{% endif %}</td>
            <td>{{ t.material or '—' }}</td>
            <td style="color:#cbd5e1;">{{ t.manufacturer or '—' }}</td>
            <td style="text-align:center;">
              <span class="save-status" id="status-{{ t.id }}">
                {% if t.cnc_t_no %}
                  <span style="color:#10b981;">✓</span>
                {% else %}
                  <span style="color:#64748b;font-size:11px;">—</span>
                {% endif %}
              </span>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
{% endfor %}

<div class="card" style="background:rgba(245,158,11,0.06);border-color:rgba(245,158,11,0.25);">
  <div class="card-body" style="padding:14px 18px;font-size:12px;color:#cbd5e1;line-height:1.6;">
    <strong style="color:#fbbf24;">💡 Tipps</strong>
    <ul style="margin:6px 0 0 18px;padding:0;">
      <li><strong>Drehmaschinen (FANUC-Stil):</strong> 4-stellig &mdash; <code>T0101</code> = Tool 01 mit Korrektur 01. Trage <code>T01</code> ein, der Editor matched automatisch <code>T0101</code>, <code>T0102</code>, …</li>
      <li><strong>Fräsmaschinen (ISO):</strong> 2-stellig &mdash; <code>T01</code> bis <code>T99</code> oder direkt <code>T17</code>.</li>
      <li><strong>Heidenhain Klartext:</strong> <code>TOOL CALL 17 Z S2500</code> &rarr; ebenfalls <code>T17</code> hier.</li>
      <li><strong>Auto-Befüllen:</strong> Klick oben rechts vergibt T01, T02, T03 … nach Reihenfolge (überschreibt nicht bereits zugeordnete).</li>
    </ul>
  </div>
</div>

<script>
function saveTNo(input) {
  const toolId = input.dataset.toolId;
  const value = input.value.trim().toUpperCase();
  const statusEl = document.getElementById('status-' + toolId);

  // Empty → don't save, just reset visual
  if (!value) {
    statusEl.innerHTML = '<span style="color:#64748b;font-size:11px;">—</span>';
    return;
  }

  // Quick format check
  let normalized = value;
  if (!normalized.startsWith('T')) normalized = 'T' + normalized;
  input.value = normalized;

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

  const fd = new FormData();
  fd.append('cnc_t_no', normalized);

  fetch('/api/tools/' + toolId + '/set-cnc-no', {
    method: 'POST',
    body: fd
  })
  .then(r => r.json())
  .then(d => {
    if (d.ok) {
      statusEl.innerHTML = '<span style="color:#10b981;">✓ ' + d.cnc_t_no + '</span>';
      setTimeout(() => {
        statusEl.innerHTML = '<span style="color:#10b981;">✓</span>';
      }, 1500);
    } else {
      statusEl.innerHTML = '<span style="color:#ef4444;" title="' + (d.error || 'Fehler') + '">✗</span>';
    }
  })
  .catch(e => {
    statusEl.innerHTML = '<span style="color:#ef4444;" title="' + e + '">✗</span>';
  });
}

function focusNextInput(currentInput) {
  const inputs = Array.from(document.querySelectorAll('.cnc-t-input'));
  const idx = inputs.indexOf(currentInput);
  if (idx >= 0 && idx + 1 < inputs.length) {
    inputs[idx + 1].focus();
    inputs[idx + 1].select();
  }
}

function autoFill() {
  const inputs = Array.from(document.querySelectorAll('.cnc-t-input'));
  // Find highest already used T-number, start above
  let used = new Set();
  let maxNum = 0;
  inputs.forEach(i => {
    const m = (i.value || '').match(/T(\d+)/i);
    if (m) {
      const n = parseInt(m[1], 10);
      used.add(n);
      if (n > maxNum) maxNum = n;
    }
  });

  const empty = inputs.filter(i => !i.value.trim());
  if (empty.length === 0) {
    alert('Alle Werkzeuge haben bereits eine T-Nummer. Lösche einzelne Felder, um neu zu vergeben.');
    return;
  }

  if (!confirm('Es werden ' + empty.length + ' leere Felder automatisch befüllt (T' + String(maxNum + 1).padStart(2, '0') + ', T' + String(maxNum + 2).padStart(2, '0') + ', …). Fortfahren?')) {
    return;
  }

  let n = maxNum + 1;
  empty.forEach((input, i) => {
    while (used.has(n)) n++;
    used.add(n);
    const tNo = 'T' + String(n).padStart(2, '0');
    input.value = tNo;
    n++;
    // Trigger save with small delay between requests
    setTimeout(() => saveTNo(input), i * 80);
  });
}
</script>

{% endblock %}