{% extends "base.html" %}
{% block title %}{% trans %}My QR Codes{% endtrans %}{% endblock %}

{% block content %}
<div class="hero-gradient py-8 px-4 text-center">
    <h1 class="text-2xl sm:text-3xl font-bold text-white drop-shadow mb-1">
        <i class="fa fa-list mr-2"></i>{% trans %}My QR Code Library{% endtrans %}
    </h1>
    <p class="text-white/75 text-sm">{% trans %}Manage, edit and track all your QR codes{% endtrans %}</p>
</div>

<div class="max-w-5xl mx-auto px-4 py-8">
    <div class="flex items-center justify-between mb-5">
        <p class="text-sm text-gray-500 dark:text-gray-400">{{ codes|length }} {% trans %}QR code(s) total{% endtrans %}</p>
        <a href="/qr-code-generator" class="px-4 py-2 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-semibold transition-all">
            <i class="fa fa-plus mr-1"></i>{% trans %}Create New QR{% endtrans %}
        </a>
    </div>

    {% if not codes %}
    <div class="text-center py-16 text-gray-400">
        <i class="fa fa-qrcode text-5xl mb-3 block opacity-20"></i>
        <p class="text-lg font-medium mb-2">{% trans %}No QR codes yet{% endtrans %}</p>
        <a href="/qr-code-generator" class="text-primary font-semibold text-sm hover:underline">{% trans %}Create your first QR code{% endtrans %}</a>
    </div>
    {% else %}
    <div class="grid gap-4">
        {% for code in codes %}
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5" id="qr-card-{{ code.id }}">
            <div class="flex flex-col sm:flex-row sm:items-start gap-4">
                <div class="flex-1 min-w-0">
                    <div class="flex flex-wrap items-center gap-2 mb-1">
                        <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">
                            {{ code.label or ('QR #' ~ code.id) }}
                        </span>
                        {% if code.is_dynamic %}
                        <span class="px-2 py-0.5 rounded text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 font-medium">{% trans %}Dynamic{% endtrans %}</span>
                        {% endif %}
                        {% if code.track_scans %}
                        <span class="px-2 py-0.5 rounded text-xs bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 font-medium"><i class="fa fa-chart-bar mr-1"></i>{% trans %}Tracked{% endtrans %}</span>
                        {% endif %}
                        <span class="px-2 py-0.5 rounded text-xs bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400">{{ code.qr_type }}</span>
                    </div>
                    <p class="text-xs text-gray-500 dark:text-gray-400 truncate max-w-xs">{{ code.redirect_url or code.content }}</p>
                    <div class="mt-2 flex flex-wrap gap-3 text-xs text-gray-500 dark:text-gray-400">
                        <span><i class="fa fa-calendar mr-1"></i>{{ code.created_at[:10] if code.created_at else '—' }}</span>
                        <span><i class="fa fa-qrcode mr-1"></i>{{ code.scan_count or 0 }} {% trans %}scans{% endtrans %}</span>
                        {% if code.short_code %}
                        <span class="font-mono">/q/{{ code.short_code }}</span>
                        {% endif %}
                    </div>
                </div>
                <div class="flex flex-wrap gap-2 items-center">
                    {% if code.track_scans %}
                    <a href="/qr-code-generator/analytics/{{ code.id }}" class="px-3 py-1.5 rounded-lg bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs font-medium hover:bg-green-200 dark:hover:bg-green-900/50 transition">
                        <i class="fa fa-chart-bar mr-1"></i>{% trans %}Analytics{% endtrans %}
                    </a>
                    {% endif %}
                    {% if code.is_dynamic or code.track_scans %}
                    <button type="button" class="btn-edit-qr px-3 py-1.5 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400 text-xs font-medium hover:bg-indigo-200 dark:hover:bg-indigo-900/50 transition"
                            data-id="{{ code.id }}" data-url="{{ code.redirect_url or code.content }}" data-label="{{ code.label }}">
                        <i class="fa fa-edit mr-1"></i>{% trans %}Edit{% endtrans %}
                    </button>
                    {% endif %}
                    <button type="button" class="btn-delete-qr px-3 py-1.5 rounded-lg bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 text-xs font-medium hover:bg-red-200 dark:hover:bg-red-900/50 transition"
                            data-id="{{ code.id }}">
                        <i class="fa fa-trash mr-1"></i>{% trans %}Delete{% endtrans %}
                    </button>
                </div>
            </div>

            <!-- Edit form (hidden by default) -->
            <div class="edit-qr-form hidden mt-4 pt-4 border-t border-gray-100 dark:border-gray-800">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1">{% trans %}Label{% endtrans %}</label>
                        <input type="text" class="edit-label w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white outline-none"
                               value="{{ code.label }}">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1">{% trans %}Destination URL{% endtrans %}</label>
                        <input type="url" class="edit-url w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white outline-none"
                               value="{{ code.redirect_url or code.content }}">
                    </div>
                </div>
                <div class="flex gap-2 mt-3">
                    <button type="button" class="btn-save-qr px-4 py-1.5 rounded-lg bg-primary text-white text-xs font-semibold hover:bg-primary/90 transition" data-id="{{ code.id }}">{% trans %}Save Changes{% endtrans %}</button>
                    <button type="button" class="btn-cancel-edit-qr px-4 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition" data-id="{{ code.id }}">{% trans %}Cancel{% endtrans %}</button>
                </div>
            </div>

            <!-- Inline delete confirmation (hidden by default) -->
            <div class="delete-confirm-row hidden mt-3 pt-3 border-t border-red-100 dark:border-red-900/30">
                <p class="text-xs text-red-600 dark:text-red-400 mb-2 font-medium"><i class="fa fa-exclamation-triangle mr-1"></i>{% trans %}Delete this QR code? This cannot be undone.{% endtrans %}</p>
                <div class="flex gap-2">
                    <button type="button" class="btn-confirm-delete px-4 py-1.5 rounded-lg bg-red-600 hover:bg-red-700 text-white text-xs font-semibold transition" data-id="{{ code.id }}">{% trans %}Yes, Delete{% endtrans %}</button>
                    <button type="button" class="btn-cancel-delete px-4 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition" data-id="{{ code.id }}">{% trans %}Cancel{% endtrans %}</button>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
