{% extends "base.html" %}
{% block title %}Provisionamento{% endblock %}
{% set active = "provision" %}
{% block content %}
<div class="container-fluid">
  <h4 class="mb-3">📲 Provisionamento de Telefones</h4>

  <div class="alert alert-info">
    Configure o MAC address do telefone para que ele busque as configurações automaticamente.
    O telefone precisa estar na mesma rede ou ter acesso HTTP ao servidor.
  </div>

  <div class="card mb-3">
    <div class="card-header"><strong>Configurar Provisionamento</strong></div>
    <div class="card-body">
      <form id="provForm" class="row g-3">
        <div class="col-md-2">
          <label class="form-label">Ramal *</label>
          <select name="ext" class="form-select" required>
            <option value="">Selecione...</option>
            {% for p in peers %}
            <option value="{{ p.name }}" data-vendor="{{ p.provision_vendor or '' }}" data-template="{{ p.provision_template or '' }}" data-model="{{ p.provision_model or '' }}" data-mac="{{ p.provision_mac or '' }}">{{ p.display_name or p.name }} ({{ p.name }}){% if p.provision_mac %} ✅{% endif %}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-3">
          <label class="form-label">MAC Address *</label>
          <div class="input-group">
            <input type="text" name="mac" id="macInput" class="form-control font-monospace"
              placeholder="AABBCCDDEEFF" required maxlength="17"
              pattern="[0-9A-Fa-f:-]{12,17}"
              oninput="this.value=this.value.toUpperCase()">
            <button type="button" class="btn btn-outline-secondary" id="detectMacBtn" title="Detectar fabricante pelo MAC">🔍</button>
          </div>
          <div class="form-text">Formato: AABBCCDDEEFF ou AA:BB:CC:DD:EE:FF</div>
          <div id="macDetectResult" class="form-text small"></div>
        </div>
        <div class="col-md-2">
          <label class="form-label">Fabricante</label>
          <select name="vendor" id="vendorSelect" class="form-select">
            <option value="">Detectar automático</option>
            <option value="Yealink">Yealink</option>
            <option value="Grandstream">Grandstream</option>
            <option value="Fanvil">Fanvil</option>
            <option value="Snom">Snom</option>
            <option value="Polycom">Polycom</option>
            <option value="Cisco">Cisco</option>
            <option value="AudioCodes">AudioCodes</option>
            <option value="VTech">VTech</option>
            <option value="NEC">NEC</option>
            <option value="Huawei">Huawei</option>
            <option value="ZTE">ZTE</option>
            <option value="Alcatel-Lucent">Alcatel-Lucent</option>
            <option value="Panasonic">Panasonic</option>
            <option value="Mitel">Mitel</option>
            <option value="Unify/Siemens">Unify/Siemens</option>
            <option value="Outro">Outro</option>
          </select>
        </div>
        <div class="col-md-2">
          <label class="form-label">Modelo</label>
          <input type="text" name="model" id="modelInput" class="form-control"
            placeholder="Ex: T46S, GXP2170">
        </div>
        <div class="col-md-2">
          <label class="form-label">Template</label>
          <select name="template" id="templateSelect" class="form-select">
            <option value="yealink_t2x">Yealink T2x/T4x</option>
            <option value="grandstream_gxp">Grandstream GXP</option>
            <option value="fanvil_x">Fanvil X-series</option>
            <option value="snom_d7xx">Snom D7xx</option>
            <option value="polycom_vvx">Polycom VVX</option>
            <option value="cisco_spa">Cisco SPA5xx</option>
          </select>
        </div>
        <div class="col-12">
          <button type="submit" class="btn btn-primary">💾 Salvar</button>
        </div>
      </form>
      <div id="provResult" class="mt-3"></div>
    </div>
  </div>

  <div class="card">
    <div class="card-header"><strong>Ramais com Provisionamento</strong></div>
    <div class="card-body">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Status</th>
            <th>Ramal</th>
            <th>Nome</th>
            <th>Fabricante</th>
            <th>Modelo</th>
            <th>MAC</th>
            <th>Template</th>
            <th>URL de Provisionamento</th>
            <th>QR</th>
          </tr>
        </thead>
        <tbody>
          {% for p in peers %}
          <tr>
            <td>{% if p.provision_mac %}✅{% else %}❌{% endif %}</td>
            <td>{{ p.name }}</td>
            <td>{{ p.display_name or '' }}</td>
            <td>{{ p.provision_vendor or 'N/A' }}</td>
            <td>{{ p.provision_model or 'N/A' }}</td>
            <td><code class="font-monospace">{{ p.provision_mac or '—' }}</code></td>
            <td>{{ p.provision_template or 'padrão' }}</td>
            <td>
              {% if p.provision_mac %}
              <div class="input-group input-group-sm">
                <input type="text" class="form-control font-monospace small" readonly
                  value="http://sisnetcall.sisnetsul.com.br/provision/{{ p.provision_mac }}"
                  id="url-{{ p.provision_mac }}">
                <button class="btn btn-outline-secondary" type="button"
                  onclick="copyProvUrl('{{ p.provision_mac }}')">📋</button>
              </div>
              {% else %}
              <span class="text-muted">—</span>
              {% endif %}
            </td>
            <td>
              <a href="/app/pbx/provision/qrcode-page/{{ p.name }}" class="btn btn-sm btn-outline-success">📱 QR</a>
            </td>
          </tr>
          {% endfor %}
          {% if not peers|selectattr("provision_mac")|list %}
          <tr><td colspan="9" class="text-muted">Nenhum ramal configurado para provisionamento.</td></tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- Bulk Import Card -->
  <div class="card mt-3">
    <div class="card-header"><strong>📦 Importar MACs em Lote</strong></div>
    <div class="card-body">
      <form id="bulkForm" class="row g-3">
        <div class="col-md-6">
          <label class="form-label">Digite extensão,MAC (um por linha)</label>
          <textarea name="ext_mac_pairs" class="form-control font-monospace" rows="5"
            placeholder="1001,AABBCCDDEE01
