{# queue_bi.html #}
{% extends "base.html" %}
{% block title %}BI de Filas - SisnetCall{% endblock %}
{% block head %}
{{ super() }}
<style>
.panel {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}
.panel-title {
  font-size: 16px;
  font-weight: 700;
  color: #1d2939;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaecf0;
}
.filter-bar {
  background: #f9fafb;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #eaecf0;
  display: flex;
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.filter-bar label {
  font-size: 12px;
  font-weight: 600;
  color: #344054;
  display: block;
  margin-bottom: 4px;
}
.filter-bar input, .filter-bar select {
  padding: 8px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
}
.filter-bar button {
  background: #7f56d9;
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  height: 38px;
}
.filter-bar button:hover { opacity: 0.9; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.kpi-card {
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}
.kpi-card h3 {
  font-size: 13px;
  color: #667085;
  margin: 0 0 8px 0;
  text-transform: uppercase;
}
.kpi-card .value {
  font-size: 28px;
  font-weight: 700;
  color: #1d2939;
}
.kpi-card .value.green { color: #12b76a; }
.kpi-card .value.red { color: #f04438; }
.kpi-card.destaque { border-bottom: 3px solid #7f56d9; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 24px;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}

.chart-wrapper {
  max-width: 300px;
  margin: 0 auto 20px;
}

.fcr-info {
  font-size: 13px;
  color: #667085;
  background: #fffaeb;
  border-left: 4px solid #f79009;
  padding: 12px;
  margin-bottom: 16px;
  border-radius: 4px;
}

.scroll-table {
  max-height: 400px;
  overflow-y: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th {
  background: #f9fafb;
  font-weight: 600;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid #eaecf0;
  position: sticky;
  top: 0;
}
td {
  padding: 10px 12px;
  border-bottom: 1px solid #f2f4f7;
}
tr:hover { background: #f9fafb; }

.badge-abandoned {
  background: #fef3f2;
  color: #b42318;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 12px;
}
.badge-answered {
  background: #ecfdf3;
  color: #067647;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 12px;
}

.loading {
  text-align: center;
  padding: 60px;
  color: #667085;
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: #667085;
  font-style: italic;
}
</style>
{% endblock %}

{% block content %}
<div class="panel">
  <div class="panel-title"><i class="fas fa-chart-bar"></i> BI de Filas - Business Intelligence</div>
  <p style="color:#667085;font-size:14px;margin:0;">Métricas de atendimento, abandono e comportamento por fila.</p>
</div>

<div class="filter-bar">
  <div>
    <label>Data Início</label>
    <input type="date" id="data_inicio" value="{{ today }}">
  </div>
  <div>
    <label>Data Fim</label>
    <input type="date" id="data_fim" value="{{ today }}">
  </div>
  <div>
    <label>Fila</label>
    <select id="fila_select">
      {% for q in queues %}
      <option value="{{ q }}">{{ q }}</option>
      {% endfor %}
    </select>
  </div>
  <button onclick="loadData()"><i class="fas fa-filter"></i> Analisar</button>
</div>

<div id="dashboard-content">
  <div class="loading"><i class="fas fa-spinner fa-spin"></i> Carregando dados...</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let chartDesligamento = null;
let chartStatus = null;

async function loadData() {
  const start = document.getElementById('data_inicio').value;
  const end = document.getElementById('data_fim').value;
  const fila = document.getElementById('fila_select').value;
  
  const url = `/app/pbx/queue-bi/data?fila=${encodeURIComponent(fila)}&start=${start}&end=${end}`;
  const resp = await fetch(url);
  const data = await resp.json();
  
  renderDashboard(data);
}

function renderDashboard(data) {
  const container = document.getElementById('dashboard-content');
  
  if (data.error) {
    container.innerHTML = `<div class="empty-state"><i class="fas fa-exclamation-triangle"></i> ${data.error}</div>`;
    return;
  }
  
  const kpis = data.kpis;
  
  let html = `
    <div class="kpi-grid">
      <div class="kpi-card destaque">
        <h3>Total de Chamadas</h3>
        <div class="value">${kpis.total}</div>
      </div>
      <div class="kpi-card">
        <h3>Atendidas</h3>
        <div class="value green">${kpis.answered}</div>
      </div>
      <div class="kpi-card">
        <h3>Abandonadas</h3>
        <div class="value red">${kpis.abandoned}</div>
      </div>
      <div class="kpi-card">
        <h3>Taxa Abandono</h3>
        <div class="value red">${kpis.abandonment_rate}%</div>
      </div>
    </div>
    
    <div class="dashboard-grid">
      <div class="panel">
        <div class="panel-title"><i class="fas fa-chart-pie"></i> Quem Desligou?</div>
        <div class="chart-wrapper">
          <canvas id="chartDesligamento"></canvas>
        </div>
        <hr style="border:0; border-top:1px solid #eaecf0; margin:20px 0;">
        <div class="panel-title"><i class="fas fa-chart-doughnut"></i> Status Fila</div>
        <div class="chart-wrapper">
          <canvas id="chartStatus"></canvas>
        </div>
      </div>
      
      <div class="panel">
        <div class="panel-title"><i class="fas fa-radar"></i> Radar de Rechamadas (FCR)</div>
        <div class="fcr-info">
          <strong>FCR (First Call Resolution):</strong> Clientes que ligaram mais de uma vez no período. 
          Muitas repetições com abandono indicam insatisfação ou fila cheia.
        </div>
  `;
  
  if (data.rechamadas.length === 0) {
    html += `<div class="empty-state">Nenhuma rechamada crítica encontrada.</div>`;
  } else {
    html += `
      <div class="scroll-table">
        <table>
          <thead>
            <tr>
              <th>Cliente</th>
              <th style="text-align:center;">Tentativas</th>
              <th style="text-align:center;">Abandonadas</th>
              <th style="text-align:center;">Atendidas</th>
            </tr>
          </thead>
          <tbody>
    `;
    for (const r of data.rechamadas) {
      html += `<tr>
        <td><b style="color:#175cd3;">${r.caller}</b></td>
        <td style="text-align:center;"><b>${r.total}</b></td>
        <td style="text-align:center;">${r.abandoned > 0 ? '<span class="badge-abandoned">'+r.abandoned+'</span>' : '0'}</td>
        <td style="text-align:center;">${r.answered > 0 ? '<span class="badge-answered">'+r.answered+'</span>' : '0'}</td>
      </tr>`;
    }
    html += `</tbody></table></div>`;
  }
  
  html += `
      </div>
    </div>
    
    <div class="panel">
      <div class="panel-title"><i class="fas fa-list"></i> Extrato Detalhado (${data.extrato.length} registros)</div>
  `;
  
  if (data.extrato.length === 0) {
    html += `<div class="empty-state">Nenhuma chamada registrada no período.</div>`;
  } else {
    html += `
      <div class="scroll-table">
        <table>
          <thead>
            <tr>
              <th>Data/Hora</th>
              <th>Status</th>
              <th>Espera</th>
              <th>Conversa</th>
              <th>Agente</th>
              <th>Desligou</th>
            </tr>
          </thead>
          <tbody>
    `;
    for (const d of data.extrato) {
      const badge = d.event === 'ABANDON' 
        ? '<span class="badge-abandoned">Abandonada</span>'
        : '<span class="badge-answered">Atendida</span>';
      html += `<tr>
        <td>${d.datetime}</td>
        <td>${badge}</td>
        <td>${d.wait}</td>
        <td>${d.talk}</td>
        <td>${d.agent}</td>
        <td>${d.who_hungup}</td>
      </tr>`;
    }
    html += `</tbody></table></div>`;
  }
  
  html += `</div>`;
  container.innerHTML = html;
  
  // Render charts
  const ctx1 = document.getElementById('chartDesligamento').getContext('2d');
  if (chartDesligamento) chartDesligamento.destroy();
  chartDesligamento = new Chart(ctx1, {
    type: 'doughnut',
    data: {
      labels: ['Cliente Desligou', 'Atendente Desligou'],
      datasets: [{
        data: [kpis.caller_hungup, kpis.agent_hungup],
        backgroundColor: ['#f79009', '#175cd3'],
        borderWidth: 0
      }]
    },
    options: { responsive: true, plugins: { legend: { position: 'bottom' } } }
  });
  
  const ctx2 = document.getElementById('chartStatus').getContext('2d');
  if (chartStatus) chartStatus.destroy();
  chartStatus = new Chart(ctx2, {
    type: 'pie',
    data: {
      labels: ['Atendidas ('+kpis.answer_rate+'%)', 'Abandonadas ('+kpis.abandonment_rate+'%)'],
      datasets: [{
        data: [kpis.answered, kpis.abandoned],
        backgroundColor: ['#12b76a', '#f04438'],
        borderWidth: 0
      }]
    },
    options: { responsive: true, plugins: { legend: { position: 'bottom' } } }
  });
}

// Load on page load
document.addEventListener('DOMContentLoaded', () => loadData());
</script>
{% endblock %}