{% extends "base.html" %}
{% block title %}API Externa{% endblock %}
{% set active = "api" %}
{% block content %}
<div class="container-fluid">
  <h4 class="mb-3">🔗 API Externa</h4>

  <div class="alert alert-info">
    Utilize estes tokens para integrar o SisnetCall com CRMs e sistemas externos.
    Os endpoints aceitam autenticação via header <code>Authorization: Bearer &lt;token&gt;</code>.
  </div>

  <!-- Criar token -->
  <div class="card mb-3">
    <div class="card-header"><strong>Criar Token</strong></div>
    <div class="card-body">
      <form id="tokenForm" class="row g-2">
        <div class="col-md-6">
          <input type="text" name="name" class="form-control" placeholder="Nome do token (ex: CRM Sisnetsul)" required>
        </div>
        <div class="col-md-3">
          <button type="submit" class="btn btn-primary">🔑 Gerar Token</button>
        </div>
      </form>
      <div id="tokenResult" class="mt-2"></div>
    </div>
  </div>

  <!-- Lista de tokens -->
  <div class="card">
    <div class="card-header"><strong>Tokens</strong></div>
    <div class="card-body p-0">
      <table class="table table-striped mb-0">
        <thead>
          <tr><th>Nome</th><th>Token</th><th>Criado em</th><th>Último uso</th><th>Status</th><th></th></tr>
        </thead>
        <tbody>
          {% for t in tokens %}
          <tr>
            <td>{{ t.name }}</td>
            <td><code class="font-monospace" style="font-size: 11px">{{ t.token[:24] }}...</code></td>
            <td><small>{{ t.created_at.strftime('%d/%m %H:%M') }}</small></td>
            <td><small>{{ t.last_used_at.strftime('%d/%m %H:%M') if t.last_used_at else '—' }}</small></td>
            <td>
              {% if t.active %}
                <span class="badge bg-success">Ativo</span>
              {% else %}
                <span class="badge bg-secondary">Inativo</span>
              {% endif %}
            </td>
            <td class="text-end" style="white-space:nowrap">
              <form method="POST" action="/app/pbx/api-tokens/toggle" class="d-inline">
                <input type="hidden" name="id" value="{{ t.id }}">
                <button class="btn btn-sm btn-outline-{{ 'warning' if t.active else 'success' }}">
                  {{ '🔴 Desativar' if t.active else '🟢 Ativar' }}
                </button>
              </form>
              <form method="POST" action="/app/pbx/api-tokens/delete" class="d-inline"
                    onsubmit="return confirm('Remover token {{ t.name }}?')">
                <input type="hidden" name="id" value="{{ t.id }}">
                <button class="btn btn-sm btn-outline-danger">🗑️</button>
              </form>
            </td>
          </tr>
          {% else %}
          <tr><td colspan="6" class="text-muted text-center">Nenhum token criado.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- Documentação da API -->
  <div class="card mt-3">
    <div class="card-header"><strong>📖 Endpoints</strong></div>
    <div class="card-body">
      <p>Todos os endpoints usam <code>https://sisnetcall.sisnetsul.com.br</code> e autenticação <code>Authorization: Bearer &lt;token&gt;</code>.</p>

      <div class="table-responsive">
      <table class="table table-sm">
        <thead><tr><th>Método</th><th>Endpoint</th><th>Descrição</th></tr></thead>
        <tbody>
          <tr><td><span class="badge bg-success">GET</span></td><td><code>/app/pbx/api/v1/peers</code></td><td>Lista todos os ramais ativos</td></tr>
          <tr><td><span class="badge bg-success">GET</span></td><td><code>/app/pbx/api/v1/peers/{ext}</code></td><td>Detalhe de um ramal</td></tr>
          <tr><td><span class="badge bg-primary">POST</span></td><td><code>/app/pbx/api/v1/callerid/lookup</code></td><td>Busca nome pelo telefone <br><small>Body: <code>{"phone": "51999999999"}</code></small></td></tr>
          <tr><td><span class="badge bg-primary">POST</span></td><td><code>/app/pbx/api/v1/callerid/save</code></td><td>Salva/atualiza contato <br><small>Body: <code>{"phone":"...","name":"...","company":"..."}</code></small></td></tr>
          <tr><td><span class="badge bg-primary">POST</span></td><td><code>/app/pbx/api/v1/call/originate</code></td><td>Inicia chamada (Click2Call) <br><small>Body: <code>{"extension":"8578","destination":"51999999999"}</code></small></td></tr>
          <tr><td><span class="badge bg-success">GET</span></td><td><code>/app/pbx/api/v1/queues/status</code></td><td>Status das filas</td></tr>
          <tr><td><span class="badge bg-success">GET</span></td><td><code>/app/pbx/api/v1/calls/active</code></td><td>Chamadas ativas no momento</td></tr>
        </tbody>
      </table>
      </div>
    </div>
  </div>
</div>

<script>
document.getElementById("tokenForm").addEventListener("submit", async function(e) {
  e.preventDefault();
  const btn = this.querySelector("button[type=submit]");
  btn.disabled = true;
  btn.innerHTML = '⏳ Gerando...';
  const formData = new FormData(this);
  try {
    const resp = await fetch("/app/pbx/api-tokens/create", { method: "POST", body: formData });
    const data = await resp.json();
    const div = document.getElementById("tokenResult");
    if (data.status === "ok") {
      div.innerHTML = `<div class="alert alert-success">
        ✅ Token "${data.message}"<br>
        <strong>Token:</strong>
        <input type="text" class="form-control font-monospace mt-1" value="${data.token}" readonly
               onclick="this.select(); navigator.clipboard?.writeText(this.value)"
               style="font-size: 12px; background: #f8f9fa;">
        <div class="form-text">⚠️ Copie agora! Não será mostrado novamente.</div>
      </div>`;
      setTimeout(() => location.reload(), 3000);
    } else {
      div.innerHTML = `<div class="alert alert-danger">❌ ${data.message}</div>`;
      btn.disabled = false;
    }
  } catch(e) {
    document.getElementById("tokenResult").innerHTML = `<div class="alert alert-danger">❌ ${e.message}</div>`;
    btn.disabled = false;
  } finally {
    btn.innerHTML = '🔑 Gerar Token';
  }
});
</script>
{% endblock %}