{% extends "base.html" %}
{% block title %}CC2 Bridge – Tag-Generator{% endblock %}
{% block heading %}Tag-Generator{% 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; }
.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 { 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="card 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>
      <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 class="field">
            <span class="flabel">URL auf dem Tag (nur fürs Handy, der Drucker ignoriert sie)</span>
            <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>Link auf die Spule in Spoolman <span class="muted">(nicht am Drucker getestet)</span></span></label>
          </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;

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" aria-label="Farbe #${c}" aria-pressed="false" data-c="${c}" onclick="setColor('${c}')" style="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 = `<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>`;
  $('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 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;
    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', schedule));
$('filter').addEventListener('input', renderSpools);
$('archived').addEventListener('change', loadSpools);
init();
</script>
{% endblock %}