1002,AABBCCDDEE02
1003,AA:BB:CC:DD:EE:03"></textarea>
          <div class="form-text">Formato: extensao,MAC (MAC sem separador ou com : ou -)</div>
        </div>
        <div class="col-md-6">
          <label class="form-label">Ou faça upload de CSV</label>
          <input type="file" name="csv_file" class="form-control" accept=".csv,.txt">
          <div class="form-text mt-1">CSV: coluna 1 = extensão, coluna 2 = MAC</div>
        </div>
        <div class="col-12">
          <button type="submit" class="btn btn-warning">📥 Importar</button>
        </div>
      </form>
      <div id="bulkResult" class="mt-3"></div>
    </div>
  </div>

  <div class="card mt-3">
    <div class="card-header"><strong>Instruções por Fabricante</strong></div>
    <div class="card-body">
      <div class="accordion" id="instructionsAccordion">
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#instYealink">
              Yealink
            </button>
          </h2>
          <div id="instYealink" class="accordion-collapse collapse" data-bs-parent="#instructionsAccordion">
            <div class="accordion-body">
              <ol>
                <li>Defina o servidor de provisionamento no telefone: <code>http://sisnetcall.sisnetsul.com.br/provision</code></li>
                <li>Ou configure o telefone para usar DHCP Option 66 com este endereço</li>
                <li>O telefone irá buscar <code>http://servidor/provision/{MAC}.cfg</code></li>
                <li>Alternativa: configure PnP (Plug and Play) no telefone apontando para o servidor</li>
              </ol>
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#instGrandstream">
              Grandstream
            </button>
          </h2>
          <div id="instGrandstream" class="accordion-collapse collapse" data-bs-parent="#instructionsAccordion">
            <div class="accordion-body">
              <ol>
                <li>Acesse a interface web do telefone</li>
                <li>Defina <strong>Firmware Upgrade and Provisioning → Config Server Path</strong></li>
                <li>URL: <code>http://sisnetcall.sisnetsul.com.br/provision</code></li>
                <li>Marque <strong>Automatic Upgrade</strong> e <strong>Authenticate Conf File</strong></li>
                <li>Formato do arquivo: <code>{MAC}.xml</code></li>
              </ol>
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#instFanvil">
              Fanvil
            </button>
          </h2>
          <div id="instFanvil" class="accordion-collapse collapse" data-bs-parent="#instructionsAccordion">
            <div class="accordion-body">
              <ol>
                <li>Acesse a interface web do telefone: <strong>Network → Provision</strong></li>
                <li>URL do servidor: <code>http://sisnetcall.sisnetsul.com.br/provision</code></li>
                <li>Formato do arquivo: <code>{MAC}.txt</code></li>
                <li>Ative <strong>Auto Provision</strong> com o intervalo desejado</li>
              </ol>
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#instSnom">
              Snom
            </button>
          </h2>
          <div id="instSnom" class="accordion-collapse collapse" data-bs-parent="#instructionsAccordion">
            <div class="accordion-body">
              <ol>
                <li>No telefone, vá em <strong>Settings → Advanced → Provisioning</strong></li>
                <li>URL: <code>http://sisnetcall.sisnetsul.com.br/provision/{MAC}</code></li>
                <li>Ou use o servidor PnP com o endereço acima</li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
