{% extends "base.html" %}
{% block title %}Quick Replies{% endblock %}
{% block content %}
<div id="quick-replies-page" class="p-3 sm:p-6">
  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-6">
    <div>
      <h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Quick Replies</h1>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Manage predefined reply templates for tickets.</p>
    </div>
    <div class="flex items-center gap-2">
      <button type="button" onclick="openManageCategoriesModal()"
              class="inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
        <span class="material-symbols-outlined text-base">category</span>
        Categories
      </button>
      <button type="button" id="create-message-btn" onclick="document.getElementById('create-modal').classList.remove('hidden')"
              class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors">
        <span class="material-symbols-outlined text-base">add</span>
        New Message
      </button>
    </div>
  </div>

  {# ── Category filter chips ── #}
  <div class="flex flex-wrap gap-2 mb-4" id="category-filters">
    <button type="button" class="cat-chip active px-3 py-1.5 rounded-full text-xs font-medium border transition-colors bg-brand-600 text-white border-brand-600"
            onclick="filterByCategory(null, this)">All</button>
    {% for cat in categories %}
    <button type="button" class="cat-chip px-3 py-1.5 rounded-full text-xs font-medium border transition-colors bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:border-brand-400"
            data-cat-id="{{ cat.id }}" onclick="filterByCategory({{ cat.id }}, this)">{{ cat.name }}</button>
    {% endfor %}
    <button type="button" class="cat-chip px-3 py-1.5 rounded-full text-xs font-medium border transition-colors bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:border-brand-400"
            data-cat-id="uncategorized" onclick="filterByCategory('uncategorized', this)">Uncategorized</button>
  </div>

  {# ── Grouped message list ── #}
  <div id="messages-container" class="space-y-4">

    {# Build groups: categories with messages first, then uncategorized #}
    {% set ns = namespace(uncategorized=[]) %}
    {% for cat in categories %}
      {% set cat_messages = messages | selectattr('category_id', 'equalto', cat.id) | list %}
      {% if cat_messages %}
      <div class="category-section" data-cat-id="{{ cat.id }}">
        <div class="flex items-center gap-2 mb-2">
          <h2 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ cat.name }}</h2>
          <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
          <span class="text-xs text-gray-400 dark:text-gray-500">{{ cat_messages | length }}</span>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
          <table class="w-full text-sm">
            <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
              {% for m in cat_messages %}
              {{ _message_row(m) }}
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
      {% endif %}
    {% endfor %}

    {# Uncategorized section #}
    {% set uncategorized = messages | selectattr('category_id', 'none') | list %}
    {% if uncategorized %}
    <div class="category-section" data-cat-id="uncategorized">
      <div class="flex items-center gap-2 mb-2">
        <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Uncategorized</h2>
        <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
        <span class="text-xs text-gray-400 dark:text-gray-500">{{ uncategorized | length }}</span>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
        <table class="w-full text-sm">
          <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
            {% for m in uncategorized %}
            {{ _message_row(m) }}
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% endif %}

    {% if not messages %}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-8 text-center text-sm text-gray-400 dark:text-gray-500">
      No predefined messages yet. Click "New Message" to create one, or Sync to import from Addons.
    </div>
    {% endif %}
  </div>
</div>

{# ── Message row macro ── #}
{% macro _message_row(m) %}
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors" data-cat-id="{{ m.category_id or 'uncategorized' }}">
  <td class="px-4 py-3 w-full">
    <div class="font-medium text-gray-900 dark:text-gray-100">{{ m.title }}</div>
    <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate max-w-xs">{{ m.body[:80] }}{% if m.body|length > 80 %}…{% endif %}</div>
  </td>
  <td class="px-4 py-3 whitespace-nowrap">
    {% if m.source == 'addons' %}
      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-blue-100 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400 font-medium">Addons</span>
    {% else %}
      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-green-100 dark:bg-green-500/10 text-green-700 dark:text-green-400 font-medium">Local</span>
    {% endif %}
  </td>
  <td class="px-4 py-3 text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">
    {% if m.is_global %}
      <span class="text-gray-500 dark:text-gray-400">Global</span>
    {% elif m.product_names %}
      {{ m.product_names | join(', ') | truncate(40) }}
    {% else %}
      <span class="text-gray-400 dark:text-gray-500">-</span>
    {% endif %}
  </td>
  <td class="px-4 py-3 text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap">{{ m.iso_lang or '-' }}</td>
  <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ m.updated_at.strftime('%Y-%m-%d') if m.updated_at else '-' }}</td>
  <td class="px-4 py-3 text-right whitespace-nowrap">
    {% if m.source == 'local' %}
    <button type="button" onclick="openEditModal({{ m | tojson }})"
            class="text-xs font-medium text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300 mr-2">Edit</button>
    <form method="post" action="{{ url_for('predefined_messages_delete', msg_id=m.id) }}" class="inline"
          onsubmit="return confirm('Delete this message?')">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <button type="submit" class="text-xs font-medium text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300">Delete</button>
    </form>
    {% else %}
    <span class="text-xs text-gray-400 dark:text-gray-500">Synced</span>
    {% endif %}
  </td>
