{% extends "base.html" %}
{% from "macros/mana_table.html" import mana_table %}
{% block title %}Card Editor — {{ set_name }}{% endblock %}
{% block head %}
<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 }},
  effects: {{ effects|tojson }},
  effectParams: {{ effect_params|tojson }},
  catalogIds: {{ catalog_ids|tojson }},
};
</script>
<script src="/static/js/card-editor.js"></script>
{% endblock %}
{% block content %}

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

  {# Left panel: form #}
  <div class="editor-form">
    <div class="form-group">
      <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">
      <label for="name">Name</label>
      <input type="text" id="name" x-model="name" @input="markDirty()" placeholder="e.g. Goblin">
    </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-group">
      <label for="card_type">Type</label>
      <select id="card_type" x-model="card_type" @change="markDirty()">
        <template x-for="ct in cardTypes" :key="ct">
          <option :value="ct" x-text="ct"></option>
        </template>
      </select>
    </div>

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

    <div class="form-row">
      <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-preview" x-show="art_preview_url">
          <img :src="art_preview_url" alt="Card art" style="max-height:120px;">
        </div>
        <input type="file" id="art_file" accept="image/*" @change="uploadArt($event)">
        <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>

    {# 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>
      <button type="button" class="btn" @click="addAbility()">+ Add Ability</button>
    </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>

  {# Right panel: YAML preview #}
  <div class="editor-preview">
    <label>YAML Preview</label>
    <textarea id="yaml-preview" x-model="yaml_preview" readonly class="yaml-preview" spellcheck="false"></textarea>
  </div>

  {# ── Ability Modal ── #}
  <div class="modal-overlay" x-show="showAbilityModal" @click.self="cancelAbilityEdit()">
    <div class="modal-content modal-lg" @click.stop="">
      <div class="modal-header">
        <h3 x-text="abilityModalTitle"></h3>
        <button type="button" class="modal-close" @click="cancelAbilityEdit()">&times;</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>Name</label>
          <input type="text" x-model="abilityForm.name" placeholder="e.g. Fire Breath">
        </div>
        <div class="form-group">
          <label>Description</label>
          <textarea x-model="abilityForm.description" rows="2"></textarea>
        </div>
        <div class="form-group">
          <label>Type</label>
          <select x-model="abilityForm.ability_type">
            <template x-for="at in abilityTypes" :key="at">
              <option :value="at" x-text="at"></option>
            </template>
          </select>
        </div>

        {{ mana_table('abilityForm.mana_requirement', label='Mana Requirement') }}

        <fieldset class="alterations-section">
          <legend>Alterations</legend>
          <div class="alteration-list">
            <template x-for="(alt, altIdx) in (abilityForm.alterations || [])" :key="altIdx">
              <div class="alteration-card clickable-row" @click="editAlterationInModal(altIdx)">
                <div class="alteration-summary">
                  <span class="alt-effect" x-text="alt.effect || '?'"></span>
                  <span class="alt-trigger" x-show="alt.start_trigger" x-text="'[' + alt.start_trigger + ']'"></span>
                  <div class="alt-actions">
                    <button type="button" class="btn btn-sm btn-danger" @click.stop="removeAlterationInModal(altIdx)">Remove</button>
                  </div>
                </div>
              </div>
            </template>
          </div>
          <div class="empty-state" x-show="!abilityForm.alterations || abilityForm.alterations.length === 0">
            No alterations defined.
          </div>
          <button type="button" class="btn btn-sm" @click="addAlterationInModal()">+ Add Alteration</button>
        </fieldset>
      </div>
      <div class="modal-actions">
        <button type="button" class="btn btn-primary" @click="saveAbility()">OK</button>
        <button type="button" class="btn" @click="cancelAbilityEdit()">Cancel</button>
      </div>
    </div>
  </div>

  {# ── Alteration Modal (stacks on top of ability modal) ── #}
  <div class="modal-overlay modal-overlay-top" x-show="showAlterationModal" @click.self="cancelAlterationEdit()">
    <div class="modal-content modal-lg" @click.stop="">
      <div class="modal-header">
        <h3 x-text="alterationModalTitle"></h3>
        <button type="button" class="modal-close" @click="cancelAlterationEdit()">&times;</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>Effect</label>
          <select x-model="alterationForm.effect" @change="onEffectChange()">
            <template x-for="ef in effects" :key="ef">
              <option :value="ef" x-text="ef"></option>
            </template>
          </select>
        </div>
        <div class="form-group">
          <label>Start Trigger</label>
          <select x-model="alterationForm.start_trigger" @change="onStartTriggerChange()">
            <option :value="null">(none)</option>
            <template x-for="et in eventTypes" :key="et">
              <option :value="et" x-text="et"></option>
            </template>
          </select>
        </div>
        <div class="form-group">
          <label>Target</label>
          <input type="text" x-model="alterationForm.target" list="target-list" placeholder="(none)">
          <datalist id="target-list">
            <template x-for="ts in targetSpecs" :key="ts">
              <option :value="ts"></option>
            </template>
          </datalist>
        </div>
        <div class="form-group">
          <label>End Trigger</label>
          <select x-model="alterationForm.end_trigger">
            <option :value="null">(none)</option>
            <template x-for="et in eventTypes" :key="et">
              <option :value="et" x-text="et"></option>
            </template>
          </select>
        </div>
        <div class="form-group">
          <label>Turn Duration</label>
          <input type="number" x-model.number="alterationForm.turn_duration" min="0" max="99" class="input-narrow">
        </div>
        <div class="form-group" x-show="alterationForm.start_trigger !== null">
          <label class="checkbox-label">
            <input type="checkbox" x-model="alterationForm.trigger_self">
            Trigger only on self
          </label>
        </div>

        {# Dynamic params #}
        <div class="params-section" x-show="currentEffectParams && Object.keys(currentEffectParams).length > 0">
          <h5>Parameters</h5>
          <template x-for="(pspec, pname) in currentEffectParams" :key="pname">
            <div class="form-group">
              <label x-text="pname"></label>

              <template x-if="pspec.type === 'int'">
                <div class="int-or-ref">
                  <input type="number" x-model.number="alterationForm.params[pname]" min="0" max="9999"
                         class="input-narrow" x-show="!isParamRef(alterationForm.params[pname])">
                  <select x-model="alterationForm.params[pname]" @change="onParamRefChange(pname, $event)">
                    <option :value="0">(fixed)</option>
                    <template x-for="pr in paramRefs" :key="pr">
                      <option :value="pr" x-text="pr"></option>
                    </template>
                  </select>
                </div>
              </template>

              <template x-if="pspec.type === 'int_or_none'">
                <div class="optional-int">
                  <label class="checkbox-label">
                    <input type="checkbox"
                           :checked="alterationForm.params[pname] !== null && alterationForm.params[pname] !== undefined"
                           @change="toggleOptionalInt(pname, $event)">
                    Set
                  </label>
                  <input type="number" x-model.number="alterationForm.params[pname]" min="0" max="99" class="input-narrow"
                         :disabled="alterationForm.params[pname] === null || alterationForm.params[pname] === undefined">
                </div>
              </template>

              <template x-if="pspec.type === 'str'">
                <input type="text" x-model="alterationForm.params[pname]">
              </template>

              <template x-if="pspec.type === 'zone'">
                <select x-model="alterationForm.params[pname]">
                  <template x-for="zt in zoneTypes" :key="zt">
                    <option :value="zt" x-text="zt"></option>
                  </template>
                </select>
              </template>

              <template x-if="pspec.type === 'mana_requirement'">
                <div class="mana-grid">
                  <template x-for="mt in manaTypes" :key="mt">
                    <div class="mana-row">
                      <span class="mana-color" :class="'mana-'+mt" x-text="mt[0].toUpperCase()"></span>
                      <input type="number" x-model.number="alterationForm.params[pname][mt]" min="0" max="99" class="input-narrow">
                    </div>
                  </template>
                </div>
              </template>
            </div>
          </template>
        </div>

        {# Template wizard for spawn_creature #}
        <div class="template-wizard" x-show="alterationForm.effect === 'spawn_creature'">
          <h5>Spawn Template</h5>
          <div class="form-group">
            <label class="radio-label">
              <input type="radio" x-model="templateMode" value="existing" @change="markDirty()">
              Use existing card
            </label>
            <label class="radio-label">
              <input type="radio" x-model="templateMode" value="inline" @change="markDirty()">
              Define inline
            </label>
          </div>
          <div x-show="templateMode === 'existing'" class="form-group">
            <select x-model="templateCardId">
              <option value="">Select card...</option>
              <template x-for="cid in catalogIds" :key="cid">
                <option :value="cid" x-text="cid"></option>
              </template>
            </select>
          </div>
          <div x-show="templateMode === 'inline'" class="inline-def">
            <div class="form-group"><label>card_id</label><input type="text" x-model="templateData.card_id"></div>
            <div class="form-group"><label>Name</label><input type="text" x-model="templateData.name"></div>
            <div class="form-group">
              <label>Type</label>
              <select x-model="templateData.type">
                <template x-for="ct in cardTypes" :key="ct">
                  <option :value="ct" x-text="ct"></option>
                </template>
              </select>
            </div>
            <div class="form-row">
              <div class="form-group"><label>Attack</label><input type="number" x-model.number="templateData.attack" min="0" max="99" class="input-narrow"></div>
              <div class="form-group"><label>Defense</label><input type="number" x-model.number="templateData.defense" min="0" max="99" class="input-narrow"></div>
            </div>
          </div>
          <div class="form-group">
            <label>Count</label>
            <input type="number" x-model.number="spawnCount" min="0" max="99" class="input-narrow">
          </div>
        </div>
      </div>
      <div class="modal-actions">
        <button type="button" class="btn btn-primary" @click="saveAlteration()">OK</button>
        <button type="button" class="btn" @click="cancelAlterationEdit()">Cancel</button>
      </div>
    </div>
  </div>

</div>
{% endblock %}