{% extends "base.html" %}
{% block title %}Garments Suite — Edit {{ set.name }}{% endblock %}

{% block styles %}
<style>
/* ── Page wrapper ── */
.set-edit {
  max-width: 820px;
  margin: 0 auto;
}

/* ── Breadcrumb ── */
.edit-breadcrumb { margin-bottom: 0.5rem; }
.edit-breadcrumb a {
  font-family: var(--serif-body);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.edit-breadcrumb a:hover { text-decoration: underline; }

.edit-title {
  font-family: var(--serif-display);
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  font-weight: 400;
  margin: 0.25rem 0 1.5rem;
  border: none;
  padding: 0;
}

.edit-errors {
  background: #fdecea;
  border-left: 3px solid #c0392b;
  padding: 0.75rem 1rem;
  margin: 0 0 1.5rem;
  list-style: none;
  font-size: 0.9rem;
  color: #7a2020;
}

/* ── Sections ── */
.edit-section {
  border-top: 1px solid rgba(42,77,58,0.15);
  padding: 1.5rem 0;
}
.edit-section-heading {
  font-family: var(--serif-body);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  font-weight: 400;
  margin: 0 0 1rem;
  border: none;
  padding: 0;
}

/* ── Field grid ── */
.field-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem 1.5rem;
}

@media (max-width: 580px) {
  .field-grid { grid-template-columns: 1fr; }
}

.field { display: flex; flex-direction: column; gap: 0.3rem; }

label {
  font-family: var(--serif-body);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #888;
}

/* ── Constituent rows ── */
.constituent-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.constituent-row {
  display: grid;
  grid-template-columns: 2.5rem 3rem 1fr auto auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(42,77,58,0.12);
  border-radius: 2px;
  background: #fff;
}

/* On mobile, collapse to two lines: image+name on top, controls below */
@media (max-width: 520px) {
  .constituent-row {
    grid-template-columns: 2.5rem 1fr auto auto auto;
    grid-template-rows: auto auto;
  }

  .constituent-order {
    display: none; /* hide numeric ordering badge — space too tight */
  }
}

.constituent-thumb {
  width: 2.5rem;
  height: 3.2rem;
  object-fit: cover;
  border-radius: 1px;
  background: var(--cream);
  display: block;
}
.constituent-thumb-placeholder {
  width: 2.5rem;
  height: 3.2rem;
  background: var(--cream);
  border-radius: 1px;
}

.constituent-order {
  font-family: var(--serif-body);
  font-size: 0.75rem;
  color: #aaa;
  text-align: center;
}

.constituent-name {
  font-family: var(--serif-body);
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0; /* allow shrink in grid */
}

.btn-order,
.btn-remove-constituent {
  background: none;
  border: 1px solid rgba(42,77,58,0.2);
  border-radius: 2px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--accent);
  line-height: 1;
  min-width: 30px;
  min-height: 30px;
}
.btn-order:hover { background: rgba(42,77,58,0.06); }
.btn-order:disabled { opacity: 0.35; cursor: default; }
.btn-remove-constituent {
  color: #c0392b;
  border-color: rgba(192,57,43,0.3);
}
.btn-remove-constituent:hover { background: #fdecea; }

/* ── Garment picker ── */
.picker-search {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.picker-search input  { flex: 1; min-width: 140px; }
.picker-search select { min-width: 140px; }

.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.75rem;
  max-height: 420px;
  overflow-y: auto;
  padding: 0.25rem;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 400px) {
  .picker-grid { grid-template-columns: repeat(3, 1fr); }
}

.picker-card {
  position: relative;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 2px;
  transition: border-color 0.12s;
}
.picker-card:hover   { border-color: rgba(42,77,58,0.3); }
.picker-card.selected { border-color: var(--accent); }
.picker-card.hidden  { display: none; }

.picker-card input[type="checkbox"] {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  width: auto;
  z-index: 1;
}

.picker-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: 1px;
}

