{% extends "base.html" %}
{% from "pbx/partials/destination_selector.html" import destination_selector %}
{% block title %}{{ page_title }}{% endblock %}
{% set active = "pbx-queues" %}
{% block content %}
<h4>{% if queue %}✏️ Editar Fila {{ queue.name }}{% else %}➕ Nova Fila{% endif %}</h4>
<form method="post" action="/app/pbx/queues/save" class="row g-3">
  {% if queue %}<input type="hidden" name="id" value="{{ queue.id }}">{% endif %}

  <!-- General -->
  <div class="col-12"><hr><h5>⚙️ Geral</h5></div>

  <div class="col-md-4">
    <label class="form-label">Nome *</label>
    <input type="text" name="name" class="form-control" required value="{{ queue.name if queue else '' }}">
  </div>
  <div class="col-md-4">
    <label class="form-label">Extensão (ex: 7000)</label>
    <input type="text" name="extension" class="form-control" value="{{ queue.extension if queue else '' }}">
  </div>
  <div class="col-md-4">
    <label class="form-label">Estratégia</label>
    <select name="strategy" class="form-select">
      <option value="ringall" {% if queue and queue.strategy=="ringall" %}selected{% endif %}>Ring All</option>
      <option value="fewestcalls" {% if not queue or queue.strategy=="fewestcalls" %}selected{% endif %}>Fewest Calls</option>
      <option value="leastrecent" {% if queue and queue.strategy=="leastrecent" %}selected{% endif %}>Least Recent</option>
      <option value="random" {% if queue and queue.strategy=="random" %}selected{% endif %}>Random</option>
      <option value="rrmemory" {% if queue and queue.strategy=="rrmemory" %}selected{% endif %}>Round Robin</option>
      <option value="linear" {% if queue and queue.strategy=="linear" %}selected{% endif %}>Linear</option>
    </select>
  </div>

  <div class="col-md-3">
    <label class="form-label">Timeout (s)</label>
    <input type="number" name="timeout" class="form-control" value="{{ queue.timeout if queue else 20 }}">
  </div>
  <div class="col-md-3">
    <label class="form-label">Retry (s)</label>
    <input type="number" name="retry" class="form-control" value="{{ queue.retry if queue else 5 }}">
  </div>
  <div class="col-md-3">
    <label class="form-label">Max. Chamadas (0 = ilimitado)</label>
    <input type="number" name="maxlen" class="form-control" value="{{ queue.maxlen if queue else 0 }}">
  </div>
  <div class="col-md-3">
    <label class="form-label">Wrap-up (s)</label>
    <input type="number" name="wrapuptime" class="form-control" value="{{ queue.wrapuptime if queue else 0 }}">
  </div>

  <div class="col-md-3">
    <label class="form-label">Peso (weight)</label>
    <input type="number" name="weight" class="form-control" value="{{ queue.weight if queue else 0 }}" min="0">
  </div>
  <div class="col-md-3">
    <label class="form-label">Prioridade Timeout</label>
    <select name="timeoutpriority" class="form-select">
      <option value="app" {% if not queue or queue.timeoutpriority=="app" %}selected{% endif %}>app</option>
      <option value="conf" {% if queue and queue.timeoutpriority=="conf" %}selected{% endif %}>conf</option>
    </select>
  </div>
  <div class="col-md-4">
    <label class="form-label">MOH</label>
    <input type="text" name="musicclass" class="form-control" value="{{ queue.musicclass if queue else 'default' }}">
  </div>

  <!-- Status & Agent Options -->
  <div class="col-12"><hr><h5>📋 Opções de Agente e Status</h5></div>

  <div class="col-md-4">
    <label class="form-label">Join Empty</label>
    <select name="joinempty" class="form-select">
      <option value="yes" {% if not queue or queue.joinempty=="yes" %}selected{% endif %}>Sim</option>
      <option value="no" {% if queue and queue.joinempty=="no" %}selected{% endif %}>Não</option>
      <option value="strict" {% if queue and queue.joinempty=="strict" %}selected{% endif %}>Strict</option>
    </select>
  </div>
  <div class="col-md-4">
    <label class="form-label">Leave When Empty</label>
    <select name="leavewhenempty" class="form-select">
      <option value="no" {% if not queue or queue.leavewhenempty=="no" %}selected{% endif %}>Não</option>
      <option value="yes" {% if queue and queue.leavewhenempty=="yes" %}selected{% endif %}>Sim</option>
      <option value="strict" {% if queue and queue.leavewhenempty=="strict" %}selected{% endif %}>Strict</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check form-check-inline">
      <input type="checkbox" name="ringinuse" class="form-check-input" id="chk_riu" {% if not queue or queue.ringinuse %}checked{% endif %}>
      <label class="form-check-label" for="chk_riu">Ring In Use</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" name="autopause" class="form-check-input" id="chk_ap" {% if not queue or queue.autopause %}checked{% endif %}>
      <label class="form-check-label" for="chk_ap">Auto Pause</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" name="enabled" class="form-check-input" id="chk_qen" {% if not queue or queue.enabled %}checked{% endif %}>
      <label class="form-check-label" for="chk_qen">Ativo</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" name="recording" class="form-check-input" id="chk_rec_queue" {% if not queue or queue.recording %}checked{% endif %}>
      <label class="form-check-label" for="chk_rec_queue">🎤 Gravar Chamadas</label>
    </div>
  </div>

  <!-- Destination if Unavailable (Transbordo) -->
  <div class="col-12"><hr><h5>🎯 Transbordo (Destination if Unavailable)</h5></div>
  <p class="text-muted small">Destino quando nenhum agente está disponível, a fila está cheia, ou fora do horário.</p>

