{% extends "base.html" %}
{% block title %}Card Browser — {{ set_name }}{% endblock %}
{% block head %}
<link rel="stylesheet" href="/card-static/ptg-card.css">
<script src="/card-static/ptg-card.js"></script>
<script>
window.PTG_BROWSER = { set_id: {{ set_id|tojson }} };
</script>
<script src="/static/js/card-preview.js"></script>
{% endblock %}
{% block content %}

<h1>Card Browser <span class="subtitle">— {{ set_name }} ({{ card_count }} cards)</span></h1>

<div id="bulk-toolbar" class="bulk-toolbar" style="display:none">
  <span id="bulk-count" class="bulk-count"></span>
  <button id="bulk-delete" class="btn btn-sm btn-danger">Delete Selected</button>
  <button id="bulk-duplicate" class="btn btn-sm">Duplicate Selected</button>
  <span class="bulk-copymove">
    <select id="bulk-set-select" class="cp-set-select"></select>
    <button id="bulk-copy" class="btn btn-sm">Copy Selected</button>
    <button id="bulk-move" class="btn btn-sm">Move Selected</button>
  </span>
  <span id="bulk-status" class="msg"></span>
</div>

<div class="browser-layout">
  <div class="browser-table-panel">
    <form method="get" class="filter-bar">
      <div class="form-row">
        <div class="form-group">
          <label for="filter_name">Search</label>
          <input type="text" id="filter_name" name="filter_name" value="{{ filter_name }}" placeholder="Search by name...">
        </div>
        <div class="form-group">
          <label for="filter_type">Type</label>
          <select id="filter_type" name="filter_type">
            <option value="">All</option>
            {% for ct in card_types %}
            <option value="{{ ct }}" {% if filter_type == ct %}selected{% endif %}>{{ ct.capitalize() }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-group">
          <label for="filter_mana">Mana</label>
          <select id="filter_mana" name="filter_mana">
            <option value="">All</option>
            {% for mt in mana_types %}
            <option value="{{ mt }}" {% if filter_mana == mt %}selected{% endif %}>{{ mt.capitalize() }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-group">
          <label for="filter_group">Group</label>
          <select id="filter_group" name="filter_group">
            <option value="">All</option>
            {% for g in group_ids %}
            <option value="{{ g }}" {% if filter_group == g %}selected{% endif %}>{{ g }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-group" style="align-self: flex-end;">
          <button type="submit" class="btn btn-primary">Filter</button>
          <a href="/set/{{ set_id }}/browser" class="btn">Clear</a>
        </div>
      </div>
    </form>

    <div class="browser-view-toggle">
      <button type="button" class="btn btn-sm active-toggle" id="btn-gallery" onclick="switchView('gallery')">Gallery</button>
      <button type="button" class="btn btn-sm" id="btn-table" onclick="switchView('table')">Table</button>
    </div>

    <div class="card-gallery" id="card-gallery">
      {% for card in cards %}
      <div class="card-hand" data-card-id="{{ card.card_id }}"
           style="--card-color: {{ card|card_color }}; background: {{ card|card_style_background }}"
           onclick="previewAndSelectGallery(this, '{{ card.card_id }}')"
           ondblclick="window.location.href='/set/{{ set_id }}/editor/{{ card.card_id }}'">
        <div class="ch-header">
          <span class="ch-name">{{ card.name }}</span>
          <span class="ch-mana">{{ card.mana|mana_badges }}</span>
        </div>
        <div class="ch-art">
          <img class="ch-art-img" src="/api/sets/{{ set_id }}/art/{{ card.card_id }}/thumb" loading="lazy"
               onerror="this.style.display='none';this.nextElementSibling.style.display=''">
          <div class="ch-art-plh" style="display:none"></div>
        </div>
        <div class="ch-type">
          <span>{% set ct = card.type.value if hasattr(card.type, 'value') else card.type|string %}{{ ct }}</span>
          {% if card.group %}<span> — {{ card.group }}</span>{% endif %}
          {% set rarity = card.metadata.get('rarity', '') if card.metadata else '' %}
          {% if rarity %}<span class="rarity-icon rarity-{{ rarity }}" title="{{ rarity }}"></span>{% endif %}
        </div>
        {% if card.description %}
        <div class="ch-desc">{{ card.description }}</div>
        {% endif %}
        {% set abilities = card.abilities or [] %}
        {% if abilities %}
        <div class="ch-separator"></div>
        <div class="ch-abilities">
          {% for ab in abilities[:2] %}
          <div class="ch-ab-line">{{ ab.name }}</div>
          {% endfor %}
          {% if abilities|length > 2 %}
          <div class="ch-ab-line">+{{ abilities|length - 2 }} more</div>
          {% endif %}
        </div>
        {% endif %}
        <div class="ch-stats-pt">
          <span>{{ card.attack }}</span>/<span>{{ card.defense }}</span>
        </div>
      </div>
      {% endfor %}
      {% if not cards %}
      <div class="empty-state" style="grid-column: 1 / -1;">No cards found.</div>
      {% endif %}
    </div>

    <div class="deck-table-container" id="card-table">
      <table class="data-table">
        <thead>
          <tr>
            <th class="col-chk"><input type="checkbox" id="select-all" title="Select all"></th>
            <th><a href="?sort_by=card_id&sort_dir={% if sort_by == 'card_id' and sort_dir == 'asc' %}desc{% else %}asc{% endif %}&filter_name={{ filter_name }}&filter_type={{ filter_type }}&filter_mana={{ filter_mana }}&filter_group={{ filter_group }}">Card ID</a></th>
            <th><a href="?sort_by=name&sort_dir={% if sort_by == 'name' and sort_dir == 'asc' %}desc{% else %}asc{% endif %}&filter_name={{ filter_name }}&filter_type={{ filter_type }}&filter_mana={{ filter_mana }}&filter_group={{ filter_group }}">Name</a></th>
            <th><a href="?sort_by=type&sort_dir={% if sort_by == 'type' and sort_dir == 'asc' %}desc{% else %}asc{% endif %}&filter_name={{ filter_name }}&filter_type={{ filter_type }}&filter_mana={{ filter_mana }}&filter_group={{ filter_group }}">Type</a></th>
            <th><a href="?sort_by=group&sort_dir={% if sort_by == 'group' and sort_dir == 'asc' %}desc{% else %}asc{% endif %}&filter_name={{ filter_name }}&filter_type={{ filter_type }}&filter_mana={{ filter_mana }}&filter_group={{ filter_group }}">Group</a></th>
            <th>Mana Cost</th>
            <th>Atk</th>
            <th>Def</th>
          </tr>
        </thead>
        <tbody>
          {% for card in cards %}
          <tr class="clickable-row" data-card-id="{{ card.card_id }}" onclick="previewAndSelect(this, '{{ card.card_id }}')" ondblclick="window.location.href='/set/{{ set_id }}/editor/{{ card.card_id }}'">
            <td class="col-chk" onclick="event.stopPropagation()"><input type="checkbox" class="card-chk" value="{{ card.card_id }}"></td>
            <td><code>{{ card.card_id }}</code></td>
            <td><strong>{{ card.name }}</strong></td>
            <td>{% set ct = card.type.value if hasattr(card.type, 'value') else card.type|string %}{{ ct }}</td>
            <td>{{ card.group or '' }}</td>
            <td>{{ card.mana|mana_badges }}</td>
            <td>{{ card.attack }}</td>
            <td>{{ card.defense }}</td>
          </tr>
          {% endfor %}
          {% if not cards %}
          <tr><td colspan="8" class="empty-state">No cards found.</td></tr>
          {% endif %}
        </tbody>
      </table>
    </div>

    {% if filter_name or filter_type or filter_mana or filter_group %}
    <p class="filter-info">Showing {{ cards|length }} card(s) matching filters.</p>
    {% endif %}
  </div>

  <div class="card-preview-panel">
    {% include "components/card_preview.html" %}
  </div>
</div>

<script>
var _selectedCardId = null;
var _selectedRow = null;
var _selectedSet = new Set();

function getSelectedIds() {
  var ids = [];
  document.querySelectorAll('.card-chk:checked').forEach(function(cb) { ids.push(cb.value); });
  return ids;
}

function updateBulkUI() {
  var ids = getSelectedIds();
  var toolbar = document.getElementById('bulk-toolbar');
  var countEl = document.getElementById('bulk-count');
  if (ids.length > 0) {
    toolbar.style.display = '';
    countEl.textContent = ids.length + ' card(s) selected';
  } else {
    toolbar.style.display = 'none';
  }
  document.getElementById('select-all').checked = ids.length > 0 && ids.length === document.querySelectorAll('.card-chk').length;
}

document.getElementById('select-all').addEventListener('click', function() {
  var checked = this.checked;
  document.querySelectorAll('.card-chk').forEach(function(cb) { cb.checked = checked; });
  updateBulkUI();
});

document.addEventListener('change', function(e) {
  if (e.target.classList.contains('card-chk')) updateBulkUI();
});

CardPreview.init(window.PTG_BROWSER.set_id, {
  onCardChanged: function(cardId) {
    _selectedCardId = cardId;
    document.getElementById('cp-actions').style.display = '';
  }
});

function previewAndSelect(row, cardId) {
  if (_selectedRow) _selectedRow.classList.remove('preview-selected');
  row.classList.add('preview-selected');
  _selectedRow = row;
  CardPreview.showFromApi(cardId);
}

function previewAndSelectGallery(el, cardId) {
  if (_selectedRow) _selectedRow.classList.remove('preview-selected');
  el.classList.add('preview-selected');
  _selectedRow = el;
  CardPreview.showFromApi(cardId);
}

function switchView(view) {
  var table = document.getElementById('card-table');
  var gallery = document.getElementById('card-gallery');
  var btnG = document.getElementById('btn-gallery');
  var btnT = document.getElementById('btn-table');
  table.style.display = view === 'table' ? '' : 'none';
  gallery.style.display = view === 'gallery' ? '' : 'none';
  btnG.classList.toggle('active-toggle', view === 'gallery');
  btnT.classList.toggle('active-toggle', view === 'table');
  localStorage.setItem('ptg-browser-view', view);
}

(function() {
  var saved = localStorage.getItem('ptg-browser-view') || 'gallery';
  switchView(saved);
})();

function bulkStatus(msg, type) {
  var el = document.getElementById('bulk-status');
  el.textContent = msg;
  el.className = 'msg ' + (type || '');
  if (type !== 'error') setTimeout(function() { el.textContent = ''; }, 4000);
}

function loadSets(targetId) {
  var sel = document.getElementById(targetId);
  var existing = sel.getAttribute('data-loaded');
  if (existing) return Promise.resolve();
  return fetch('/api/sets').then(function(r) { return r.json(); }).then(function(sets) {
    sets.forEach(function(s) {
      var opt = document.createElement('option');
      opt.value = s.set_id;
      opt.textContent = s.name || s.set_id;
      sel.appendChild(opt);
    });
    sel.setAttribute('data-loaded', '1');
  });
}

document.addEventListener('DOMContentLoaded', function() {
  loadSets('cp-set-select');

  // Existing single-card actions
  var setSelect = document.getElementById('cp-set-select');

  document.getElementById('cp-btn-duplicate').addEventListener('click', async function() {
    if (!_selectedCardId) return;
    var res = await fetch('/api/sets/' + window.PTG_BROWSER.set_id + '/cards/' + _selectedCardId + '/copy', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ target_set_id: window.PTG_BROWSER.set_id }),
    });
    var data = await res.json();
    if (data.success) {
      alertToast('Duplicated as: ' + data.card_id, function() { location.reload(); });
    } else {
      alertToast('Error: ' + (data.error || 'unknown'));
    }
  });

  document.getElementById('cp-btn-delete').addEventListener('click', function() {
    if (!_selectedCardId) return;
    toast('Delete "' + _selectedCardId + '"?\n\nThis cannot be undone.', 'Delete', 'btn-danger', async function() {
      var res = await fetch('/api/sets/' + window.PTG_BROWSER.set_id + '/cards/' + _selectedCardId, {
        method: 'DELETE',
      });
      var data = await res.json();
      if (data.success) {
        alertToast('Deleted: ' + _selectedCardId, function() { location.reload(); });
      } else {
        alertToast('Error: ' + (data.error || 'unknown'));
      }
    });
  });

  document.getElementById('cp-btn-copy').addEventListener('click', async function() {
    if (!_selectedCardId) return;
    var target = setSelect.value;
    if (!target) { alertToast('Select a target set'); return; }
    var res = await fetch('/api/sets/' + window.PTG_BROWSER.set_id + '/cards/' + _selectedCardId + '/copy', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ target_set_id: target }),
    });
    var data = await res.json();
    alertToast(data.success ? 'Copied as: ' + data.card_id : 'Error: ' + (data.error || 'unknown'));
  });

  document.getElementById('cp-btn-move').addEventListener('click', function() {
    if (!_selectedCardId) return;
    var target = setSelect.value;
    if (!target) { alertToast('Select a target set'); return; }
    toast('Move "' + _selectedCardId + '" to set "' + target + '"?\n\nThis will remove the card from all decks in the current set.', 'Move', 'btn-danger', async function() {
      var res = await fetch('/api/sets/' + window.PTG_BROWSER.set_id + '/cards/' + _selectedCardId + '/move', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ target_set_id: target }),
      });
      var data = await res.json();
      if (data.success) {
        var msg = 'Moved to ' + target;
        if (data.decks_cleaned > 0) msg += '\nRemoved from ' + data.decks_cleaned + ' deck(s).';
        alertToast(msg, function() { location.reload(); });
      } else {
        alertToast('Error: ' + (data.error || 'unknown'));
      }
    });
  });

  // ── Bulk actions ──

  async function bulkDelete() {
    var ids = getSelectedIds();
    if (!ids.length) return;
    toast('Delete ' + ids.length + ' selected card(s)?\n\nThis cannot be undone.', 'Delete', 'btn-danger', async function() {
      var ok = 0, fail = 0;
      for (var i = 0; i < ids.length; i++) {
        try {
          var res = await fetch('/api/sets/' + window.PTG_BROWSER.set_id + '/cards/' + ids[i], { method: 'DELETE' });
          var data = await res.json();
          if (data.success) ok++; else fail++;
        } catch (e) { fail++; }
      }
      bulkStatus('Deleted ' + ok + (fail ? ', ' + fail + ' failed' : ''));
      if (ok > 0) location.reload();
    });
  }

  async function bulkDuplicate() {
    var ids = getSelectedIds();
    if (!ids.length) return;
    bulkStatus('Duplicating...');
    var ok = 0, fail = 0, results = [];
    for (var i = 0; i < ids.length; i++) {
      try {
        var res = await fetch('/api/sets/' + window.PTG_BROWSER.set_id + '/cards/' + ids[i] + '/copy', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ target_set_id: window.PTG_BROWSER.set_id }),
        });
        var data = await res.json();
        if (data.success) { ok++; results.push(data.card_id); } else fail++;
      } catch (e) { fail++; }
    }
    bulkStatus('Duplicated ' + ok + (fail ? ', ' + fail + ' failed' : ''));
    if (ok > 0) location.reload();
  }

  async function bulkCopy() {
    var ids = getSelectedIds();
    if (!ids.length) return;
    var target = document.getElementById('bulk-set-select').value;
    if (!target) { bulkStatus('Select a target set', 'error'); return; }
    bulkStatus('Copying...');
    var ok = 0, fail = 0, results = [];
    for (var i = 0; i < ids.length; i++) {
      try {
        var res = await fetch('/api/sets/' + window.PTG_BROWSER.set_id + '/cards/' + ids[i] + '/copy', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ target_set_id: target }),
        });
        var data = await res.json();
        if (data.success) { ok++; results.push(data.card_id); } else fail++;
      } catch (e) { fail++; }
    }
    bulkStatus('Copied ' + ok + ' to ' + target + (fail ? ', ' + fail + ' failed' : ''));
  }

  async function bulkMove() {
    var ids = getSelectedIds();
    if (!ids.length) return;
    var target = document.getElementById('bulk-set-select').value;
    if (!target) { bulkStatus('Select a target set', 'error'); return; }
    toast('Move ' + ids.length + ' card(s) to set "' + target + '"?\n\nThis will remove them from all decks in the current set.', 'Move', 'btn-danger', async function() {
      bulkStatus('Moving...');
      var ok = 0, fail = 0, decksCleaned = 0;
      for (var i = 0; i < ids.length; i++) {
        try {
          var res = await fetch('/api/sets/' + window.PTG_BROWSER.set_id + '/cards/' + ids[i] + '/move', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ target_set_id: target }),
          });
          var data = await res.json();
          if (data.success) { ok++; decksCleaned += (data.decks_cleaned || 0); } else fail++;
        } catch (e) { fail++; }
      }
      var msg = 'Moved ' + ok + ' to ' + target;
      if (decksCleaned > 0) msg += ' (cleaned from ' + decksCleaned + ' decks)';
      if (fail) msg += ', ' + fail + ' failed';
      bulkStatus(msg);
      if (ok > 0) location.reload();
    });
  }

  document.getElementById('bulk-delete').addEventListener('click', bulkDelete);
  document.getElementById('bulk-duplicate').addEventListener('click', bulkDuplicate);
  document.getElementById('bulk-copy').addEventListener('click', bulkCopy);
  document.getElementById('bulk-move').addEventListener('click', bulkMove);

  var bulkSetSelect = document.getElementById('bulk-set-select');
  loadSets('bulk-set-select');

  ['bulk-copy', 'bulk-move'].forEach(function(id) {
    document.getElementById(id).addEventListener('click', function() {
      if (!bulkSetSelect.value) { bulkStatus('Select a target set', 'error'); return; }
    });
  });
});
</script>
{% endblock %}