{# whatsapp.html - Tronco WhatsApp Business Calling #}
{% extends "base.html" %}
{% block title %}Tronco WhatsApp - SisnetCall{% endblock %}
{% block content %}
<div class="page-header">
  <h1><i class="fab fa-whatsapp" style="color:#25D366;"></i> Tronco WhatsApp Business Calling</h1>
  <p style="color:#667085;margin:0 0 20px 0;">
    Integração SIP com o WhatsApp Business Calling API — receba e faça chamadas de voz do WhatsApp diretamente no seu PABX.
  </p>
</div>

{% if msg %}
<div style="background:#ecfdf3;border:1px solid:#abf0d1;border-radius:8px;padding:12px;margin-bottom:20px;color:#067647;">
  <i class="fas fa-check-circle"></i> {{ msg }}
</div>
{% endif %}
{% if err %}
<div style="background:#fef3f2;border:1px solid:#fecdca;border-radius:8px;padding:12px;margin-bottom:20px;color:#b42318;">
  <i class="fas fa-exclamation-triangle"></i> {{ err }}
</div>
{% endif %}

<div style="background:#fff;border:1px solid #d0d5dd;border-radius:8px;padding:24px;margin-bottom:24px;">
  <form method="POST" action="/app/pbx/whatsapp/save">
    <div style="display:flex;align-items:center;gap:16px;margin-bottom:24px;">
      <label style="font-size:14px;font-weight:600;color:#344054;">Status:</label>
      <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
        <input type="checkbox" name="enabled" value="1" {% if wa.enabled %}checked{% endif %} style="width:18px;height:18px;">
        <span style="font-size:14px;color:#344054;">Habilitar tronco WhatsApp</span>
      </label>
    </div>

    <h3 style="font-size:15px;font-weight:700;color:#1d2939;margin:0 0 16px 0;padding-bottom:10px;border-bottom:1px solid #eaecf0;">
      <i class="fas fa-cog"></i> Configuração SIP
    </h3>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;">
      <div>
        <label style="display:block;font-size:13px;font-weight:600;color:#344054;margin-bottom:4px;">
          Número Business (com DDI, ex: 555199999999)
        </label>
        <input type="text" name="sip_username" value="{{ wa.sip_username }}" 
               placeholder="5511999999999" 
               style="width:100%;padding:8px 12px;border:1px solid #d0d5dd;border-radius:6px;font-size:14px;font-family:monospace;">
      </div>
      <div>
        <label style="display:block;font-size:13px;font-weight:600;color:#344054;margin-bottom:4px;">
          Senha SIP (gerada pela Meta)
        </label>
        <div style="position:relative;">
          <input type="password" name="sip_password" id="sip_password" value="{{ wa.sip_password }}" 
                 style="width:100%;padding:8px 12px;border:1px solid #d0d5dd;border-radius:6px;font-size:14px;font-family:monospace;">
          <span onclick="togglePass()" style="position:absolute;right:10px;top:8px;cursor:pointer;color:#667085;font-size:12px;">👁</span>
        </div>
      </div>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;">
      <div>
        <label style="display:block;font-size:13px;font-weight:600;color:#344054;margin-bottom:4px;">
          Phone Number ID (Meta)
        </label>
        <input type="text" name="phone_number_id" value="{{ wa.phone_number_id }}" 
               style="width:100%;padding:8px 12px;border:1px solid #d0d5dd;border-radius:6px;font-size:14px;font-family:monospace;">
      </div>
      <div>
        <label style="display:block;font-size:13px;font-weight:600;color:#344054;margin-bottom:4px;">
          SIP Hostname (seu servidor público)
        </label>
        <input type="text" name="sip_hostname" value="{{ wa.sip_hostname }}" 
               placeholder="sip.meuservidor.com.br"
               style="width:100%;padding:8px 12px;border:1px solid #d0d5dd;border-radius:6px;font-size:14px;font-family:monospace;">
      </div>
    </div>

    <div style="margin-bottom:20px;">
      <label style="display:block;font-size:13px;font-weight:600;color:#344054;margin-bottom:4px;">
        Contexto de entrada (dialplan)
      </label>
      <input type="text" name="context" value="{{ wa.context or 'from-whatsapp' }}" 
             style="width:300px;padding:8px 12px;border:1px solid #d0d5dd;border-radius:6px;font-size:14px;font-family:monospace;">
      <p style="font-size:12px;color:#667085;margin:4px 0 0 0;">
        Para onde as chamadas do WhatsApp serão roteadas. O padrão <code>from-whatsapp</code> encaminha para o dialpad de entrada principal.
      </p>
    </div>

    <hr style="border:0;border-top:1px solid #eaecf0;margin:20px 0;">

    <h3 style="font-size:15px;font-weight:700;color:#1d2939;margin:0 0 16px 0;padding-bottom:10px;border-bottom:1px solid #eaecf0;">
      <i class="fas fa-key"></i> Auto-configuração via API da Meta (opcional)
    </h3>

    <div style="margin-bottom:20px;">
      <label style="display:block;font-size:13px;font-weight:600;color:#344054;margin-bottom:4px;">
        Access Token (Meta Graph API)
      </label>
      <input type="password" name="access_token" id="access_token" value="{{ wa.access_token if wa.access_token else '' }}" 
             placeholder="EAAx..."
             style="width:100%;padding:8px 12px;border:1px solid #d0d5dd;border-radius:6px;font-size:14px;font-family:monospace;">
      <p style="font-size:12px;color:#667085;margin:4px 0 0 0;">
        Token do System User com permissão <code>whatsapp_business_messaging</code>. 
        Necessário apenas para usar o botão "Auto-configurar SIP na Meta".
      </p>
    </div>

    <div style="display:flex;gap:12px;margin-top:24px;">
      <button type="submit" style="background:#25D366;color:#fff;border:none;padding:10px 24px;border-radius:6px;cursor:pointer;font-weight:600;font-size:14px;">
        <i class="fas fa-save"></i> Salvar Configuração
      </button>
      <button type="button" onclick="autoConfig()" style="background:#1877F2;color:#fff;border:none;padding:10px 24px;border-radius:6px;cursor:pointer;font-weight:600;font-size:14px;">
        <i class="fas fa-magic"></i> Auto-configurar SIP na Meta
      </button>
      <button type="button" onclick="getPassword()" style="background:#667085;color:#fff;border:none;padding:10px 24px;border-radius:6px;cursor:pointer;font-weight:600;font-size:14px;">
        <i class="fas fa-key"></i> Obter Senha SIP da Meta
      </button>
    </div>
  </form>
</div>

<div style="background:#f9fafb;border:1px solid #eaecf0;border-radius:8px;padding:20px;margin-bottom:24px;">
  <h3 style="font-size:14px;font-weight:700;color:#1d2939;margin:0 0 12px 0;">
    <i class="fas fa-info-circle" style="color:#175cd3;"></i> Como configurar na Meta
  </h3>
  <ol style="font-size:13px;color:#344054;line-height:1.8;padding-left:20px;">
    <li>Acesse o <strong>Meta Business Manager</strong> → WhatsApp Manager → Seu número</li>
    <li>Vá em <strong>Settings → Calling</strong> e habilite <strong>Calling status = Enabled</strong></li>
    <li>No mesmo painel, ative <strong>Call icon visibility</strong> para aparecer o botão de chamada</li>
    <li>Configure o Webhook com seu servidor (opcional para SIP puro)</li>
    <li>Preencha os campos acima e salve no SisnetCall</li>
    <li>Clique em <strong>Auto-configurar SIP na Meta</strong> se tiver o access token</li>
    <li>Clique em <strong>Aplicar Config</strong> no painel principal do SisnetCall para gerar o pjsip.conf</li>
  </ol>
  <p style="font-size:12px;color:#667085;margin:12px 0 0 0;">
    <strong>Requisitos:</strong> Conta com mínimo de 2000 conversas/dia, app em modo Live, 
    certificado TLS válido (Let's Encrypt), servidor com IP público.
  </p>
</div>

<script>
function togglePass() {
  var p = document.getElementById("sip_password");
  p.type = p.type === "password" ? "text" : "password";
}

async function autoConfig() {
  const resp = await fetch("/app/pbx/whatsapp/auto-config", { method: "POST" });
  const data = await resp.json();
  alert(data.message || data.error || "OK");
  if (resp.ok) location.reload();
}

async function getPassword() {
  const resp = await fetch("/app/pbx/whatsapp/fetch-password", { method: "POST" });
  const data = await resp.json();
  if (data.sip_password) {
    document.getElementById("sip_password").value = data.sip_password;
    alert("Senha SIP obtida e preenchida!");
  } else {
    alert(data.error || "Falha ao obter senha. Verifique o access token e o Phone Number ID.");
  }
}
</script>
{% endblock %}