{% extends "base.html" %}
{% block title %}🧙 Wizard de Ramal{% endblock %}
{% set active = "pbx-peers" %}
{% 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; }
.profile-card { border: 2px solid #e5e7eb; border-radius: 12px; padding: 20px; cursor: pointer; transition: all .2s; text-align: center; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.profile-card:hover { border-color: #0f3460; background: #f0f4ff; }
.profile-card.selected { border-color: #0f3460; background: #e8eefb; }
.profile-card .icon { font-size: 32px; margin-bottom: 8px; }
.profile-card .label { font-weight: 600; font-size: 14px; }
.profile-card .desc { font-size: 12px; color: #6b7280; margin-top: 4px; }
</style>

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

<form method="post" action="/app/pbx/peers/save" id="wizardForm" class="row g-3">
  <input type="hidden" name="id" value="">
  <input type="hidden" name="peer_type" value="extension">
  <input type="hidden" name="context" value="from-internal">
  <input type="hidden" name="force_dns" value="">
  <input type="hidden" name="direct_media" value="">
  <input type="hidden" name="webrtc" value="">
  <input type="hidden" name="voicemail" value="">
  <input type="hidden" name="max_contacts" value="1">
  <input type="hidden" name="disallow" value="all">
  <input type="hidden" name="dtmf_mode" value="rfc4733">
  <input type="hidden" name="qualify_frequency" value="60">
  <input type="hidden" name="host" value="dynamic">

  <!-- 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 do Usuário</label>
      <input type="text" id="f_display_name" name="display_name" class="form-control" placeholder="Ex: João Silva" autofocus>
    </div>
    <div class="col-md-4">
      <label class="form-label">📞 Número do Ramal *</label>
      <input type="text" id="f_name" name="name" class="form-control" placeholder="Ex: 1001" required>
    </div>
    <div class="col-md-4">
      <label class="form-label">🔑 Senha</label>
      <div class="input-group">
        <input type="text" id="f_secret" name="secret" class="form-control" placeholder="Deixe em branco para auto-gerar">
        <button type="button" class="btn btn-outline-secondary" onclick="gerarSenha()">🎲</button>
      </div>
    </div>
    <div class="col-md-4">
      <label class="form-label">📞 CallerID (opcional)</label>
      <input type="text" name="callerid" class="form-control" placeholder="Ex: João Silva <5133330000>">
    </div>
    <div class="col-md-2">
      <div class="form-check mt-4">
        <input type="checkbox" name="enabled" class="form-check-input" id="chk_enabled" checked>
        <label class="form-check-label" for="chk_enabled">✅ 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: Perfil de uso -->
  <div class="wizard-step" data-step="2">
    <h5 class="mb-3">📱 Passo 2: Perfil de Uso</h5>
    <p class="text-muted">Escolha o perfil que melhor se encaixa no dispositivo do usuário:</p>
    <div class="row g-3">
      <div class="col-md-4">
        <div class="profile-card selected" onclick="selectProfile('mobile')" id="profile_mobile">
          <div class="icon">📱</div>
          <div class="label">Celular (PortSIP)</div>
          <div class="desc">TCP · alaw/ulaw · NAT</div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="profile-card" onclick="selectProfile('desktop')" id="profile_desktop">
          <div class="icon">💻</div>
          <div class="label">Desktop (LAN)</div>
          <div class="desc">UDP · alaw/ulaw · Direct Media</div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="profile-card" onclick="selectProfile('webrtc')" id="profile_webrtc">
          <div class="icon">🌐</div>
          <div class="label">WebRTC</div>
          <div class="desc">WSS · opus · Navegador</div>
        </div>
      </div>
    </div>
    <input type="hidden" name="transport" id="f_transport" value="tcp">
    <input type="hidden" name="allow" id="f_allow" value="alaw,ulaw">

    <div class="row mt-3">
      <div class="col-md-3">
        <div class="form-check">
          <input type="checkbox" name="recording" class="form-check-input" id="chk_recording" value="on">
          <label class="form-check-label" for="chk_recording">🎤 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: Notificacao + Revisao -->
  <div class="wizard-step" data-step="3">
    <h5 class="mb-3">🔔 Passo 3: Notificação</h5>
    <div class="col-md-6">
      <label class="form-label">Método de Notificação</label>
      <select name="notification_method" class="form-select" onchange="toggleNotifField()">
        <option value="nenhum">Nenhum</option>
        <option value="email">📧 Email</option>
        <option value="whatsapp">💬 WhatsApp</option>
        <option value="telegram">✈️ Telegram</option>
      </select>
    </div>
    <div class="col-md-6" id="notifTargetField" style="display:none">
      <label class="form-label" id="notifTargetLabel">Destino</label>
      <input type="text" name="notification_target" class="form-control" placeholder="Email / Telefone / Chat ID">
    </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 Ramal</button>
    </div>
  </div>
</form>

<script>
const STEPS = [
  { num: 1, label: "Identificação" },
  { num: 2, label: "Perfil" },
  { num: 3, label: "Notificação" }
];
let currentStep = 1;
let _profile = 'mobile';

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 gerarSenha() {
  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
  let pwd = '';
  for (let i = 0; i < 12; i++) pwd += chars.charAt(Math.floor(Math.random() * chars.length));
  document.getElementById('f_secret').value = pwd;
}

function avancarStep1() {
  const name = document.getElementById('f_name').value.trim();
  if (!name) {
    alert('Informe o número do ramal');
    document.getElementById('f_name').focus();
    return;
  }
  goStep(2);
}

function selectProfile(profile) {
  _profile = profile;
  document.querySelectorAll('.profile-card').forEach(c => c.classList.remove('selected'));
  document.getElementById('profile_' + profile).classList.add('selected');

  const transport = document.getElementById('f_transport');
  const allow = document.getElementById('f_allow');
  const dm = document.querySelector('input[name="direct_media"]');
  const wr = document.querySelector('input[name="webrtc"]');

  switch (profile) {
    case 'mobile':
      transport.value = 'tcp';
      allow.value = 'alaw,ulaw';
      dm.value = '';
      wr.value = '';
      break;
    case 'desktop':
      transport.value = 'udp';
      allow.value = 'alaw,ulaw';
      dm.value = 'on';
      wr.value = '';
      break;
    case 'webrtc':
      transport.value = 'ws';
      allow.value = 'opus';
      dm.value = '';
      wr.value = 'on';
      break;
  }
}

function avancarStep2() { goStep(3); }

function toggleNotifField() {
  const sel = document.querySelector('select[name="notification_method"]');
  const field = document.getElementById('notifTargetField');
  const label = document.getElementById('notifTargetLabel');
  if (sel.value === 'nenhum') {
    field.style.display = 'none';
  } else {
    field.style.display = 'block';
    if (sel.value === 'email') label.innerText = '📧 Email';
    else if (sel.value === 'whatsapp') label.innerText = '💬 Telefone (WhatsApp)';
    else label.innerText = '✈️ Chat ID / Username (Telegram)';
  }
}

function buildReview() {
  const form = document.getElementById('wizardForm');
  const fd = new FormData(form);
  const profileLabels = { mobile: '📱 Celular (TCP)', desktop: '💻 Desktop (UDP)', webrtc: '🌐 WebRTC' };
  const profileVal = _profile || 'mobile';

  const rows = [
    ['Ramal', fd.get('name') || '?'],
    ['Nome', fd.get('display_name') || '—'],
    ['Senha', fd.get('secret') || '(auto-gerada)'],
    ['CallerID', fd.get('callerid') || '—'],
    ['Perfil', profileLabels[profileVal] || profileVal],
    ['Transporte', fd.get('transport') || 'tcp'],
    ['Codecs', fd.get('allow') || 'alaw,ulaw'],
    ['Gravação', fd.get('recording') === 'on' ? '✅ Sim' : '❌ Não'],
    ['Notificação', fd.get('notification_method') || 'nenhum'],
    ['Destino', fd.get('notification_target') || '—'],
  ];
  document.getElementById('reviewTable').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('');
}
</script>
{% endblock %}