{% extends "base.html" %}
{% block title %}🧙 Wizard de Tronco SIP{% endblock %}
{% set active = "pbx-trunks" %}
{% 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; }
.operator-card { border: 2px solid #e5e7eb; border-radius: 12px; padding: 16px; cursor: pointer; transition: all .2s; text-align: center; }
.operator-card:hover { border-color: #0f3460; background: #f0f4ff; }
.operator-card.selected { border-color: #0f3460; background: #e8eefb; }
.operator-card .op-label { font-weight: 600; font-size: 14px; }
.operator-card .op-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; margin-top: 6px; }
.badge-register { background: #dbeafe; color: #1e40af; }
.badge-ip { background: #fef3c7; color: #92400e; }
</style>

<h4 class="mb-3">🧙 Wizard: Novo Tronco SIP</h4>
<div class="step-indicator" id="stepIndicator"></div>

<form method="post" action="/app/pbx/trunks/save" id="wizardForm" class="row g-3">
  <input type="hidden" name="id" value="">
  <input type="hidden" name="enabled" value="on">
  <input type="hidden" name="recording" value="">
  <input type="hidden" name="context" value="from-pstn">

  <!-- STEP 1 -->
  <div class="wizard-step active" data-step="1">
    <h5 class="mb-3">📡 Passo 1: Clique na Operadora</h5>
    <div class="row g-3">
      {% for p in presets %}
      <div class="col-6 col-md-4 col-lg-3">
        <div class="operator-card" onclick="selectOp('{{ p.id }}','{{ p.auth_type }}','{{ p.label|e }}')">
          <div class="op-label">{{ p.label }}</div>
          <span class="op-badge {% if p.auth_type == 'register' %}badge-register{% else %}badge-ip{% endif %}">
            {% if p.auth_type == 'register' %}🔐 Registro{% else %}🔌 IP Fixo{% endif %}
          </span>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- STEP 2 -->
  <div class="wizard-step" data-step="2">
    <h5 class="mb-3" id="step2Title">🔑 Autenticação</h5>
    <div id="authRegister" style="display:none">
      <div class="col-md-6">
        <label class="form-label">📞 DDI / Número Principal</label>
        <input type="text" name="callerid" class="form-control" placeholder="Ex: 5177718696">
      </div>
      <div class="col-md-6">
        <label class="form-label">👤 Usuário SIP</label>
        <input type="text" name="username" class="form-control" placeholder="Ex: 5120240065">
      </div>
      <div class="col-md-6">
        <label class="form-label">🔑 Senha</label>
        <input type="text" name="secret" class="form-control" placeholder="Senha SIP">
      </div>
      <div class="col-md-6">
        <label class="form-label">📛 Nome do Tronco</label>
        <input type="text" name="name" id="trunkName" class="form-control">
      </div>
    </div>
    <div id="authIP" style="display:none">
      <div class="col-md-6">
        <label class="form-label">📞 DDI / Número Principal</label>
        <input type="text" name="callerid" class="form-control" placeholder="Ex: 5133330000">
      </div>
      <div class="col-md-6">
        <label class="form-label">👤 From User (opcional)</label>
        <input type="text" name="from_user" class="form-control" placeholder="Ex: 33501050">
      </div>
      <div class="col-md-6">
        <label class="form-label">📛 Nome do Tronco</label>
        <input type="text" name="name" id="trunkName2" class="form-control">
      </div>
      <div class="col-md-6">
        <label class="form-label">🔢 Canais Simultâneos</label>
        <input type="number" name="max_contacts" class="form-control" value="3" min="1" max="50">
      </div>
    </div>
    <div class="mt-4">
      <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 -->
  <div class="wizard-step" data-step="3">
    <h5 class="mb-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 Tronco</button>
    </div>
  </div>
</form>

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

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' : '');
  });
}

// Click operator card: load preset + advance
async function selectOp(opId, authType, label) {
  document.querySelectorAll('.operator-card').forEach(c => c.classList.remove('selected'));
  const card = document.querySelector(`[onclick*="'${opId}'"]`);
  if (card) card.classList.add('selected');
  
  try {
    const r = await fetch('/app/pbx/trunks/wizard/' + opId + '/preset');
    _preset = await r.json();
  } catch(e) {
    alert('Erro ao carregar operadora');
    console.error(e);
    return;
  }
  
  document.getElementById('step2Title').innerHTML = '🔑 ' + label;
  
  const isReg = (authType === 'register');
  document.getElementById('authRegister').style.display = isReg ? 'block' : 'none';
  document.getElementById('authIP').style.display = isReg ? 'none' : 'block';
  
  const nf = isReg ? document.getElementById('trunkName') : document.getElementById('trunkName2');
  nf.value = label;
  
  goStep(2);
}

function avancarStep2() {
  const isReg = document.getElementById('authRegister').style.display === 'block';
  const nameField = isReg ? document.getElementById('trunkName') : document.getElementById('trunkName2');
  
  if (!nameField.value.trim()) {
    alert('Informe o nome do tronco');
    nameField.focus();
    return;
  }
  
  // Build review table
  const data = new FormData(document.getElementById('wizardForm'));
  const tbody = document.getElementById('reviewTable');
  const rows = [
    ['Operadora', _preset.label || '?'],
    ['Nome', data.get('name') || ''],
    ['Host', _preset.host || '(vazio)'],
    ['Porta', String(_preset.port || '5060')],
    ['DDI', data.get('callerid') || '—'],
    ['Usuário', data.get('username') || '(IP fixo)'],
    ['Codecs', _preset.allow || 'alaw,ulaw'],
    ['Auth', isReg ? '🔐 Registro' : '🔌 IP Fixo'],
    ['Canais', data.get('max_contacts') || '3'],
  ];
  tbody.innerHTML = rows.map(r => '<tr><td style="font-weight:600;width:160px;padding:6px 10px">'+r[0]+'</td><td style="padding:6px 10px">'+r[1]+'</td></tr>').join('');
  
  // Inject hidden preset fields
  const form = document.getElementById('wizardForm');
  for (const [k, v] of Object.entries(_preset)) {
    if (['label','hints','auth_type','id','has_register','default_callerid','default_from_user'].includes(k)) continue;
    let inp = form.querySelector('input[name="'+k+'"]');
    if (!inp) {
      inp = document.createElement('input');
      inp.type = 'hidden';
      inp.name = k;
      form.appendChild(inp);
    }
    inp.value = String(v);
  }
  
  goStep(3);
}
</script>
{% endblock %}