{{/* relation_remove_form is one /relations/remove POST: confirm text, ok
     label, button label, the type-specific hidden fields (dict), and an
     optional reload-on-success for the destructive variants. */}}
{{define "relation_remove_form"}}
        <form hx-post="/relations/remove" hx-target="#flash-relations" hx-swap="innerHTML"
              hx-confirm="{{.Confirm}}"
              data-confirm-ok="{{.OK}}"
              {{if .Reload}}hx-on::after-request="if(event.detail.successful){setTimeout(function(){window.location.reload()},1500)}" {{end}}style="display:inline">
          <input type="hidden" name="_csrf" value="{{.CSRF}}">
          {{range $k, $v := .Fields}}<input type="hidden" name="{{$k}}" value="{{$v}}">
          {{end}}<button type="submit" class="btn-link-accent">[{{.Label}}]</button>
        </form>
{{end}}
{{define "relations_browse.html"}}
{{template "layout_head" .}}
<div id="sidebar-inner"></div>
{{template "layout_mid" .}}

<div id="relations-browse-page" data-esc-back="/relations">
  <div class="detail-topbar">
    <div class="detail-nav-group">
      <a href="/relations" class="back-link">‹ Relations</a>
      <span class="detail-nav-sep">/</span>
      <strong class="walker-page-title">Browse relations</strong>
    </div>
  </div>

  <div id="flash-relations"></div>

  <nav class="browse-tabs">
    <a href="/relations/browse?kind=duplicate"   class="browse-tab{{if eq .Kind "duplicate"}}   browse-tab-active{{end}}">Same image <span class="field-hint">({{.Counts.DupGroups}})</span></a>
    <a href="/relations/browse?kind=alternate"   class="browse-tab{{if eq .Kind "alternate"}}   browse-tab-active{{end}}">Variants <span class="field-hint">({{.Counts.AltGroups}})</span></a>
    <a href="/relations/browse?kind=version"     class="browse-tab{{if eq .Kind "version"}}     browse-tab-active{{end}}">Revision history <span class="field-hint">({{.Counts.VersionChains}})</span></a>
    <a href="/relations/browse?kind=derivative"  class="browse-tab{{if eq .Kind "derivative"}}  browse-tab-active{{end}}">Based on <span class="field-hint">({{.Counts.DerivativeTrees}})</span></a>
    <a href="/relations/browse?kind=not_related" class="browse-tab{{if eq .Kind "not_related"}} browse-tab-active{{end}}">Not related <span class="field-hint">({{.Counts.NotRelatedPairs}})</span></a>
    {{if gt (len .SortOptions) 1}}
    <div class="filter-group browse-sort">
      <span class="filter-label">Sort</span>
      {{range .SortOptions}}
      <a class="filter-btn{{if eq . $.Sort}} active{{end}}"
         href="/relations/browse?kind={{$.Kind}}&sort={{.}}">{{browseSortLabel .}}</a>
      {{end}}
    </div>
    {{end}}
  </nav>

  {{if not .Cards}}
  {{if eq .Kind "not_related"}}
  <p class="field-hint">You haven't rejected any pairs yet - pairs you mark Not related during a session will appear here so the queue stops resurfacing them.</p>
  {{else}}
  <p class="field-hint">Nothing declared yet for this kind.</p>
  {{end}}
  {{else}}
  <div class="merge-toolbar" id="merge-toolbar">
    <button type="button" class="btn-sm" id="merge-select-all-btn">Select all</button>
    <button type="button" class="btn-sm" id="merge-clear-btn">Cancel</button>
    <span class="merge-toolbar-count"><span id="merge-selected-count">0</span> selected</span>
    {{if or (eq .Kind "duplicate") (eq .Kind "alternate")}}
    <button type="button" class="btn-sm btn-purple" id="merge-selected-btn" disabled>Merge selected</button>
    {{end}}
    <button type="button" class="btn-sm btn-danger" id="remove-selected-btn" disabled>Remove selected</button>
  </div>
  {{$pageBase := printf "/relations/browse?kind=%s&sort=%s" .Kind .Sort}}
  <ul class="relations-cards">
    {{range .Cards}}
    {{$card := .}}
    <li class="relations-card relations-card-{{.Kind}}" data-group-id="{{.GroupID}}" data-group-kind="{{.Kind}}" data-group-original="{{.Original}}">
      {{if eq .Kind "duplicate"}}
        <label class="merge-select" title="Select this group for merging">
          <input type="checkbox" name="group_id" value="{{.GroupID}}" class="merge-checkbox" data-original-id="{{.Original}}">
        </label>
        <strong>Duplicate group #{{.GroupID}}</strong>
        ({{len .Members}} member(s), original #{{.Original}})
        <form hx-post="/relations/dup-group/{{.GroupID}}/copy-tags"
              hx-target="#flash-relations" hx-swap="innerHTML"
              hx-confirm="Copy tags from the duplicates onto the original? Rating tags are excluded."
              data-confirm-ok="Copy"
              style="display:inline">
          <input type="hidden" name="_csrf" value="{{$.CSRFToken}}">
          <button type="submit" class="btn-link-accent">[copy tags]</button>
        </form>
        {{template "relation_remove_form" dict "CSRF" $.CSRFToken "Confirm" "Dissolve this same-image group?" "OK" "Dissolve" "Label" "dissolve" "Reload" true "Fields" (dict "type" "dissolve-dup" "group_id" .GroupID)}}
        {{if eq (len .Members) 2}}
        {{template "relation_remove_form" dict "CSRF" $.CSRFToken "Confirm" "Dissolve this group and queue the pair for the session?" "OK" "Review again" "Label" "review again" "Fields" (dict "type" "review-again" "kind" "duplicate" "group_id" .GroupID)}}
        {{end}}
      {{else if eq .Kind "alternate"}}
        <label class="merge-select" title="Select this group for merging">
          <input type="checkbox" name="group_id" value="{{.GroupID}}" class="merge-checkbox">
        </label>
        <strong>Alternate group #{{.GroupID}}</strong>
        ({{len .Members}} member(s))
        {{template "relation_remove_form" dict "CSRF" $.CSRFToken "Confirm" "Dissolve this variant group?" "OK" "Dissolve" "Label" "dissolve" "Reload" true "Fields" (dict "type" "dissolve-alt" "group_id" .GroupID)}}
        {{if eq (len .Members) 2}}
        {{template "relation_remove_form" dict "CSRF" $.CSRFToken "Confirm" "Dissolve this group and queue the pair for the session?" "OK" "Review again" "Label" "review again" "Fields" (dict "type" "review-again" "kind" "alternate" "group_id" .GroupID)}}
        {{end}}
      {{else if eq .Kind "version"}}
        <label class="merge-select" title="Select this chain for removal">
          <input type="checkbox" value="{{index .Members 0}}" class="merge-checkbox">
        </label>
        <strong>Version chain #{{index .Members 0}}</strong>
        ({{len .Members}} image(s), oldest #{{index .Members 0}} → newest #{{index .Members (sub (len .Members) 1)}})
        {{template "relation_remove_form" dict "CSRF" $.CSRFToken "Confirm" (printf "Dissolve this version chain? Every edge between the %d images is dropped." (len .Members)) "OK" "Dissolve" "Label" "dissolve" "Reload" true "Fields" (dict "type" "dissolve-version" "root_id" (index .Members 0))}}
        {{if eq (len .Members) 2}}
        {{template "relation_remove_form" dict "CSRF" $.CSRFToken "Confirm" "Unlink this revision edge and queue the pair for the session?" "OK" "Review again" "Label" "review again" "Fields" (dict "type" "review-again" "kind" "version" "a" (index .Members 0) "b" (index .Members 1))}}
        {{end}}
      {{else if eq .Kind "derivative"}}
        <label class="merge-select" title="Select this tree for removal">
          <input type="checkbox" value="{{index .Members 0}}" class="merge-checkbox">
        </label>
        <strong>Derivative tree</strong>
        ({{len .Members}} image(s), source #{{index .Members 0}})
        {{template "relation_remove_form" dict "CSRF" $.CSRFToken "Confirm" (printf "Dissolve this derivative tree? Every edge between the %d images is dropped." (len .Members)) "OK" "Dissolve" "Label" "dissolve" "Reload" true "Fields" (dict "type" "dissolve-derivative" "root_id" (index .Members 0))}}
        {{if eq (len .Members) 2}}
        {{template "relation_remove_form" dict "CSRF" $.CSRFToken "Confirm" "Unlink this derivative edge and queue the pair for the session?" "OK" "Review again" "Label" "review again" "Fields" (dict "type" "review-again" "kind" "derivative" "a" (index .Members 0) "b" (index .Members 1))}}
        {{end}}
      {{else if eq .Kind "not_related"}}
        <label class="merge-select" title="Select this pair for removal">
          <input type="checkbox" value="{{index .Members 0}}:{{index .Members 1}}" class="merge-checkbox">
        </label>
        <strong>Not related</strong>
        (#{{index .Members 0}} ↔ #{{index .Members 1}})
        {{template "relation_remove_form" dict "CSRF" $.CSRFToken "Confirm" "Unlink this not-related pair? It can resurface in find-pairs." "OK" "Unlink" "Label" "unlink" "Reload" true "Fields" (dict "type" "not_related" "a" (index .Members 0) "b" (index .Members 1))}}
        {{template "relation_remove_form" dict "CSRF" $.CSRFToken "Confirm" "Unlink this pair and queue it back into the session?" "OK" "Review again" "Label" "review again" "Fields" (dict "type" "review-again" "kind" "not_related" "a" (index .Members 0) "b" (index .Members 1))}}
      {{end}}
      {{if .CreatedAt}}
      <div class="relations-card-meta field-hint">declared <time>{{.CreatedAt}}</time></div>
      {{end}}
      {{if eq .Kind "version"}}
      {{$first := index .Members 0}}{{$last := index .Members (sub (len .Members) 1)}}
      <details class="relations-card-expand">
        <summary class="relations-card-summary">
          {{template "partials/relations_card_thumb.html" (dict "ID" $first "ActiveGallery" $.ActiveGallery "ExtraClass" "relations-card-summary-thumb" "Title" (printf "Image %d - added %s" $first (index $card.MemberIngestedAt $first)))}}
          <span class="relations-chain-arrow" aria-hidden="true">→</span>
          {{template "partials/relations_card_thumb.html" (dict "ID" $last "ActiveGallery" $.ActiveGallery "ExtraClass" "relations-card-summary-thumb" "Title" (printf "Image %d - added %s" $last (index $card.MemberIngestedAt $last)))}}
          <span class="relations-card-summary-meta">{{len .Members}} images</span>
        </summary>
        <div class="relations-card-chain">
          {{range $i, $id := .Members}}
          {{if $i}}<span class="relations-chain-arrow" aria-hidden="true">→</span>{{end}}
          {{template "partials/relations_card_thumb.html" (dict "ID" $id "ActiveGallery" $.ActiveGallery "Title" (printf "Image %d - added %s" $id (index $card.MemberIngestedAt $id)) "Date" (index $card.MemberIngestedAt $id))}}
          {{end}}
        </div>
      </details>
      {{else if eq .Kind "derivative"}}
      {{$source := index .Members 0}}
      <details class="relations-card-expand">
        <summary class="relations-card-summary">
          {{template "partials/relations_card_thumb.html" (dict "ID" $source "ActiveGallery" $.ActiveGallery "ExtraClass" "relations-card-summary-thumb" "Title" (printf "Image %d - added %s" $source (index $card.MemberIngestedAt $source)))}}
          <span class="relations-card-summary-meta">tree, {{len .Members}} images</span>
        </summary>
        <div class="relations-card-tree">
          {{range .TreeRows}}
          {{$row := .}}
          <div class="relations-tree-row" data-depth="{{.Depth}}">
            {{if .Trunks}}
            <div class="relations-tree-prefix" aria-hidden="true">
              {{range $row.Trunks}}<span class="relations-tree-trunk" data-style="{{.}}"></span>{{end}}
            </div>
            {{end}}
            {{template "partials/relations_card_thumb.html" (dict "ID" .ID "ActiveGallery" $.ActiveGallery "Title" (printf "Image %d - added %s" .ID (index $card.MemberIngestedAt .ID)) "Date" (index $card.MemberIngestedAt .ID))}}
          </div>
          {{end}}
        </div>
      </details>
      {{else}}
      <div class="relations-card-thumbs{{if eq .Kind "not_related"}} relations-card-thumbs-pair{{end}}">
        {{if and (eq .Kind "duplicate") .Original}}
        {{$orig := .Original}}
        {{template "partials/relations_card_thumb.html" (dict "ID" $orig "ActiveGallery" $.ActiveGallery "ExtraClass" "relations-card-original" "Title" (printf "Original %d - added %s" $orig (index $card.MemberIngestedAt $orig)) "Tag" "original" "Date" (index $card.MemberIngestedAt $orig))}}
        {{range $id := .Members}}
          {{if ne $id $orig}}
          {{template "partials/relations_card_thumb.html" (dict "ID" $id "ActiveGallery" $.ActiveGallery "Title" (printf "Image %d - added %s" $id (index $card.MemberIngestedAt $id)) "Date" (index $card.MemberIngestedAt $id))}}
          {{end}}
        {{end}}
        {{else if eq .Kind "not_related"}}
        {{$left := index .Members 0}}{{$right := index .Members 1}}
        {{template "partials/relations_card_thumb.html" (dict "ID" $left "ActiveGallery" $.ActiveGallery "Title" (printf "Image %d - added %s" $left (index $card.MemberIngestedAt $left)) "Date" (index $card.MemberIngestedAt $left))}}
        <span class="relations-card-arrow" aria-hidden="true">↔</span>
        {{template "partials/relations_card_thumb.html" (dict "ID" $right "ActiveGallery" $.ActiveGallery "Title" (printf "Image %d - added %s" $right (index $card.MemberIngestedAt $right)) "Date" (index $card.MemberIngestedAt $right))}}
        {{else}}
        {{range $id := .Members}}
        {{template "partials/relations_card_thumb.html" (dict "ID" $id "ActiveGallery" $.ActiveGallery "Title" (printf "Image %d - added %s" $id (index $card.MemberIngestedAt $id)) "Date" (index $card.MemberIngestedAt $id))}}
        {{end}}
        {{end}}
      </div>
      {{end}}
    </li>
    {{end}}
  </ul>

  {{template "partials/pagination.html" (dict "Base" (printf "%s&page=" $pageBase) "Page" .Page "Total" .TotalPages)}}
  {{end}}
</div>

<dialog id="merge-dup-dialog">
  <form id="merge-dup-form" method="post" action="/relations/browse-groups/merge?kind=dup">
    <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
    <h4>Merge same-image groups</h4>
    <p class="field-hint">Which group's original wins on the merged row?</p>
    <ul id="merge-dup-choices" class="merge-dup-choices"></ul>
    <div class="dialog-actions">
      <button type="submit" class="btn-purple">Merge</button>
      <button type="button" onclick="document.getElementById('merge-dup-dialog').close()">Cancel</button>
    </div>
  </form>
</dialog>

<script>
(function() {
  var kind = {{.Kind}};
  var toolbarCount = document.getElementById('merge-selected-count');
  var mergeBtn = document.getElementById('merge-selected-btn');
  var removeBtn = document.getElementById('remove-selected-btn');
  if (!toolbarCount || !removeBtn) return;
  function selectedCheckboxes() {
    return Array.prototype.slice.call(document.querySelectorAll('.merge-checkbox:checked'));
  }
  function refresh() {
    var n = selectedCheckboxes().length;
    toolbarCount.textContent = n;
    // Merge needs two groups to consolidate; Remove takes any non-empty
    // selection because each row dissolves independently.
    if (mergeBtn) mergeBtn.disabled = n < 2;
    removeBtn.disabled = n < 1;
  }
  document.querySelectorAll('.merge-checkbox').forEach(function(cb) {
    cb.addEventListener('change', refresh);
  });
  var selectAllBtn = document.getElementById('merge-select-all-btn');
  if (selectAllBtn) selectAllBtn.addEventListener('click', function() {
    document.querySelectorAll('.merge-checkbox').forEach(function(cb) { cb.checked = true; });
    refresh();
  });
  var clearBtn = document.getElementById('merge-clear-btn');
  if (clearBtn) clearBtn.addEventListener('click', function() {
    document.querySelectorAll('.merge-checkbox').forEach(function(cb) { cb.checked = false; });
    refresh();
  });
  refresh();
  // While a selection is active, a plain click on a card's background
  // toggles it, like the gallery's batch-mode thumbnails.
  document.addEventListener('click', function(e) {
    if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
    if (!e.target.closest) return;
    if (!selectedCheckboxes().length) return;
    if (e.target.closest('a, button, form, label, input, summary, details')) return;
    var card = e.target.closest('.relations-card');
    if (!card) return;
    var cb = card.querySelector('.merge-checkbox');
    if (!cb) return;
    cb.checked = !cb.checked;
    refresh();
  });
  // Remove-selected: per-kind confirmation copy, then a single POST to
  // the bulk dissolve endpoint. Each kind names its id field after the
  // existing per-row dissolve form (group_id for dup/alt, root_id for
  // version/derivative, pair="a:b" for not_related).
  removeBtn.addEventListener('click', function() {
    var sel = selectedCheckboxes();
    if (!sel.length) return;
    var n = sel.length;
    var prompt;
    if (kind === 'duplicate') {
      prompt = 'Dissolve ' + n + ' same-image group(s)?';
    } else if (kind === 'alternate') {
      prompt = 'Dissolve ' + n + ' variant group(s)?';
    } else if (kind === 'version') {
      prompt = 'Dissolve ' + n + ' revision chain(s)? Every edge in each chain is dropped.';
    } else if (kind === 'derivative') {
      prompt = 'Dissolve ' + n + ' derivative tree(s)? Every edge in each tree is dropped.';
    } else {
      prompt = 'Unlink ' + n + ' not-related pair(s)? They can resurface in find-pairs.';
    }
    showConfirm(prompt, function() {
      submitDissolve(kind, sel.map(function(cb) { return cb.value; }));
    }, '', 'Remove');
  });
  function submitDissolve(kind, values) {
    var field = 'group_id';
    if (kind === 'version' || kind === 'derivative') field = 'root_id';
    else if (kind === 'not_related') field = 'pair';
    var params = new URLSearchParams();
    values.forEach(function(v) { params.append(field, v); });
    postForm('/relations/browse-groups/dissolve?kind=' + encodeURIComponent(kind), params, {
      hx: true,
      flashId: 'flash-relations',
      catchMsg: null,
      onOK: function(resp) {
        var redirect = resp.headers.get('HX-Redirect');
        window.location.href = redirect || ('/relations/browse?kind=' + kind);
      },
    });
  }
  // Merge-selected: only present on dup/alt tabs. Dup needs the
  // operator to pick which group's original survives; alt just merges.
  if (!mergeBtn) return;
  var mergeKind = (kind === 'duplicate') ? 'dup' : 'alt';
  mergeBtn.addEventListener('click', function() {
    var sel = selectedCheckboxes();
    if (sel.length < 2) return;
    if (mergeKind === 'alt') {
      showConfirm('Merge ' + sel.length + ' variant groups into one?', function() {
        submitMerge(sel.map(function(cb) { return cb.value; }), '/relations/browse-groups/merge?kind=alt', null);
      }, '', 'Merge');
      return;
    }
    var dlg = document.getElementById('merge-dup-dialog');
    var choices = document.getElementById('merge-dup-choices');
    if (!dlg || !choices) return;
    choices.innerHTML = '';
    var defaultGroupID = null;
    sel.forEach(function(cb) {
      var card = cb.closest('.relations-card');
      if (!card) return;
      var origID = cb.dataset.originalId || card.dataset.groupOriginal;
      var thumb = '/thumbnails/{{.ActiveGallery}}/' + origID + '.jpg';
      var li = document.createElement('li');
      li.className = 'merge-dup-choice';
      li.innerHTML = ''
        + '<label>'
        + '  <input type="radio" name="keep_original_from" value="' + cb.value + '">'
        + '  <img src="' + thumb + '" alt="image ' + origID + '" class="merge-dup-thumb">'
        + '  <span class="merge-dup-meta">Group ' + cb.value + ' (original #' + origID + ')</span>'
        + '</label>';
      choices.appendChild(li);
      var gid = parseInt(cb.value, 10);
      if (defaultGroupID === null || gid < defaultGroupID) {
        defaultGroupID = gid;
      }
    });
    if (defaultGroupID !== null) {
      var radio = choices.querySelector('input[value="' + defaultGroupID + '"]');
      if (radio) radio.checked = true;
    }
    var form = document.getElementById('merge-dup-form');
    form.dataset.selectedIds = JSON.stringify(sel.map(function(cb) { return cb.value; }));
    dlg.showModal();
  });
  var dupForm = document.getElementById('merge-dup-form');
  if (dupForm) {
    dupForm.addEventListener('submit', function(e) {
      e.preventDefault();
      var ids = [];
      try { ids = JSON.parse(dupForm.dataset.selectedIds || '[]'); } catch (_) { ids = []; }
      if (ids.length < 2) return;
      var keep = dupForm.querySelector('input[name="keep_original_from"]:checked');
      submitMerge(ids, '/relations/browse-groups/merge?kind=dup',
        keep ? keep.value : '');
    });
  }
  function submitMerge(ids, url, keepOriginalFrom) {
    // URL-encoded body so the handler's r.ParseForm() actually sees
    // the group_id fields; a FormData body lands as multipart and
    // Go's ParseForm leaves r.Form empty for non-urlencoded posts.
    var params = new URLSearchParams();
    ids.forEach(function(id) { params.append('group_id', id); });
    if (keepOriginalFrom !== null && keepOriginalFrom !== '') {
      params.append('keep_original_from', keepOriginalFrom);
    }
    postForm(url, params, {
      hx: true,
      flashId: 'flash-relations',
      catchMsg: null,
      onOK: function(resp) {
        var redirect = resp.headers.get('HX-Redirect');
        window.location.href = redirect || ('/relations/browse?kind=' + (url.indexOf('kind=dup') > -1 ? 'duplicate' : 'alternate'));
      },
    });
  }
})();
</script>

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