{% extends "base.html" %}
{% block title %}CC2 Bridge – Tag-Generator{% endblock %}
{% block content %}
<div class="banner err"><b>Wichtig:</b> In NFC Tools nie „Lock tag“ oder „Set password“ verwenden – der Tag wäre danach nicht mehr beschreibbar.</div>
<h2>Spoolman-Spulen</h2>
<div class="panel">
  <div class="row" style="margin-bottom:10px">
    <div class="field" style="margin:0"><label for="filter">Filter</label><input id="filter" placeholder="Label, Hersteller, Material …"></div>
    <label style="flex:0 0 auto;margin:0 0 8px"><input type="checkbox" id="archived" style="width:auto"> archivierte zeigen</label>
  </div>
  <div class="table-wrap" style="max-height:340px;overflow-y:auto">
    <table><thead><tr><th>ID</th><th>Label</th><th>Hersteller</th><th>Material</th><th>Farbe</th><th>Rest</th><th>Ort</th><th></th></tr></thead>
    <tbody id="spools"><tr><td colspan="8" class="muted">Lade …</td></tr></tbody></table>
  </div>
</div>

<div id="editor" style="display:none">
  <h2 id="edtitle">Tag</h2>
  <div class="panel">
    <div class="row">
      <div class="field"><label for="material">Elegoo-Material</label><select id="material"></select></div>
      <div class="field"><label for="subtype">Untertyp (wählt das Slicer-Profil)</label><select id="subtype"></select></div>
    </div>
    <div class="row">
      <div class="field"><label for="color">Tag-Farbe (RRGGBB)</label>
        <div class="row" style="gap:6px;flex-wrap:nowrap"><input id="color" maxlength="7" class="mono"><input type="color" id="picker" style="width:48px;padding:2px"></div></div>
      <div class="field"><label for="temp_min">Düse min (°C)</label><input id="temp_min" type="number" min="0" max="500"></div>
      <div class="field"><label for="temp_max">Düse max (°C)</label><input id="temp_max" type="number" min="0" max="500"></div>
      <div class="field"><label for="finish">Finish-Byte (hex)</label><input id="finish" maxlength="2" class="mono" value="FF"></div>
    </div>
    <div class="field"><label>Display-Palette</label><div id="palette" style="display:flex;flex-wrap:wrap;gap:4px"></div>
      <div class="small muted" id="colorhint" style="margin-top:4px"></div></div>
    <div class="field"><label>URL auf dem Tag (nur fürs Handy, der Drucker ignoriert sie)</label>
      <label style="color:var(--text)"><input type="radio" name="url" value="elegoo" checked style="width:auto"> <code>https://www.elegoo.com</code> (verifizierte Vorlage)</label>
      <label style="color:var(--text)"><input type="radio" name="url" value="spoolman" style="width:auto"> Link auf die Spule in Spoolman <span class="muted">(nicht am Drucker getestet)</span></label>
    </div>
  </div>

  <h2>Befehlskette für NFC Tools</h2>
  <div class="panel">
    <div id="tagerror"></div>
    <textarea id="commands" rows="5" readonly></textarea>
    <div class="row" style="margin-top:8px">
      <button class="primary" onclick="copyText($('commands').value)">Kopieren</button>
      <label style="margin:0;color:var(--text)"><input type="checkbox" id="showqr" style="width:auto"> QR-Code zeigen</label>
    </div>
    <div id="qr" style="display:none;margin-top:10px;background:#fff;padding:8px;border-radius:6px;width:max-content;max-width:100%;overflow:auto"></div>
    <ol class="small muted" style="margin:14px 0 0;padding-left:20px">
      <li>NFC Tools → <i>Other</i> → <i>Advanced NFC commands</i>.</li>
      <li>Befehlskette einfügen, leeren NTAG213/215/216 ans Handy halten, ausführen.</li>
      <li>Spule in die Canvas legen und den Scan am Display bestätigen.</li>
    </ol>
  </div>

  <h2>Dekodier-Vorschau</h2>
  <div class="panel"><dl class="kv" id="decoded"></dl></div>
</div>
{% endblock %}
{% block script %}
<script>
let META = null, SPOOLS = [], current = null, timer = null, spoolmanBase = '';

async function init() {
  META = await api('GET', '/api/materials');
  $('material').innerHTML = Object.keys(META.materials).map((m) => `<option>${m}</option>`).join('');
  $('palette').innerHTML = META.palette.map((c) =>
    `<button type="button" title="#${c}" onclick="setColor('${c}')" style="width:26px;height:26px;padding:0;background:#${c}"></button>`).join('');
  await loadSpools();
}

async function loadSpools() {
  try {
    const r = await api('GET', '/api/spoolman/spools' + ($('archived').checked ? '?archived=true' : ''));
    SPOOLS = r.spools;
  } catch (e) {
    $('spools').innerHTML = `<tr><td colspan="8"><div class="banner err" style="margin:0">${esc(e.message)}</div></td></tr>`;
    return;
  }
  renderSpools();
}