// Detectar MAC e preencher fabricante automaticamente
document.getElementById("detectMacBtn").addEventListener("click", async function() {
  const macInput = document.getElementById("macInput");
  const macRaw = macInput.value.toUpperCase().replace(/[^0-9A-F]/g, "");
  const resultDiv = document.getElementById("macDetectResult");

  if (macRaw.length !== 12) {
    resultDiv.innerHTML = '<span class="text-danger">MAC inválido (precisa de 12 caracteres hex)</span>';
    return;
  }

  resultDiv.innerHTML = '<span class="text-muted">🔍 Detectando...</span>';
  try {
    const resp = await fetch(`/app/pbx/provision/detect-vendor?mac=${macRaw}`);
    const data = await resp.json();
    if (data.vendor && data.vendor !== "Desconhecido") {
      document.getElementById("vendorSelect").value = data.vendor;
      document.getElementById("templateSelect").value = data.template;
      resultDiv.innerHTML = `<span class="text-success">✅ Fabricante detectado: <strong>${data.vendor}</strong> (template: ${data.template})</span>`;
    } else {
      resultDiv.innerHTML = '<span class="text-warning">⚠️ Fabricante não identificado para este MAC</span>';
    }
  } catch(e) {
    resultDiv.innerHTML = `<span class="text-danger">❌ Erro: ${e.message}</span>`;
  }
});

// Auto-detect ao selecionar ramal
document.querySelector("select[name=ext]").addEventListener("change", function() {
  const opt = this.options[this.selectedIndex];
  if (opt && opt.value) {
    if (opt.dataset.vendor) document.getElementById("vendorSelect").value = opt.dataset.vendor;
    if (opt.dataset.template) document.getElementById("templateSelect").value = opt.dataset.template;
    if (opt.dataset.model) document.getElementById("modelInput").value = opt.dataset.model;
    if (opt.dataset.mac) document.getElementById("macInput").value = opt.dataset.mac;
  }
});

// Auto-detect template ao mudar fabricante
document.getElementById("vendorSelect").addEventListener("change", function() {
  const vendorTemplates = {
    "Yealink": "yealink_t2x",
    "Grandstream": "grandstream_gxp",
    "Fanvil": "fanvil_x",
    "Snom": "snom_d7xx",
    "Polycom": "polycom_vvx",
    "Cisco": "cisco_spa",
  };
  const tpl = vendorTemplates[this.value];
  if (tpl) {
    document.getElementById("templateSelect").value = tpl;
  }
});

// Form submissão
document.getElementById("provForm").addEventListener("submit", async function(e) {
  e.preventDefault();
  const btn = this.querySelector("button[type=submit]");
  btn.disabled = true;
  btn.innerHTML = '⏳ Salvando...';
  const formData = new FormData(this);
  try {
    const resp = await fetch("/app/pbx/provision/save", { method: "POST", body: formData });
    const data = await resp.json();
    const div = document.getElementById("provResult");
    if (data.status === "ok") {
      div.innerHTML = `<div class="alert alert-success">
        ✅ ${data.message}<br>
        <strong>MAC:</strong> ${data.mac}<br>
        <strong>Fabricante:</strong> ${data.vendor || 'N/A'}<br>
        <strong>Template:</strong> ${data.template}<br>
        <strong>URL:</strong> <code>${data.config_url}</code>
      </div>`;
      setTimeout(() => location.reload(), 1500);
    } else {
      div.innerHTML = `<div class="alert alert-danger">❌ ${data.message}</div>`;
    }
  } catch(e) {
    document.getElementById("provResult").innerHTML = `<div class="alert alert-danger">❌ ${e.message}</div>`;
  } finally {
    btn.disabled = false;
    btn.innerHTML = '💾 Salvar';
  }
});

// Bulk import form
document.getElementById("bulkForm").addEventListener("submit", async function(e) {
  e.preventDefault();
  const btn = this.querySelector("button[type=submit]");
  btn.disabled = true;
  btn.innerHTML = '⏳ Importando...';
  const formData = new FormData(this);
  try {
    const resp = await fetch("/app/pbx/provision/bulk-import", { method: "POST", body: formData });
    const data = await resp.json();
    const div = document.getElementById("bulkResult");
    if (data.status === "ok") {
      let html = `<div class="alert alert-success">✅ ${data.message}</div>`;
      if (data.details && data.details.errors && data.details.errors.length > 0) {
        html += `<div class="alert alert-warning small">`;
        data.details.errors.forEach(e => html += `<div>⚠️ ${e}</div>`);
        html += `</div>`;
      }
      div.innerHTML = html;
      setTimeout(() => location.reload(), 2000);
    } else {
      div.innerHTML = `<div class="alert alert-danger">❌ ${data.message || 'Erro desconhecido'}</div>`;
    }
  } catch(e) {
    document.getElementById("bulkResult").innerHTML = `<div class="alert alert-danger">❌ ${e.message}</div>`;
  } finally {
    btn.disabled = false;
    btn.innerHTML = '📥 Importar';
  }
});

// Copiar URL de provisionamento
function copyProvUrl(mac) {
  const input = document.getElementById(`url-${mac}`);
  if (input) {
    input.select();
    input.setSelectionRange(0, 99999);
    navigator.clipboard.writeText(input.value).then(() => {
      const btn = input.nextElementSibling;
      btn.textContent = '✅';
      setTimeout(() => { btn.textContent = '📋'; }, 2000);
    }).catch(() => {
      document.execCommand("copy");
    });
  }
}
</script>
{% endblock %}