{% extends "base.html" %}
{% block title %}🧙 Wizard de Rota de Saída{% endblock %}
{% set active = "app-outbound" %}
{% 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; }
.preset-card { border: 2px solid #e5e7eb; border-radius: 12px; padding: 16px; cursor: pointer; transition: all .2s; text-align: center; }
.preset-card:hover { border-color: #0f3460; background: #f0f4ff; }
.preset-card.selected { border-color: #0f3460; background: #e8eefb; }
.preset-card .icon { font-size: 28px; }
.preset-card .label { font-weight: 600; font-size: 13px; margin-top: 4px; }
.preset-card .pattern { font-size: 11px; color: #6b7280; }
</style>

<h4 class="mb-3">🧙 Wizard: Nova Rota de Saída</h4>
<div class="step-indicator" id="stepIndicator"></div>

<form method="post" action="/app/pbx/outbound-routes/save" id="wizardForm" class="row g-3">
  <input type="hidden" name="id" value="">
  <input type="hidden" name="description" value="">
  <input type="hidden" name="enabled" value="on">

  <!-- 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 Rota *</label>
      <input type="text" id="f_name" name="name" class="form-control" placeholder="Ex: Saída Local" required>
    </div>
    <div class="col-md-3">
      <label class="form-label">🔢 Prioridade</label>
      <input type="number" name="priority" class="form-control" value="0" min="0" max="999">
      <small class="text-muted">Menor número = maior prioridade</small>
    </div>
    <div class="col-md-3">
      <div class="form-check mt-4">
        <input type="checkbox" class="form-check-input" id="chk_enabled" checked disabled>
        <label class="form-check-label" for="chk_enabled">✅ Ativo</label>
      </div>
    </div>

    <div class="col-12 mt-3">
      <h6>📞 Tipo de Chamada</h6>
      <p class="text-muted small">Escolha o tipo de ligação para definir o padrão de discagem:</p>
      <div class="row g-2">
        <div class="col-4 col-md-2">
          <div class="preset-card selected" onclick="selectPreset('local')" id="p_local">
            <div class="icon">🏠</div>
            <div class="label">Local</div>
            <div class="pattern">_XXXXXXXX</div>
          </div>
        </div>
        <div class="col-4 col-md-2">
          <div class="preset-card" onclick="selectPreset('ddd')" id="p_ddd">
            <div class="icon">📞</div>
            <div class="label">DDD</div>
            <div class="pattern">_9NXXXXXXXX</div>
          </div>
        </div>
        <div class="col-4 col-md-2">
          <div class="preset-card" onclick="selectPreset('ddi')" id="p_ddi">
            <div class="icon">🌍</div>
            <div class="label">DDI</div>
            <div class="pattern">_55X.</div>
          </div>
        </div>
        <div class="col-4 col-md-2">
          <div class="preset-card" onclick="selectPreset('celular')" id="p_celular">
            <div class="icon">📱</div>
            <div class="label">Celular</div>
            <div class="pattern">_9NXXXXXXXX</div>
          </div>
        </div>
        <div class="col-4 col-md-2">
          <div class="preset-card" onclick="selectPreset('emergencia')" id="p_emergencia">
            <div class="icon">🆘</div>
            <div class="label">Emergência</div>
            <div class="pattern">_190|_193|_192</div>
          </div>
        </div>
        <div class="col-4 col-md-2">
          <div class="preset-card" onclick="selectPreset('custom')" id="p_custom">
            <div class="icon">✏️</div>
            <div class="label">Custom</div>
            <div class="pattern">Digitar</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 mt-3" id="customPatternField" style="display:none">
      <label class="form-label">Padrão de Discagem</label>
      <input type="text" id="f_custom_pattern" class="form-control" placeholder="Ex: _9NXXXXXX" oninput="document.getElementById('f_pattern').value = this.value">
    </div>
    <input type="hidden" name="pattern" id="f_pattern" value="_XXXXXXXX">

    <div class="col-12 mt-3">
      <button type="button" class="btn btn-primary" onclick="avancarStep1()">Avançar →</button>
    </div>
  </div>

  <!-- STEP 2: Roteamento -->
  <div class="wizard-step" data-step="2">
    <h5 class="mb-3">🔀 Passo 2: Roteamento</h5>
    <div class="col-md-8">
      <label class="form-label">📡 Troncos (ordem de tentativa)</label>
      <select name="trunks" class="form-select" multiple size="6">
        {% for t in trunks %}
        <option value="{{ t.name }}">{{ t.name }}{% if not t.enabled %} (inativo){% endif %}</option>
        {% endfor %}
      </select>
      <small class="text-muted">Selecione os troncos na ordem desejada (Ctrl+click para múltiplos)</small>
    </div>
    <div class="col-md-4">
      <label class="form-label">🔢 Prepend (prefixo)</label>
      <input type="text" name="prepend" class="form-control" placeholder="Ex: 051">
      <small class="text-muted">Adicionado antes do número discado</small>
    </div>
    <div class="col-md-4">
      <label class="form-label">📞 CallerID (override)</label>
      <input type="text" name="callerid" class="form-control" placeholder="Ex: 5133330000">
    </div>
    <div class="col-md-4">
      <div class="form-check mt-4">
        <input type="checkbox" name="recording" class="form-check-input" id="chk_rec" value="on">
        <label class="form-check-label" for="chk_rec">🎤 Gravar Chamadas</label>
      </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: Revisao -->
  <div class="wizard-step" data-step="3">
    <h5 class="mb-3">✅ Passo 3: 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 class="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 Rota</button>
    </div>
  </div>
</form>

<script>
const STEPS = [
  { num: 1, label: "Identificação" },
  { num: 2, label: "Roteamento" },
  { num: 3, label: "Revisão" }
];
let currentStep = 1;
let _preset = 'local';

const PRESETS = {
  local:     { pattern: '_XXXXXXXX', label: '🏠 Local' },
  ddd:       { pattern: '_9NXXXXXXXX', label: '📞 DDD' },
  ddi:       { pattern: '_55X.', label: '🌍 DDI' },
  celular:   { pattern: '_9NXXXXXXXX', label: '📱 Celular' },
  emergencia: { pattern: '_190|_193|_192', label: '🆘 Emergência' },
  custom:    { pattern: '', label: '✏️ Custom' },
};

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 selectPreset(preset) {
  _preset = preset;
  document.querySelectorAll('.preset-card').forEach(c => c.classList.remove('selected'));
  document.getElementById('p_' + preset).classList.add('selected');

  if (preset === 'custom') {
    document.getElementById('customPatternField').style.display = 'block';
    document.getElementById('f_pattern').value = document.getElementById('f_custom_pattern').value || '_X.';
  } else {
    document.getElementById('customPatternField').style.display = 'none';
    document.getElementById('f_pattern').value = PRESETS[preset].pattern;
    document.getElementById('f_custom_pattern').value = '';
  }
}

function avancarStep1() {
  const name = document.getElementById('f_name').value.trim();
  if (!name) {
    alert('Informe o nome da rota');
    document.getElementById('f_name').focus();
    return;
  }
  const patt = document.getElementById('f_pattern').value.trim();
  if (!patt) {
    alert('Informe o padrão de discagem');
    if (_preset === 'custom') document.getElementById('f_custom_pattern').focus();
    return;
  }
  goStep(2);
}

function avancarStep2() { goStep(3); }

function buildReview() {
  const fd = new FormData(document.getElementById('wizardForm'));
  const p = _preset === 'custom' ? (document.getElementById('f_custom_pattern').value || '—') : (PRESETS[_preset]?.pattern || '—');
  const selTrunks = document.querySelector('select[name="trunks"]');
  const selected = Array.from(selTrunks.selectedOptions).map(o => o.value).join(', ') || '(nenhum)';

  const rows = [
    ['Nome', fd.get('name') || '?'],
    ['Prioridade', fd.get('priority') || '0'],
    ['Tipo', _preset === 'custom' ? '✏️ Custom' : (PRESETS[_preset]?.label || _preset)],
    ['Padrão', '<code>' + p + '</code>'],
    ['Troncos', selected],
    ['Prepend', fd.get('prepend') || '—'],
    ['CallerID', fd.get('callerid') || '—'],
    ['Gravação', fd.get('recording') === 'on' ? '✅ Sim' : '❌ Não'],
  ];
  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 %}