{% extends "base.html" %}
{% block title %}Listing run · foilstack{% endblock %}
{% block status %}{{ card_count }} cards · {{ rows|length }} listings · {{ rule_obj.name }} · {{ run_value|money }} at list{% endblock %}

{% block screen %}
<div class="bar bar-nowrap">
  <h1>Listing run</h1>
  <span class="bar-note">
    {{ card_count }} card{{ '' if card_count == 1 else 's' }}
    {% if rows|length != card_count %}· {{ rows|length }} listings{% endif %}
    {# A run chosen by filter says so in its own terms. The seller never saw
       most of these lines — that is the point of selecting by filter — so a
       bare "selected" would be the run declining to say what it is over,
       which is the shape of the bug that made this screen price the whole
       inventory under a heading reading `Not listed 75`. #}
    {% if described %}· {{ described }}
    {% elif selected_ids %}· selected{% else %}· whole inventory{% endif %}
  </span>
  <div class="spacer"></div>
  <div class="bar-actions">
  <a class="btn" href="/inventory">Back to inventory</a>
  {# Both buttons count what they would change, not what is on screen, and both
     name the channels they would change it on. The count alone is ambiguous
     the moment a second channel is ticked: "Mark 6" against six rows already
     reading "listed · tcgplayer" looks like a bug until you notice the eBay
     box, and the number moves when you tick it.

     "Mark 6 on TCGplayer" rather than "Mark 6 as listed on TCGplayer", which
     is what this said first: the bar is captured at 1000px for the README
     animation and the landing hero, and the longer pair wrapped it onto two
     rows there. The verb it loses is in the title and in the pills the button
     produces, and the shorter form reads as the exact undo of the button
     beside it — which the longer one did not. #}
  {# Shown only when there is something on a picked channel to take off it.
     No disabled twin, unlike the button beside it: "nothing here is listed" is
     already what a live Mark button and an empty status column say. #}
  {% if unmark_ids %}
  <button class="btn" type="button" id="unmark"
          title="Record these as no longer listed on {{ picked_label }}. Undoes the record, not the listing — foilstack never posted it.">
    Unmark {{ unmark_ids|length }} on {{ picked_label }}
  </button>
  {% endif %}
  {% if mark_ids %}
  <button class="btn btn-primary" type="button" id="mark"
          title="Record these as listed on {{ picked_label }}. Nothing is sent — you upload the CSV yourself.">
    Mark {{ mark_ids|length }} on {{ picked_label }}
  </button>
  {% else %}
  <button class="btn" type="button" disabled title="Tick another channel to mark these there too">
    All {{ card_count }} listed on {{ picked_label }}
  </button>
  {% endif %}
  </div>
</div>

<div class="split">
  <div class="run-side">
    <div class="sec-label">Channels</div>
    {% for c in channels %}
    <a class="opt {{ 'on' if c.on }}" href="{{ c.href }}">
      <input type="checkbox" {{ 'checked' if c.on }} tabindex="-1" aria-hidden="true">
      <div class="opt-body">
        <div class="t">{{ c.name }}</div>
        <div class="s">{{ c.note }}</div>
        {% if c.exporter %}<div class="s">{{ c.exporter.columns|length }} columns · {{ c.exporter.filename }}</div>{% endif %}
      </div>
    </a>
    {% endfor %}
    <div class="s" style="font-family: var(--mono); font-size: 10px; color: var(--faint); line-height: 1.6; margin: 6px 0 0;">
      A channel here is a CSV format, not a connection. Nothing is sent to a
      marketplace on your behalf. You download the file and upload it yourself.
    </div>

    <div class="sec-label" style="margin-top: 16px">Pricing rule</div>
    {% for r in rules %}
    <a class="opt {{ 'on' if r.on }}" href="{{ r.href }}">
      <div class="opt-body">
        <div class="t">{{ r.name }}</div>
        <div class="s">{{ r.formula }}</div>
      </div>
    </a>
    {% endfor %}
    <div class="s" style="font-family: var(--mono); font-size: 10px; color: var(--faint); line-height: 1.6; margin: 6px 0 0;">
      Applied on top of the condition discount. “Low + $0.01” is an
      approximation: the catalogue gives a market price, not the current lowest
      listing.
    </div>

    <div class="run-summary">
      {# The floor is a control and not a caption. It used to print
         `inventory.FLOOR`, which was one number for every seller on the
         install — right for a bulk dealer clearing commons at pennies and
         wrong for a shop that will not put a card in an envelope under a
         dollar. A GET back to this same run, so applying one re-prices what
         is on screen rather than starting a new selection. #}
      <form class="floor-set" method="get" action="/listings">
        {% for k, v in floor_form %}
        <input type="hidden" name="{{ k }}" value="{{ v }}">
        {% endfor %}
        <label for="floor">floor</label>
        <input id="floor" name="floor" type="number" inputmode="decimal"
               min="0" max="{{ max_floor }}" step="0.01"
               value="{{ '%.2f'|format(floor) }}"
               title="Nothing in this run lists below this, whatever the rule and the condition work out to.">
        <button class="btn" type="submit">Apply</button>
      </form>
      {# Which floor is in force, and whether it is the saved one. A run priced
         under a number the seller never saved must never be able to pass for
         their settings — and the same rule backwards, a saved floor must not
         look like a one-off. #}
      <div class="floor-note">
        {% if floor_override %}
        This run only. Your floor is {{ account_floor|money }}.
        {% else %}
        Your floor, on every screen. Nothing lists below it.
        {% endif %}
      </div>
      {# A real button, and present in both states rather than appearing only
         once the floor has been changed. It was a `linkish` span that showed
         up after Apply, which read as a sentence rather than an action — the
         first person to use this concluded the control could not save at all
         and that a floor was per-export. The disabled twin is the same answer
         the bar above gives with "All 21 listed on TCGplayer": saying what the
         button would do, greyed, is what makes it findable before there is
         anything to press it for. #}
      {% if floor_override %}
      <button class="btn floor-save" type="button" id="save-floor"
              data-floor="{{ '%.2f'|format(floor) }}"
              title="Make this the floor every screen prices against, not just this run.">
        Save {{ floor|money }} as my floor
      </button>
      {% else %}
      <button class="btn floor-save" type="button" disabled
              title="Change the floor above and Apply to save a different one.">
        {{ floor|money }} is your floor
      </button>
      {% endif %}
      {# "at list", not "listed value": on this screen "listed" now means a
         row marked as being on a marketplace, and the same word for the run's
         total at list price made the summary read as the value of the marked
         half. #}
      <div>at list &nbsp; <b>{{ run_value|money }}</b></div>
      <div>vs market &nbsp; <b>{{ '+' if delta >= 0 }}{{ delta|money }}</b></div>
    </div>

    <div class="sec-label" style="margin-top: 16px">Download</div>
    {% for c in channels %}
    {% if c.on and c.exporter %}
    {% if c.match_href %}
    <form class="match" method="post" action="{{ c.match_href }}" enctype="multipart/form-data">
      <input type="file" name="file" accept=".csv,text/csv" required>
      <button class="btn" type="submit">{{ c.exporter.label }} CSV</button>
      {# A pricing export is large and the upload is the whole wait, so this
         form is the one on the site that needs to say it is working. No
         `display` is set on it in CSS, so `[hidden]` is left to the user agent
         rather than being overridden by a class of equal specificity. #}
      <div class="match-progress" hidden>
        <div class="match-bar"><i></i></div>
        <div class="match-stat"></div>
      </div>
      <div class="s">
        Needs your own <b>Export Filtered CSV</b> from TCGplayer&rsquo;s pricing
        screen: their ids name a card <i>and</i> a condition, so only their file
        has them. The quantities in it are read for one thing — the file adds
        what you own <i>beyond</i> what you already have listed there, and takes
        any surplus back down.
      </div>
      {% if run_sets %}
      {# Named so the export can be filtered before it is downloaded. An
         unfiltered Magic product line is ~800,000 rows and over 100 MB, sent
         to match a few dozen cards, and that transfer is the whole wait. #}
      <div class="s match-sets">
        Filter that export before you download it — this run only needs:
        {% for g in run_sets %}
        <div class="match-line">
          <b>{{ g.line }}</b>
          {% for name in g.sets %}<span class="pill">{{ name }}</span>{% endfor %}
          {% if g.more %}<span class="pill">+{{ g.more }} more</span>{% endif %}
        </div>
        {% endfor %}
        {% if run_sets|length > 1 %}
        <div class="match-warn">
          One upload is one product line, so this run needs an export and a run
          per line. Filter inventory by game first.
        </div>
        {% endif %}
      </div>
      {% endif %}
    </form>
    {% else %}
    <a class="btn" style="width: 100%; margin-bottom: 4px" href="{{ c.csv_href }}">{{ c.exporter.label }} CSV</a>
    {% endif %}
    {% endif %}
    {% endfor %}
  </div>

  <div class="run-body">
    <div class="screen-scroll">
      <table class="dtable">
        <thead>
          <tr>
            <th>CARD</th>
            <th>SKU</th>
            <th>CND</th>
            <th class="r">QTY</th>
            <th class="r">MARKET</th>
            <th class="r">LIST PRICE</th>
            <th>STATUS</th>
          </tr>
        </thead>
        <tbody>
          {% for r in rows %}
          <tr>
            <td class="name">{{ r.name }}</td>
            <td class="faint">{{ r.sku }}</td>
            <td>{{ r.condition }}</td>
            <td class="r {{ 'strong' if r.quantity > 1 }}">{{ r.quantity }}</td>
            <td class="r muted">{{ r.market|money if r.market is not none else '—' }}</td>
            <td class="r strong">{{ r.list_price|money if r.list_price is not none else '—' }}</td>
            <td>
              {% if r.listed_partly %}<span class="pill">{{ r.listed_count }} of {{ r.quantity }} listed · {{ r.listed_channels }}</span>
              {% elif r.listed %}<span class="pill ok">listed · {{ r.listed_channels }}</span>
              {% else %}<span class="pill">ready</span>{% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% if not rows %}
      <div class="empty">nothing selected · pick rows on the inventory screen</div>
      {% endif %}
    </div>

    <div class="joblog">
      <div class="sec-label" style="margin-bottom: 6px">Job log</div>
      {% for l in log %}
      <div class="line"><span class="t">{{ l.t }}</span> &nbsp;{{ l.msg }}</div>
      {% else %}
      <div class="line">nothing yet this session</div>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const channels = {{ picked | tojson }};

// Either button is absent when it has nothing to do — the bar shows a disabled
// button or none at all rather than a live one that would change nothing.
const wireMark = (sel, url, ids) => $(sel)?.addEventListener('click', async ev => {
  if (!ids.length) return;
  ev.target.disabled = true;
  // `quiet`: the button coming back to life is the failure message here.
  if (await postJSON(url, { ids, channels }, { quiet: true })) location.reload();
  else ev.target.disabled = false;
});

wireMark('#mark', '/api/listings/mark', {{ mark_ids | tojson }});
wireMark('#unmark', '/api/listings/unmark', {{ unmark_ids | tojson }});

// Saving the floor is a separate press from applying it. Typing a number and
// hitting Enter re-prices this run and nothing else; this is the one that
// changes what every other screen quotes, so it has to be asked for.
$('#save-floor')?.addEventListener('click', async ev => {
  const btn = ev.currentTarget;
  btn.disabled = true;
  // Not `quiet`: a rejected floor has a reason worth reading, and unlike the
  // mark buttons there is no count on screen that visibly fails to move.
  const out = await postForm('/api/account/floor', { floor: btn.dataset.floor },
                             { error: 'that floor was not saved' });
  // Reloaded rather than patched in place: saving turns a run-only floor into
  // the account's, which changes the note, the button and every link on the
  // page that was carrying the override.
  if (!out) { btn.disabled = false; return; }
  const url = new URL(location.href);
  url.searchParams.delete('floor');
  location.href = url;
});

// The TCGplayer round trip, with the upload reported as it happens.
//
// XHR rather than `fetch` for one reason: `fetch` cannot report upload
// progress, and the upload is the entire wait here. A TCGplayer pricing
// export runs to tens of megabytes, which is minutes on a domestic
// connection, and as a native form post this said nothing at all — no
// progress, a button that stayed live and could send the whole file a second
// time, and a response that is a download rather than a navigation, so the
// page did not change even on success. A seller could not tell it working
// from it hung.
const matchForm = $('form.match');
if (matchForm) {
  const button = $('button', matchForm);
  const picker = $('input[type=file]', matchForm);
  const panel = $('.match-progress', matchForm);
  const bar = $('.match-bar', matchForm);
  const fill = $('.match-bar i', matchForm);
  const stat = $('.match-stat', matchForm);
  const label = button.textContent;

  const say = (text, bad) => {
    panel.hidden = false;
    stat.textContent = text;
    stat.classList.toggle('bad', !!bad);
    // A full green bar over a red message reads as success — the bar is about
    // the transfer, but nobody reads it that finely. On a failure the message
    // is the whole content, so the bar goes.
    bar.hidden = !!bad;
  };
  const done = () => {
    button.disabled = false;
    button.textContent = label;
  };

  const mb = bytes => (bytes / (1024 * 1024)).toFixed(1) + ' MB';

  matchForm.addEventListener('submit', ev => {
    ev.preventDefault();
    const file = picker.files[0];
    if (!file) return;

    button.disabled = true;
    button.textContent = 'working…';
    fill.style.width = '0';
    bar.hidden = false;
    say('starting…');

    const xhr = new XMLHttpRequest();
    xhr.open('POST', matchForm.action);
    // So a failure can be read as the JSON it is; the success case is a file.
    xhr.responseType = 'blob';

    xhr.upload.addEventListener('progress', e => {
      if (!e.lengthComputable) return;
      const pct = (e.loaded / e.total) * 100;
      fill.style.width = pct + '%';
      // Named in megabytes as well as percent because a percentage alone on a
      // very large file moves too slowly to read as movement.
      say('uploading ' + mb(e.loaded) + ' of ' + mb(e.total) + ' · ' + Math.floor(pct) + '%');
    });

    // Everything is sent; from here the wait is the server's, and it is short.
    xhr.upload.addEventListener('load', () => {
      fill.style.width = '100%';
      say('matching against your inventory…');
    });

    xhr.addEventListener('load', async () => {
      done();
      if (xhr.status !== 200) {
        say(await matchError(xhr), true);
        return;
      }
      // The report, so a download is not the only thing that happens. The
      // header is the same summary the job log gets.
      say(xhr.getResponseHeader('X-Match-Report') || 'done');
      const url = URL.createObjectURL(xhr.response);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'tcgplayer-listings.csv';
      link.click();
      // Revoked on a later turn of the loop: revoking it in the same tick can
      // beat the browser to starting the download.
      setTimeout(() => URL.revokeObjectURL(url), 60000);
    });

    xhr.addEventListener('error', () => {
      done();
      // No status at all, which for an upload this size is usually a proxy
      // closing the connection rather than the network going away.
      say('the upload did not complete — it may be larger than this site accepts', true);
    });
    xhr.addEventListener('abort', () => {
      done();
      say('upload cancelled', true);
    });

    const data = new FormData();
    data.append('file', file);
    xhr.send(data);
  });
}

/* What went wrong, from a response that may not be ours.
 *
 * A 400 here is FastAPI's `{detail}` — the file was not a pricing export, or
 * nothing was in stock. A 413 is almost never ours: the request never reached
 * the application, and the body is whichever proxy rejected it saying so in
 * HTML. Parsing that as JSON and showing the failure of the parse is how a
 * seller ends up with no idea why a ten-minute upload produced nothing.
 */
async function matchError(xhr) {
  if (xhr.status === 413) {
    return 'that file is too large for this site to accept. Filter the export '
      + 'to the sets listed above and try again.';
  }
  try {
    return JSON.parse(await xhr.response.text()).detail || 'that did not work';
  } catch (e) {
    return 'that did not work (HTTP ' + xhr.status + ')';
  }
}
</script>
{% endblock %}