{% extends "base.html" %}
{% block title %}Caller ID Lookup{% endblock %}
{% set active = "callerid" %}
{% block content %}
<div class="container-fluid">
  <h4 class="mb-3">📞 Caller ID Lookup</h4>

  <div class="alert alert-info">
    <strong>Como funciona:</strong> Quando uma chamada chega, o Asterisk consulta esta agenda
    pelo número de quem liga e exibe o nome no display do ramal.
    As chamadas de números cadastrados mostrarão o nome do contato.
  </div>

  <!-- Barra de ações -->
  <div class="card mb-3">
    <div class="card-body">
      <div class="row g-2 align-items-end">
        <div class="col-md-4">
          <form class="d-flex" id="searchForm">
            <input type="text" name="q" class="form-control" placeholder="Buscar por telefone ou nome..."
                   value="{{ q }}" onchange="this.form.submit()">
            <button class="btn btn-outline-secondary ms-2">🔍</button>
          </form>
        </div>
        <div class="col-md-2">
          <button class="btn btn-primary w-100" onclick="showAddForm()">➕ Novo</button>
        </div>
        <div class="col-md-2">
          <button class="btn btn-success w-100" onclick="showImportForm()">📥 Importar CSV</button>
        </div>
        <div class="col-md-2">
          <a href="/app/pbx/callerid/export-csv" class="btn btn-secondary w-100">📤 Exportar CSV</a>
        </div>
        <div class="col-md-2 text-end">
          <span class="badge bg-info fs-6">{{ count }} contatos</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Formulário de novo/editar -->
  <div class="card mb-3" id="formCard" style="display:none">
    <div class="card-header d-flex justify-content-between">
      <span id="formTitle">Novo Contato</span>
      <button class="btn-close" onclick="hideForm()"></button>
    </div>
    <div class="card-body">
      <form id="cidForm" class="row g-3">
        <input type="hidden" name="id" id="editId">
        <div class="col-md-3">
          <label class="form-label">Telefone *</label>
          <input type="text" name="phone" id="fieldPhone" class="form-control" required
                 placeholder="51999999999">
          <div class="form-text">Apenas números, sem formatação</div>
        </div>
        <div class="col-md-3">
          <label class="form-label">Nome *</label>
          <input type="text" name="name" id="fieldName" class="form-control" required>
        </div>
        <div class="col-md-3">
          <label class="form-label">Empresa</label>
          <input type="text" name="company" id="fieldCompany" class="form-control">
        </div>
        <div class="col-md-3">
          <label class="form-label">Observação</label>
          <textarea name="notes" id="fieldNotes" class="form-control" rows="1"></textarea>
        </div>
        <div class="col-12">
          <button type="submit" class="btn btn-primary">💾 Salvar</button>
          <button type="button" class="btn btn-outline-secondary" onclick="hideForm()">Cancelar</button>
        </div>
      </form>
      <div id="formResult" class="mt-2"></div>
    </div>
  </div>

  <!-- Import CSV -->
  <div class="card mb-3" id="importCard" style="display:none">
    <div class="card-header d-flex justify-content-between">
      <span>Importar CSV</span>
      <button class="btn-close" onclick="document.getElementById('importCard').style.display='none'"></button>
    </div>
    <div class="card-body">
      <p>Formato: <code>telefone,nome,empresa,observacao</code> (CSV, uma linha por contato)</p>
      <form id="importForm" enctype="multipart/form-data">
        <div class="row g-2">
          <div class="col-md-6">
            <input type="file" name="file" class="form-control" accept=".csv">
          </div>
          <div class="col-md-3">
            <button type="submit" class="btn btn-success">📥 Importar</button>
          </div>
        </div>
      </form>
      <div id="importResult" class="mt-2"></div>
    </div>
  </div>

  <!-- Tabela -->
  <div class="card">
    <div class="card-body p-0">
      <table class="table table-striped mb-0">
        <thead>
          <tr><th>Telefone</th><th>Nome</th><th>Empresa</th><th>Obs</th><th></th></tr>
        </thead>
        <tbody>
          {% for entry in entries %}
          <tr>
            <td><code>{{ entry.phone }}</code></td>
            <td>{{ entry.name }}</td>
            <td>{{ entry.company or '' }}</td>
            <td><small class="text-muted">{{ entry.notes[:40] if entry.notes else '' }}</small></td>
            <td class="text-end" style="white-space:nowrap">
              <button class="btn btn-sm btn-outline-primary"
                      onclick="editEntry({{ entry.id }}, '{{ entry.phone }}', '{{ entry.name|e }}', '{{ (entry.company or '')|e }}', '{{ (entry.notes or '')|e }}')">✏️</button>
              <form method="POST" action="/app/pbx/callerid/delete" class="d-inline"
                    onsubmit="return confirm('Remover {{ entry.name }}?')">
                <input type="hidden" name="id" value="{{ entry.id }}">
                <button class="btn btn-sm btn-outline-danger">🗑️</button>
              </form>
            </td>
          </tr>
          {% else %}
          <tr><td colspan="5" class="text-muted text-center">Nenhum contato cadastrado.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- Info de integração -->
  <div class="card mt-3">
    <div class="card-header"><strong>Integração com Asterisk</strong></div>
    <div class="card-body">
      <p>Para consultar o CallerID nas chamadas, adicione no dialplan do Asterisk:</p>
      <pre class="bg-dark text-light p-3 rounded"><code>same => n,Set(LOOKUP_RESULT=${CURL(http://127.0.0.1:8000/app/pbx/callerid/lookup?phone=${CALLERID(num)})})
same => n,Set(LOOKUP_NAME=${SHELL(/opt/sisnetcall/scripts/callerid_lookup.py ${CALLERID(num)})})
same => n,Set(CALLERID(name)=${LOOKUP_NAME})</code></pre>
      <p class="text-muted">Ou via AGI: configure <code>agi://127.0.0.1/callerid/lookup</code> no dialplan.</p>
    </div>
  </div>
</div>

<script>
function showAddForm() {
  document.getElementById("formTitle").textContent = "Novo Contato";
  document.getElementById("editId").value = "";
  document.getElementById("fieldPhone").value = "";
  document.getElementById("fieldName").value = "";
  document.getElementById("fieldCompany").value = "";
  document.getElementById("fieldNotes").value = "";
  document.getElementById("formResult").innerHTML = "";
  document.getElementById("formCard").style.display = "block";
}

function hideForm() {
  document.getElementById("formCard").style.display = "none";
}

function editEntry(id, phone, name, company, notes) {
  document.getElementById("formTitle").textContent = "Editar Contato";
  document.getElementById("editId").value = id;
  document.getElementById("fieldPhone").value = phone;
  document.getElementById("fieldName").value = name;
  document.getElementById("fieldCompany").value = company;
  document.getElementById("fieldNotes").value = notes;
  document.getElementById("formResult").innerHTML = "";
  document.getElementById("formCard").style.display = "block";
}

function showImportForm() {
  document.getElementById("importResult").innerHTML = "";
  document.getElementById("importCard").style.display = "block";
}

document.getElementById("cidForm").addEventListener("submit", async function(e) {
  e.preventDefault();
  const btn = this.querySelector("button[type=submit]");
  btn.disabled = true;
  const formData = new FormData(this);
  try {
    const resp = await fetch("/app/pbx/callerid/save", { method: "POST", body: formData });
    const data = await resp.json();
    const div = document.getElementById("formResult");
    if (data.status === "ok") {
      div.innerHTML = `<div class="alert alert-success">✅ ${data.message}</div>`;
      setTimeout(() => location.reload(), 1000);
    } else {
      div.innerHTML = `<div class="alert alert-danger">❌ ${data.message}</div>`;
      btn.disabled = false;
    }
  } catch(e) {
    document.getElementById("formResult").innerHTML = `<div class="alert alert-danger">❌ ${e.message}</div>`;
    btn.disabled = false;
  }
});

document.getElementById("importForm").addEventListener("submit", async function(e) {
  e.preventDefault();
  const btn = this.querySelector("button[type=submit]");
  btn.disabled = true;
  const formData = new FormData(this);
  try {
    const resp = await fetch("/app/pbx/callerid/import-csv", { method: "POST", body: formData });
    const data = await resp.json();
    const div = document.getElementById("importResult");
    if (data.status === "ok") {
      let html = `<div class="alert alert-success">✅ ${data.message}`;
      if (data.errors && data.errors.length) {
        html += `<br><small>${data.errors.slice(0,5).join('<br>')}</small>`;
      }
      html += '</div>';
      div.innerHTML = html;
      setTimeout(() => location.reload(), 1500);
    } else {
      div.innerHTML = `<div class="alert alert-danger">❌ ${data.message}</div>`;
      btn.disabled = false;
    }
  } catch(e) {
    document.getElementById("importResult").innerHTML = `<div class="alert alert-danger">❌ ${e.message}</div>`;
    btn.disabled = false;
  }
});
</script>
{% endblock %}