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

{{$csrf := index . "CSRFToken"}}

<div id="categories-page">
  <h2>Categories</h2>

  <div id="cat-flash"></div>
  <table class="cat-table">
    <thead><tr><th>Name</th><th>Color</th><th>Actions</th></tr></thead>
    <tbody id="cat-list">
      {{range index . "Categories"}}
      <tr id="cat-row-{{.ID}}">
        <td><span style="color:{{.Color}}">{{.Name}}</span></td>
        <td><span style="color:{{.Color}}" class="mono-small">{{.Color}}</span></td>
        <td>
          <div class="cat-actions">
            <button class="btn-sm btn-cat-recolor-trigger"
                    data-id="{{.ID}}" data-name="{{.Name}}" data-color="{{.Color}}">Recolor</button>
            {{if not .IsBuiltin}}
            <button class="btn-sm btn-cat-rename-trigger"
                    data-id="{{.ID}}" data-name="{{.Name}}">Rename</button>
            {{else}}
            <button class="btn-sm cat-action-spacer" tabindex="-1" aria-hidden="true">Rename</button>
            {{end}}
            {{if not .IsBuiltin}}
            <button class="btn-sm btn-danger btn-delete-category"
                    data-id="{{.ID}}" data-name="{{.Name}}"
                    data-csrf="{{$csrf}}">Delete</button>
            {{else}}
            <span class="field-hint">(built-in)</span>
            {{end}}
          </div>
        </td>
      </tr>
      {{end}}
    </tbody>
  </table>
  <form hx-post="/tags/categories"
        hx-target="#cat-flash" hx-swap="innerHTML"
        class="add-cat-form">
    <input type="hidden" name="_csrf" value="{{$csrf}}">
    <input type="text" name="name" placeholder="New category" required>
    {{/* Start the picker on a distinctive accent rather than the neutral
         #888888 fallback so a no-change Add doesn't produce a row whose
         hex blends into the body text. The schema and import-path
         defaults still resolve to #888888 for missing values. */}}
    <input type="color" name="color" value="#5c6bc0">
    <button type="submit">Add</button>
  </form>
</div>

<!-- Rename category dialog -->
<dialog id="cat-rename-dialog">
  <form id="cat-rename-form" hx-post="" hx-target="#cat-rename-error" hx-swap="innerHTML">
    <input type="hidden" name="_csrf" value="{{$csrf}}">
    <p>Rename category <strong id="cat-rename-src"></strong></p>
    <div class="field">
      <label>New name</label>
      <input type="text" name="name" id="cat-rename-input" required autocomplete="off">
    </div>
    <div id="cat-rename-error"></div>
    <div class="dialog-actions">
      <button type="submit">Rename</button>
      <button type="button" onclick="document.getElementById('cat-rename-dialog').close()">Cancel</button>
    </div>
  </form>
</dialog>

<!-- Recolor category dialog -->
<dialog id="cat-recolor-dialog">
  <form id="cat-recolor-form" hx-patch="" hx-target="#cat-recolor-error" hx-swap="innerHTML">
    <input type="hidden" name="_csrf" value="{{$csrf}}">
    <p>Recolor category <strong id="cat-recolor-src"></strong></p>
    <div class="field">
      <label>New color</label>
      <input type="color" name="color" id="cat-recolor-input" required>
    </div>
    <div id="cat-recolor-error"></div>
    <div class="dialog-actions">
      <button type="submit">Save</button>
      <button type="button" onclick="document.getElementById('cat-recolor-dialog').close()">Cancel</button>
    </div>
  </form>
</dialog>

<!-- Delete category dialog -->
<dialog id="delete-cat-dialog">
  <p>Delete category <strong id="del-cat-name"></strong>?</p>
  <p id="del-cat-tag-info" class="field-hint"></p>
  <div id="del-cat-move-section">
    <div class="field">
      <label>Move tags to category:</label>
      <select id="del-cat-target">
        {{range index . "Categories"}}
        <option value="{{.ID}}">{{.Name}}</option>
        {{end}}
      </select>
    </div>
  </div>
  <div id="del-cat-flash"></div>
  <div class="dialog-actions" id="del-cat-actions">
    <button type="button" id="del-cat-move-btn" class="btn-sm">Move tags &amp; delete</button>
    <button type="button" id="del-cat-delete-all-btn" class="btn-danger btn-sm">Delete all tags &amp; category</button>
    <button type="button" onclick="document.getElementById('delete-cat-dialog').close()">Cancel</button>
  </div>
