{% extends "base.html" %}
{% block title %}CC2 Bridge – Tag-Generator{% endblock %}
{% block heading %}Tags{% endblock %}
{% block head %}
<style>
.tg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; align-items: start; }
@media (max-width: 999px) { .tg { grid-template-columns: minmax(0, 1fr); } }
.picker { display: flex; flex-direction: column; gap: 12px; }
.srcmode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; background: var(--line); padding: 4px; border-radius: 12px; }
.srcmode button { border: 0; min-height: 36px; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 600; }
.srcmode button[aria-selected=true] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.newcard[hidden], .listcard[hidden] { display: none; }
.preview { background: var(--surface2); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.spools { max-height: 560px; overflow-y: auto; margin: 0 -16px -16px; border-top: 1px solid var(--line2); }
.spools .item { padding-left: 16px; padding-right: 16px; }
.spools .item[aria-current=true] { background: var(--accent-bg); }
.dot { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 99px; border: 1px solid var(--line); }
.chosen { display: none; }
.palette { display: flex; flex-wrap: wrap; gap: 8px; }
.palette button { width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 99px; border: 1px solid var(--line); }
.palette button[aria-pressed=true] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.cmd { background: var(--hero); color: var(--hero-ink); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cmd .label { color: var(--hero-muted); }
.cmd textarea { background: transparent; border: 0; color: #D6DCE5; padding: 0; min-height: 0; resize: none; line-height: 1.6; font-size: 12px; word-break: break-all;
  overflow: hidden; }
.cmd .acts { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.cmd .acts button { min-height: 48px; }
.cmd .primary { background: var(--hero-accent); border-color: var(--hero-accent); color: #0B1230; font-weight: 800; }
.cmd .ghost { background: transparent; border-color: var(--hero-line); color: var(--hero-ink); }
.cmd .check { font-size: 13px; color: var(--hero-muted); }
.qr { background: #fff; padding: 10px; border-radius: 12px; width: max-content; max-width: 100%; overflow: auto; }
details > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(45deg); margin: 0 4px 4px; }
details[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.radio { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; padding: 6px 0; }
.radio input { width: 20px; min-height: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 20px; }
.steps { margin: 0; padding-left: 20px; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 999px) {
  /* no scroll areas inside the page on phones: a swipe there would not move the page */
  .spools { max-height: none; overflow: visible; }
  .tg.picked .picker .listcard, .tg.picked .picker .newcard, .tg.picked .picker .srcmode { display: none; }
  .tg.picked .chosen { display: flex; }
}
</style>
{% endblock %}
{% block content %}
<div class="tg" id="tg">
  <div class="picker">
    <button class="card item chosen" id="chosen" onclick="unpick()" aria-label="Andere Spule wählen"></button>
    <div class="srcmode" role="tablist" aria-label="Spule">
      <button role="tab" id="m_list" aria-selected="true" onclick="setMode2('list')">Vorhandene Spule</button>
      <button role="tab" id="m_new" aria-selected="false" onclick="setMode2('new')">Neue Spule</button>
    </div>
    <div id="created"></div>
    <div class="card newcard stack" id="newcard" hidden>
      <div class="label">Neue Spule in Spoolman</div>
      <div class="field"><label for="nf_vendor_sel">Hersteller</label><select id="nf_vendor_sel"></select></div>
      <div class="field" id="nf_vendor_new" hidden><label for="nf_vendor">Name des neuen Herstellers</label><input id="nf_vendor" autocapitalize="characters" spellcheck="false"></div>
      <div class="field"><label for="nf_fil">Filament</label><select id="nf_fil"></select></div>
      <div class="small muted" id="nf_info"></div>
      <div class="stack" id="nf_new">
        <div class="fields" style="grid-template-columns:repeat(2,minmax(0,1fr))">
          <div class="field"><label for="nf_mat_sel">Material</label><select id="nf_mat_sel"></select></div>
          <div class="field" id="nf_mat_new" hidden><label for="nf_material">Anderes Material</label><input id="nf_material" autocapitalize="characters" spellcheck="false" placeholder="z. B. PLA Silk"></div>
          <div class="field" style="grid-column:1/-1"><label for="nf_name">Name (Material und Farbname, wie bei deinen anderen)</label><input id="nf_name"></div>
          <div class="field"><label for="nf_density">Dichte (g/cm³)</label><input id="nf_density" type="number" step="0.01" min="0.5" max="3" inputmode="decimal"></div>
          <div class="field"><label for="nf_diameter">Durchmesser (mm)</label><input id="nf_diameter" type="number" step="0.01" min="1" max="3.5" value="1.75" inputmode="decimal"></div>
          <div class="field"><label for="nf_extruder">Düse (°C)</label><input id="nf_extruder" type="number" min="150" max="450" inputmode="numeric"></div>
          <div class="field"><label for="nf_bed">Bett (°C)</label><input id="nf_bed" type="number" min="0" max="150" inputmode="numeric"></div>
        </div>
        <div class="small muted" id="nf_from"></div>
        <div class="field">
          <span class="flabel">Farbe</span>
          <div class="palette" id="nf_palette"></div>
          <div class="row" style="flex-wrap:nowrap;gap:8px;margin-top:4px">
            <input id="nf_color" maxlength="7" class="mono" aria-label="Farbe als Hex (RRGGBB)" autocapitalize="characters" spellcheck="false" placeholder="RRGGBB">
            <input type="color" id="nf_picker" aria-label="Farbe wählen">
          </div>
        </div>
        <div id="nf_dupe"></div>
      </div>
      <div class="fields" style="grid-template-columns:repeat(2,minmax(0,1fr))">
        <div class="field"><label for="nf_weight">Nettogewicht (g)</label><input id="nf_weight" type="number" min="1" max="20000" inputmode="numeric" value="1000"></div>
        <div class="field"><label for="nf_spool">Leergewicht Spule (g)</label><input id="nf_spool" type="number" min="0" max="5000" inputmode="numeric"></div>
        <div class="field"><label for="nf_price">Preis (optional)</label><input id="nf_price" type="number" min="0" step="0.01" inputmode="decimal"></div>
        <div class="field"><label for="nf_count">Anzahl Rollen</label><input id="nf_count" type="number" min="1" max="20" value="1" inputmode="numeric"></div>
      </div>
      <div class="preview" id="nf_preview"></div>
      <button class="primary" style="min-height:48px" id="nf_go" onclick="createSpools()">In Spoolman anlegen</button>
    </div>
    <div class="card listcard" id="listcard">
      <div class="label" style="margin-bottom:10px">Spoolman-Spule</div>
      <div class="row" style="flex-wrap:nowrap;margin-bottom:12px">
        <input id="filter" type="search" placeholder="Suchen: Label, Hersteller, Material …" aria-label="Spulen filtern">
      </div>
      <label class="row small muted" style="gap:10px;margin-bottom:12px"><span class="switch"><input type="checkbox" id="archived"><span></span></span>Archivierte zeigen</label>
      <div class="spools" id="spools"><p class="muted" style="padding:0 16px">Lade …</p></div>
    </div>
    <div class="banner err">In NFC Tools nie „Lock tag“ oder „Set password“ verwenden – der Tag wäre danach nicht mehr beschreibbar.</div>
  </div>

  <div class="stack" id="editor" style="display:none">
    <div class="card stack">
      <div><div class="label">Tag für</div><h2 id="edtitle" style="margin-top:2px">–</h2></div>
      <div class="fields" style="grid-template-columns:repeat(2,minmax(0,1fr))">
        <div class="field"><label for="material">Material</label><select id="material"></select></div>
        <div class="field"><label for="subtype">Untertyp</label><select id="subtype"></select></div>
        <div class="field"><label for="temp_min">Düse min (°C)</label><input id="temp_min" type="number" min="0" max="500" inputmode="numeric"></div>
        <div class="field"><label for="temp_max">Düse max (°C)</label><input id="temp_max" type="number" min="0" max="500" inputmode="numeric"></div>
      </div>
      <div class="field">
        <span class="flabel">Tag-Farbe</span>
        <div class="palette" id="palette"></div>
        <div class="row" style="flex-wrap:nowrap;gap:8px;margin-top:4px">
          <input id="color" maxlength="7" class="mono" aria-label="Farbe als Hex (RRGGBB)" autocapitalize="characters" spellcheck="false">
          <input type="color" id="picker" aria-label="Farbe wählen">
        </div>
        <div class="small" id="colorhint"></div>
      </div>
      <div class="field">
        <span class="flabel">Link auf dem Tag (fürs Handy; der Drucker liest ihn nicht)</span>
        <label class="radio"><input type="radio" name="url" value="bridge"><span>Spule in der Bridge – iPhone an den Tag halten, Seite der Spule öffnet sich<br>
          <code id="bridgeurl"></code> <span class="muted">(am Drucker noch nicht getestet)</span></span></label>
        <label class="radio"><input type="radio" name="url" value="elegoo" checked><span><code>https://www.elegoo.com</code> (verifizierte Vorlage)</span></label>
        <label class="radio"><input type="radio" name="url" value="spoolman"><span>Spule in Spoolman <span class="muted">(am Drucker noch nicht getestet)</span></span></label>
        <div class="small" id="urlhint"></div>
      </div>
      <details>
        <summary>Erweitert</summary>
        <div class="stack" style="padding-top:8px">
          <div class="field" style="max-width:200px"><label for="finish">Finish-Byte (hex)</label><input id="finish" maxlength="2" class="mono" value="FF"></div>
        </div>
      </details>
    </div>

    <div class="cmd">
      <div class="row" style="justify-content:space-between"><span class="label">Befehlskette für NFC Tools</span><span class="small" id="pages" style="color:var(--hero-muted)"></span></div>
      <div id="tagerror"></div>
      <textarea id="commands" rows="4" readonly aria-label="Befehlskette"></textarea>
      <div class="acts">
        <button class="primary" onclick="copyText($('commands').value)">Kopieren</button>
        <button class="ghost" id="qrbtn" aria-pressed="false" onclick="toggleQR()">QR-Code</button>
      </div>
      <div id="qr" class="qr" style="display:none"></div>
      <div class="check" id="check"></div>
    </div>

    <div class="card stack">
      <details>
        <summary>Dekodier-Vorschau</summary>
        <dl class="kv" id="decoded" style="padding-top:8px"></dl>
      </details>
      <ol class="steps">
        <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>
  </div>
</div>
{% endblock %}
{% block script %}
<script>
let META = null, SPOOLS = [], current = null, timer = null;

// starting values for a new filament, by base material: density g/cm³, nozzle, bed
const MATDEF = { PLA: [1.24, 210, 60], PETG: [1.27, 240, 75], ABS: [1.04, 250, 100], ASA: [1.07, 255, 100], TPU: [1.21, 225, 50],
  PA: [1.14, 275, 90], PC: [1.20, 270, 110], PVA: [1.23, 200, 60], HIPS: [1.04, 240, 100], PP: [0.90, 230, 85], CPE: [1.25, 250, 80],
  PPA: [1.20, 295, 100], PPS: [1.35, 315, 110], BVOH: [1.14, 200, 60], EVA: [0.95, 200, 50] };
let CAT = null, MODE = 'list', SETTINGS = {}, BRIDGE = location.origin;

function setMode2(m) {
  MODE = m;
  $('m_list').setAttribute('aria-selected', String(m === 'list'));
  $('m_new').setAttribute('aria-selected', String(m === 'new'));
  $('listcard').hidden = m !== 'list';
  $('newcard').hidden = m !== 'new';
  if (m === 'new' && !CAT) loadCatalog();
}

async function loadCatalog() {
  $('nf_preview').textContent = 'Lade Spoolman …';
  try { CAT = await api('GET', '/api/spoolman/catalog'); }
  catch (e) { $('nf_preview').innerHTML = `<span style="color:var(--err)">${esc(e.message)}</span>`; return; }
  $('nf_vendor_sel').innerHTML = CAT.vendors.map((v) => `<option value="${v.id}">${esc(v.name)}</option>`).join('')
    + '<option value="new">Neuer Hersteller …</option>';
  // materials you already use first, then the other Elegoo types
  const used = [...new Set(CAT.filaments.map((f) => f.material).filter(Boolean))].sort();
  const more = META.subtypes.map((t) => t.name).filter((n) => !used.some((u) => u.toUpperCase() === n.toUpperCase()));
  $('nf_mat_sel').innerHTML = `<optgroup label="In Spoolman verwendet">${used.map((m) => `<option>${esc(m)}</option>`).join('')}</optgroup>`
    + `<optgroup label="Weitere">${more.map((m) => `<option>${esc(m)}</option>`).join('')}</optgroup>`
    + '<option value="new">Anderes …</option>';
  vendorChanged();
}

function vendorSel() {
  const v = $('nf_vendor_sel').value;
  return v === 'new' ? null : CAT.vendors.find((x) => String(x.id) === v);
}
function vendorName() { const v = vendorSel(); return v ? v.name : $('nf_vendor').value.trim(); }
function materialName() { return $('nf_mat_sel').value === 'new' ? $('nf_material').value.trim() : $('nf_mat_sel').value; }

function baseMaterial(m) {
  const u = String(m || '').toUpperCase();
  return Object.keys(MATDEF).sort((a, b) => b.length - a.length).find((k) => u.replace(/^RAPID\s*/, '').startsWith(k)) || null;
}

function fil() { return CAT && CAT.filaments.find((f) => String(f.id) === $('nf_fil').value); }

function mostCommon(values) {
  const n = {};
  for (const v of values) if (v != null) n[v] = (n[v] || 0) + 1;
  const best = Object.entries(n).sort((a, b) => b[1] - a[1])[0];
  return best ? Number(best[0]) : null;
}

function vendorChanged() {
  const v = vendorSel();
  $('nf_vendor_new').hidden = !!v;
  const own = v ? CAT.filaments.filter((f) => f.vendor === v.name) : [];
  $('nf_fil').innerHTML = '<option value="">Neues Filament …</option>' + own.map((f) =>
    `<option value="${f.id}">${esc(f.name)}${f.color ? ' · #' + f.color : ''} (${f.spools} vorhanden)</option>`).join('');
  // weights as this vendor's other filaments have them
  const w = mostCommon(own.map((f) => f.weight)), sw = mostCommon(own.map((f) => f.spool_weight)) ?? (v ? v.empty_spool_weight : null);
  if (w) $('nf_weight').value = w;
  $('nf_spool').value = sw ?? '';
  newFilamentChanged();
}

function newFilamentChanged() {
  const f = fil();
  $('nf_new').style.display = f ? 'none' : '';
  if (f) {
    $('nf_info').innerHTML = `Weitere Rolle von: ${f.color ? `<span class="swatch" style="background:#${f.color}"></span> ` : ''}${esc(f.material)} · ${f.weight ? f.weight + ' g' : 'Gewicht?'}${f.density ? ' · ' + f.density + ' g/cm³' : ''}${f.extruder_temp ? ' · ' + f.extruder_temp + ' °C' : ''}`;
    if (f.weight) $('nf_weight').value = f.weight;
    $('nf_spool').value = f.spool_weight ?? '';
    $('nf_price').value = f.price ?? '';
  } else {
    $('nf_info').textContent = '';
    materialChanged();
  }
  preview();
}

function materialChanged() {
  $('nf_mat_new').hidden = $('nf_mat_sel').value !== 'new';
  const m = materialName();
  if (!m) { preview(); return; }
  // like the filaments you already have with this material (this vendor's first), else typical values
  const same = CAT.filaments.filter((f) => f.material.toUpperCase() === m.toUpperCase());
  const ref = same.find((f) => f.vendor === vendorName()) || same[0];
  if (ref) {
    $('nf_density').value = ref.density ?? ''; $('nf_diameter').value = ref.diameter ?? 1.75;
    $('nf_extruder').value = ref.extruder_temp ?? ''; $('nf_bed').value = ref.bed_temp ?? '';
    $('nf_from').textContent = `Werte übernommen von ${ref.vendor} ${ref.name}.`;
  } else {
    const d = MATDEF[baseMaterial(m)];
    if (d) {
      let density = d[0];
      if (/-(CF|GF)\b/i.test(m)) density = +(density + 0.05).toFixed(2);
      $('nf_density').value = density; $('nf_extruder').value = d[1]; $('nf_bed').value = d[2];
      $('nf_from').textContent = 'Typische Werte für ' + m + ' – bitte mit dem Etikett der Rolle vergleichen.';
    } else $('nf_from').textContent = '';
  }
  const name = $('nf_name').value.trim();
  if (!name || (nameAuto && name === nameAuto)) { nameAuto = m + ' '; $('nf_name').value = nameAuto; }
  preview();
}
let nameAuto = '';

function setNewColor(c) {
  c = c.replace('#', '').toUpperCase();
  $('nf_color').value = c;
  if (/^[0-9A-F]{6}$/.test(c)) $('nf_picker').value = '#' + c;
  document.querySelectorAll('#nf_palette button').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.c.toUpperCase() === c)));
  preview();
}

function labelFor(vendor, id) { return (String(vendor).toUpperCase().replace(/[^A-Z0-9]/g, '') || 'SPOOL') + String(id).padStart(3, '0'); }

function duplicate() {
  if (fil() || !vendorSel()) return null;
  const name = $('nf_name').value.trim().toUpperCase(), color = $('nf_color').value.replace('#', '').toUpperCase();
  const m = materialName().toUpperCase(), own = CAT.filaments.filter((f) => f.vendor === vendorSel().name);
  return own.find((f) => name && f.name.toUpperCase() === name)
    || own.find((f) => color && f.color === color && f.material.toUpperCase() === m) || null;
}

function useFilament(id) { $('nf_fil').value = String(id); newFilamentChanged(); }

function preview() {
  if (!CAT) return;
  const dupe = duplicate();
  $('nf_dupe').innerHTML = dupe ? `<div class="banner warn"><span style="flex:1 1 200px">Gibt es bei ${esc(dupe.vendor)} schon: ${esc(dupe.name)}${dupe.color ? ' (#' + dupe.color + ')' : ''}.</span>
    <button onclick="useFilament(${dupe.id})">Dieses verwenden</button></div>` : '';
  const vendor = vendorName() || '?';
  const n = Math.max(1, Math.min(20, Number($('nf_count').value) || 1));
  const first = labelFor(vendor, CAT.next_id), last = labelFor(vendor, CAT.next_id + n - 1);
  $('nf_preview').innerHTML = `Wird angelegt als <b class="mono">${esc(first)}</b>${n > 1 ? ` bis <b class="mono">${esc(last)}</b>` : ''}, Ort „Lager“.
    <span class="muted">Die ID vergibt Spoolman (voraussichtlich ${CAT.next_id}${n > 1 ? '–' + (CAT.next_id + n - 1) : ''}); das Label folgt ihr.</span>
    ${!vendorSel() && vendor !== '?' ? `<br><span class="muted">Neuer Hersteller „${esc(vendor)}“ wird ebenfalls angelegt.</span>` : ''}`;
}

async function createSpools() {
  const f = fil();
  const body = { count: $('nf_count').value, weight: $('nf_weight').value, spool_weight: $('nf_spool').value, price: $('nf_price').value };
  if (f) body.filament_id = f.id;
  else Object.assign(body, { vendor: vendorName(), name: $('nf_name').value, material: materialName(),
    color: $('nf_color').value, density: $('nf_density').value, diameter: $('nf_diameter').value,
    extruder_temp: $('nf_extruder').value, bed_temp: $('nf_bed').value });
  const n = Number(body.count) || 1;
  if (!confirm(`${n} neue Spule${n > 1 ? 'n' : ''} in Spoolman anlegen?`)) return;
  $('nf_go').disabled = true;
  try {
    const r = await api('POST', '/api/spoolman/create', body);
    const labels = r.spools.map((x) => x.label);
    toast('Angelegt: ' + labels.join(', '));
    CAT = null;
    $('created').innerHTML = `<div class="banner ok">In Spoolman angelegt: ${labels.map(esc).join(', ')}.${labels.length > 1 ? ' Für jede Rolle einen eigenen Tag schreiben.' : ''}</div>`;
    setMode2('list');
    $('filter').value = labels.length > 1 ? '' : labels[0];
    await loadSpools();
    pick(r.spools[0].id);
  } catch (e) { toast(e.message); }
  finally { $('nf_go').disabled = false; }
}

async function init() {
  META = await api('GET', '/api/materials');
  $('nf_palette').innerHTML = META.palette.map((c) =>
    `<button type="button" aria-label="Farbe #${c}" aria-pressed="false" data-c="${c}" onclick="setNewColor('${c}')" style="background:#${c}"></button>`).join('');
  $('material').innerHTML = Object.keys(META.materials).map((m) => `<option>${m}</option>`).join('');
  $('palette').innerHTML = META.palette.map((c) =>
    `<button type="button" aria-label="Farbe #${c}" aria-pressed="false" data-c="${c}" onclick="setColor('${c}')" style="background:#${c}"></button>`).join('');
  try { SETTINGS = await api('GET', '/api/settings'); } catch (e) { SETTINGS = {}; }
  BRIDGE = SETTINGS.public_url || location.origin;
  $('urlhint').innerHTML = SETTINGS.public_url ? ''
    : `<span style="color:var(--warn)">Keine Adresse der Bridge eingestellt; verwendet wird ${esc(location.origin)}. Unter <a href="/settings">Einstellungen</a> festlegen.</span>`;
  try {
    const saved = localStorage.getItem('tagurl');
    const el = saved && document.querySelector(`input[name=url][value=${saved}]`);
    if (el) el.checked = true;
  } catch (e) {}
  await loadSpools();
  const want = Number(new URLSearchParams(location.search).get('spool'));
  if (want && SPOOLS.some((x) => x.id === want)) pick(want);
}

function tagUrl() {
  const v = document.querySelector('input[name=url]:checked').value;
  if (v === 'bridge') return `${BRIDGE}/s/${current.id}`;
  if (v === 'spoolman') return current.spoolman_url;
  return null;
}

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

function spoolLine(s) {
  return [s.vendor, s.material].filter(Boolean).join(' ') + (s.remaining != null ? ` · ${Math.round(s.remaining)} g` : '') + (s.location ? ` · ${s.location}` : '');
}

function renderSpools() {
  const q = $('filter').value.toLowerCase();
  const rows = SPOOLS.filter((s) => !q || [s.label, s.vendor, s.material, s.name, s.location, s.id].join(' ').toLowerCase().includes(q));
  $('spools').innerHTML = rows.map((s) => `<button class="item" onclick="pick(${s.id})" aria-current="${current && current.id === s.id}">
    <span class="dot" style="background:${s.color ? '#' + s.color : 'transparent'}"></span>
    <span class="grow"><span class="title" style="display:block">${esc(s.label)} <span class="muted small" style="font-weight:500">#${s.id}</span></span>
    <span class="sub" style="display:block">${esc(spoolLine(s))}</span></span>${CHEV}</button>`).join('')
    || '<p class="muted" style="padding:0 16px">Keine Spulen</p>';
}

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;
  markPalette();
  schedule();
}
function markPalette() {
  const c = $('color').value.replace('#', '').toUpperCase();
  document.querySelectorAll('#palette button').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.c.toUpperCase() === c)));
}