</tr>
{% endmacro %}

{# ── Create Modal ── #}
<div id="create-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
  <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
    <form method="post" action="{{ url_for('predefined_messages_create') }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div class="px-6 py-5 border-b border-gray-200 dark:border-gray-700">
        <h2 class="text-lg font-bold text-gray-900 dark:text-gray-100">New Quick Reply</h2>
      </div>
      <div class="px-6 py-5 space-y-4">
        <div>
          <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Title</label>
          <input type="text" name="title" required class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
        </div>
        <div>
          <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Body</label>
          <textarea name="body" rows="4" required class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none resize-y"></textarea>
        </div>
        <div>
          <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Category</label>
          <select name="category_id" id="create-category-id" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
            <option value="">— Uncategorized —</option>
            {% for cat in categories %}
            <option value="{{ cat.id }}">{{ cat.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="flex gap-4">
          <div class="flex-1">
            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Language (ISO)</label>
            <input type="text" name="iso_lang" placeholder="en" maxlength="10" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
          </div>
          <div class="flex items-end pb-1">
            <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
              <input type="checkbox" name="is_global" value="1" id="create-global-cb" onchange="toggleProducts('create')" class="rounded border-gray-300 dark:border-gray-600 text-brand-600 focus:ring-brand-500">
              Global
            </label>
          </div>
        </div>
        <div id="create-products-section">
          <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Assign to Products</label>
          <select name="product_ids" multiple class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none" style="min-height:80px">
            {% for p in products %}
            <option value="{{ p.id }}">{{ p.name }}</option>
            {% endfor %}
          </select>
          <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Hold Ctrl/Cmd to select multiple.</p>
        </div>
        <div id="create-attach-module-section">
          <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
            <input type="checkbox" name="attach_latest_module" value="1" id="create-attach-module-cb" class="rounded border-gray-300 dark:border-gray-600 text-brand-600 focus:ring-brand-500">
            Attach latest module ZIP when used
          </label>
          <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5 ml-6">Auto-attaches the uploaded ZIP for this product when selected in Quick Reply.</p>
        </div>
      </div>
      <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-2">
        <button type="button" onclick="document.getElementById('create-modal').classList.add('hidden')"
                class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600">Cancel</button>
        <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700">Create</button>
      </div>
    </form>
  </div>
</div>

{# ── Edit Modal ── #}
<div id="edit-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
  <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
    <form method="post" id="edit-form">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div class="px-6 py-5 border-b border-gray-200 dark:border-gray-700">
        <h2 class="text-lg font-bold text-gray-900 dark:text-gray-100">Edit Quick Reply</h2>
      </div>
      <div class="px-6 py-5 space-y-4">
        <div>
          <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Title</label>
          <input type="text" name="title" id="edit-title" required class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
        </div>
        <div>
          <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Body</label>
          <textarea name="body" id="edit-body" rows="4" required class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none resize-y"></textarea>
        </div>
        <div>
          <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Category</label>
          <select name="category_id" id="edit-category-id" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
            <option value="">— Uncategorized —</option>
            {% for cat in categories %}
            <option value="{{ cat.id }}">{{ cat.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="flex gap-4">
          <div class="flex-1">
            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Language (ISO)</label>
            <input type="text" name="iso_lang" id="edit-iso-lang" placeholder="en" maxlength="10" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
          </div>
          <div class="flex items-end pb-1">
            <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
              <input type="checkbox" name="is_global" value="1" id="edit-global-cb" onchange="toggleProducts('edit')" class="rounded border-gray-300 dark:border-gray-600 text-brand-600 focus:ring-brand-500">
              Global
            </label>
          </div>
        </div>
        <div id="edit-products-section">
          <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Assign to Products</label>
          <select name="product_ids" id="edit-product-ids" multiple class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none" style="min-height:80px">
            {% for p in products %}
            <option value="{{ p.id }}">{{ p.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div id="edit-attach-module-section">
          <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
            <input type="checkbox" name="attach_latest_module" value="1" id="edit-attach-module-cb" class="rounded border-gray-300 dark:border-gray-600 text-brand-600 focus:ring-brand-500">
            Attach latest module ZIP when used
          </label>
          <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5 ml-6">Auto-attaches the uploaded ZIP for this product when selected in Quick Reply.</p>
        </div>
      </div>
      <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-2">
        <button type="button" onclick="document.getElementById('edit-modal').classList.add('hidden')"
                class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600">Cancel</button>
        <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700">Save</button>
      </div>
    </form>
  </div>
</div>

{# ── Manage Categories Modal ── #}
<div id="categories-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
  <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full max-w-md mx-4">
    <div class="px-6 py-5 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
      <h2 class="text-lg font-bold text-gray-900 dark:text-gray-100">Manage Categories</h2>
      <button type="button" onclick="document.getElementById('categories-modal').classList.add('hidden')"
              class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
        <span class="material-symbols-outlined">close</span>
      </button>
    </div>
    <div class="px-6 py-4">
      <ul id="categories-list" class="space-y-2 mb-4">
        {% for cat in categories %}
        <li class="flex items-center gap-2" data-cat-id="{{ cat.id }}">
          <span class="flex-1 text-sm text-gray-900 dark:text-gray-100 cat-name-display">{{ cat.name }}</span>
          <button type="button" onclick="startRenameCategory({{ cat.id }}, '{{ cat.name | e }}')"
                  class="text-xs text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300">Rename</button>
          <button type="button" onclick="deleteCategory({{ cat.id }}, this)"
                  class="text-xs text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300">Delete</button>
        </li>
        {% endfor %}
      </ul>
      <div class="flex gap-2">
        <input type="text" id="new-category-name" placeholder="New category name"
               class="flex-1 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
        <button type="button" onclick="addCategory()"
                class="px-4 py-2 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700">Add</button>
      </div>
    </div>
  </div>
</div>

<script>
const _csrfToken = '{{ csrf_token() }}';
const _categories = {{ categories | tojson }};

function toggleProducts(prefix) {
  var cb = document.getElementById(prefix + '-global-cb');
  var section = document.getElementById(prefix + '-products-section');
  var attachSection = document.getElementById(prefix + '-attach-module-section');
  section.style.display = cb.checked ? 'none' : '';
  if (attachSection) attachSection.style.display = cb.checked ? 'none' : '';
}

function openEditModal(msg) {
  document.getElementById('edit-form').action = '/predefined-messages/' + msg.id + '/edit';
  document.getElementById('edit-title').value = msg.title;
  document.getElementById('edit-body').value = msg.body;
  document.getElementById('edit-iso-lang').value = msg.iso_lang || '';
  document.getElementById('edit-global-cb').checked = msg.is_global;

  var catSel = document.getElementById('edit-category-id');
  catSel.value = msg.category_id || '';

  var sel = document.getElementById('edit-product-ids');
  Array.from(sel.options).forEach(function(opt) {
    opt.selected = msg.product_ids && msg.product_ids.indexOf(parseInt(opt.value)) !== -1;
  });

  document.getElementById('edit-attach-module-cb').checked = !!msg.attach_latest_module;
  toggleProducts('edit');
  document.getElementById('edit-modal').classList.remove('hidden');
}

function filterByCategory(catId, btn) {
  // Update chip styles
  document.querySelectorAll('.cat-chip').forEach(function(c) {
    c.classList.remove('active', 'bg-brand-600', 'text-white', 'border-brand-600');
    c.classList.add('bg-white', 'dark:bg-gray-800', 'text-gray-700', 'dark:text-gray-300', 'border-gray-300', 'dark:border-gray-600');
  });
  btn.classList.add('active', 'bg-brand-600', 'text-white', 'border-brand-600');
  btn.classList.remove('bg-white', 'dark:bg-gray-800', 'text-gray-700', 'dark:text-gray-300', 'border-gray-300', 'dark:border-gray-600');

  // Show/hide sections
  document.querySelectorAll('.category-section').forEach(function(sec) {
    if (catId === null) {
      sec.style.display = '';
    } else {
      sec.style.display = (sec.dataset.catId == catId) ? '' : 'none';
    }
  });
}

// ── Category management ──

function openManageCategoriesModal() {
  document.getElementById('categories-modal').classList.remove('hidden');
}

function addCategory() {
  var input = document.getElementById('new-category-name');
  var name = input.value.trim();
  if (!name) return;

  fetch('/api/predefined-message-categories', {
    method: 'POST',
    headers: {'Content-Type': 'application/json', 'X-CSRFToken': _csrfToken},
    body: JSON.stringify({name: name})
  }).then(r => r.json()).then(data => {
    if (data.success) {
      input.value = '';
      // Reload page to show new category everywhere
      location.reload();
    } else {
      alert(data.error || 'Failed to add category');
    }
  });
}

function startRenameCategory(catId, currentName) {
  var li = document.querySelector('#categories-list [data-cat-id="' + catId + '"]');
  var display = li.querySelector('.cat-name-display');
  var inp = document.createElement('input');
  inp.type = 'text';
  inp.value = currentName;
  inp.className = 'flex-1 text-sm border-b border-brand-400 outline-none bg-transparent text-gray-900 dark:text-gray-100';
  display.replaceWith(inp);
  inp.focus(); inp.select();

  var save = function() {
    var newName = inp.value.trim();
    if (!newName || newName === currentName) { location.reload(); return; }
    fetch('/api/predefined-message-categories/' + catId, {
      method: 'POST',
      headers: {'Content-Type': 'application/json', 'X-CSRFToken': _csrfToken},
      body: JSON.stringify({name: newName})
    }).then(() => location.reload());
  };
  inp.addEventListener('blur', save);
  inp.addEventListener('keydown', function(e) { if (e.key === 'Enter') inp.blur(); });
}

function deleteCategory(catId, btn) {
  if (!confirm('Delete this category? Messages in it will become Uncategorized.')) return;
  fetch('/api/predefined-message-categories/' + catId + '/delete', {
    method: 'POST',
    headers: {'X-CSRFToken': _csrfToken}
  }).then(() => location.reload());
}

// New category from modal input on Enter
document.getElementById('new-category-name').addEventListener('keydown', function(e) {
  if (e.key === 'Enter') addCategory();
});
</script>
{% endblock %}