{{define "relations_session.html"}}
{{template "layout_head" .}}
<div id="sidebar-inner"></div>
{{template "layout_mid" .}}

<div id="relations-session-page" class="relations-session" data-esc-back="/relations">
  <div class="detail-topbar">
    <div class="detail-nav-group">
      <a class="back-link" href="/relations">‹ Relations</a>
      <span class="detail-nav-sep">/</span>
      <strong class="walker-page-title">Relations session</strong>
      {{if .Pair}}
      <span class="detail-nav-sep">·</span>
      <span class="field-hint"><strong>{{.Remaining}}</strong> pair(s) remaining</span>
      {{end}}
    </div>
    <form method="get" action="/relations/session" class="session-order-form">
      <span class="field-hint">Order</span>
      <label><input type="radio" name="order" value="smallest_distance_first" onchange="this.form.submit()" {{if eq .Order "smallest_distance_first"}}checked{{end}}> Smallest distance</label>
      <label><input type="radio" name="order" value="largest_file_first" onchange="this.form.submit()" {{if eq .Order "largest_file_first"}}checked{{end}}> Largest file</label>
      <label><input type="radio" name="order" value="random" onchange="this.form.submit()" {{if eq .Order "random"}}checked{{end}}> Random</label>
    </form>
  </div>

  {{if not .Pair}}
  <section class="session-empty">
    {{if gt .HiddenByCeiling 0}}
    <h3>No pairs at your <strong>{{.Ceiling}}</strong> rating ceiling.</h3>
    <p class="field-hint"><strong>{{.HiddenByCeiling}}</strong> pair(s) are hidden because one or both sides exceed the current ceiling.</p>
    <form hx-post="/internal/rating-ceiling?level=explicit" hx-swap="none"
          hx-on::after-request="if(event.detail.successful){window.location.reload()}"
          style="display:inline">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
      <button type="submit" class="btn-sm btn-purple">Raise ceiling to explicit</button>
    </form>
    {{else}}
    <h3>No pairs to review.</h3>
    <p class="field-hint">The queue is empty. Run <a href="/relations">Find new pairs</a> to surface more candidates.</p>
    {{end}}
  </section>
  {{else}}
  {{- $first := .Pair.A -}}
  {{- $second := .Pair.B -}}
  {{- $firstSide := "A" -}}
  {{- $secondSide := "B" -}}
  {{- if eq .Pair.LeftID .Pair.B.ID -}}
    {{- $first = .Pair.B -}}
    {{- $second = .Pair.A -}}
    {{- $firstSide = "B" -}}
    {{- $secondSide = "A" -}}
  {{- end -}}
  <section class="session-pair" data-a="{{.Pair.A.ID}}" data-b="{{.Pair.B.ID}}"
           data-a-type="{{.Pair.A.FileType}}" data-b-type="{{.Pair.B.FileType}}">
    <div class="session-cells">
      <div class="session-cell" data-side="{{$firstSide}}">
        <h4 class="session-role" data-role="left">Left</h4>
        <a href="/images/{{$first.ID}}" target="_blank">
          {{template "partials/session_cell_media.html" (dict "ID" $first.ID "FileType" $first.FileType "ActiveGallery" $.ActiveGallery)}}
        </a>
        <div class="session-cell-meta">
          <strong class="session-cell-filename">{{$first.Filename}}</strong>
          <div class="session-facts mono-small">#{{$first.ID}}</div>
        </div>
      </div>
      <div class="session-bridge">
        <div class="session-distance" aria-hidden="true">
          <span class="session-distance-line"></span>
          <span class="session-distance-label">distance <strong>{{.Pair.Distance}}</strong></span>
          <span class="session-distance-line"></span>
        </div>
        <div class="session-controls">
          <button type="button" id="session-swap" title="Swap which side is left (W)">Swap sides (W)</button>
          <button type="button" id="session-compare" title="Compare the two images (C)">Compare (C)</button>
        </div>
      </div>
      <div class="session-cell" data-side="{{$secondSide}}">
        <h4 class="session-role" data-role="right">Right</h4>
        <a href="/images/{{$second.ID}}" target="_blank">
          {{template "partials/session_cell_media.html" (dict "ID" $second.ID "FileType" $second.FileType "ActiveGallery" $.ActiveGallery)}}
        </a>
        <div class="session-cell-meta">
          <strong class="session-cell-filename">{{$second.Filename}}</strong>
          <div class="session-facts mono-small">#{{$second.ID}}</div>
        </div>
      </div>
    </div>

    <p class="session-prompt"><span id="session-prompt-text" data-default="Hover a decision below to preview what it commits.">Hover a decision below to preview what it commits.</span></p>

    <form id="session-decision-form" hx-post="/relations/session/decide" hx-swap="none"
          hx-on::after-request="onSessionDecideResponse(event)">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
      <input type="hidden" name="a" value="{{.Pair.A.ID}}">
      <input type="hidden" name="b" value="{{.Pair.B.ID}}">
      <input type="hidden" name="left" id="session-left" value="{{.Pair.LeftID}}">
      <input type="hidden" name="order" value="{{.Order}}">

      <p class="session-hint">Use the buttons below to commit the decision, or swap sides first.</p>
      <div class="session-buttons">
        <button type="submit" name="type" value="duplicate"
                data-prompt-sentence="{right} is the same image as {left} ({left} is the original)."
                title="Right is the same image as left (1)">1 Same image (Duplicate)</button>
        <button type="submit" name="type" value="alternate"
                data-prompt-sentence="{left} and {right} are variants."
                title="Right is a variant of left (2)">2 Variant (Alternate)</button>
        <button type="submit" name="type" value="version"
                data-prompt-sentence="{right} is a newer revision of {left}."
                title="Right is a newer revision of left (3)">3 Newer revision (Version)</button>
        <button type="submit" name="type" value="derivative"
                data-prompt-sentence="{right} is based on {left}."
                title="Right is based on left (4)">4 Based on (Derivative)</button>
      </div>
      <div class="session-buttons session-buttons-secondary">
        <button type="submit" name="type" value="not_related"
                data-prompt-sentence="{left} and {right} are not related; the pair stays out of every future session."
                title="Not related (5)">5 Not related</button>
        <button type="submit" name="type" value="skip"
                data-prompt-sentence="Skip this pair - it returns at the back of the queue."
                title="Skip (6 / Space)">6 Skip</button>
      </div>
    </form>

    {{template "partials/relations_comparison.html" (dict "Left" .Left "Right" .Right)}}

    <dialog id="session-compare-dialog" class="compare-dialog">
      <div class="compare-captions" aria-hidden="true">
        <span class="compare-caption">Left <span class="mono-small" id="compare-caption-left-id">#?</span></span>
        <span class="compare-caption">Right <span class="mono-small" id="compare-caption-right-id">#?</span></span>
      </div>
      <div class="compare-stage" id="compare-stage">
        <div class="compare-slot compare-slot-left"  id="compare-slot-left"></div>
        <div class="compare-slot compare-slot-right" id="compare-slot-right"></div>
        <div class="compare-divider" id="compare-divider" aria-hidden="true">
          <span class="compare-divider-handle">&#x21d4;</span>
        </div>
      </div>
      <div class="dialog-actions">
        <button type="button" id="compare-close">Close</button>
      </div>
    </dialog>

    <dialog id="session-postdecide-delete-dialog">
      <h4><span id="postdecide-dup-id">#?</span> has been marked as a duplicate of <span id="postdecide-original-id">#?</span></h4>
      <p>Delete <span id="postdecide-dup-id-body">#?</span> from disk now?</p>
      <p class="field-hint">The original stays in the gallery; only this duplicate file is removed from disk.</p>
      <label id="postdecide-copy-tags-label" hidden>
        <input type="checkbox" id="postdecide-copy-tags">
        Copy unique tags onto the original first
      </label>
      <div class="dialog-actions">
        <button type="button" id="postdecide-keep" class="btn-sm" autofocus>Keep file</button>
        <button type="button" id="postdecide-delete" class="btn-danger btn-sm">Delete now</button>
      </div>
    </dialog>

  </section>
  {{end}}
