{% extends "base.html" %}
{% macro chosen_icon() -%}
<span class="qchose" title="You picked this card">
  <svg viewBox="0 0 16 16" role="img" aria-label="picked by you">
    <circle cx="8" cy="5.2" r="2.7"/><path d="M2.7 14c0-3 2.4-4.7 5.3-4.7s5.3 1.7 5.3 4.7"/>
  </svg>
</span>
{%- endmacro %}
{% block title %}Import scans · foilstack{% endblock %}
{% block status %}{% if active %}import running · {{ active.processed }}/{{ active.total }}{% elif counts.all %}{{ counts.all }} scans waiting · {{ counts.nomatch }} with no match{% else %}queue clear · drop some scans to begin{% endif %}{% endblock %}

{% block screen %}
<div class="split">

  <div class="pane-import">
    <div class="pane-head">
      <b>Import scans</b>
      <span class="bar-note">jpg, png, tif · or a .zip of them</span>
    </div>

    <form id="form">
      <input type="file" id="file" name="archive" multiple
             accept=".zip,.jpg,.jpeg,.png,.tif,.tiff,.webp" hidden>
      <div class="drop" id="drop" {% if active %}hidden{% endif %}>
        <div class="drop-card"></div>
        <div class="drop-title">Drop your card scans here</div>
        <div class="drop-sub">one image per card, or a .zip of them<br>
          up to {{ "{:,}".format(max_images) }} scans · {{ max_mb }} MB per upload</div>
        <button class="btn-choose" type="button" id="choose">Choose file</button>
      </div>
    </form>

    <div class="filechip" id="filechip" {% if not active %}hidden{% endif %}>
      <div class="filechip-row">
        <div class="filechip-thumb"></div>
        <div class="filechip-body">
          <div class="filechip-name" id="fname">{{ active.filename if active }}</div>
          <div class="filechip-meta" id="fmeta">{{ 'matching…' if active }}</div>
        </div>
        <button class="btn-quiet" type="button" id="clear">remove</button>
      </div>
      <div class="track"><i id="bar"></i></div>
      <div class="track-labels">
        <span id="stage">{{ 'queued' if active else 'ready' }}</span>
        <span id="pct">0%</span>
      </div>
    </div>

    <div class="tiles-3" id="stats" {% if not active %}hidden{% endif %}>
      <div class="tile-sm"><div class="k">scans</div><div class="v" id="t-scans">{{ active.total if active else 0 }}</div></div>
      <div class="tile-sm"><div class="k">matched</div><div class="v" id="t-matched">{{ active.processed if active else 0 }}</div></div>
      <div class="tile-sm"><div class="k">waiting</div><div class="v" id="t-review">{{ counts.all }}</div></div>
    </div>

    <div style="display: flex; gap: 8px;" id="actions" {% if not active %}hidden{% endif %}>
      <button class="btn btn-primary btn-tall btn-block" type="button" id="go">Start import</button>
      <button class="btn btn-tall" type="button" id="cancel">Cancel</button>
    </div>

    <div class="settings">
      <div class="sec-label">Match settings</div>
      <div class="settings-row">
        <div>
          <div class="field-label">Default condition</div>
          <div class="chip-set" id="cond-set">
            {% for c in conditions %}
            <button class="chip {{ 'on' if c == 'NM' }}" type="button" data-cond="{{ c }}">{{ c }}</button>
            {% endfor %}
          </div>
        </div>
        <div>
          <div class="field-label">Default finish</div>
          <div class="chip-set" id="finish-set">
            <button class="chip on" type="button" data-finish="nonfoil">Non-foil</button>
            <button class="chip" type="button" data-finish="foil">Foil</button>
          </div>
        </div>
        <div>
          <div class="field-label">Auto-accept above</div>
          <div class="chip-set" id="thr-set">
            {% for t in thresholds %}
            <button class="chip {{ 'on' if t == auto_accept }}" type="button" data-thr="{{ t }}">{{ "%.0f"|format(t * 100) }}%</button>
            {% endfor %}
          </div>
        </div>
      </div>
      <details class="why">
        <summary>Why finish and auto-accept work this way</summary>
        <p class="setting-note">
          A foil and a non-foil printing use the same artwork, so a scan cannot
          tell them apart. That is why you set the finish yourself. It is worth
          getting right: a foil often sells for several times what the plain
          version does.
        </p>
        <p class="setting-note">
          A scan skips the review queue only when all three of these are true.
        </p>
        <ul class="setting-note setting-list">
          <li>It scores above the threshold you picked.</li>
          <li>It beats the second-best match by a clear margin.</li>
          <li>If that second-best is the same card in another printing, the two
            prices are close.</li>
        </ul>
        <p class="setting-note">
          Reprints share artwork, so a high score on its own proves nothing. The
          threshold is saved with each import, so you can always see later why a
          scan was accepted.
        </p>
      </details>
      <div class="matcher">
        <div>matcher: dinov3 image embeddings · nearest neighbour</div>
        <div class="strong">scans kept on disk · never uploaded off-host</div>
      </div>
    </div>

    {% if jobs %}
    <div class="settings">
      <div class="sec-label">Recent imports</div>
      <table class="dtable compact">
        <thead>
          <tr><th>WHEN</th><th>FILE</th><th>STATUS</th><th class="r">SCANS</th></tr>
        </thead>
        <tbody>
          {% for job in jobs %}
          <tr>
            <td class="faint"><time data-local datetime="{{ job.created_at.isoformat() }}"
              >{{ job.created_at.strftime('%b %d %H:%M') }}</time></td>
            {# Truncated by the column rather than by a slice: the pane is a
               fixed width, so where the name has to give way is a question the
               layout can answer and the template cannot. The full name stays
               reachable on hover. #}
            <td class="ell" title="{{ job.filename }}">{{ job.filename }}</td>
            <td class="{{ 'pos' if job.status == 'done' else 'neg' if job.status == 'failed' else 'muted' }}"
                {%- if job.message %} title="{{ job.message }}"{% endif %}>{{ job.status }}</td>
            <td class="r muted">
              {%- if job.processed == job.total %}{{ job.total }}
              {%- else %}{{ job.processed }}/{{ job.total }}{% endif -%}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}
  </div>

  <div class="pane-queue">
    <div class="bar">
      <h1>Matches</h1>
      <div class="chip-set">
        <a class="chip chip-filter {{ 'on' if filter not in ('matched', 'nomatch') }}" href="/app">All {{ counts.all }}</a>
        <a class="chip chip-filter {{ 'on' if filter == 'matched' }}" href="/app?filter=matched">Matched {{ counts.matched }}</a>
        <a class="chip chip-filter {{ 'on' if filter == 'nomatch' }}" href="/app?filter=nomatch">No match {{ counts.nomatch }}</a>
      </div>
      <div class="spacer"></div>
      <span class="bar-note wide-only">{% if queue_value %}{{ queue_value|money }} market value{% endif %}</span>
      <button class="btn" type="button" id="discard-all">Discard all</button>
      <button class="btn btn-primary" type="button" id="commit">Commit {{ counts.all }} to inventory</button>
    </div>

    <template id="tpl-chosen">{{ chosen_icon() }}</template>
    <div class="screen-scroll" id="queue">
      {% for r in rows %}
      <div class="qrow {{ 'review' if r.needs_review }}" id="scan-{{ r.scan_id }}"
           data-scan="{{ r.scan_id }}" data-card="{{ r.card_id or '' }}"
           data-cond="NM" data-finish="nonfoil" data-review="{{ 1 if r.needs_review else 0 }}"
           data-prices='{{ r.prices|tojson }}'>
        <div class="thumb">
          <img src="/scan/{{ r.scan_id }}/image" alt="" loading="lazy">
          <span class="thumb-tag">scan</span>
        </div>
        <div class="qfile" title="{{ r.filename }}">{{ r.filename }}</div>
        <div class="qarrow">→</div>
        <div class="thumb ref">
          {% if r.card_id %}<img src="/card/{{ r.card_id }}/image" alt="" loading="lazy">{% endif %}
          <span class="thumb-tag">catalogue</span>
        </div>
        <div class="qmain">
          <div class="qname {{ 'faint' if not r.card_id }}">{{ r.name }}</div>
          <div class="qmeta"><span class="qprice"></span>{{ r.meta }}</div>
          <div class="qalt">
            {# No one-click swap on a row someone has already decided: that
               button commits on the spot, and putting a commit-to-the-guess
               control beside a deliberate choice is a trap. The panel behind
               "wrong card?" still lists every candidate, and picking there
               does not commit. #}
            {% if r.needs_review and r.alternates and not r.chosen %}
            <button class="qalt-swap" type="button" data-alt="{{ r.alternates[0].card_id }}">
              also matched: {{ r.alternates[0].name }}{% if r.alternates[0].variant %} ({{ r.alternates[0].variant }}){% endif %} {{ r.alternates[0].pct }}
            </button>
            {% else %}<span class="qalt-note">{{ r.alt }}</span>{% endif %}
            {% if r.needs_review %}
            <button class="qalt-fix" type="button" data-fix>wrong card?</button>
            {% endif %}
          </div>
        </div>
        <div class="qconf">
          {% if r.chosen %}{{ chosen_icon() }}{% else %}
          <div class="track"><i class="{{ '' if r.score >= 0.9 else 'low' }}" style="width: {{ r.pct }}"></i></div>
          <div class="lbl">{{ r.pct }} match</div>
          {% endif %}
        </div>
        <div class="qcond">
          {% for c in conditions[:4] %}
          <button class="chip chip-sm {{ 'on' if c == 'NM' }}" type="button" data-cond="{{ c }}">{{ c }}</button>
          {% endfor %}
        </div>
        <div class="qfoil">
          <button class="chip chip-sm foil-toggle" type="button" title="Foil or non-foil">Non-foil</button>
          {% if r.ambiguous %}
          <span class="pill warn qambig" title="This card has several foil printings at different prices. Commit, then name the printing on the card page.">?</span>
          {% endif %}
        </div>
        <div class="qactions">
          {% if r.needs_review and r.card_id %}
          <button class="btn btn-dark" type="button" data-confirm>Confirm</button>
          {% endif %}
          <button class="qdrop" type="button" data-drop title="Discard this scan" aria-label="Discard this scan">×</button>
        </div>
        {# Full-width, so it wraps onto its own line inside the flex row rather
           than squeezing the columns beside it. Filled on first open. #}
        <div class="qfix" hidden></div>
      </div>
      {% endfor %}
      {% if not rows %}
      <div class="queue-empty">
        {% if filter == 'matched' %}nothing matched is waiting
        {% elif filter == 'nomatch' %}everything waiting has a match
        {% else %}queue is clear · drop some scans to start{% endif %}
      </div>
      {% endif %}
    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script>

/* ---------- import pane ---------- */
const drop = $('#drop'), fileInput = $('#file'), chip = $('#filechip');
let chosen = null, settings = { cond: 'NM', thr: {{ auto_accept }}, finish: 'nonfoil' };

const ZIP_RE = /\.zip$/i, IMAGE_RE = /\.(jpe?g|png|tiff?|webp)$/i;

function show(el, on) { el.hidden = !on; }

/* The picker's `accept` filters the file dialog, but a drop carries whatever
   was dragged onto it — so the same rules the server enforces are checked
   here too, to fail before the upload rather than after it. */
function pick(files) {
  const all = Array.from(files || []);
  if (!all.length) return;
  const good = all.filter(f => ZIP_RE.test(f.name) || IMAGE_RE.test(f.name));
  const zips = good.filter(f => ZIP_RE.test(f.name));
  const problem =
    !good.length ? 'Card scans (jpg, png, tif, webp) or a .zip of them, please.'
    : zips.length > 1 ? 'One .zip at a time.'
    : zips.length && good.length > zips.length ? 'A .zip or loose images — not both at once.'
    : null;
  if (problem) { fileInput.value = ''; alert(problem); return; }
  const skipped = all.length - good.length;
  if (skipped) alert(skipped + (skipped === 1 ? ' file' : ' files') + ' skipped — not card scans.');
  chosen = good;
  const bytes = good.reduce((n, f) => n + f.size, 0);
  $('#fname').textContent = good.length === 1 ? good[0].name : good.length + ' images';
  $('#fmeta').textContent = (bytes / 1048576).toFixed(1) + ' MB';
  $('#pct').textContent = '0%';
  $('#stage').textContent = 'ready';
  $('#bar').style.width = '0%';
  $('#t-scans').textContent = '—';
  $('#t-matched').textContent = '0';
  show(chip, true); show($('#stats'), true); show($('#actions'), true); show(drop, false);
}
function reset() {
  chosen = null; fileInput.value = '';
  show(chip, false); show($('#stats'), false); show($('#actions'), false); show(drop, true);
}
$('#choose').addEventListener('click', e => { e.stopPropagation(); fileInput.click(); });
drop.addEventListener('click', () => fileInput.click());
$('#clear').addEventListener('click', reset);
$('#cancel').addEventListener('click', reset);
fileInput.addEventListener('change', () => pick(fileInput.files));
['dragenter', 'dragover'].forEach(e => drop.addEventListener(e, ev => {
  ev.preventDefault(); drop.classList.add('over');
}));
['dragleave', 'drop'].forEach(e => drop.addEventListener(e, ev => {
  ev.preventDefault(); drop.classList.remove('over');
}));
drop.addEventListener('drop', ev => pick(ev.dataTransfer.files));

function chipSet(root, key, cast) {
  $$('button', root).forEach(b => b.addEventListener('click', () => {
    $$('button', root).forEach(x => x.classList.remove('on'));
    b.classList.add('on');
    settings[key] = cast(b.dataset[key]);
  }));
}
chipSet($('#cond-set'), 'cond', String);
chipSet($('#thr-set'), 'thr', parseFloat);
chipSet($('#finish-set'), 'finish', String);

$('#go').addEventListener('click', async () => {
  if (!chosen || !chosen.length) return;
  $('#go').disabled = true;
  $('#go').textContent = 'Importing…';
  const body = new FormData();
  chosen.forEach(f => body.append('archive', f));
  body.append('auto_accept', settings.thr);
  body.append('default_condition', settings.cond);
  body.append('default_finish', settings.finish);
  const res = await fetch('/api/import', { method: 'POST', body });
  if (!res.ok) {
    $('#stage').textContent = await errorDetail(res, 'upload failed');
    $('#go').disabled = false; $('#go').textContent = 'Start import';
    return;
  }
  poll((await res.json()).job_id);
});

const STAGES = { pending: 'unpacking scans', matching: 'matching against catalogue', done: 'done', failed: 'failed' };
async function poll(id) {
  const job = await (await fetch('/api/jobs/' + id)).json();
  const pct = job.total ? Math.round(100 * job.processed / job.total) : 0;
  $('#bar').style.width = pct + '%';
  $('#pct').textContent = pct + '%';
  $('#stage').textContent = job.status === 'failed'
    ? 'failed — ' + (job.message || '') : (STAGES[job.status] || job.status);
  $('#t-scans').textContent = job.total;
  $('#t-matched').textContent = job.processed;
  if (job.status === 'done') { location.href = '/app?filter=review'; return; }
  if (job.status === 'failed') { $('#go').disabled = false; $('#go').textContent = 'Start import'; return; }
  setTimeout(() => poll(id), 700);
}
{% if active %}poll({{ active.id }});{% endif %}

/* ---------- queue rows ---------- */
$$('.qrow').forEach(row => {
  $$('.qcond button', row).forEach(b => b.addEventListener('click', () => {
    $$('.qcond button', row).forEach(x => x.classList.remove('on'));
    b.classList.add('on');
    row.dataset.cond = b.dataset.cond;
  }));
  const foil = $('.foil-toggle', row);
  // Seeded from the import default, so setting it once above covers the batch
  // and the per-row control is only for the exceptions.
  const priceEl = $('.qprice', row);
  let prices = {};
  try { prices = JSON.parse(row.dataset.prices || '{}'); } catch (e) { prices = {}; }

  function setFoil(v) {
    row.dataset.finish = v;
    foil.textContent = v === 'foil' ? 'Foil' : 'Non-foil';
    foil.classList.toggle('on', v === 'foil');
    // The price for the printing this finish resolves to — dearest match, the
    // same rule pricing uses — so the number on screen is the number the card
    // will be worth if committed as it stands.
    const names = Object.keys(prices);
    const matching = names.filter(n => /foil/i.test(n) === (v === 'foil'));
    const use = (matching.length ? matching : names)
      .sort((a, b) => prices[b] - prices[a])[0];
    priceEl.textContent = use === undefined ? '' :
      '$' + Number(prices[use]).toFixed(2) + ' · ';
  }
  setFoil(settings.finish);
  foil.addEventListener('click', () => setFoil(row.dataset.finish === 'foil' ? 'nonfoil' : 'foil'));

  // The one-click runner-up stays a fast path: a glance, a click, committed.
  const alt = $('.qalt-swap', row);
  if (alt) alt.addEventListener('click', () => {
    row.dataset.card = alt.dataset.alt;
    confirmRow(row);
  });

  // "Wrong card?" is the slow path, and deliberately does not commit. The
  // seller has just gone looking for this card; letting them see the swap
  // land before it becomes inventory is the whole point of the feature.
  const fix = $('.qalt-fix', row);
  if (fix) fix.addEventListener('click', () => toggleFix(row));
  const ok = $('[data-confirm]', row);
  if (ok) ok.addEventListener('click', () => confirmRow(row));
  $('[data-drop]', row).addEventListener('click', () => discardRow(row));
});

// ---- correcting a bad match ------------------------------------------------

async function toggleFix(row) {
  const box = $('.qfix', row);
  if (!box.hidden) { box.hidden = true; return; }
  if (!box.dataset.loaded) {
    box.innerHTML = '<div class="qfix-none">loading…</div>';
    box.hidden = false;
    const res = await fetch('/api/scans/' + row.dataset.scan + '/match-panel');
    if (!res.ok) { box.innerHTML = '<div class="qfix-none">could not load</div>'; return; }
    box.innerHTML = await res.text();
    box.dataset.loaded = '1';
    wireFix(row, box);
  }
  box.hidden = false;
}

function wireFix(row, box) {
  $('[data-fix-close]', box).addEventListener('click', () => { box.hidden = true; });
  // Debounce, stale-response guard and pick delegation all live in
  // wireCardSearch(); the inventory drawer opens the same panel. What is
  // local to the queue is what a pick does to the row, below.
  wireCardSearch(box, { onPick: pick => applyPick(row, box, pick) });
}

async function applyPick(row, box, pick) {
  // Saved before anything on screen changes. A pick that only updated the DOM
  // looked identical to one that had been recorded, right up until a reload
  // threw it away — so the write happens first and the row is only redrawn
  // once the server has it.
  const saved = await postForm('/api/scans/' + row.dataset.scan + '/choose',
    { card_id: pick.dataset.pick }, { error: 'could not save that choice' });
  if (!saved) return;

  row.dataset.card = pick.dataset.pick;
  $('.qname', row).textContent = pick.dataset.name;
  $('.qname', row).classList.remove('faint');
  $('.qmeta', row).innerHTML = '<span class="qprice"></span>' + pick.dataset.sub;

  const ref = $('.thumb.ref img', row);
  if (ref) ref.src = '/card/' + pick.dataset.pick + '/image';

  // The stored per-printing prices belonged to the card that was replaced.
  // Blanking them shows no price rather than the wrong one; the real figure
  // is computed against the corrected card once it is inventory.
  row.dataset.prices = '{}';

  // The match bar measured the encoder's confidence in a card that is no
  // longer on this row. A chosen card has no score — it has a person, which
  // is what the figure says. The counterpart to the `auto` badge a card wears
  // when the encoder decided on its own.
  //
  // Cloned from the template the server renders the same figure from, rather
  // than a second copy of the SVG written out in JavaScript.
  const conf = $('.qconf', row);
  if (conf) {
    conf.textContent = '';
    conf.appendChild($('#tpl-chosen').content.cloneNode(true));
  }

  // A row corrected by hand always has something to confirm, even if the
  // scan matched nothing at all and never had a Confirm button drawn.
  if (!$('[data-confirm]', row)) {
    const btn = document.createElement('button');
    btn.className = 'btn btn-dark';
    btn.type = 'button';
    btn.setAttribute('data-confirm', '');
    btn.textContent = 'Confirm';
    btn.addEventListener('click', () => confirmRow(row));
    $('.qactions', row).prepend(btn);
  }
  box.hidden = true;
}

async function confirmRow(row) {
  if (!row.dataset.card) return;
  const saved = await postForm('/api/scans/' + row.dataset.scan + '/confirm', {
    card_id: row.dataset.card,
    condition: row.dataset.cond,
    finish: row.dataset.finish,
  }, { error: 'could not confirm that card' });
  if (saved) fade(row);
}
async function discardRow(row) {
  const gone = await postForm('/api/scans/' + row.dataset.scan + '/discard', null,
    { error: 'could not discard that scan' });
  if (gone) fade(row);
}
function fade(row) {
  row.style.transition = 'opacity .15s';
  row.style.opacity = 0;
  setTimeout(() => { row.remove(); if (!$('.qrow')) location.reload(); }, 160);
}

$('#commit').addEventListener('click', async () => {
  const rows = $$('.qrow').filter(r => r.dataset.review === '1' && r.dataset.card).map(r => ({
    scan_id: +r.dataset.scan, card_id: +r.dataset.card,
    condition: r.dataset.cond, finish: r.dataset.finish,
  }));
  if (!rows.length) return;
  const out = await postJSON('/api/scans/commit', { rows },
    { error: 'could not add those cards to inventory' });
  if (!out) return;
  // Land on the cards that still need a printing chosen, when there are any:
  // they are priced on a guess, and a guess that nobody is shown is a price
  // nobody checks.
  location.href = out.needs_printing ? '/inventory?show=printing' : '/inventory';
});

$('#discard-all').addEventListener('click', async () => {
  const ids = $$('.qrow').filter(r => r.dataset.review === '1').map(r => +r.dataset.scan);
  if (!ids.length) return;
  if (await postJSON('/api/scans/discard-all', { scan_ids: ids },
      { error: 'could not discard those scans' })) location.reload();
});
</script>
{% endblock %}