</dialog>

<script>
document.querySelectorAll('.btn-cat-rename-trigger').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var id = this.dataset.id;
    var name = this.dataset.name;
    document.getElementById('cat-rename-src').textContent = name;
    clearSlots('cat-rename-error');
    var input = document.getElementById('cat-rename-input');
    input.value = name;
    openHxRewriteDialog('cat-rename-form', 'hx-post', '/tags/categories/' + id + '/rename', 'cat-rename-dialog');
    input.focus();
    input.select();
  });
});

document.querySelectorAll('.btn-cat-recolor-trigger').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var id = this.dataset.id;
    var name = this.dataset.name;
    var color = this.dataset.color;
    document.getElementById('cat-recolor-src').textContent = name;
    clearSlots('cat-recolor-error');
    document.getElementById('cat-recolor-input').value = color || '#888888';
    openHxRewriteDialog('cat-recolor-form', 'hx-patch', '/settings/categories/' + id, 'cat-recolor-dialog');
  });
});

// Delete category with prompt
document.querySelectorAll('.btn-delete-category').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var catId = this.dataset.id;
    var catName = this.dataset.name;
    var csrf = this.dataset.csrf;
    document.getElementById('del-cat-name').textContent = catName;
    clearSlots('del-cat-flash');

    fetch('/tags/categories/' + catId + '/count')
      .then(function(r) { return r.json(); })
      .then(function(data) {
        var count = data.count || 0;
        var info = document.getElementById('del-cat-tag-info');
        var moveSection = document.getElementById('del-cat-move-section');
        var deleteAllBtn = document.getElementById('del-cat-delete-all-btn');
        var moveBtn = document.getElementById('del-cat-move-btn');

        var targetSel = document.getElementById('del-cat-target');
        Array.from(targetSel.options).forEach(function(opt) {
          opt.disabled = (opt.value == catId);
          if (opt.disabled && targetSel.value == catId) {
            var first = Array.from(targetSel.options).find(function(o) { return !o.disabled; });
            if (first) targetSel.value = first.value;
          }
        });

        if (count === 0) {
          info.textContent = 'No tags in this category.';
          moveSection.style.display = 'none';
          deleteAllBtn.textContent = 'Delete category';
          moveBtn.style.display = 'none';
        } else {
          info.textContent = count + ' tag(s) will be affected.';
          moveSection.style.display = '';
          deleteAllBtn.textContent = 'Delete all ' + count + ' tag(s) & category';
          moveBtn.style.display = '';
        }

        deleteAllBtn.onclick = function() {
          doDeleteCategory(catId, csrf, 'delete_all', null);
        };
        moveBtn.onclick = function() {
          var targetId = document.getElementById('del-cat-target').value;
          doDeleteCategory(catId, csrf, 'move', targetId);
        };

        document.getElementById('delete-cat-dialog').showModal();
      })
      .catch(function() {
        showConfirm('Delete category "' + catName + '"?', function() {
          doDeleteCategory(catId, csrf, 'delete_all', null);
        }, '', 'Delete');
      });
  });
});

function doDeleteCategory(catId, csrf, action, targetCatId) {
  var url = '/tags/categories/' + catId + '?action=' + encodeURIComponent(action);
  if (targetCatId) url += '&target_id=' + encodeURIComponent(targetCatId);
  postForm(url, null, {
    method: 'DELETE',
    catchMsg: null,
    onOK: function() {
      // The handler also writes HX-Trigger for the htmx path, but raw
      // fetch doesn't process it; seed the shared stash directly so the
      // /categories reload picks up the flash.
      stashActionFlash('Category deleted.', 'ok');
      document.getElementById('delete-cat-dialog').close();
      window.location.href = window.location.pathname + window.location.search;
    },
    onErr: function(t) {
      var el = document.getElementById('del-cat-flash');
      var div = document.createElement('div');
      div.className = 'flash flash-err';
      div.textContent = t;
      el.innerHTML = '';
      el.appendChild(div);
    }
  });
}
</script>

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