</div>

<script>
(function() {
  var form = document.getElementById('session-decision-form');
  if (!form) {
    return;
  }
  var pair = document.querySelector('.session-pair');
  var leftInput = document.getElementById('session-left');

  // Browser form restoration on bfcache can leave a previous pair's id
  // in session-left after the page rerenders for a new pair; fall back
  // to A when the input doesn't match either side.
  function currentLeftID() {
    var v = leftInput ? leftInput.value : null;
    if (v === pair.dataset.a || v === pair.dataset.b) return v;
    return pair.dataset.a;
  }

  function flipSides() {
    var cells = pair.querySelector('.session-cells');
    if (!cells) return;
    // Children are [leftCell, bridge, rightCell]; swap left and right
    // around the bridge so the final order reads [right, bridge, left].
    // The per-cell heading and meta live inside each cell so they
    // travel with the swap; the bridge stays put.
    var left = cells.children[0];
    var bridge = cells.children[1];
    var right = cells.children[2];
    if (!left || !bridge || !right) return;
    cells.insertBefore(right, left);
    cells.insertBefore(bridge, left);
    // Update the in-cell Left / Right headings so they keep matching
    // the side the operator now reads as left.
    var newLeftCell = cells.children[0];
    var newRightCell = cells.children[2];
    var lh = newLeftCell.querySelector('.session-role');
    var rh = newRightCell.querySelector('.session-role');
    if (lh) { lh.textContent = 'Left'; lh.dataset.role = 'left'; }
    if (rh) { rh.textContent = 'Right'; rh.dataset.role = 'right'; }
    var newLeftSide = newLeftCell.dataset.side;
    var aID = pair.dataset.a, bID = pair.dataset.b;
    leftInput.value = (newLeftSide === 'A') ? aID : bID;
    // Keep the comparison table oriented to the on-screen sides: swap its
    // two header ids and each row's value cells so the fixed Left / Right
    // labels still describe the images now under them. cmp-win / cmp-match
    // markers ride along inside the value cells, so the highlight stays
    // attached to the right value.
    var table = pair.querySelector('.relations-compare-table');
    if (table) {
      var ids = table.querySelectorAll('thead .cmp-col-id');
      if (ids.length === 2) {
        var tmpID = ids[0].textContent;
        ids[0].textContent = ids[1].textContent;
        ids[1].textContent = tmpID;
      }
      table.querySelectorAll('tbody tr').forEach(function(tr) {
        if (tr.children.length === 3) tr.insertBefore(tr.children[2], tr.children[1]);
      });
    }
  }

  var swap = document.getElementById('session-swap');
  if (swap) swap.addEventListener('click', flipSides);

  // Prompt preview: every decision button (including 5 Not related
  // and 6 Skip) carries the full sentence shape via
  // data-prompt-sentence; the {left} / {right} placeholders resolve
  // against the operator's current left / right (so a Swap flip is
  // reflected immediately).
  var prompt = document.getElementById('session-prompt-text');
  if (prompt) {
    var defaultPrompt = prompt.getAttribute('data-default') || prompt.textContent;
    function resolvePrompt(template) {
      if (!leftInput || !pair) return template;
      var leftID = currentLeftID();
      var rightID = (leftID === pair.dataset.a) ? pair.dataset.b : pair.dataset.a;
      return template.replace(/{left}/g, '#' + leftID).replace(/{right}/g, '#' + rightID);
    }
    var promptButtons = form.querySelectorAll('button[data-prompt-sentence]');
    promptButtons.forEach(function(btn) {
      var tmpl = btn.getAttribute('data-prompt-sentence');
      btn.addEventListener('mouseenter', function() { prompt.textContent = resolvePrompt(tmpl); });
      btn.addEventListener('focus',      function() { prompt.textContent = resolvePrompt(tmpl); });
      btn.addEventListener('mouseleave', function() { prompt.textContent = defaultPrompt; });
      btn.addEventListener('blur',       function() { prompt.textContent = defaultPrompt; });
    });
  }

  // Compare dialog: a before/after slider over the full-size media.
  // The left slot is the base layer; the right slot sits on top clipped
  // to a width set by the cursor's X within the stage. The slot owns
  // either an <img> (image sides) or a muted/looping <video> (mp4 /
  // webm sides) so video-vs-video and mixed pairs slide the same way
  // image pairs do. Dragging (or moving without click on desktop)
  // updates the split.
  var compareBtn = document.getElementById('session-compare');
  var compareDlg = document.getElementById('session-compare-dialog');
  var compareStage = document.getElementById('compare-stage');
  var slotLeft = document.getElementById('compare-slot-left');
  var slotRight = document.getElementById('compare-slot-right');
  var divider = document.getElementById('compare-divider');
  function setSplit(pct) {
    if (pct < 0) pct = 0; else if (pct > 100) pct = 100;
    if (slotRight) slotRight.style.clipPath = 'inset(0 0 0 ' + pct + '%)';
    if (divider) divider.style.left = pct + '%';
  }
  function mountMedia(slot, id, fileType) {
    if (!slot) return;
    while (slot.firstChild) slot.removeChild(slot.firstChild);
    var src = '/images/' + id + '/file';
    var isVideo = fileType === 'mp4' || fileType === 'webm';
    var el = document.createElement(isVideo ? 'video' : 'img');
    if (isVideo) {
      el.autoplay = true;
      el.loop = true;
      el.muted = true;
      el.playsInline = true;
      el.preload = 'auto';
    } else {
      el.alt = slot.id === 'compare-slot-left' ? 'left' : 'right';
    }
    el.src = src;
    slot.appendChild(el);
  }
  function openCompare() {
    if (!compareDlg || !compareStage) return;
    var aID = pair.dataset.a, bID = pair.dataset.b;
    var aType = pair.dataset.aType || '';
    var bType = pair.dataset.bType || '';
    // session-left tracks the operator's current "left" so the slider
    // mirrors what's on screen even after a swap.
    var leftID = currentLeftID();
    var rightID = (leftID === aID) ? bID : aID;
    var leftType = (leftID === aID) ? aType : bType;
    var rightType = (leftID === aID) ? bType : aType;
    mountMedia(slotLeft, leftID, leftType);
    mountMedia(slotRight, rightID, rightType);
    var capL = document.getElementById('compare-caption-left-id');
    var capR = document.getElementById('compare-caption-right-id');
    if (capL) capL.textContent = '#' + leftID;
    if (capR) capR.textContent = '#' + rightID;
    setSplit(50);
    compareDlg.showModal();
  }
  if (compareBtn) compareBtn.addEventListener('click', openCompare);
  function clearCompareSlots() {
    [slotLeft, slotRight].forEach(function(slot) {
      if (!slot) return;
      // Pause any playing <video> before tear-down so audio decoders
      // and the video timer release immediately rather than running
      // unseen behind the closed <dialog>.
      var v = slot.querySelector('video');
      if (v) { try { v.pause(); } catch (_) {} v.removeAttribute('src'); v.load(); }
      while (slot.firstChild) slot.removeChild(slot.firstChild);
    });
  }
  var compareClose = document.getElementById('compare-close');
  if (compareClose) compareClose.addEventListener('click', function() {
    if (compareDlg) compareDlg.close();
  });
  if (compareDlg) compareDlg.addEventListener('close', clearCompareSlots);
  function trackSplit(evt) {
    if (!compareStage) return;
    var rect = compareStage.getBoundingClientRect();
    var x = (evt.touches ? evt.touches[0].clientX : evt.clientX) - rect.left;
    setSplit((x / rect.width) * 100);
  }
  if (compareStage) {
    var dragging = false;
    compareStage.addEventListener('mousedown', function(e) { dragging = true; trackSplit(e); });
    compareStage.addEventListener('mousemove', function(e) { if (dragging) trackSplit(e); });
    document.addEventListener('mouseup', function() { dragging = false; });
    compareStage.addEventListener('touchstart', function(e) { trackSplit(e); }, {passive: true});
    compareStage.addEventListener('touchmove',  function(e) { trackSplit(e); }, {passive: true});
  }

  // Post-decide modal hook. The decision form's hx-on::after-request
  // calls onSessionDecideResponse: when the server flagged a duplicate
  // decision via X-Relations-Post-Decision, open the delete dialog
  // instead of advancing. Every other decision rides the auto-reload.
  var postdecideDlg = document.getElementById('session-postdecide-delete-dialog');
  var pdCsrf = form.querySelector('input[name="_csrf"]');
  var pdCSRFValue = pdCsrf ? pdCsrf.value : '';
  var pdState = { dupID: 0, originalID: 0, groupID: 0 };
  window.onSessionDecideResponse = function(evt) {
    var detail = evt.detail || {};
    var xhr = detail.xhr;
    if (!detail.successful || !xhr) return;
    if (xhr.getResponseHeader('X-Relations-Post-Decision') === 'duplicate-cleanup') {
      pdState.dupID = parseInt(xhr.getResponseHeader('X-Relations-Duplicate-ID') || '0', 10);
      pdState.originalID = parseInt(xhr.getResponseHeader('X-Relations-Duplicate-OriginalID') || '0', 10);
      pdState.groupID = parseInt(xhr.getResponseHeader('X-Relations-Duplicate-GroupID') || '0', 10);
      var hasUnique = xhr.getResponseHeader('X-Relations-Duplicate-HasUniqueTags') === '1';
      var dupHeaderEl = document.getElementById('postdecide-dup-id');
      var dupBodyEl = document.getElementById('postdecide-dup-id-body');
      var origEl = document.getElementById('postdecide-original-id');
      var copyLabel = document.getElementById('postdecide-copy-tags-label');
      var copyBox = document.getElementById('postdecide-copy-tags');
      if (dupHeaderEl) dupHeaderEl.textContent = '#' + pdState.dupID;
      if (dupBodyEl) dupBodyEl.textContent = '#' + pdState.dupID;
      if (origEl) origEl.textContent = '#' + pdState.originalID;
      if (copyBox) copyBox.checked = false;
      if (copyLabel) copyLabel.hidden = !hasUnique;
      if (postdecideDlg) postdecideDlg.showModal();
      return;
    }
    if (xhr.status === 204) {
      window.location.reload();
    }
  };
  var pdKeep = document.getElementById('postdecide-keep');
  if (pdKeep) pdKeep.addEventListener('click', function() {
    if (postdecideDlg) postdecideDlg.close();
    window.location.reload();
  });
  var pdDelete = document.getElementById('postdecide-delete');
  if (pdDelete) pdDelete.addEventListener('click', function() {
    var copyBox = document.getElementById('postdecide-copy-tags');
    // URL-encoded body so the handler's r.ParseForm() actually reads
    // the fields; FormData lands as multipart and Go's ParseForm
    // leaves r.Form empty for non-urlencoded posts.
    var headers = {
      'HX-Request': 'true',
      'X-CSRF-Token': pdCSRFValue,
      'Content-Type': 'application/x-www-form-urlencoded',
    };
    var promise = Promise.resolve();
    if (copyBox && copyBox.checked && pdState.groupID > 0) {
      var copyParams = new URLSearchParams();
      copyParams.append('_csrf', pdCSRFValue);
      promise = fetch('/relations/dup-group/' + pdState.groupID + '/copy-tags', {
        method: 'POST', headers: headers, body: copyParams.toString(),
      });
    }
    promise.then(function() {
      var delParams = new URLSearchParams();
      delParams.append('_csrf', pdCSRFValue);
      delParams.append('image_id', String(pdState.dupID));
      return fetch('/relations/duplicates/marked/delete-one', {
        method: 'POST', headers: headers, body: delParams.toString(),
      });
    }).then(function() {
      if (postdecideDlg) postdecideDlg.close();
      window.location.reload();
    });
  });
  // Esc on the post-decide dialog must default to Keep (the safer
  // path); the native dialog cancel event fires before close, and
  // Keep just reloads.
  if (postdecideDlg) postdecideDlg.addEventListener('cancel', function(e) {
    e.preventDefault();
    if (pdKeep) pdKeep.click();
  });
  // Dialog-scoped shortcuts: D commits the delete; Enter keeps the
  // file (matches the autofocused Keep button). Both run only while
  // the modal is open so they do not collide with the queue
  // shortcuts wired below.
  if (postdecideDlg) postdecideDlg.addEventListener('keydown', function(e) {
    if (e.metaKey || e.ctrlKey || e.altKey) return;
    var tag = e.target.tagName;
    if (tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA') return;
    if (e.key === 'd' || e.key === 'D') {
      e.preventDefault();
      if (pdDelete) pdDelete.click();
    } else if (e.key === 'Enter') {
      e.preventDefault();
      if (pdKeep) pdKeep.click();
    }
  });

  // Keyboard shortcuts. 1-6 trigger the corresponding decision button;
  // W flips sides; C opens Compare; Space behaves like Skip.
  document.addEventListener('keydown', function(e) {
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT' || e.target.tagName === 'TEXTAREA') return;
    if (e.metaKey || e.ctrlKey || e.altKey) return;
    if (e.defaultPrevented) return;
    // While the compare dialog is open, Esc closes it and the rest of
    // the shortcuts pass through to dialog default behaviour.
    if (compareDlg && compareDlg.open) {
      if (e.key === 'Escape') { e.preventDefault(); compareDlg.close(); }
      return;
    }
    // Any other open dialog (gallery switch, shortcuts help) owns Esc
    // so the operator doesn't lose unsaved input by jumping back to
    // Relations.
    if (document.querySelector('dialog[open]')) return;
    var btnIndex = -1;
    if (e.key >= '1' && e.key <= '6') btnIndex = parseInt(e.key, 10) - 1;
    else if (e.key === ' ') { btnIndex = 5; e.preventDefault(); }
    else if (e.key === 'w' || e.key === 'W') { flipSides(); return; }
    else if (e.key === 'c' || e.key === 'C') { openCompare(); return; }
    else if (e.key === 'Escape') { e.preventDefault(); window.location.href = '/relations'; return; }
    if (btnIndex < 0) return;
    var btn = form.querySelectorAll('button[type="submit"]')[btnIndex];
    if (btn) btn.click();
  });
})();
</script>

{{template "layout_end" .}}
{{end}}