function pick(id) {
  current = SPOOLS.find((s) => s.id === id);
  const sg = current.suggest;
  $('edtitle').textContent = `${current.label} (Spoolman #${current.id})`;
  $('chosen').innerHTML = `<span class="dot" style="background:${current.color ? '#' + current.color : 'transparent'}"></span>
    <span class="grow"><span class="title" style="display:block">${esc(current.label)} <span class="muted small" style="font-weight:500">#${current.id}</span></span>
    <span class="sub" style="display:block">${esc(spoolLine(current))}</span></span>
    <svg class="chev" viewBox="0 0 14 8" style="width:14px;height:8px;flex-basis:14px" aria-hidden="true"><path d="M1 1l6 6 6-6"/></svg>`;
  $('bridgeurl').textContent = `${BRIDGE}/s/${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 ? '<span class="muted">Spoolman-Spule hat keine Farbe.</span>'
    : current.color.toUpperCase() === String(sg.color).toUpperCase()
      ? `<span class="muted">Spoolman-Farbe <span class="mono">#${current.color}</span> passt zur Display-Palette.</span>`
      : `<span style="color:var(--warn)">Spoolman hat <span class="swatch" style="background:#${current.color}"></span> <span class="mono">#${current.color}</span>, am Display nächste Farbe <span class="mono">#${sg.color}</span>.</span>`;
  setColor(sg.color);
  $('tg').classList.add('picked');
  $('editor').style.display = '';
  renderSpools();
  $('editor').scrollIntoView({ behavior: 'smooth', block: 'start' });
  generate();
}
function unpick() { $('tg').classList.remove('picked'); $('filter').focus(); }

