{% extends "base.html" %}
{% from "macros/mana_table.html" import mana_table %}
{% block title %}Card Editor — {{ 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 = {
  set_id: {{ set_id|tojson }},
  card_id: {{ (card_id or '')|tojson }},
  cardTypes: {{ card_types|tojson }},
  manaTypes: {{ mana_types|tojson }},
  abilityTypes: {{ ability_types|tojson }},
  eventTypes: {{ event_types|tojson }},
  targetSpecs: {{ target_specs|tojson }},
  zoneTypes: {{ zone_types|tojson }},
  paramRefs: {{ param_refs|tojson }},
  conditionVariables: {{ condition_variables|tojson }},
  effects: {{ effects|tojson }},
  effectParams: {{ effect_params|tojson }},
  catalogIds: {{ catalog_ids|tojson }},
  groupIds: {{ group_ids|tojson }},
  techniqueValues: {{ technique_values|tojson }},
  techniqueList: {{ technique_list|tojson }},
};
</script>
<script src="/static/js/condition-tree.js"></script>
<script src="/static/js/card-editor.js"></script>
{% endblock %}
{% block content %}

<div x-data="cardEditor()" x-init="init()">

  {# Quick search #}
  <div class="quick-search-bar" @focusout="quickSearchVisible = false">
    <input type="text" x-model="quickSearchQuery"
           @input="onQuickSearch()" @focus="quickSearchVisible = true"
           @keydown.down.prevent="quickSearchIndex = Math.min(quickSearchIndex + 1, quickSearchResults.length - 1)"
           @keydown.up.prevent="quickSearchIndex = Math.max(quickSearchIndex - 1, 0)"
           @keydown.enter.prevent="selectQuickSearch()"
           placeholder="Load card by name...">
    <button type="button" class="btn btn-sm" x-show="quickSearchQuery"
            @click="quickSearchQuery = ''; quickSearchResults = []; quickSearchVisible = false">&times;</button>
    <div class="quick-search-results" x-show="quickSearchVisible && quickSearchResults.length > 0">
      <template x-for="(c, idx) in quickSearchResults" :key="c.card_id">
        <div class="quick-search-item" :class="{ 'quick-search-active': idx === quickSearchIndex }"
             @mousedown.prevent="loadCard(c.card_id); quickSearchQuery = ''; quickSearchResults = []">
          <strong x-text="c.name"></strong>
          <code x-text="c.card_id"></code>
        </div>
      </template>
    </div>
  </div>

  <div class="editor-layout">

  {# Left panel: form #}
  <div class="editor-form">
    <div class="form-row">
      <div class="form-group" style="flex:1">
        <label for="card_id">Card ID</label>
        <input type="text" id="card_id" x-model="card_id" @input="markDirty()" placeholder="e.g. goblin_01">
      </div>
      <div class="form-group" style="flex:1">
        <label for="name">Name</label>
        <input type="text" id="name" x-model="name" @input="markDirty()" placeholder="e.g. Goblin">
      </div>
    </div>
    <div class="form-group">
      <label for="description">Description</label>
      <textarea id="description" x-model="description" @input="markDirty()" rows="2" placeholder="Flavor text or rules..."></textarea>
    </div>
    <div class="form-row">
      <div class="form-group" style="flex:1">
        <label for="card_type">Type</label>
        <select id="card_type" x-model="card_type" @change="markDirty()">
          {% for ct in card_types %}
          <option value="{{ ct }}">{{ ct }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="form-group" style="flex:1">
        <label for="group">Group</label>
        <input type="text" id="group" x-model="group" @input="markDirty()"
               placeholder="Type or select..." list="group-list">
        <datalist id="group-list">
          {% for g in group_ids %}
          <option value="{{ g }}">
          {% endfor %}
        </datalist>
      </div>
      <div class="form-group" style="flex:1">
        <label for="rarity">Rarity</label>
        <select id="rarity" x-model="rarity" @change="markDirty()">
          <option value="">(none)</option>
          <option value="common">Common</option>
          <option value="rare">Rare</option>
          <option value="special">Special</option>
          <option value="legendary">Legendary</option>
        </select>
      </div>
    </div>

    <div class="form-group color-field" x-show="customColorKeys.length > 0">
      <label>Color</label>
      <div class="color-picker-row">
        <div class="swatch" :style="'background:' + colorSwatch" title="Current color"></div>
        <select x-model="cardColor" @change="markDirty()">
          <option value="">Auto (from mana)</option>
          <template x-for="k in customColorKeys" :key="k">
            <option :value="k" :style="'background-color:' + (paletteData[k] || '#ccc')"
                    x-text="k + '  ' + (paletteData[k] || '')"></option>
          </template>
        </select>
      </div>
    </div>

    <fieldset x-show="card_type === 'creature'" class="techniques-section">
      <legend>Techniques</legend>
      <div class="techniques-grid">
        <template x-for="t in techniqueValues" :key="t.value">
          <label class="checkbox-label" :title="t.description">
            <input type="checkbox" :value="t.value" x-model="techniques" @change="markDirty()">
            <span x-text="t.value"></span>
          </label>
        </template>
      </div>
    </fieldset>

    {{ mana_table('mana', label='Mana Cost') }}

    <div class="form-row" x-show="card_type !== 'mana' && card_type !== 'artifact'">
      <div class="form-group">
        <label for="attack">Attack</label>
        <input type="number" id="attack" x-model.number="attack" @input="markDirty()" min="0" max="99" class="input-narrow">
      </div>
      <div class="form-group">
        <label for="defense">Defense</label>
        <input type="number" id="defense" x-model.number="defense" @input="markDirty()" min="0" max="99" class="input-narrow">
      </div>
    </div>

    <div class="form-group">
      <label>Art</label>
      <div class="art-section">
        <div class="art-row">
          <div class="art-preview" x-show="art_preview_url">
            <img :src="art_preview_url" alt="Card art" style="max-height:80px;">
          </div>
          <div class="art-controls">
            <label class="btn btn-sm">
              Browse
              <input type="file" accept="image/*" @change="uploadArt($event)" hidden>
            </label>
            <div x-show="art_filename" class="art-filename">
              <span x-text="art_filename"></span>
              <button type="button" class="btn btn-sm btn-danger" @click="removeArt()">Remove</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    {# Abilities section (read-only list) #}
    <fieldset class="abilities-section">
      <legend>Abilities</legend>

      <div class="ability-list">
        <template x-for="(ab, abIdx) in abilities" :key="abIdx">
          <div class="ability-card clickable-row" @click="editAbility(abIdx)">
            <div class="ability-summary">
              <span class="ability-name" x-text="ab.name || 'Unnamed'"></span>
              <span class="ability-type-badge" x-text="ab.ability_type"></span>
              <span class="ability-alt-count" x-text="(ab.alterations||[]).length + ' alterations'"></span>
              <div class="ability-actions">
                <button type="button" class="btn btn-sm btn-danger" @click.stop="removeAbility(abIdx)">Remove</button>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div class="empty-state" x-show="abilities.length === 0">No abilities defined.</div>
      <div class="abilities-toolbar">
        <button type="button" class="btn" @click="addAbility()">+ Add Ability</button>
        <div class="catalog-picker" x-show="catalogAbilityIds.length > 0">
          <select x-model="selectedCatalogAbilityId">
            <option value="">Use from Catalog...</option>
            <template x-for="aid in catalogAbilityIds" :key="aid">
              <option :value="aid" :title="(catalogAbilitiesData[aid] || {}).description || ''" x-text="(catalogAbilitiesData[aid] || {}).name || aid"></option>
            </template>
          </select>
          <button type="button" class="btn btn-sm" @click="useAbilityFromCatalog()"
                  :disabled="!selectedCatalogAbilityId">Load</button>
        </div>
        <span x-show="loadingCatalogIds" class="msg">Loading catalog...</span>
      </div>
    </fieldset>

    <div class="form-actions editor-actions">
      <button type="button" class="btn btn-primary" @click="saveCard()" :disabled="saving">
        <span x-show="!saving">Save to Set</span>
        <span x-show="saving">Saving...</span>
      </button>
      <button type="button" class="btn" @click="validateCard()" :disabled="validating">Validate</button>
      <button type="button" class="btn" @click="newCard()">New Card</button>
      <span x-show="statusMessage" :class="'msg ' + statusType" x-text="statusMessage"></span>
      <span x-show="dirty" class="dirty-indicator">* Unsaved changes</span>
    </div>
  </div>

  {# Middle panel: Card preview #}
  <div class="editor-card-col">
    <label>Card Preview</label>
    <div class="editor-card-preview" x-show="card_id && name">
      <div class="card-preview-card" :style="cardPreviewStyle">
        <div class="cp-header">
          <span class="cp-name" x-text="name"></span>
          <span class="cp-mana" x-html="liveManaBadges"></span>
        </div>
        <div class="cp-art">
          <img x-show="art_preview_url" :src="art_preview_url" class="cp-art-img">
          <div x-show="!art_preview_url" class="cp-art-placeholder"></div>
          <div class="cp-techniques" x-show="techniques.length">
            <template x-for="t in techniques" :key="t">
              <span :class="'technique-badge cp-technique technique-' + t" :title="t"></span>
            </template>
          </div>
        </div>
        <div class="cp-type">
          <span x-text="previewTypeText"></span>
          <span x-show="rarity" :class="'rarity-icon rarity-' + rarity" :title="rarity"></span>
        </div>
        <div class="cp-separator"></div>
        <div class="cp-desc" x-text="description" x-show="description"></div>
        <div class="cp-separator" x-show="description"></div>
        <div class="cp-abilities">
          <template x-for="ab in abilities" :key="ab.name || Math.random()">
            <div class="cp-ability">
              <div class="cp-ability-left">
                <div class="cp-ability-top">
                  <span class="cp-ability-mana" x-html="liveAbilityManaText(ab)"></span>
                  <span class="cp-ability-name" x-text="ab.name || '?'"></span>
                  <span class="cp-ability-type" x-text="'[' + (ab.ability_type || 'triggered') + ']'"></span>
                </div>
                <div class="cp-ability-desc" x-show="ab.description" x-text="ab.description"></div>
              </div>
            </div>
          </template>
        </div>
        <div class="cp-stats" x-show="card_type === 'creature'">
          <span class="stat-atk" x-text="attack || 0"></span>
          <span class="stat-sep">/</span>
          <span class="stat-def" x-text="defense || 0"></span>
        </div>
      </div>
    </div>
    <div class="editor-card-placeholder" x-show="!card_id || !name">
      <span>Enter Card ID and Name to preview</span>
    </div>
  </div>

  {# Right panel: YAML preview #}
  <div class="editor-preview">
    <div class="preview-header">
      <label>YAML Preview</label>
      <button type="button" class="btn btn-sm preview-edit-btn"
              :class="{ active: yaml_editable }"
              @click="toggleYamlEdit()"
              :title="yaml_editable ? 'Switch to preview' : 'Edit YAML directly'">
        &#9998;
      </button>
    </div>
    <textarea id="yaml-preview" x-model="yaml_preview"
              :readonly="!yaml_editable"
              class="yaml-preview"
              :class="{ 'yaml-editable': yaml_editable }"
              spellcheck="false"></textarea>
  </div>

  </div>

  {% set ability_modal_extra = 'register' %}
  {% set alteration_modal_extra = 'register' %}
  {% include "components/ability_editor.html" %}

</div>
{% endblock %}