{% extends "base.html" %}
{% block title %}Quick Replies{% endblock %}
{% block content %}
<div id="quick-replies-page" class="p-6">
  <div class="flex items-center justify-between 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>
    <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>

  {# Message list #}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
    <table id="messages-table" class="w-full text-sm">
      <thead class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
        <tr>
          <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Title</th>
          <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Source</th>
          <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Scope</th>
          <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Lang</th>
          <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Updated</th>
          <th class="text-right px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
        {% for m in messages %}
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
          <td class="px-4 py-3">
            <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">
            {% 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">
            {% 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">{{ m.iso_lang or '-' }}</td>
          <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400">{{ m.updated_at.strftime('%Y-%m-%d') if m.updated_at else '-' }}</td>
          <td class="px-4 py-3 text-right">
            {% 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>
        {% else %}
        <tr>
          <td colspan="6" class="px-4 py-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.</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{# ── 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">
    <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 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. Leave empty for unassigned.</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">
    <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 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>
      <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>

<script>
function toggleProducts(prefix) {
  var cb = document.getElementById(prefix + '-global-cb');
  var section = document.getElementById(prefix + '-products-section');
  if (cb.checked) {
    section.style.display = 'none';
  } else {
    section.style.display = '';
  }
}

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;

  // Set selected products
  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;
  });

  toggleProducts('edit');
  document.getElementById('edit-modal').classList.remove('hidden');
}
</script>
{% endblock %}