{% extends "base.html" %}
{% from "pbx/partials/destination_selector.html" import destination_selector %}
{% block title %}{% if condition %}Editar {{ condition.name }}{% else %}Nova Condição de Horário{% endif %}{% endblock %}
{% set active = "app-time-conditions" %}
{% block head_extra %}
<style>
.rules-table tr.dragging { opacity: 0.5; }
.rules-table tr.drag-over { border: 2px dashed #0d6efd; }
</style>
{% endblock %}
{% block content %}
<h4>{% if condition %}✏️ {{ condition.name }}{% else %}➕ Nova Condição de Horário{% endif %}</h4>
<form method="post" action="/app/pbx/time-conditions/save" class="row g-3" id="tcForm">
  {% if condition %}<input type="hidden" name="id" value="{{ condition.id }}">{% endif %}

  <div class="col-md-6">
    <label class="form-label">Nome *</label>
    <input type="text" name="name" class="form-control" required value="{{ condition.name if condition else '' }}">
  </div>
  <div class="col-md-3">
    <label class="form-label">Grupo de Horário *</label>
    <select name="time_group_id" class="form-select" required>
      <option value="">Selecione...</option>
      {% for tg in time_groups %}
      <option value="{{ tg.id }}" {% if condition and condition.time_group_id == tg.id %}selected{% endif %}>{{ tg.name }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="col-md-3">
    <label class="form-label"></label>
    <div class="form-check mt-2">
      <input type="checkbox" name="enabled" class="form-check-input" id="chk_en" {% if not condition or condition.enabled %}checked{% endif %}>
      <label class="form-check-label" for="chk_en">Ativo</label>
    </div>
  </div>

  <div class="col-12">
    <label class="form-label">Descrição</label>
    <textarea name="description" class="form-control" rows="2">{{ condition.description if condition else '' }}</textarea>
  </div>

  <!-- Regras encadeadas -->
  <div class="col-12 mt-3">
    <div class="card border-primary">
      <div class="card-header bg-primary text-white py-1 d-flex justify-content-between align-items-center">
        <span>🔗 Regras de Horário <small class="fw-normal">(encadeamento: primeira que bater executa)</small></span>
        <button type="button" class="btn btn-sm btn-light" onclick="addRule()">+ Adicionar Regra</button>
      </div>
      <div class="card-body p-2">
        {% if condition and condition.rules %}
        <input type="hidden" name="existing_rules" value="1">
        {% endif %}
        <table class="table table-sm table-bordered rules-table mb-0" id="rulesTable">
          <thead class="table-light">
            <tr>
              <th style="width:40px">#</th>
              <th>Grupo de Horário</th>
              <th style="width:130px">Tipo Destino</th>
              <th>Destino</th>
              <th style="width:90px">Ações</th>
            </tr>
          </thead>
          <tbody>
            {% if condition and condition.rules %}
            {% for r in condition.rules %}
            <tr data-rule-idx="{{ loop.index0 }}">
              <td class="text-center">
                <span class="rule-order-badge badge bg-secondary">{{ r.rule_order }}</span>
                <input type="hidden" name="rule_id" value="{{ r.id if r.id else '' }}">
                <input type="hidden" name="rule_order" value="{{ r.rule_order }}">
              </td>
              <td>
                <select name="rule_time_group_id" class="form-select form-select-sm">
                  <option value="">Selecione...</option>
                  {% for tg in time_groups %}
                  <option value="{{ tg.id }}" {% if r.time_group_id == tg.id %}selected{% endif %}>{{ tg.name }}</option>
                  {% endfor %}
                </select>
              </td>
              <td>
                <select name="rule_destination_type" class="form-select form-select-sm">
                  {% for t in ["extension","queue","ring_group","ivr","announcement","voicemail","hangup"] %}
                  <option value="{{ t }}" {% if r.destination_type == t %}selected{% endif %}>{{ t }}</option>
                  {% endfor %}
                </select>
              </td>
              <td>
                <input type="text" name="rule_destination" class="form-control form-control-sm" value="{{ r.destination }}">
              </td>
              <td class="text-center">
                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="moveRule(this, -1)" title="Subir">⬆</button>
                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="moveRule(this, 1)" title="Descer">⬇</button>
                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeRule(this)" title="Remover">✕</button>
              </td>
            </tr>
            {% endfor %}
            {% endif %}
          </tbody>
        </table>
        <div class="text-muted small mt-1">
          {% if not (condition and condition.rules) %}
          <em>Nenhuma regra ainda. Clique em "+ Adicionar Regra" para incluir condições encadeadas.</em>
          {% endif %}
          <br>
          Se nenhuma regra bater, será usado o <strong>Destino Padrão</strong> abaixo.
        </div>
      </div>
    </div>
  </div>

  <!-- Destino Padrão (fallback) -->
  <div class="col-12 mt-2">
    <div class="card border-secondary">
      <div class="card-header bg-secondary text-white py-1"><small>🎯 Destino Padrão (fallback se nenhuma regra bater)</small></div>
      <div class="card-body py-2">
        <div class="row align-items-end">
          <div class="col-9">
            {{ destination_selector(
              all_destinations=all_destinations,
              selected_type=condition.default_destination_type if condition else '',
              selected_dest=condition.default_destination if condition else '',
              field_name="default_destination",
              label="Destino Padrão (fallback)"
            ) }}
          </div>
          <div class="col-3">
            <small class="text-muted">Usado quando nenhuma regra encadeada bater</small>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Comportamento legado (match/nomatch) quando NÃO usa regras encadeadas -->
  <div class="col-12 mt-2">
    <div class="card border-info">
      <div class="card-header bg-info text-white py-1"><small>📋 Comportamento Legado (match/nomatch)</small></div>
      <div class="card-body py-2">
        <div class="row">
          <div class="col-md-6">
            <div class="card border-success">
              <div class="card-header bg-success text-white py-1"><small>✅ Se DENTRO do horário</small></div>
              <div class="card-body py-2">
                {{ destination_selector(
                  all_destinations=all_destinations,
                  selected_type=condition.destination_match_type if condition else '',
                  selected_dest=condition.destination_match if condition else '',
                  field_name="destination_match",
                  label="Se DENTRO do horário"
                ) }}
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card border-danger">
              <div class="card-header bg-danger text-white py-1"><small>❌ Se FORA do horário</small></div>
              <div class="card-body py-2">
                {{ destination_selector(
                  all_destinations=all_destinations,
                  selected_type=condition.destination_nomatch_type if condition else '',
                  selected_dest=condition.destination_nomatch if condition else '',
                  field_name="destination_nomatch",
                  label="Se FORA do horário"
                ) }}
              </div>
            </div>
          </div>
        </div>
        <div class="text-muted small mt-1">
          <em>Campos de compatibilidade retroativa. Se houver regras encadeadas, estes campos podem ser ignorados em favor das regras + destino padrão.</em>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">💾 Salvar</button>
    <a href="/app/pbx/time-conditions" class="btn btn-secondary">Cancelar</a>
  </div>
</form>
{% endblock %}
{% block scripts %}
<script>
function getTimeGroups() {
  const groups = [];
  {% for tg in time_groups %}
  groups.push({id: {{ tg.id }}, name: "{{ tg.name }}"});
  {% endfor %}
  return groups;
}

function createRuleRow(idx, data) {
  data = data || {};
  const groups = getTimeGroups();
  let groupOpts = '<option value="">Selecione...</option>';
  for (const g of groups) {
    const sel = data.time_group_id == g.id ? 'selected' : '';
    groupOpts += `<option value="${g.id}" ${sel}>${g.name}</option>`;
  }
  const destTypes = ["extension","queue","ring_group","ivr","announcement","voicemail","hangup"];
  let typeOpts = '';
  for (const t of destTypes) {
    const sel = (data.destination_type || 'extension') === t ? 'selected' : '';
    typeOpts += `<option value="${t}" ${sel}>${t}</option>`;
  }
  const dest = data.destination || '';
  const ord = data.rule_order !== undefined ? data.rule_order : idx + 1;

  const tr = document.createElement('tr');
  tr.dataset.ruleIdx = idx;
  tr.innerHTML = `
    <td class="text-center">
      <span class="rule-order-badge badge bg-secondary">${ord}</span>
      <input type="hidden" name="rule_id" value="${data.id || ''}">
      <input type="hidden" name="rule_order" value="${ord}">
    </td>
    <td>
      <select name="rule_time_group_id" class="form-select form-select-sm">${groupOpts}</select>
    </td>
    <td>
      <select name="rule_destination_type" class="form-select form-select-sm">${typeOpts}</select>
    </td>
    <td>
      <input type="text" name="rule_destination" class="form-control form-control-sm" value="${dest}">
    </td>
    <td class="text-center">
      <button type="button" class="btn btn-sm btn-outline-secondary" onclick="moveRule(this, -1)" title="Subir">⬆</button>
      <button type="button" class="btn btn-sm btn-outline-secondary" onclick="moveRule(this, 1)" title="Descer">⬇</button>
      <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeRule(this)" title="Remover">✕</button>
    </td>
  `;
  return tr;
}

function addRule() {
  const tbody = document.querySelector('#rulesTable tbody');
  const idx = tbody.children.length;
  tbody.appendChild(createRuleRow(idx, {}));
  renumberRules();
}

function removeRule(btn) {
  const tr = btn.closest('tr');
  if (tr) {
    tr.remove();
    renumberRules();
  }
}

function moveRule(btn, direction) {
  const tr = btn.closest('tr');
  if (!tr) return;
  const tbody = tr.parentNode;
  const idx = Array.from(tbody.children).indexOf(tr);
  if (direction === -1 && idx > 0) {
    tbody.insertBefore(tr, tbody.children[idx - 1]);
  } else if (direction === 1 && idx < tbody.children.length - 1) {
    tbody.insertBefore(tbody.children[idx + 1], tr);
  }
  renumberRules();
}

function renumberRules() {
  const tbody = document.querySelector('#rulesTable tbody');
  const rows = tbody.querySelectorAll('tr');
  rows.forEach(function(tr, i) {
    const orderNum = i + 1;
    const badge = tr.querySelector('.rule-order-badge');
    if (badge) badge.textContent = orderNum;
    const orderInput = tr.querySelector('input[name="rule_order"]');
    if (orderInput) orderInput.value = orderNum;
    tr.dataset.ruleIdx = i;
  });
}
</script>
{% endblock %}