(function () {
  function _notify(type, msg) {
    if (window.toastr) { toastr[type](msg); }
    else { alert(msg); }
  }

  function postJSON(url, data) {
    return fetch(url, {
      method: 'POST',
      credentials: 'same-origin',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    }).then(function (r) {
      if (!r.ok && r.status === 401) throw new Error('Not logged in');
      return r.json();
    });
  }

  function fadeRemove(el, ms) {
    el.style.transition = 'opacity ' + ms + 'ms';
    el.style.opacity = '0';
    setTimeout(function () { if (el.parentNode) el.parentNode.removeChild(el); }, ms);
  }

  function getCard(id) {
    return document.getElementById('qr-card-' + id);
  }

  document.addEventListener('click', function (e) {
    var target = e.target;

    /* ── Show edit form ── */
    var editBtn = target.closest ? target.closest('.btn-edit-qr') : null;
    if (!editBtn && target.classList && target.classList.contains('btn-edit-qr')) editBtn = target;
    if (editBtn) {
      var id = editBtn.getAttribute('data-id');
      var card = getCard(id);
      if (card) {
        var form = card.querySelector('.edit-qr-form');
        var delRow = card.querySelector('.delete-confirm-row');
        if (delRow) delRow.classList.add('hidden');
        if (form) form.classList.toggle('hidden');
      }
      return;
    }

    /* ── Cancel edit ── */
    var cancelEdit = target.closest ? target.closest('.btn-cancel-edit-qr') : null;
    if (!cancelEdit && target.classList && target.classList.contains('btn-cancel-edit-qr')) cancelEdit = target;
    if (cancelEdit) {
      var id = cancelEdit.getAttribute('data-id');
      var card = getCard(id);
      if (card) {
        var form = card.querySelector('.edit-qr-form');
        if (form) form.classList.add('hidden');
      }
      return;
    }

    /* ── Save (update) ── */
    var saveBtn = target.closest ? target.closest('.btn-save-qr') : null;
    if (!saveBtn && target.classList && target.classList.contains('btn-save-qr')) saveBtn = target;
    if (saveBtn) {
      var id = saveBtn.getAttribute('data-id');
      var card = getCard(id);
      if (!card) return;
      var form = card.querySelector('.edit-qr-form');
      if (!form) return;
      var urlInput = form.querySelector('.edit-url');
      var labelInput = form.querySelector('.edit-label');
      var url = urlInput ? urlInput.value.trim() : '';
      var label = labelInput ? labelInput.value.trim() : '';
      saveBtn.disabled = true;
      saveBtn.textContent = '{% trans %}Saving…{% endtrans %}';
      postJSON('/qr-code-generator/update/' + id, { redirect_url: url, label: label })
        .then(function (r) {
          if (r && r.ok) {
            _notify('success', '{% trans %}Saved!{% endtrans %}');
            setTimeout(function () { location.reload(); }, 600);
          } else {
            _notify('error', (r && r.error) || '{% trans %}Save failed{% endtrans %}');
            saveBtn.disabled = false;
            saveBtn.textContent = '{% trans %}Save Changes{% endtrans %}';
          }
        })
        .catch(function (err) {
          _notify('error', err.message || '{% trans %}Save failed{% endtrans %}');
          saveBtn.disabled = false;
          saveBtn.textContent = '{% trans %}Save Changes{% endtrans %}';
        });
      return;
    }

    /* ── Show delete confirmation ── */
    var delBtn = target.closest ? target.closest('.btn-delete-qr') : null;
    if (!delBtn && target.classList && target.classList.contains('btn-delete-qr')) delBtn = target;
    if (delBtn) {
      var id = delBtn.getAttribute('data-id');
      var card = getCard(id);
      if (card) {
        var form = card.querySelector('.edit-qr-form');
        var delRow = card.querySelector('.delete-confirm-row');
        if (form) form.classList.add('hidden');
        if (delRow) delRow.classList.toggle('hidden');
      }
      return;
    }

    /* ── Cancel delete ── */
    var cancelDel = target.closest ? target.closest('.btn-cancel-delete') : null;
    if (!cancelDel && target.classList && target.classList.contains('btn-cancel-delete')) cancelDel = target;
    if (cancelDel) {
      var id = cancelDel.getAttribute('data-id');
      var card = getCard(id);
      if (card) {
        var delRow = card.querySelector('.delete-confirm-row');
        if (delRow) delRow.classList.add('hidden');
      }
      return;
    }

    /* ── Confirm delete ── */
    var confirmDel = target.closest ? target.closest('.btn-confirm-delete') : null;
    if (!confirmDel && target.classList && target.classList.contains('btn-confirm-delete')) confirmDel = target;
    if (confirmDel) {
      var id = confirmDel.getAttribute('data-id');
      confirmDel.disabled = true;
      confirmDel.textContent = '{% trans %}Deleting…{% endtrans %}';
      postJSON('/qr-code-generator/delete/' + id, {})
        .then(function (r) {
          if (r && r.ok) {
            var card = getCard(id);
            if (card) fadeRemove(card, 300);
            _notify('success', '{% trans %}Deleted{% endtrans %}');
          } else {
            _notify('error', (r && r.error) || '{% trans %}Delete failed{% endtrans %}');
            confirmDel.disabled = false;
            confirmDel.textContent = '{% trans %}Yes, Delete{% endtrans %}';
          }
        })
        .catch(function (err) {
          _notify('error', err.message || '{% trans %}Delete failed{% endtrans %}');
          confirmDel.disabled = false;
          confirmDel.textContent = '{% trans %}Yes, Delete{% endtrans %}';
        });
    }
  });
}());
</script>
{% endblock %}