{% extends "base.html" %}
{% block title %}Deck Builder — {{ set_name }}{% endblock %}
{% block head %}
<script>
window.PTG_DECK = {
  set_id: {{ set_id|tojson }},
  manaTypes: {{ mana_types|tojson }},
  cardTypes: {{ ['creature', 'spell', 'mana']|tojson }},
};
</script>
<script src="/static/js/deck-builder.js"></script>
{% endblock %}
{% block content %}

<div x-data="deckBuilder()" x-init="init()" class="deck-layout">

  {# Left: Catalog #}
  <div class="deck-panel">
    <h3>Catalog</h3>
    <div class="deck-filters">
      <input type="text" x-model="catalogNameFilter" placeholder="Search by name..." class="input-sm">
      <select x-model="catalogTypeFilter" class="input-sm">
        <option value="">All types</option>
        <option value="creature">Creature</option>
        <option value="spell">Spell</option>
        <option value="mana">Mana</option>
      </select>
      <select x-model="catalogManaFilter" class="input-sm">
        <option value="">All mana</option>
        <option value="F">Fire</option>
        <option value="E">Earth</option>
        <option value="W">Water</option>
        <option value="A">Air</option>
        <option value="Y">Any</option>
      </select>
    </div>
    <div class="deck-table-container">
      <table class="data-table">
        <thead>
          <tr>
            <th>Card ID</th>
            <th>Name</th>
            <th>Type</th>
            <th>Mana</th>
          </tr>
        </thead>
        <tbody>
          <template x-for="card in filteredCatalog" :key="card.card_id">
            <tr class="clickable-row" @dblclick="addToDeck(card.card_id)" @click="selectCatalogCard(card.card_id)">
              <td><code x-text="card.card_id"></code></td>
              <td x-text="card.name"></td>
              <td x-text="card.type"></td>
              <td x-html="manaBadges(card.mana)"></td>
            </tr>
          </template>
          <tr x-show="filteredCatalog.length === 0">
            <td colspan="4" class="empty-state">No cards match filters</td>
          </tr>
        </tbody>
      </table>
    </div>
    <button class="btn btn-primary" @click="addSelectedToDeck()" :disabled="!selectedCatalogCard">Add to Deck →</button>
  </div>

  {# Right: Deck #}
  <div class="deck-panel">
    <h3>Deck</h3>
    <div class="deck-filters">
      <select x-model="deckTypeFilter" class="input-sm">
        <option value="">All types</option>
        <option value="creature">Creature</option>
        <option value="spell">Spell</option>
        <option value="mana">Mana</option>
      </select>
      <select x-model="deckManaFilter" class="input-sm">
        <option value="">All mana</option>
        <option value="F">Fire</option>
        <option value="E">Earth</option>
        <option value="W">Water</option>
        <option value="A">Air</option>
        <option value="Y">Any</option>
      </select>
    </div>
    <div class="deck-table-container">
      <table class="data-table">
        <thead>
          <tr>
            <th>Qty</th>
            <th>Card ID</th>
            <th>Name</th>
            <th>Type</th>
            <th>Mana</th>
          </tr>
        </thead>
        <tbody>
          <template x-for="entry in filteredDeckEntries" :key="entry.cardId">
            <tr class="clickable-row" @dblclick="removeFromDeck(entry.cardId)" @click="selectedDeckRow = entry.cardId">
              <td><span x-text="entry.qty"></span></td>
              <td><code x-text="entry.cardId"></code></td>
              <td x-text="entry.cardName"></td>
              <td x-text="entry.cardType"></td>
              <td x-html="manaBadges(entry.cardMana)"></td>
            </tr>
          </template>
          <tr x-show="filteredDeckEntries.length === 0 && deckSize > 0">
            <td colspan="5" class="empty-state">No cards match filters</td>
          </tr>
          <tr x-show="deckSize === 0">
            <td colspan="5" class="empty-state">Deck is empty</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="form-row deck-controls">
      <div class="form-group">
        <label>Qty</label>
        <input type="number" x-model.number="editQty" min="1" max="99" class="input-narrow">
      </div>
      <button class="btn btn-sm" @click="setSelectedDeckQty()">Set Qty</button>
      <button class="btn btn-sm btn-danger" @click="removeSelectedFromDeck()">Remove</button>
    </div>

    <div class="deck-stats">
      <span>Total: <strong x-text="totalCards"></strong> cards</span>
    </div>

    {# Charts #}
    <div class="mana-curve-container">
      <h4>Mana Curve</h4>
      <div class="mana-curve-row">
        <div class="mana-curve-col">
          <span class="mana-curve-label">Creatures & Spells</span>
          <canvas id="mana-curve-cost" width="260" height="120"></canvas>
        </div>
        <div class="mana-curve-col">
          <span class="mana-curve-label">Mana</span>
          <canvas id="mana-curve-mana" width="260" height="120"></canvas>
        </div>
        <div class="mana-curve-col">
          <span class="mana-curve-label">By Type</span>
          <canvas id="mana-curve-types" width="260" height="120"></canvas>
        </div>
      </div>
    </div>

    {# Deck selector #}
    <div class="form-row">
      <div class="form-group">
        <label>Deck</label>
        <select x-model="selectedDeck" @change="loadDeck()">
          <option value="">(select deck)</option>
          <template x-for="d in deckList" :key="d">
            <option :value="d" x-text="d"></option>
          </template>
        </select>
      </div>
      <button class="btn btn-sm" @click="loadDeck()">Load</button>
    </div>

    <div class="form-actions">
      <button class="btn" @click="newDeck()">New Deck</button>
      <button class="btn btn-primary" @click="saveDeck()" :disabled="saving">
        <span x-show="!saving">Save Deck</span>
        <span x-show="saving">Saving...</span>
      </button>
      <button class="btn btn-danger" @click="deleteDeck()" :disabled="!selectedDeck">Delete</button>
    </div>

    <span x-show="statusMsg" :class="'msg ' + statusType" x-text="statusMsg"></span>
  </div>
</div>
{% endblock %}