<div class="col-12"><hr><h5>📞 Destino Indisponível</h5></div>
  <p class="text-muted small">Destino quando todos os agentes estão ocupados ou offline.</p>

  {{ destination_selector(
    all_destinations=all_destinations,
    selected_type=queue.destination_if_unavailable_type if queue else '',
    selected_dest=queue.destination_if_unavailable if queue else '',
    field_name="destination_if_unavailable",
    label="Destino (indisponível)"
  ) }}

  <!-- Timeout Destination -->
  <div class="col-12"><hr><h5>⏱️ Destino Timeout na Fila</h5></div>
  <p class="text-muted small">Destino quando o agente não atende dentro do timeout configurado.</p>

  {{ destination_selector(
    all_destinations=all_destinations,
    selected_type=queue.timeout_destination_type if queue else '',
    selected_dest=queue.timeout_destination if queue else '',
    field_name="timeout_destination",
    label="Destino (timeout)"
  ) }}
    <label class="form-label">Destino</label>
    <input type="text" name="timeout_destination" class="form-control"
      value="{{ queue.timeout_destination if queue else '' }}"
      placeholder="Ex: 8000 (ramal), ivr-1 (URA)">
  </div>

  <!-- Error Destination -->
  <div class="col-12"><hr><h5>⚠️ Destino de Erro da Fila (Queue Error)</h5></div>
  <p class="text-muted small">Destino quando a fila não pode ser executada (erro de configuração, agente não logou, etc.).</p>

  <div class="col-md-6">
    <label class="form-label">Tipo de destino</label>
    <select name="queue_error_destination_type" class="form-select" onchange="toggleField('error')">
      <option value="hangup" {% if not queue or queue.queue_error_destination_type=="hangup" %}selected{% endif %}>Desligar</option>
      <option value="extension" {% if queue and queue.queue_error_destination_type=="extension" %}selected{% endif %}>Extensão / Ramal</option>
      <option value="ivr" {% if queue and queue.queue_error_destination_type=="ivr" %}selected{% endif %}>URA</option>
      <option value="voicemail" {% if queue and queue.queue_error_destination_type=="voicemail" %}selected{% endif %}>Correio de Voz</option>
    </select>
  </div>
  <div class="col-md-6" id="errorDestField" style="{% if not queue or queue.queue_error_destination_type=='hangup' %}display:none{% endif %}">
    <label class="form-label">Destino</label>
    <input type="text" name="queue_error_destination" class="form-control"
      value="{{ queue.queue_error_destination if queue else '' }}"
      placeholder="Ex: 8000 (ramal), ivr-1 (URA)">
  </div>

  <!-- Callback Abandon -->
  <div class="col-12"><hr><h5>🔄 Callback Automático em Abandono</h5></div>
  <p class="text-muted small">Quando um cliente desistir da fila (abandonar antes de ser atendido),
  o sistema liga de volta automaticamente e redireciona para esta fila.</p>

  <div class="col-12">
    <div class="form-check form-check-inline">
      <input type="checkbox" name="callback_abandon" class="form-check-input" id="chk_cb_abandon"
        {% if queue and queue.callback_abandon %}checked{% endif %}>
      <label class="form-check-label" for="chk_cb_abandon">✅ Ativar callback automático em abandono</label>
    </div>
  </div>
  <div class="col-md-4">
    <label class="form-label">⏱️ Aguardar antes de retornar (segundos)</label>
    <input type="number" name="callback_abandon_timeout" class="form-control"
      value="{{ queue.callback_abandon_timeout if queue else 30 }}" min="0" max="600">
    <div class="form-text">Tempo entre o abandono e a ligação de retorno.</div>
  </div>

  <!-- Membros -->
  <div class="col-12"><hr><h5>👥 Membros</h5></div>
  <div class="col-12">
    <label class="form-label">Membros (selecionar múltiplos)</label>
    <select name="members" class="form-select" multiple size="5">
      {% for peer in peers %}
      <option value="{{ peer.name }}" {% if queue and members and peer.name in members|map(attribute="peer_name") %}selected{% endif %}>{{ peer.name }}{% if peer.callerid %} - {{ peer.callerid }}{% endif %}</option>
      {% endfor %}
    </select>
    <small class="text-muted">Segure Ctrl para selecionar múltiplos. Mostrando apenas ramais SIP.</small>
  </div>

  <div class="col-12 mt-3">
    <button type="submit" class="btn btn-primary">💾 Salvar</button>
    <a href="/app/pbx/queues" class="btn btn-secondary">Cancelar</a>
  </div>
</form>

<script>
function toggleField(prefix) {
  const sel = document.querySelector(`select[name="${prefix}_destination_type"]`);
  const field = document.getElementById(prefix + 'DestField');
  if (sel) field.style.display = sel.value === 'hangup' ? 'none' : 'block';
}
</script>
{% endblock %}