{% 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 to confirm · {{ 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="cardfan" aria-hidden="true"><i></i></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="cardfan cardfan-sm" aria-hidden="true"><i></i></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>

    {# Two of these counted something other than what they were called.
       "matched" was `job.processed`, which increments for every scan the
       importer finishes — including the ones that matched nothing and the ones
       that errored — so a batch where half the images failed still reported
       them as matched. And "waiting" is not part of this import at all: it is
       the review queue, which outlives the job and holds rows from earlier
       batches too. Sat in a row of progress numbers it read as "waiting to be
       identified" and looked stuck, because it does not move while an archive
       uploads. #}
    <div class="tiles-3" id="stats" {% if not active %}hidden{% endif %}>
      <div class="tile-sm" title="Images found in this archive"><div class="k">scans</div><div class="v" id="t-scans">{{ active.total if active else 0 }}</div></div>
      <div class="tile-sm" title="Scans the matcher has finished with, including any that found nothing"><div class="k">processed</div><div class="v" id="t-processed">{{ active.processed if active else 0 }}</div></div>
      <div class="tile-sm" title="Cards in the review queue waiting for you to confirm them, including any left over from earlier imports"><div class="k">to confirm</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>
          {# Off by default, and it has to stay that way: this is the only
             setting on the screen that overrules a match the encoder was sure
             about, and a batch that is not really one set is worse off with it
             on. The seller is asserting something about the pile in their
             hand, so it is theirs to tick.

             The label is not "Batch is all one…" — an ellipsis set in the same
             uppercase mono as every other label on the panel reads as a
             truncated string, and sends the reader looking for the rest. #}
          <div class="field-label">Batch is all one</div>
          <div class="chip-set" id="cohort-set">
            <button class="chip" type="button" data-cohort="game" aria-pressed="false">Game</button>
            <button class="chip" type="button" data-cohort="set" aria-pressed="false">Set</button>
          </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>
        <p class="setting-note">
          <b>All one game or set</b> is worth ticking when the batch really is —
          a booster box, or one binder page. Every card is matched on its own
          first; then the game or set that most of them agree on is worked out,
          and any card that landed outside it is moved to its best match inside
          it. A card moved that way always goes to the queue for you to look at,
          however well it scored.
        </p>
        <p class="setting-note">
          Leave it off for a mixed pile. It decides the game or set by majority,
          so on a batch that is genuinely three games it will pull two of them
          towards the third.
        </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 g in groups %}
      {# The upload these cards arrived in. Sections run oldest first and the
         cards inside them dearest first, so the backlog drains from the front
         and the card worth most is the first decision in each batch.

         A `<details>`, so collapsing costs no script and arrives with the
         keyboard and the accessibility tree already working — the same idiom
         the match-settings panel above uses. Open by default: a queue that
         hid its own cards on load would be a screen with nothing on it. #}
      <details class="qgroup" data-job="{{ g.job_id }}"
               {{- ' open' if g.job_id not in folded }}>
        <summary class="qgroup-head">
          <span class="qgroup-file" title="{{ g.filename }}">{{ g.filename }}</span>
          <span class="qgroup-meta">
            <time data-local datetime="{{ g.at.isoformat() }}">{{ g.at.strftime('%b %d %H:%M') }}</time>
            · {{ g.rows|length }} {{ 'card' if g.rows|length == 1 else 'cards' }}
            {%- if g.value %} · {{ g.value|money }}{% endif %}
            {%- if g.cohort %} · {{ g.cohort }}{% endif %}
          </span>
        </summary>
      {% for r in g.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="{{ r.condition }}" data-finish="{{ r.finish }}"
           data-finish-default="{{ r.default_finish }}"
           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 and not r.cohort %}
            <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>
            {# Titled because the line is ellipsised at the pane's width, and
               what falls off the end is the tail — which on a row the batch
               moved is the match it was moved off, the only part a reader
               cannot get from anywhere else on the screen. #}
            {% else %}<span class="qalt-note" {% if r.alt %}title="{{ r.alt }}"{% endif %}>{{ 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 %}
          <button class="chip chip-sm {{ 'on' if c == r.condition }}" type="button" data-cond="{{ c }}">{{ c }}</button>
          {% endfor %}
        </div>
        <div class="qfoil">
          {# Rendered in its final state rather than left to the script to
             correct, so a foil batch does not flash "Non-foil" first — and
             that now includes the fill, because a freshly rendered row is no
             longer always showing what its import asked for. A card the
             catalogue prices one way only overrules the default, and the
             unfilled chip is what says so. #}
          <button class="chip chip-sm foil-toggle {{ 'on' if r.finish == r.default_finish }}"
                  type="button"
                  title="{% if r.finish == r.default_finish %}Foil or non-foil{% else %}the catalogue only prices this card as {{ 'foil' if r.finish == 'foil' else 'non-foil' }}, so it differs from this import's default{% endif %}">{{ 'Foil' if r.finish == 'foil' else '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 %}
      </details>
      {% endfor %}
      {% if not groups %}
      <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', sameGame: false, sameSet: false
};

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

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 / MB).toFixed(1) + ' MB';
  $('#stage').textContent = 'ready';
  setBar(0);
  $('#t-scans').textContent = '—';
  $('#t-processed').textContent = '0';
  show(chip, true); show($('#stats'), true); show($('#actions'), true); show(drop, false);
}
function reset() {
  chosen = null; fileInput.value = '';
  // Including the sweep: leaving it running under a hidden chip is a timer
  // repainting the page for nothing.
  setBar(0);
  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);

/* Not `chipSet`. Those are radio groups, where exactly one chip is on and
   clicking a second moves the answer; these are two toggles that can both be
   off — which is the default, and the state that leaves matching alone.

   They are not independent either. A set belongs to one game, so ticking Set
   ticks Game, and unticking Game unticks Set. The server widens the same pair
   the same way, because a client that skipped this still has to mean
   something. */
function paintCohort() {
  $$('button', $('#cohort-set')).forEach(b => {
    const on = b.dataset.cohort === 'set' ? settings.sameSet : settings.sameGame;
    b.classList.toggle('on', on);
    b.setAttribute('aria-pressed', on ? 'true' : 'false');
  });
}
$$('button', $('#cohort-set')).forEach(b => b.addEventListener('click', () => {
  const key = b.dataset.cohort === 'set' ? 'sameSet' : 'sameGame';
  settings[key] = !settings[key];
  // Conditioned on which chip was clicked, not on the resulting pair. Written
  // as two unconditional repairs — "if Set, then Game" and "if not Game, then
  // not Set" — unticking Game while Set was on put Game straight back, and the
  // click did nothing at all. Both directions have to follow the click: Set on
  // turns Game on, Game off turns Set off.
  if (key === 'sameSet' && settings.sameSet) settings.sameGame = true;
  if (key === 'sameGame' && !settings.sameGame) settings.sameSet = false;
  paintCohort();
}));

/* The bar runs three times over one import: it fills as the archive goes up,
   sweeps while the archive is opened and nobody yet knows how many scans are
   inside, then fills again as those scans are matched. Three phases in one
   bar rather than a single number over all of them, because the weighting
   between them is not knowable — a 400 MB zip on a domestic upstream is
   minutes of upload and seconds of matching, and the same zip from the same
   machine the app runs on is the reverse. `#stage` names which one is
   running, so the bar returning to the left reads as the next phase starting.

   Pass null for indeterminate. That clears the inline width, which is what
   lets the stylesheet's sweep take over. */
function setBar(pct) {
  $('#bar').parentElement.classList.toggle('busy', pct === null);
  $('#bar').style.width = pct === null ? '' : pct + '%';
  $('#pct').textContent = pct === null ? '' : pct + '%';
}

/* XMLHttpRequest for the one thing fetch still cannot do: say how much of the
   request body has gone out. Without it the only progress on offer starts
   after the upload has finished, which on a large archive is a bar that spends
   the long half of the wait sitting at zero and the short half moving. */
function upload(body, onProgress) {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/api/import');
    xhr.upload.addEventListener('progress', e => {
      if (e.lengthComputable) onProgress(e.loaded, e.total);
    });
    // A refused connection, a dropped one and a CORS failure all arrive as an
    // error with status 0 and no body — resolved rather than rejected so the
    // one caller handles every ending in the same place.
    ['load', 'error', 'abort', 'timeout'].forEach(e =>
      xhr.addEventListener(e, () => resolve(xhr)));
    xhr.send(body);
  });
}

/* Nothing got as far as a percentage, so the label keeps the whole line: a
   server's complaint runs to two lines in this pane, and a "0%" left sitting
   at the end of the first one reads as part of the sentence. */
function fail(why) {
  $('#stage').textContent = why;
  setBar(0);
  $('#pct').textContent = '';
  $('#go').disabled = false;
  $('#go').textContent = 'Start import';
}

function uploadError(xhr, fallback) {
  // errorDetail() takes a fetch Response and cannot read this. Status 0 is
  // never the server's answer — it is the request never arriving.
  if (!xhr.status) return 'connection lost during upload';
  try { return JSON.parse(xhr.responseText).detail || fallback; } catch (e) { return fallback; }
}

$('#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);
  body.append('same_game', settings.sameGame);
  body.append('same_set', settings.sameSet);

  $('#stage').textContent = 'uploading';
  setBar(0);
  const xhr = await upload(body, (sent, total) => {
    setBar(Math.round(100 * sent / total));
    // Megabytes as well as the percentage. On a long upload this is the line
    // that distinguishes a slow connection from a stalled one, because it
    // keeps moving between whole percents.
    $('#fmeta').textContent =
      (sent / MB).toFixed(1) + ' / ' + (total / MB).toFixed(1) + ' MB';
  });
  if (xhr.status !== 200) {
    fail(uploadError(xhr, 'upload failed'));
    return;
  }
  $('#stage').textContent = STAGES.pending;
  setBar(null);
  poll(JSON.parse(xhr.responseText).job_id);
});

const STAGES = { pending: 'unpacking scans', matching: 'matching against catalogue', grouping: 'holding the batch together', done: 'done', failed: 'failed' };
async function poll(id) {
  const job = await (await fetch('/api/jobs/' + id)).json();
  // A `total` of zero is not zero scans, it is an archive nobody has opened
  // yet — there is no denominator to divide by, so the bar sweeps instead of
  // claiming 0%.
  $('#t-scans').textContent = job.total || '—';
  $('#t-processed').textContent = job.processed;
  if (job.status === 'failed') { fail('failed — ' + (job.message || '')); return; }
  // Indeterminate again for the second pass. Every scan has been processed by
  // then, so the fraction is stuck at 100% while the job is still working —
  // a full bar under a moving label is the shape of something that has hung.
  setBar(job.status === 'grouping' ? null : job.total ? Math.round(100 * job.processed / job.total) : null);
  $('#stage').textContent = STAGES[job.status] || job.status;
  if (job.status === 'done') { location.href = '/app?filter=review'; return; }
  setTimeout(() => poll(id), 700);
}
{% if active %}poll({{ active.id }});{% endif %}

/* ---------- folded sections ---------- */

/* A cookie, not localStorage. The server has already rendered each section
   folded or not — see `_folded_jobs` — so all this does is record what the
   seller changes. localStorage was the first attempt and could only be read
   after the page had parsed, which meant the queue painted expanded and then
   snapped shut: 56ms of it here, 123ms with the CPU throttled.

   Folded ids are what is stored, not open ones, so an empty cookie means
   everything expanded — the right default both for a browser that has never
   seen this screen and for an import that did not exist when the fold was
   made. */
const FOLD_COOKIE = 'foilstack_folded_{{ user.id }}';
const FOLD_MAX = {{ folded_max }};

function readFolded() {
  const hit = document.cookie.split('; ').find(c => c.startsWith(FOLD_COOKIE + '='));
  // Digits only. Whatever else is in there was not put there by this page,
  // and the server discards it on the same rule.
  return hit ? hit.slice(FOLD_COOKIE.length + 1).split(',').filter(v => /^\d+$/.test(v)) : [];
}

$$('.qgroup').forEach(group => {
  const job = group.dataset.job;
  group.addEventListener('toggle', () => {
    // Re-read on every toggle rather than holding one list: two tabs on this
    // screen would otherwise each write back a snapshot taken before the
    // other's change, and the last to fold would erase the first.
    const ids = readFolded().filter(id => id !== job);
    if (!group.open) ids.push(job);
    // `path=/app` so it rides along with this screen and its filter links and
    // nothing else — at `/` it would be sent with every thumbnail too. Trimmed
    // from the same end as the server reads, so the two agree about which
    // folds survive.
    document.cookie = FOLD_COOKIE + '=' + ids.slice(-FOLD_MAX).join(',') +
      '; path=/app; max-age=31536000; SameSite=Lax';
  });
});

/* ---------- 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);

  // What this batch was imported as, which is not always what the row starts
  // on: a non-foil batch containing a card the catalogue only prices as foil
  // is rendered foil, because that is the only finish that card has. Kept
  // beside the resolved one so a corrected match can be re-resolved against
  // the batch's actual answer rather than against a previous card's.
  const batchDefault = row.dataset.finishDefault === 'foil' ? 'foil' : 'nonfoil';

  // The finish this row starts on. Read before the first setFoil() below,
  // which is the last moment the row is guaranteed to still be showing it.
  let seeded = row.dataset.finish === 'foil' ? 'foil' : 'nonfoil';

  // A toggle the seller clicked outranks anything re-derived below. They are
  // holding the card; the catalogue is only describing it.
  let touched = false;

  function pricesOf() {
    try { return JSON.parse(row.dataset.prices || '{}'); } catch (e) { return {}; }
  }

  // The server's `inventory.resolve_finish`, for the rows this screen
  // re-points after load. Both have to agree, or correcting a match would
  // move a row somewhere a reload puts back.
  function resolveFinish(want, names) {
    if (!names.length) return want;
    return names.some(n => /foil/i.test(n) === (want === 'foil'))
      ? want : (want === 'foil' ? 'nonfoil' : 'foil');
  }

  function setFoil(v) {
    // Normalised, not stored as given. This is what the row commits, and an
    // empty or unrecognised value would be sent to a route that rejects it —
    // turning a stale template or a hand-edited attribute into "could not
    // confirm that card" with nothing on screen to explain it.
    v = v === 'foil' ? 'foil' : 'nonfoil';
    row.dataset.finish = v;
    foil.textContent = v === 'foil' ? 'Foil' : 'Non-foil';
    // Filled means "what this import asked for", so the rows that stand out
    // are the ones not showing it — whether a person toggled them or the
    // catalogue did. Keyed to the import default rather than to foil: a batch
    // declared foil at the door is not the exception on its own screen, and
    // marking every row of it was noise.
    //
    // Deliberately not keyed to the seeded finish, which is the other
    // plausible reading. A row that deviated from the default is exactly the
    // row worth a second look, and it is the seller's own answer it is
    // departing from — hiding that because the departure was automatic would
    // make the reason for it the reason to say nothing about it.
    //
    // Unfilled is a plain white chip, not the warning colour. Standing out is
    // not the same as being wrong: the catalogue prices this card one way
    // only, so the row is right, and `unpriced` below is reserved for the
    // finish that has no printing behind it at all.
    foil.classList.toggle('on', v === batchDefault);
    foil.title = v === batchDefault
      ? 'Foil or non-foil'
      : v === seeded
        ? 'the catalogue only prices this card as ' +
          (v === 'foil' ? 'foil' : 'non-foil') + ', so it differs from this import\'s default'
        : 'changed from this import\'s default';
    // The price for the printing this finish resolves to — dearest match, the
    // same rule pricing and the queue's ordering use — so the number on screen
    // is the number the card will be worth if committed as it stands.
    //
    // Both of these are read fresh on every call rather than captured when the
    // row was wired, because correcting a match replaces them: the prices
    // belong to a different card afterwards, and `.qmeta` is rebuilt, which
    // means the span held from wiring time is a detached node nothing on the
    // page can see. Held that way, the toggle went on quietly writing prices
    // into an element that had been thrown away.
    const prices = pricesOf();
    const priceEl = $('.qprice', row);
    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];
    // The catalogue prices this card on one side of the foil line only, so
    // the number is the other side's. Only reachable by clicking the toggle
    // now — a row is seeded onto a finish the card is actually priced in —
    // which is what makes the warning worth showing: it marks a deviation
    // somebody chose, not one the batch default walked into.
    const fellBack = names.length > 0 && matching.length === 0;
    if (priceEl) {
      priceEl.textContent = use === undefined ? '' :
        '$' + Number(prices[use]).toFixed(2) +
        (fellBack ? ' as ' + use : '') + ' · ';
      priceEl.classList.toggle('warn', fellBack);
      priceEl.title = fellBack
        ? 'No ' + (v === 'foil' ? 'foil' : 'non-foil') +
          ' printing is catalogued for this card, so this is the ' + use + ' price'
        : '';
    }
    foil.classList.toggle('unpriced', fellBack);
  }
  // Redraw after something other than the toggle changes the row's prices,
  // which is how `applyPick` gets the corrected card's number on screen
  // without reaching into this closure. The new card gets the seed decided
  // again from scratch: a row that went foil only because the old match had
  // no non-foil printing has no reason to stay there once it is pointed at a
  // card that does. A finish the seller set by hand survives it — they are
  // describing the object in their hand, which the correction did not change.
  row.addEventListener('prices-changed', () => {
    seeded = resolveFinish(batchDefault, Object.keys(pricesOf()));
    setFoil(touched ? row.dataset.finish : seeded);
  });
  // Seeded from the default the scan was imported under, which the server has
  // already rendered — read back rather than re-decided, so the markup and the
  // price below it cannot disagree. Setting it once at import covers the batch
  // and the per-row control is only for the exceptions.
  setFoil(row.dataset.finish);
  foil.addEventListener('click', () => {
    touched = true;
    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');

  // Rebuilt rather than assigned as innerHTML. The text is a card's set name
  // arriving from a catalogue this project does not control, and putting it
  // through the HTML parser to draw four words of plain text is a needless
  // way to be wrong later.
  //
  // `meta` comes from the server so that this line reads exactly as the one
  // the queue renders, price included; `sub` is the fallback for a response
  // too old to carry it.
  const meta = $('.qmeta', row);
  meta.textContent = '';
  const priceSpan = document.createElement('span');
  priceSpan.className = 'qprice';
  meta.append(priceSpan, saved.meta || pick.dataset.sub);

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

  // The corrected card's own prices, which arrived with the save. These used
  // to be blanked and left blank: showing no price rather than the wrong one
  // was right as far as it went, but nothing ever put the right one back, so
  // the row a person had just deliberately corrected was the only one on the
  // screen with no price under it until it was committed.
  row.dataset.prices = JSON.stringify(saved.prices || {});
  row.dispatchEvent(new Event('prices-changed'));

  // 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(() => {
    const group = row.closest('.qgroup');
    row.remove();
    // A heading over no cards is worse than a count that has gone stale under
    // one: the upload it names has nothing left to decide.
    if (group && !$('.qrow', group)) group.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 %}