{% extends "base.html" %}
{% block title %}🧙 Wizard de Fila{% endblock %}
{% set active = "pbx-queues" %}
{% block content %}
<style>
.wizard-step { display: none; }
.wizard-step.active { display: block; }
.step-indicator { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; }
.step-dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; transition: all .2s; }
.step-dot.pending { background: #e5e7eb; color: #6b7280; }
.step-dot.active-dot { background: #0f3460; color: #fff; transform: scale(1.1); }
.step-dot.done { background: #10b981; color: #fff; }
.step-label { font-size: 11px; text-align: center; color: #6b7280; margin-top: 4px; }
.step-connector { width: 30px; height: 2px; align-self: center; background: #e5e7eb; }
.step-connector.done { background: #10b981; }
</style>

<h4 class="mb-3">🧙 Wizard: Nova Fila</h4>
<div class="step-indicator" id="stepIndicator"></div>

<form method="post" action="/app/pbx/queues/save" id="wizardForm" class="row g-3">
  <input type="hidden" name="id" value="">
  <input type="hidden" name="ringinuse" value="on">
  <input type="hidden" name="autopause" value="on">
  <input type="hidden" name="joinempty" value="yes">
  <input type="hidden" name="leavewhenempty" value="no">
  <input type="hidden" name="timeoutpriority" value="app">
  <input type="hidden" name="destination_if_unavailable_type" value="hangup">
  <input type="hidden" name="destination_if_unavailable" value="">
  <input type="hidden" name="timeout_destination_type" value="hangup">
  <input type="hidden" name="timeout_destination" value="">
  <input type="hidden" name="queue_error_destination_type" value="hangup">
  <input type="hidden" name="queue_error_destination" value="">
  <input type="hidden" name="callback_abandon" value="">
  <input type="hidden" name="callback_abandon_timeout" value="30">
  <input type="hidden" name="notes" value="">

  <!-- STEP 1: Identificacao -->
  <div class="wizard-step active" data-step="1">
    <h5 class="mb-3">📋 Passo 1: Identificação</h5>
    <div class="col-md-6">
      <label class="form-label">📛 Nome da Fila *</label>
      <input type="text" id="f_name" name="name" class="form-control" placeholder="Ex: Suporte" required>
    </div>
    <div class="col-md-3">
      <label class="form-label">📞 Extensão</label>
      <input type="text" name="extension" class="form-control" placeholder="Ex: 7000" value="7000">
    </div>
    <div class="col-md-3">
      <label class="form-label">⚙️ Estratégia</label>
      <select name="strategy" class="form-select">
        <option value="fewestcalls" selected>Fewest Calls (menos chamadas)</option>
        <option value="ringall">Ring All (tocar todos)</option>
        <option value="leastrecent">Least Recent (menos recente)</option>
        <option value="random">Random (aleatório)</option>
        <option value="rrmemory">Round Robin (memória)</option>
        <option value="linear">Linear (ordem)</option>
      </select>
      <small class="text-muted">Fewest Calls é o padrão recomendado</small>
    </div>
    <div class="col-md-2">
      <div class="form-check mt-4">
        <input type="checkbox" name="enabled" class="form-check-input" id="chk_en" checked>
        <label class="form-check-label" for="chk_en">✅ Ativo</label>
      </div>
    </div>
    <div class="col-12 mt-3">
      <button type="button" class="btn btn-primary" onclick="avancarStep1()">Avançar →</button>
    </div>
  </div>

  <!-- STEP 2: Parametros -->
  <div class="wizard-step" data-step="2">
    <h5 class="mb-3">⚙️ Passo 2: Parâmetros</h5>
    <div class="row">
      <div class="col-md-3">
        <label class="form-label">⏱️ Timeout (s)</label>
        <input type="number" name="timeout" class="form-control" value="20" min="5" max="300">
      </div>
      <div class="col-md-3">
        <label class="form-label">🔄 Retry (s)</label>
        <input type="number" name="retry" class="form-control" value="5" min="0" max="120">
      </div>
      <div class="col-md-3">
        <label class="form-label">📊 Max. Chamadas (0 = ∞)</label>
        <input type="number" name="maxlen" class="form-control" value="0" min="0">
      </div>
      <div class="col-md-3">
        <label class="form-label">⏳ Wrap-up (s)</label>
        <input type="number" name="wrapuptime" class="form-control" value="0" min="0" max="300">
      </div>
    </div>
    <div class="row mt-3">
      <div class="col-md-3">
        <label class="form-label">⚖️ Peso (weight)</label>
        <input type="number" name="weight" class="form-control" value="0" min="0">
      </div>
      <div class="col-md-4">
        <label class="form-label">🎵 Música de Espera (MOH)</label>
        <input type="text" name="musicclass" class="form-control" value="default">
      </div>
      <div class="col-md-4">
        <div class="form-check mt-4">
          <input type="checkbox" name="recording" class="form-check-input" id="chk_rec" checked value="on">
          <label class="form-check-label" for="chk_rec">🎤 Gravar Chamadas</label>
        </div>
      </div>
    </div>
    <div class="col-12 mt-3">
      <button type="button" class="btn btn-outline-secondary" onclick="goStep(1)">← Voltar</button>
      <button type="button" class="btn btn-primary" onclick="avancarStep2()">Avançar →</button>
    </div>
  </div>

  <!-- STEP 3: Membros -->
  <div class="wizard-step" data-step="3">
    <h5 class="mb-3">👥 Passo 3: Membros</h5>
    <div class="col-md-8">
      <label class="form-label">Selecione os agentes da fila:</label>
      <select name="members" class="form-select" multiple size="8">
        {% for p in peers %}
        <option value="{{ p.name }}">{{ p.name }}{% if p.display_name %} - {{ p.display_name }}{% endif %}</option>
        {% endfor %}
      </select>
      <small class="text-muted">Segure Ctrl para selecionar múltiplos</small>
    </div>

    <div class="col-12 mt-4">
      <h5 class="mb-2">✅ Revisão</h5>
      <div class="card">
        <div class="card-body p-0">
          <table class="table table-sm mb-0" id="reviewTable"></table>
        </div>
      </div>
    </div>

    <div class="col-12 mt-3">
      <button type="button" class="btn btn-outline-secondary" onclick="goStep(2)">← Voltar</button>
      <button type="submit" class="btn btn-success btn-lg">💾 Salvar Fila</button>
    </div>
  </div>
</form>

<script>
const STEPS = [
  { num: 1, label: "Identificação" },
  { num: 2, label: "Parâmetros" },
  { num: 3, label: "Membros" }
];
let currentStep = 1;

const STRATEGY_LABELS = {
  fewestcalls: 'Fewest Calls', ringall: 'Ring All', leastrecent: 'Least Recent',
  random: 'Random', rrmemory: 'Round Robin', linear: 'Linear'
};

function buildStepIndicators() {
  const c = document.getElementById('stepIndicator');
  c.innerHTML = STEPS.map((s,i) => {
    const dot = `<div class="step-dot pending" id="dot${s.num}">${s.num}</div>`;
    const lbl = `<div class="step-label">${s.label}</div>`;
    const conn = i < STEPS.length-1 ? `<div class="step-connector" id="cn${s.num}"></div>` : '';
    return `<div style="display:flex;flex-direction:column;align-items:center">${dot}${lbl}</div>${conn}`;
  }).join('');
}
buildStepIndicators();

function goStep(n) {
  currentStep = n;
  document.querySelectorAll('.wizard-step').forEach(el => el.classList.remove('active'));
  document.querySelector(`[data-step="${n}"]`).classList.add('active');
  STEPS.forEach(s => {
    const d = document.getElementById('dot'+s.num);
    d.className = 'step-dot ' + (s.num < n ? 'done' : s.num === n ? 'active-dot' : 'pending');
    const cn = document.getElementById('cn'+s.num);
    if (cn) cn.className = 'step-connector' + (s.num < n ? ' done' : '');
  });
  if (n === 3) buildReview();
}

function avancarStep1() {
  const name = document.getElementById('f_name').value.trim();
  if (!name) {
    alert('Informe o nome da fila');
    document.getElementById('f_name').focus();
    return;
  }
  goStep(2);
}

function avancarStep2() { goStep(3); }

function buildReview() {
  const fd = new FormData(document.getElementById('wizardForm'));
  const strat = fd.get('strategy') || 'fewestcalls';
  const sel = document.querySelector('select[name="members"]');
  const selected = Array.from(sel.selectedOptions).map(o => o.value).join(', ') || '(nenhum)';

  const rows = [
    ['Nome', fd.get('name') || '?'],
    ['Extensão', fd.get('extension') || '—'],
    ['Estratégia', STRATEGY_LABELS[strat] || strat],
    ['Timeout', fd.get('timeout') + 's'],
    ['Retry', fd.get('retry') + 's'],
    ['Max. Chamadas', fd.get('maxlen') === '0' ? 'Ilimitado' : fd.get('maxlen')],
    ['Wrap-up', fd.get('wrapuptime') + 's'],
    ['Peso', fd.get('weight')],
    ['MOH', fd.get('musicclass') || 'default'],
    ['Gravação', fd.get('recording') === 'on' ? '✅ Sim' : '❌ Não'],
    ['Membros', selected],
  ];
  document.getElementById('reviewTable').innerHTML = rows.map(r =>
    '<tr><td style="font-weight:600;width:140px;padding:6px 10px">'+r[0]+'</td><td style="padding:6px 10px">'+r[1]+'</td></tr>'
  ).join('');
}
</script>
{% endblock %}