{% extends "base.html" %}
{% block title %}Palette — {{ set_name }}{% endblock %}
{% block head %}
<style>
.palette-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: end; }
.palette-row { display: flex; gap: 8px; align-items: center; }
.palette-row .swatch { width: 32px; height: 32px; border-radius: 4px; border: 1px solid var(--border); flex-shrink: 0; }
.palette-row input[type="text"] { flex: 1; }
.palette-row input[type="color"] { width: 40px; height: 32px; border: none; padding: 0; cursor: pointer; border-radius: 4px; }
.palette-section { margin-bottom: 20px; }
.palette-section h3 { margin-bottom: 10px; }
.custom-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.custom-row label { flex: 0 0 120px; font-size: 0.85em; font-weight: 500; }
.custom-row input[type="text"] { flex: 1; }
.custom-row input[type="color"] { width: 40px; height: 32px; border: none; padding: 0; cursor: pointer; border-radius: 4px; }
.custom-row .btn { flex-shrink: 0; }
</style>
{% endblock %}
{% block content %}

<h1>Color Palette <span class="subtitle">— {{ set_name }}</span></h1>

<div x-data="paletteEditor()" x-init="init()">
  <div class="card">
    <div class="palette-section">
      <h3>Mana Colors</h3>
      <div class="palette-grid">
        <template x-for="(hex, key) in manaColors" :key="key">
          <div class="form-group" style="margin-bottom:6px">
            <label x-text="key"></label>
        <div class="palette-row">
          <input type="text" x-model="manaColors[key]" @input="markDirty()">
          <input type="color" :value="normalizeHex(manaColors[key])" @input="manaColors[key] = $event.target.value; markDirty()">
        </div>
          </div>
        </template>
      </div>
    </div>

    <div class="palette-section">
      <h3>Custom Colors</h3>
      <div class="empty-state" x-show="customEntries().length === 0 && !addingNew">
        No custom colors defined. Add one below.
      </div>
      <template x-for="(hex, key) in customEntries()" :key="key">
        <div class="custom-row">
          <label x-text="key"></label>
          <input type="text" x-model="formData[key]" @input="markDirty()">
          <input type="color" :value="normalizeHex(formData[key])" @input="formData[key] = $event.target.value; markDirty()">
          <button type="button" class="btn btn-sm btn-danger" @click="removeKey(key)">Remove</button>
        </div>
      </template>

      <div x-show="addingNew" class="custom-row" style="margin-top:8px">
        <input type="text" x-model="newKey" placeholder="key_name" style="flex:0 0 120px">
        <input type="text" x-model="newHex" placeholder="#rrggbb" style="flex:1">
        <input type="color" :value="normalizeHex(newHex)" @input="newHex = $event.target.value">
        <button type="button" class="btn btn-sm btn-primary" @click="addKey()"
          :disabled="!newKey.trim() || !newHex.trim()">Add</button>
        <button type="button" class="btn btn-sm" @click="addingNew = false; newKey = ''; newHex = '#cccccc'">Cancel</button>
      </div>
      <button type="button" class="btn btn-sm" @click="addingNew = true; newKey = ''; newHex = '#cccccc'" x-show="!addingNew">+ Add Custom Color</button>
    </div>

    <div class="form-actions">
      <button type="button" class="btn btn-primary" @click="save()" :disabled="saving">
        <span x-show="!saving">Save Palette</span>
        <span x-show="saving">Saving...</span>
      </button>
      <span x-show="message" :class="'msg ' + msgType" x-text="message"></span>
    </div>
  </div>
</div>

<script>
function paletteEditor() {
  return {
    manaColors: {},
    formData: {},
    originalData: {},
    addingNew: false,
    newKey: '',
    newHex: '#cccccc',
    saving: false,
    message: '',
    msgType: 'success',

    init() {
      const palette = {{ palette|tojson }};
      const manaKeys = ['fire', 'earth', 'water', 'air', 'any'];
      this.formData = JSON.parse(JSON.stringify(palette));
      this.originalData = JSON.parse(JSON.stringify(palette));
      for (const mk of manaKeys) {
        this.manaColors[mk] = palette[mk] || '#cccccc';
      }
    },

    customEntries() {
      const manaKeys = ['fire', 'earth', 'water', 'air', 'any'];
      const result = {};
      for (const [k, v] of Object.entries(this.formData)) {
        if (!manaKeys.includes(k)) result[k] = v;
      }
      return result;
    },

    normalizeHex(val) {
      if (!val || typeof val !== 'string') return '#cccccc';
      if (val.startsWith('#')) return val;
      return '#' + val;
    },

    markDirty() {},

    addKey() {
      const k = this.newKey.trim().toLowerCase().replace(/[^a-z0-9_]/g, '_');
      if (!k || !this.newHex.trim()) return;
      if (k in this.formData || ['fire', 'earth', 'water', 'air', 'any'].includes(k)) {
        this.message = 'Key already exists or is reserved.';
        this.msgType = 'error';
        return;
      }
      this.formData[k] = this.normalizeHex(this.newHex);
      this.addingNew = false;
      this.newKey = '';
      this.newHex = '#cccccc';
    },

    async removeKey(key) {
      if (!(await toastAsync('Remove custom color "' + key + '"?', 'Remove', 'btn-danger'))) return;
      try {
        const res = await fetch('/api/sets/{{ set_id }}/palette/' + key, { method: 'DELETE' });
        if (res.ok) {
          delete this.formData[key];
          this.message = 'Removed: ' + key;
          this.msgType = 'success';
        } else {
          const d = await res.json();
          this.message = d.error || 'Failed';
          this.msgType = 'error';
        }
      } catch (e) {
        this.message = 'Network error';
        this.msgType = 'error';
      }
    },

    async save() {
      this.saving = true;
      this.message = '';
      for (const mk of ['fire', 'earth', 'water', 'air', 'any']) {
        this.formData[mk] = this.manaColors[mk];
      }
      try {
        const res = await fetch('/api/sets/{{ set_id }}/palette', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(this.formData),
        });
        const data = await res.json();
        if (res.ok && data.success) {
          this.msgType = 'success';
          this.message = 'Palette saved.';
        } else {
          this.msgType = 'error';
          this.message = data.error || 'Save failed';
        }
      } catch (e) {
        this.msgType = 'error';
        this.message = 'Network error: ' + e.message;
      }
      this.saving = false;
    },
  };
}
</script>
{% endblock %}