{% extends "base.html" %}
{% block title %}Card Browser — {{ set_name }}{% endblock %}
{% block head %}
<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 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" 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="deck-table-container">
      <table class="data-table">
        <thead>
          <tr>
            <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 }}">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 }}">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 }}">Type</a></th>
            <th>Mana Cost</th>
            <th>Atk</th>
            <th>Def</th>
          </tr>
        </thead>
        <tbody>
          {% for card in cards %}
          <tr class="clickable-row" onclick="previewAndSelect(this, '{{ card.card_id }}')" ondblclick="window.location.href='/set/{{ set_id }}/editor/{{ card.card_id }}'">
            <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.mana|mana_badges }}</td>
            <td>{{ card.attack }}</td>
            <td>{{ card.defense }}</td>
          </tr>
          {% endfor %}
          {% if not cards %}
          <tr><td colspan="6" class="empty-state">No cards found.</td></tr>
          {% endif %}
        </tbody>
      </table>
    </div>

    {% if filter_name or filter_type or filter_mana %}
    <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;

CardPreview.init(window.PTG_BROWSER.set_id, {
  onCardChanged: function(cardId) { _selectedCardId = cardId; }
});

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

// ── Actions ──
document.addEventListener('DOMContentLoaded', function() {
  var actionsDiv = document.getElementById('cp-actions');
  var setSelect = document.getElementById('cp-set-select');

  // Show actions in browser mode
  actionsDiv.style.display = '';

  // Load set list
  fetch('/api/sets').then(r => r.json()).then(sets => {
    sets.forEach(function(s) {
      var opt = document.createElement('option');
      opt.value = s.set_id;
      opt.textContent = s.name || s.set_id;
      setSelect.appendChild(opt);
    });
  });

  // Duplicate
  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) {
      alert('Duplicated as: ' + data.card_id);
      location.reload();
    } else {
      alert('Error: ' + (data.error || 'unknown'));
    }
  });

  // Copy to other set
  document.getElementById('cp-btn-copy').addEventListener('click', async function() {
    if (!_selectedCardId) return;
    var target = setSelect.value;
    if (!target) { alert('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();
    alert(data.success ? 'Copied as: ' + data.card_id : 'Error: ' + (data.error || 'unknown'));
  });

  // Move to other set
  document.getElementById('cp-btn-move').addEventListener('click', async function() {
    if (!_selectedCardId) return;
    var target = setSelect.value;
    if (!target) { alert('Select a target set'); return; }
    if (!confirm('Move card ' + _selectedCardId + ' to set ' + target + '?')) return;
    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) {
      alert('Moved to ' + target);
      location.reload();
    } else {
      alert('Error: ' + (data.error || 'unknown'));
    }
  });
});
</script>
{% endblock %}