{% extends base_template %}

{% block content %}
<div class="container-fluid">
  <div class="page-header">
    <h2>
      {% if sub %}Edit{% else %}Create{% endif %} RMQ Subscription
      {% if group_subs %}
        <small class="text-muted"> — group ({{ group_subs | length }} queue(s))</small>
      {% endif %}
      {% if is_dag_file %}
        <small class="text-muted"> — dag_file source (read-only fields managed by code)</small>
      {% endif %}
    </h2>
  </div>

  {# Flash messages #}
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% for category, message in messages %}
    <div class="alert alert-{{ 'danger' if category == 'error' else category }}">{{ message }}</div>
    {% endfor %}
  {% endwith %}

  {% if is_dag_file %}
  <div class="alert alert-info">
    This subscription is defined in a DAG file via <code>@rmq_trigger</code>.
    Only the <strong>Enabled</strong> toggle can be changed here.
    To modify other fields, update the DAG file.
  </div>
  {% endif %}

  <div class="panel panel-default">
    <div class="panel-body">
      <form method="post" class="form-horizontal">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

        <div class="form-group">
          <label class="col-sm-2 control-label">DAG ID</label>
          <div class="col-sm-6">
            <input type="text" name="dag_id" class="form-control"
                   value="{{ sub.dag_id if sub else '' }}"
                   {% if is_dag_file %}readonly{% else %}required{% endif %}>
          </div>
        </div>

        {# Queue(s) — dynamic list for create/group-edit, single field for single-sub edit #}
        {% if group_subs %}
        {# Group edit: show all queues with remove buttons #}
        <div class="form-group">
          <label class="col-sm-2 control-label">Queues</label>
          <div class="col-sm-6" id="queue-list">
            {% for gs in group_subs %}
            <div class="input-group" style="margin-bottom:4px">
              <input type="text" name="queue_name" class="form-control"
                     value="{{ gs.queue_name }}"
                     {% if is_dag_file %}readonly{% else %}required{% endif %}>
              {% if not is_dag_file %}
              <span class="input-group-btn">
                <button type="button" class="btn btn-default btn-remove-queue" title="Remove queue">✕</button>
              </span>
              {% endif %}
            </div>
            {% endfor %}
          </div>
        </div>
        {% elif not sub %}
        {# Create: start with one queue, allow adding more #}
        <div class="form-group">
          <label class="col-sm-2 control-label">Queue(s)</label>
          <div class="col-sm-6" id="queue-list">
            <div class="input-group" style="margin-bottom:4px">
              <input type="text" name="queue_name" class="form-control" placeholder="queue name" required>
              <span class="input-group-btn">
                <button type="button" class="btn btn-default btn-remove-queue" title="Remove queue">✕</button>
              </span>
            </div>
          </div>
        </div>
        {% else %}
        {# Single-sub edit: single queue field #}
        <div class="form-group">
          <label class="col-sm-2 control-label">Queue Name</label>
          <div class="col-sm-6">
            <input type="text" name="queue_name" class="form-control"
                   value="{{ sub.queue_name if sub else '' }}"
                   {% if is_dag_file %}readonly{% else %}required{% endif %}>
          </div>
        </div>
        {% endif %}

        {% if not is_dag_file and (not sub or group_subs) %}
        {# Show "+ Add queue" button in create mode and group-edit mode #}
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-6">
            <button type="button" id="btn-add-queue" class="btn btn-default btn-sm">+ Add queue</button>
          </div>
        </div>
        {% endif %}

        <div class="form-group">
          <label class="col-sm-2 control-label">Connection ID</label>
          <div class="col-sm-6">
            <input type="text" name="conn_id" class="form-control"
                   value="{{ sub.conn_id if sub else 'rmq_default' }}"
                   {% if is_dag_file %}readonly{% endif %}>
            <p class="help-block">Airflow connection ID pointing to the RabbitMQ instance.</p>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">Cooldown (seconds)</label>
          <div class="col-sm-6">
            <input type="number" name="cooldown" class="form-control" min="0"
                   value="{{ sub.cooldown if sub and sub.cooldown else 0 }}"
                   {% if is_dag_file %}readonly{% endif %}>
            <p class="help-block">
              0 = trigger DAG immediately on each message.
              &gt;0 = trigger once after this many seconds; all messages within the window are ACKed.
            </p>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">Filter Data (JSON)</label>
          <div class="col-sm-6">
            <textarea name="filter_data" class="form-control" rows="4"
                      {% if is_dag_file %}readonly{% endif %}>{{ sub.filter_data | tojson(indent=2) if sub and sub.filter_data else '' }}</textarea>
            <p class="help-block">
              Optional message filter in format <code>{"filter_headers": {"key": "value"}}</code>.
              Leave empty to trigger on any message.
            </p>
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-6">
            <div class="checkbox">
              <label>
                <input type="checkbox" name="ack_unmatched"
                       {% if ack_unmatched_checked %}checked{% endif %}
                       {% if is_dag_file %}disabled{% endif %}>
                Acknowledge unmatched messages
              </label>
            </div>
            <p class="help-block">
              {% if is_dag_file %}
                Set in the DAG file — <code>@rmq_trigger(ack_unmatched=True)</code>.
              {% else %}
                A message this subscription's filter rejects is acknowledged and gone
                instead of being returned to the queue. Dead-lettering does not apply
                to an acknowledgement, so the message simply disappears — turn this on
                only for a queue this subscription owns.
                {% if group_subs and group_subs | length > 1 %}
                  The box stands for the whole group: it is on only when every queue in
                  the group acknowledges, and saving writes it to every row.
                  {% if ack_unmatched_mixed %}
                    The rows disagree today, and the Subscriptions page shows the group
                    as acknowledging because at least one of its queues does. Saving
                    levels the whole group to what you see here —
                    {% if ack_unmatched_checked %}
                      the box is ticked, so the save switches permanent deletion on for
                      every queue in the group, including the ones running without it
                      today. Untick it unless every queue may lose the messages its
                      filter rejects.
                    {% else %}
                      the box is off, so the save switches deletion off everywhere and
                      cannot turn it on for a queue that runs without it. Tick it only
                      if every queue in the group may lose the messages its filter
                      rejects.
                    {% endif %}
                  {% endif %}
                {% endif %}
              {% endif %}
            </p>
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-6">
            <div class="checkbox">
              <label>
                <input type="checkbox" name="enabled"
                       {% if (sub is none) or sub.enabled %}checked{% endif %}>
                Enabled
              </label>
            </div>
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-6">
            <button type="submit" class="btn btn-primary">Save</button>
            <a href="{{ url_for('RMQWatcherView.subscriptions') }}" class="btn btn-default">Cancel</a>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>

{% if not is_dag_file %}
<script>
(function() {
  var queueList = document.getElementById('queue-list');
  var addBtn = document.getElementById('btn-add-queue');

  function removeRow(btn) {
    var rows = queueList.querySelectorAll('.input-group');
    if (rows.length <= 1) { return; }  // keep minimum 1
    btn.closest('.input-group').remove();
  }

  // Attach remove handlers to existing rows
  queueList && queueList.querySelectorAll('.btn-remove-queue').forEach(function(btn) {
    btn.addEventListener('click', function() { removeRow(btn); });
  });

  // Add queue button
  addBtn && addBtn.addEventListener('click', function() {
    var div = document.createElement('div');
    div.className = 'input-group';
    div.style.marginBottom = '4px';
    div.innerHTML = '<input type="text" name="queue_name" class="form-control" placeholder="queue name" required>' +
      '<span class="input-group-btn">' +
      '<button type="button" class="btn btn-default btn-remove-queue" title="Remove queue">✕</button>' +
      '</span>';
    div.querySelector('.btn-remove-queue').addEventListener('click', function() { removeRow(this); });
    queueList.appendChild(div);
  });
})();
</script>
{% endif %}

{% endblock %}