function renderSpools() {
  const q = $('filter').value.toLowerCase();
  const rows = SPOOLS.filter((s) => !q || [s.label, s.vendor, s.material, s.name, s.location].join(' ').toLowerCase().includes(q));
  $('spools').innerHTML = rows.map((s) => `<tr>
    <td>${s.id}</td><td><b>${esc(s.label)}</b></td><td>${esc(s.vendor)}</td><td>${esc(s.material)} <span class="muted small">${esc(s.name)}</span></td>
    <td>${s.color ? `<span class="swatch" style="background:#${s.color}"></span> <span class="mono small">${s.color}</span>` : '–'}</td>
    <td>${s.remaining != null ? Math.round(s.remaining) + ' g' : '–'}</td><td class="small">${esc(s.location)}</td>
    <td><button onclick="pick(${s.id})">Tag erstellen</button></td></tr>`).join('')
    || '<tr><td colspan="8" class="muted">Keine Spulen</td></tr>';
}

function fillSubtypes(material, selected) {
  const list = META.subtypes.filter((s) => s.material === material);
  $('subtype').innerHTML = list.map((s) =>
    `<option value="${s.code}" ${s.code === selected ? 'selected' : ''}>${esc(s.name)} (0x${s.code.toString(16).padStart(4, '0').toUpperCase()})${s.hidden ? ' – am CC2 ausgeblendet' : ''}</option>`).join('');
}

function setColor(c) {
  c = c.replace('#', '').toUpperCase();
  $('color').value = c;
  if (/^[0-9A-F]{6}$/.test(c)) $('picker').value = '#' + c;
  schedule();
}

function pick(id) {
  current = SPOOLS.find((s) => s.id === id);
  const sg = current.suggest;
  $('edtitle').textContent = `Tag für ${current.label} (Spoolman #${current.id})`;
  $('material').value = sg.material;
  fillSubtypes(sg.material, sg.subtype);
  $('temp_min').value = sg.temp_min; $('temp_max').value = sg.temp_max;
  $('finish').value = 'FF';
  $('colorhint').innerHTML = current.color
    ? `Spoolman-Farbe <span class="swatch" style="background:#${current.color}"></span> <span class="mono">${current.color}</span> → Vorschlag <span class="mono">${sg.color}</span>`
    : 'Spoolman-Spule hat keine Farbe.';
  setColor(sg.color);
  $('editor').style.display = '';
  $('editor').scrollIntoView({ behavior: 'smooth' });
  generate();
}

function schedule() { clearTimeout(timer); timer = setTimeout(generate, 250); }

async function generate() {
  if (!current) return;
  const useSpoolman = document.querySelector('input[name=url]:checked').value === 'spoolman';
  const body = {
    spool_id: current.id, material: $('material').value, subtype: Number($('subtype').value),
    color: $('color').value, temp_min: Number($('temp_min').value), temp_max: Number($('temp_max').value),
    finish: parseInt($('finish').value || 'FF', 16), diameter: current.diameter || 1.75,
    url: useSpoolman ? current.spoolman_url : null,
  };
  try {
    const r = await api('POST', '/api/tag', body);
    $('tagerror').innerHTML = '';
    $('commands').value = r.commands;
    $('qr').innerHTML = r.qr_svg;
    const d = r.decoded;
    $('decoded').innerHTML = [
      ['Spoolman-ID', `${d.spool_id} <span class="muted small">(weight ${d.weight})</span>`],
      ['Hersteller', `${esc(d.manufacturer)} <span class="muted small">(Drucker zeigt ELEGOO)</span>`],
      ['Material', esc(d.material)],
      ['Untertyp', `${esc(d.subtype_name)} <span class="mono small">0x${d.subtype.toString(16).padStart(4, '0').toUpperCase()}</span>`],
      ['Farbe', `<span class="swatch" style="background:#${d.color}"></span> <span class="mono">${d.color}</span>, Finish ${d.finish.toString(16).toUpperCase()}`],
      ['Düse', `${d.temp_min}–${d.temp_max} °C`],
      ['Durchmesser', `${d.diameter.toFixed(2)} mm`],
      ['URL', esc(d.url || '–')],
    ].map(([k, v]) => `<dt>${k}</dt><dd>${v}</dd>`).join('');
  } catch (e) {
    $('tagerror').innerHTML = `<div class="banner err">${esc(e.message)}</div>`;
    $('commands').value = '';
  }
}

$('material').addEventListener('change', () => {
  const m = $('material').value;
  fillSubtypes(m, META.subtypes.find((s) => s.material === m).code);
  const t = META.materials[m].temps; $('temp_min').value = t[0]; $('temp_max').value = t[1];
  schedule();
});
for (const id of ['subtype', 'temp_min', 'temp_max', 'finish']) $(id).addEventListener('input', schedule);
$('color').addEventListener('input', () => { const c = $('color').value.replace('#', ''); if (/^[0-9a-f]{6}$/i.test(c)) $('picker').value = '#' + c; schedule(); });
$('picker').addEventListener('input', () => setColor($('picker').value));
document.querySelectorAll('input[name=url]').forEach((el) => el.addEventListener('change', schedule));
$('showqr').addEventListener('change', () => { $('qr').style.display = $('showqr').checked ? '' : 'none'; });
$('filter').addEventListener('input', renderSpools);
$('archived').addEventListener('change', loadSpools);
init();
</script>
{% endblock %}