function fitCommands() {
  const ta = $('commands');
  ta.style.height = 'auto';
  ta.style.height = ta.scrollHeight + 'px';
}
window.addEventListener('resize', fitCommands);

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

function toggleQR() {
  const on = $('qr').style.display === 'none';
  $('qr').style.display = on ? '' : 'none';
  $('qrbtn').setAttribute('aria-pressed', String(on));
}

async function generate() {
  if (!current) return;
  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: tagUrl(),
  };
  try {
    const r = await api('POST', '/api/tag', body);
    $('tagerror').innerHTML = '';
    $('commands').value = r.commands;
    fitCommands();
    $('pages').textContent = r.commands.split(',').length + ' Seiten';
    $('qr').innerHTML = r.qr_svg;
    const d = r.decoded;
    $('check').textContent = `Prüfung: Spule ${d.spool_id} · ${d.subtype_name} · #${d.color} · ${d.temp_min}–${d.temp_max} °C`;
    $('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 = ''; $('check').textContent = ''; $('pages').textContent = '';
  }
}

$('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; markPalette(); schedule(); });
$('picker').addEventListener('input', () => setColor($('picker').value));
document.querySelectorAll('input[name=url]').forEach((el) => el.addEventListener('change', () => {
  try { localStorage.setItem('tagurl', el.value); } catch (e) {}
  schedule();
}));
$('filter').addEventListener('input', renderSpools);
$('nf_fil').addEventListener('change', newFilamentChanged);
$('nf_vendor_sel').addEventListener('change', vendorChanged);
$('nf_mat_sel').addEventListener('change', materialChanged);
$('nf_material').addEventListener('change', materialChanged);
$('nf_vendor').addEventListener('input', preview);
$('nf_color').addEventListener('input', () => setNewColor($('nf_color').value));
$('nf_picker').addEventListener('input', () => setNewColor($('nf_picker').value));
for (const id of ['nf_count', 'nf_name']) $(id).addEventListener('input', preview);
$('archived').addEventListener('change', loadSpools);
init();
</script>
{% endblock %}