{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% set active = "app-dashboard" %}
{% block head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
{% endblock %}
{% block content %}
<h4 class="mb-3">📊 Dashboard SisnetCall</h4>

<div class="row g-3 mb-4" id="metricsRow">
  <div class="col-md-3"><div class="card text-center p-3"><h5 class="mb-0" id="todayCalls">-</h5><small class="text-muted">Chamadas Hoje</small></div></div>
  <div class="col-md-3"><div class="card text-center p-3"><h5 class="mb-0" id="openCalls">-</h5><small class="text-muted">Em Aberto</small></div></div>
  <div class="col-md-3"><div class="card text-center p-3"><h5 class="mb-0" id="waitingCalls">-</h5><small class="text-muted">Em Espera</small></div></div>
  <div class="col-md-3"><div class="card text-center p-3"><h5 class="mb-0" id="completedToday">-</h5><small class="text-muted">Finalizadas Hoje</small></div></div>
</div>

<div class="row g-3 mb-4" id="infraRow">
  <div class="col-md-2"><div class="card text-center p-3 border-primary"><h5 class="mb-0 text-primary" id="statPeers">-</h5><small class="text-muted">Ramais</small></div></div>
  <div class="col-md-2"><div class="card text-center p-3 border-primary"><h5 class="mb-0 text-primary" id="statTrunks">-</h5><small class="text-muted">Troncos</small></div></div>
  <div class="col-md-2"><div class="card text-center p-3 border-primary"><h5 class="mb-0 text-primary" id="statQueues">-</h5><small class="text-muted">Filas</small></div></div>
  <div class="col-md-2"><div class="card text-center p-3 border-primary"><h5 class="mb-0 text-primary" id="statRingGroups">-</h5><small class="text-muted">Grupos de Toque</small></div></div>
  <div class="col-md-2"><div class="card text-center p-3 border-info"><h5 class="mb-0 text-info" id="statCallsToday">-</h5><small class="text-muted">Chamadas Hoje</small></div></div>
  <div class="col-md-2"><div class="card text-center p-3 border-success"><h5 class="mb-0 text-success" id="statCallsActive">-</h5><small class="text-muted">Chamadas Ativas</small></div></div>
</div>

<div class="row g-3 mb-4">
        <div class="card-text small">Seguranca</div>
      </div>
    </a>
  </div>
  <div class="col-md-3 col-6">
    <a href="/app/reports" class="text-decoration-none">
      <div class="card card-dash text-center">
        <div class="card-title">📊</div>
        <div class="card-text small">Relatorios</div>
      </div>
    </a>
  </div>
  <div class="col-md-3 col-6">
    <a href="/app/cdr" class="text-decoration-none">
      <div class="card card-dash text-center">
        <div class="card-title">📄</div>
        <div class="card-text small">CDR</div>
      </div>
    </a>
  </div>
  <div class="col-md-3 col-6">
    <a href="/app/pbx/peers" class="text-decoration-none">
      <div class="card card-dash text-center">
        <div class="card-title">🔌</div>
        <div class="card-text small">Ramais</div>
      </div>
    </a>
  </div>
</div>
  <div class="col-md-3"><div class="card text-center p-3 border-success"><h5 class="mb-0 text-success" id="slaPct">-</h5><small class="text-muted">SLA (<30s)</small></div></div>
  <div class="col-md-3"><div class="card text-center p-3 border-danger"><h5 class="mb-0 text-danger" id="abandoned">-</h5><small class="text-muted">Abandonadas</small></div></div>
  <div class="col-md-3"><div class="card text-center p-3 border-info"><h5 class="mb-0 text-info" id="openAttend">-</h5><small class="text-muted">Atend. Abertos</small></div></div>
  <div class="col-md-3"><div class="card text-center p-3 border-success"><h5 class="mb-0 text-success" id="resolvedToday">-</h5><small class="text-muted">Resolvidos Hoje</small></div></div>
</div>

<div class="row g-3 mb-4">
  <div class="col-md-4"><div class="card text-center p-3"><h5 class="mb-0" id="agentsOnline">-</h5><small class="text-muted">Agentes Online</small></div></div>
  <div class="col-md-4"><div class="card text-center p-3"><h5 class="mb-0" id="agentsPaused">-</h5><small class="text-muted">Em Pausa</small></div></div>
  <div class="col-md-4"><div class="card text-center p-3"><h5 class="mb-0" id="agentsOffline">-</h5><small class="text-muted">Offline</small></div></div>
</div>

<div class="card mb-4"><div class="card-body"><canvas id="callsChart" height="80"></canvas></div></div>

<script>
async function refreshDashboard() {
  const r = await fetch("/api/v1/dashboard/metrics", {headers: {"X-API-Key": "nYfO9qjzeyfMVf3uHcrVSwxk31MAtw1eZRoXXNZ64js"}});
  const d = await r.json();
  document.getElementById("todayCalls").textContent = d.today_calls;
  document.getElementById("openCalls").textContent = d.open_calls;
  document.getElementById("waitingCalls").textContent = d.waiting_calls;
  document.getElementById("completedToday").textContent = d.completed_today;
  document.getElementById("slaPct").textContent = d.sla_pct + "%";
  document.getElementById("abandoned").textContent = d.abandoned;
  document.getElementById("openAttend").textContent = d.open_attendances;
  document.getElementById("resolvedToday").textContent = d.resolved_today;
  document.getElementById("agentsOnline").textContent = d.agents_online;
  document.getElementById("agentsPaused").textContent = d.agents_paused;
  document.getElementById("agentsOffline").textContent = d.agents_offline;
  updateChart(d.calls_by_hour || {});
}
refreshDashboard();
loadInfraStats();
setInterval(refreshDashboard, 30000);
setInterval(loadInfraStats, 60000);

async function loadInfraStats() {
  try {
    const r = await fetch("/app/pbx/dashboard/stats");
    const d = await r.json();
    document.getElementById("statPeers").textContent = d.peers ?? "-";
    document.getElementById("statTrunks").textContent = d.trunks ?? "-";
    document.getElementById("statQueues").textContent = d.queues ?? "-";
    document.getElementById("statRingGroups").textContent = d.ring_groups ?? "-";
    document.getElementById("statCallsToday").textContent = d.calls_today ?? "-";
    document.getElementById("statCallsActive").textContent = d.calls_active ?? "-";
  } catch (e) {
    console.error("Erro ao carregar estatisticas:", e);
  }
}

function updateChart(hourData) {
  const labels = Array.from({length: 24}, (_, i) => i + "h");
  const data = labels.map((_, i) => hourData[i] || 0);
  const ctx = document.getElementById("callsChart").getContext("2d");
  if (window._chart) window._chart.destroy();
  window._chart = new Chart(ctx, {
    type: "bar",
    data: {labels, datasets: [{label: "Chamadas por hora", data, backgroundColor: "rgba(13,110,253,0.6)"}]},
    options: {responsive: true, plugins: {legend: {display: false}}}
  });
}
</script>
{% endblock %}