.picker-card-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: #aaa;
  font-family: var(--serif-body);
  font-style: italic;
}

.picker-card-label {
  padding: 0.3rem 0.4rem;
  font-size: 0.72rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-empty {
  font-style: italic;
  color: #aaa;
  font-size: 0.88rem;
  padding: 1rem 0;
}

/* ── Buttons ── */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.5rem 0 0.5rem;
  border-top: 1px solid rgba(42,77,58,0.15);
}

.btn {
  font-family: var(--serif-body);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 1.3rem;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn--primary { background: var(--accent);  color: #fff; border-color: var(--accent); }
.btn--primary:hover { background: #1e3829; }
.btn--ghost   { background: none; color: var(--accent); border-color: rgba(42,77,58,0.3); }
.btn--ghost:hover { background: rgba(42,77,58,0.06); }
.btn--add     { background: var(--accent); color: #fff; border: none; padding: 0.45rem 1.1rem; }
.btn--add:hover { background: #1e3829; }
.btn--danger  { background: none; color: #c0392b; border-color: rgba(192,57,43,0.35); }
.btn--danger:hover { background: #fdecea; }

/* ── Danger zone ── */
.danger-zone {
  margin-top: 2rem;
  border-top: 1px solid rgba(192,57,43,0.25);
  padding-top: 1.5rem;
}
.danger-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.danger-inner p {
  font-size: 0.88rem;
  color: #888;
  margin: 0;
  flex: 1;
  min-width: 200px;
}
</style>
{% endblock %}

{% block content %}
<div class="set-edit">

  <nav class="edit-breadcrumb">
    <a href="{{ url_for('sets_.detail', name=set.name) }}">← {{ set.name }}</a>
  </nav>
  <h1 class="edit-title">Edit Set</h1>

  {% if errors %}
    <ul class="edit-errors" role="alert">
      {% for e in errors %}<li>{{ e }}</li>{% endfor %}
    </ul>
  {% endif %}

  {# ── § Core fields ── #}
  <form method="post" action="{{ url_for('sets_.edit', name=set.name) }}" id="core-form">
    <section class="edit-section">
      <h2 class="edit-section-heading">Details</h2>
      <div class="field-grid">
        <div class="field">
          <label for="set-name">Name</label>
          <input type="text" id="set-name" name="name"
                 value="{{ set.name }}" required>
        </div>
        <div class="field">
          <label for="set-class">Classification</label>
          <select id="set-class" name="classification" required>
            {% for t in set_types %}
              <option value="{{ t }}" {{ 'selected' if t == set.classification }}>{{ t }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="field">
          <label for="set-colour">Colour</label>
          <select id="set-colour" name="colour">
            <option value="">— none —</option>
            {% for c in colours %}
              <option value="{{ c }}" {{ 'selected' if c == set.colour }}>{{ c }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
    </section>

    <div class="form-actions">
      <button type="submit" class="btn btn--primary">Save Changes</button>
      <a href="{{ url_for('sets_.detail', name=set.name) }}" class="btn btn--ghost">Cancel</a>
    </div>
  </form>

  {# ── § Constituents ── #}
  <section class="edit-section">
    <h2 class="edit-section-heading">Garments — {{ constituents|length }}</h2>

    {% if constituents %}
      <div class="constituent-list">
        {% for c in constituents %}
          <div class="constituent-row">
            {% if c.front_image %}
              <img class="constituent-thumb"
                   src="{{ url_for('wardrobe.image', filename=c.front_image) }}"
                   alt="{{ c.garment_name }}">
            {% else %}
              <div class="constituent-thumb-placeholder"></div>
            {% endif %}

            <span class="constituent-order">{{ c.ordering }}</span>

            <span class="constituent-name" title="{{ c.garment_name }}">
              {{ c.garment_name | truncate(45, true, '…') }}
            </span>

            <button type="button"
                    class="btn-order btn-move"
                    data-garment="{{ c.id }}"
                    data-direction="up"
                    data-action="{{ url_for('sets_.reorder', name=set.name) }}"
                    {% if loop.first %}disabled{% endif %}
                    aria-label="Move up">↑</button>

            <button type="button"
                    class="btn-order btn-move"
                    data-garment="{{ c.id }}"
                    data-direction="down"
                    data-action="{{ url_for('sets_.reorder', name=set.name) }}"
                    {% if loop.last %}disabled{% endif %}
                    aria-label="Move down">↓</button>

            <button type="button"
                    class="btn-remove-constituent btn-remove-member"
                    data-garment="{{ c.id }}"
                    data-action="{{ url_for('sets_.remove', name=set.name) }}"
                    aria-label="Remove from set">×</button>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <p style="font-style:italic;color:#aaa;font-size:0.88rem;">
        No garments in this set yet.
      </p>
    {% endif %}
  </section>

  {# ── § Add garments ── #}
  {% if non_members %}
    <section class="edit-section">
      <h2 class="edit-section-heading">Add Garments</h2>

      <div class="picker-search">
        <input type="text" id="picker-search"
               placeholder="Search by name…" autocomplete="off">
        <select id="picker-class">
          <option value="">All classifications</option>
          {% for cls in non_members | map(attribute='classification') | unique | sort %}
            <option value="{{ cls }}">{{ cls }}</option>
          {% endfor %}
        </select>
      </div>

      <form method="post" action="{{ url_for('sets_.add', name=set.name) }}" id="picker-form">
        <div class="picker-grid" id="picker-grid">
          {% for g in non_members %}
            <label class="picker-card"
                   data-name="{{ g.name | lower }}"
                   data-class="{{ g.classification }}">
              <input type="checkbox" name="garment_id" value="{{ g.id }}">
              {% if g.front_image %}
                <img src="{{ url_for('wardrobe.image', filename=g.front_image) }}"
                     alt="{{ g.name }}" loading="lazy">
              {% else %}
                <div class="picker-card-placeholder">No image</div>
              {% endif %}
              <div class="picker-card-label" title="{{ g.name }}">
                {{ g.name | truncate(28, true, '…') }}
              </div>
            </label>
          {% endfor %}
        </div>
        <div style="margin-top:1rem;display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;">
          <button type="submit" class="btn btn--add">Add Selected</button>
          <span id="picker-count" style="font-size:0.8rem;color:#888;"></span>
        </div>
      </form>
    </section>
  {% endif %}

  {# ── § Batch Edit ──────────────────────────────────────────── #}
  {% if constituents %}
  <section class="edit-section">
    <details>
      <summary class="edit-section-heading" style="cursor:pointer;user-select:none;list-style:none;">
        Batch Edit All Members
      </summary>
      <form method="post"
            action="{{ url_for('sets_.batch_edit', name=set.name) }}"
            style="margin-top:1rem;">
        <div class="field-grid">
          <div class="field">
            <label for="batch-attribute">Attribute</label>
            <select id="batch-attribute" name="attribute"
                    onchange="updateBatchValues(this.value)">
              <option value="formal">Formality</option>
              <option value="gender">Gender</option>
            </select>
          </div>
          <div class="field">
            <label for="batch-value">Value</label>
            <select id="batch-value" name="value"></select>
          </div>
        </div>
        <div class="form-actions">
          <button type="submit" class="btn btn--ghost">Apply to all members</button>
        </div>
      </form>
    </details>
  </section>
  {% endif %}

  {# ── Danger zone ── #}
  <div class="danger-zone">
    <h2 class="edit-section-heading">Danger Zone</h2>
    <div class="danger-inner">
      <p>Delete this set and remove all garment associations.
         The garments themselves are not affected.</p>
      <button type="button" class="btn btn--danger" id="delete-btn">Delete Set</button>
    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
  'use strict';

  // ── Reorder ──────────────────────────────────────────────
  document.querySelectorAll('.btn-move').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var frm     = document.createElement('form');
      frm.method  = 'post';
      frm.action  = btn.dataset.action;
      frm.appendChild(_hidden('garment_id', btn.dataset.garment));
      frm.appendChild(_hidden('direction',  btn.dataset.direction));
      document.body.appendChild(frm);
      frm.submit();
    });
  });

  // ── Remove member ────────────────────────────────────────
  document.querySelectorAll('.btn-remove-member').forEach(function (btn) {
    btn.addEventListener('click', function () {
      if (!confirm('Remove this garment from the set?')) return;
      var frm    = document.createElement('form');
      frm.method = 'post';
      frm.action = btn.dataset.action;
      frm.appendChild(_hidden('garment_id', btn.dataset.garment));
      document.body.appendChild(frm);
      frm.submit();
    });
  });

  // ── Delete set ───────────────────────────────────────────
  var deleteBtn = document.getElementById('delete-btn');
  if (deleteBtn) {
    deleteBtn.addEventListener('click', function () {
      var name = {{ set.name | tojson }};
      if (!confirm('Delete set "' + name + '"? This cannot be undone.')) return;
      var frm    = document.createElement('form');
      frm.method = 'post';
      frm.action = {{ url_for('sets_.delete', name=set.name) | tojson }};
      document.body.appendChild(frm);
      frm.submit();
    });
  }

  // ── Picker: search + class filter ────────────────────────
  var searchInput = document.getElementById('picker-search');
  var classSelect = document.getElementById('picker-class');
  var cards       = document.querySelectorAll('.picker-card');
  var countEl     = document.getElementById('picker-count');

  function filterPicker() {
    var q   = searchInput ? searchInput.value.toLowerCase() : '';
    var cls = classSelect ? classSelect.value : '';
    cards.forEach(function (card) {
      card.classList.toggle(
        'hidden',
        (q   && !card.dataset.name.includes(q)) ||
        (cls && card.dataset.class !== cls)
      );
    });
  }

  if (searchInput) searchInput.addEventListener('input',  filterPicker);
  if (classSelect) classSelect.addEventListener('change', filterPicker);

  // ── Picker: checkbox → visual + count ────────────────────
  cards.forEach(function (card) {
    var cb = card.querySelector('input[type="checkbox"]');
    if (!cb) return;
    cb.addEventListener('change', function () {
      card.classList.toggle('selected', cb.checked);
      updateCount();
    });
  });

  function updateCount() {
    if (!countEl) return;
    var n = document.querySelectorAll('.picker-card input:checked').length;
    countEl.textContent = n ? n + ' selected' : '';
  }

  // ── Helper ───────────────────────────────────────────────
  function _hidden(name, value) {
    var inp   = document.createElement('input');
    inp.type  = 'hidden';
    inp.name  = name;
    inp.value = value;
    return inp;
  }

  // ── Batch edit value switching ───────────────────────────────
  var BATCH_OPTIONS = {
    formal: [
      { value: 'true',  label: 'Formal' },
      { value: 'false', label: 'Casual' },
      { value: '',      label: '— unset —' },
    ],
    gender: [
      { value: 'Female', label: 'Female' },
      { value: 'Male',   label: 'Male' },
      { value: 'Unisex', label: 'Unisex' },
      { value: '',       label: '— unset —' },
    ],
  };

  window.updateBatchValues = function (attribute) {
    var sel = document.getElementById('batch-value');
    if (!sel) return;
    sel.innerHTML = '';
    (BATCH_OPTIONS[attribute] || []).forEach(function (o) {
      var opt = document.createElement('option');
      opt.value = o.value;
      opt.textContent = o.label;
      sel.appendChild(opt);
    });
  };

  var batchAttr = document.getElementById('batch-attribute');
  if (batchAttr) updateBatchValues(batchAttr.value);

})();
</script>
{% endblock %}