{% extends "base.html" %}
{% block title %}Relatórios{% endblock %}
{% set active = "reports" %}
{% block content %}
<div class="container-fluid">
  <h4 class="mb-3">📊 Relatórios</h4>

  <!-- Filtros -->
  <div class="card mb-3">
    <div class="card-body">
      <div class="row g-2 align-items-end">
        <div class="col-md-2">
          <label class="form-label">Período</label>
          <select class="form-select" id="periodSelect">
            <option value="today">Hoje</option>
            <option value="yesterday">Ontem</option>
            <option value="week" selected>Esta Semana</option>
            <option value="month">Este Mês</option>
            <option value="custom">Personalizado</option>
          </select>
        </div>
        <div class="col-md-2">
          <label class="form-label">De</label>
          <input type="date" class="form-control" id="startDate">
        </div>
        <div class="col-md-2">
          <label class="form-label">Até</label>
          <input type="date" class="form-control" id="endDate">
        </div>
        <div class="col-md-2">
          <label class="form-label">Tipo</label>
          <select class="form-select" id="reportType">
            <option value="calls">Resumo</option>
            <option value="by_agent">Por Agente</option>
            <option value="by_queue">Por Fila</option>
            <option value="timeline">Timeline</option>
            <option value="cdr">CDR Detalhado</option>
          </select>
        </div>
        <div class="col-md-2">
          <button class="btn btn-primary w-100" onclick="loadReport()">📊 Carregar</button>
        </div>
        <div class="col-md-2">
          <button class="btn btn-success w-100" onclick="exportCSV()">📥 CSV</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Cards de resumo -->
  <div class="row g-3 mb-4" id="summaryCards"></div>

  <!-- Tabela de dados -->
  <div class="card">
    <div class="card-body" id="reportContent">
      <div class="text-center text-muted py-5">
        <h5>📊 Selecione um período e clique em "Carregar"</h5>
      </div>
    </div>
  </div>

  <!-- Canvas para grafico -->
  <div class="card mt-3" id="chartCard" style="display:none">
    <div class="card-body">
      <canvas id="reportChart" height="200"></canvas>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script>
let reportChart = null;

function setDateDefaults() {
  const now = new Date();
  const today = now.toISOString().split('T')[0];
  // Inicio da semana (segunda)
  const monday = new Date(now);
  monday.setDate(now.getDate() - ((now.getDay() + 6) % 7));
  document.getElementById('startDate').value = monday.toISOString().split('T')[0];
  document.getElementById('endDate').value = today;
}

document.getElementById('periodSelect').addEventListener('change', function() {
  const isCustom = this.value === 'custom';
  document.getElementById('startDate').disabled = !isCustom;
  document.getElementById('endDate').disabled = !isCustom;
  if (!isCustom) setDateDefaults();
});

document.addEventListener('DOMContentLoaded', () => {
  setDateDefaults();
  loadReport();
});

async function loadReport() {
  const period = document.getElementById('periodSelect').value;
  const start = document.getElementById('startDate').value;
  const end = document.getElementById('endDate').value;
  const type = document.getElementById('reportType').value;

  let url = `/app/pbx/reports/data?period=${period}&type=${type}`;
  if (start) url += `&start=${start}`;
  if (end) url += `&end=${end}`;

  try {
    const resp = await fetch(url);
    const data = await resp.json();
    renderReport(type, data);
  } catch(e) {
    document.getElementById('reportContent').innerHTML =
      `<div class="alert alert-danger">Erro ao carregar: ${e.message}</div>`;
  }
}

function renderReport(type, data) {
  const container = document.getElementById('reportContent');
  const summaryDiv = document.getElementById('summaryCards');
  const chartCard = document.getElementById('chartCard');

  if (type === 'calls') {
    renderSummary(data);
    chartCard.style.display = 'none';
    container.innerHTML = `
      <table class="table table-striped">
        <tr><td>Total de Chamadas</td><td><strong>${data.total}</strong></td></tr>
        <tr><td>Completadas</td><td>${data.completed}</td></tr>
        <tr><td>Ocupado</td><td>${data.busy}</td></tr>
        <tr><td>Sem Resposta</td><td>${data.noanswer}</td></tr>
        <tr><td>Falhas</td><td>${data.failed}</td></tr>
        <tr><td>Em Andamento</td><td>${data.ongoing}</td></tr>
        <tr><td>Entrada</td><td>${data.inbound}</td></tr>
        <tr><td>Saída</td><td>${data.outbound}</td></tr>
        <tr><td>Internas</td><td>${data.internal}</td></tr>
        <tr><td><strong>Tempo Médio</strong></td><td><strong>${data.avg_duration}s</strong></td></tr>
      </table>`;
  } else if (type === 'by_agent') {
    summaryDiv.innerHTML = '';
    chartCard.style.display = 'block';
    let html = `<table class="table table-striped"><thead><tr>
      <th>Agente</th><th>Total</th><th>Atendidas</th><th>Perdidas</th>
      <th>Tempo Médio</th><th>Tempo Total</th></tr></thead><tbody>`;
    data.forEach(a => {
      html += `<tr><td>${a.name}</td><td>${a.total}</td>
        <td>${a.answered}</td><td>${a.missed}</td>
        <td>${a.avg_secs}s</td><td>${a.total_time}</td></tr>`;
    });
    html += '</tbody></table>';
    container.innerHTML = html;
    renderBarChart(data.map(a => a.name), data.map(a => a.answered), 'Atendidas');
  } else if (type === 'by_queue') {
    summaryDiv.innerHTML = '';
    chartCard.style.display = 'block';
    let html = `<table class="table table-striped"><thead><tr>
      <th>Fila</th><th>Total</th><th>Atendidas</th><th>Abandonadas</th>
      <th>Tempo Médio</th></tr></thead><tbody>`;
    data.forEach(q => {
      html += `<tr><td>${q.name}</td><td>${q.total}</td>
        <td>${q.answered}</td><td>${q.abandoned}</td>
        <td>${q.avg_secs}s</td></tr>`;
    });
    html += '</tbody></table>';
    container.innerHTML = html;
    renderBarChart(data.map(q => q.name), data.map(q => q.answered), 'Atendidas', data.map(q => q.abandoned), 'Abandonadas');
  } else if (type === 'timeline') {
    summaryDiv.innerHTML = '';
    chartCard.style.display = 'block';
    let html = `<table class="table table-striped"><thead><tr>
      <th>Data</th><th>Total</th><th>Completadas</th><th>Entrada</th><th>Saída</th></tr></thead><tbody>`;
    data.forEach(d => {
      html += `<tr><td>${d.date}</td><td>${d.total}</td>
        <td>${d.completed}</td><td>${d.inbound}</td><td>${d.outbound}</td></tr>`;
    });
    html += '</tbody></table>';
    container.innerHTML = html;
    renderLineChart(data.map(d => d.date), data.map(d => d.total), 'Total');
  } else if (type === 'cdr') {
    summaryDiv.innerHTML = '';
    chartCard.style.display = 'none';
    let html = '<table class=\"table table-striped\"><thead><tr>' +
      '<th>Data/Hora</th><th>Origem</th><th>Destino</th><th>Direção</th>' +
      '<th>Duração</th><th>Status</th></tr></thead><tbody>';
    data.rows.forEach(r => {
      const dirIcon = r.direction === 'outbound' ? '📤' : r.direction === 'inbound' ? '📥' : '🔄';
      const statusClass = r.status === 'completed' ? 'text-success' : r.status === 'new' ? 'text-warning' : 'text-danger';
      const dur = r.duration > 0 ? Math.round(r.duration) + 's' : '-';
      html += '<tr>' +
        '<td>' + (r.started_at || '-') + '</td>' +
        '<td>' + (r.from_number || '-') + '</td>' +
        '<td>' + (r.to_number || '-') + '</td>' +
        '<td>' + dirIcon + ' ' + r.direction + '</td>' +
        '<td>' + dur + '</td>' +
        '<td class=\"' + statusClass + '\">' + r.status + '</td>' +
        '</tr>';
    });
    html += '</tbody></table>';
    if (data.rows.length === 0) {
      html += '<div class="alert alert-info">Nenhuma chamada encontrada no período.</div>';
    }
    container.innerHTML = html;
  }
}

function renderSummary(data) {
  const div = document.getElementById('summaryCards');
  div.innerHTML = `
    <div class="col-md-3">
      <div class="card text-center p-3">
        <div class="h5">${data.total}</div>
        <small class="text-muted">Total</small>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card text-center p-3 border-success">
        <div class="h5 text-success">${data.completed}</div>
        <small class="text-muted">Completadas</small>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card text-center p-3 border-danger">
        <div class="h5 text-danger">${data.noanswer + data.busy + data.failed}</div>
        <small class="text-muted">Perdidas</small>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card text-center p-3 border-info">
        <div class="h5 text-info">${data.avg_duration}s</div>
        <small class="text-muted">Tempo Médio</small>
      </div>
    </div>`;
}

function renderBarChart(labels, data1, label1, data2, label2) {
  if (reportChart) reportChart.destroy();
  const ctx = document.getElementById('reportChart').getContext('2d');
  const datasets = [{ label: label1, data: data1, backgroundColor: 'rgba(40,167,69,0.6)' }];
  if (data2) datasets.push({ label: label2, data: data2, backgroundColor: 'rgba(220,53,69,0.6)' });
  reportChart = new Chart(ctx, {
    type: 'bar',
    data: { labels, datasets },
    options: {
      responsive: true,
      plugins: { legend: { display: true } }
    }
  });
}

function renderLineChart(labels, data, label) {
  if (reportChart) reportChart.destroy();
  const ctx = document.getElementById('reportChart').getContext('2d');
  reportChart = new Chart(ctx, {
    type: 'line',
    data: { labels, datasets: [{ label, data, borderColor: '#0d6efd', tension: 0.1 }] },
    options: {
      responsive: true,
      plugins: { legend: { display: true } }
    }
  });
}


async function exportCSV() {
  const period = document.getElementById('periodSelect').value;
  const start = document.getElementById('startDate').value;
  const end = document.getElementById('endDate').value;
  const type = document.getElementById('reportType').value;
  let url = `/app/pbx/reports/data?period=${period}&type=${type}&csv=1`;
  if (start) url += `&start=${start}`;
  if (end) url += `&end=${end}`;
  try {
    const resp = await fetch(url);
    if (!resp.ok) throw new Error('Erro');
    const data = await resp.json();
    // CDR type returns {total, rows}, others return flat array
    const items = data.rows || data;
    if (!items.length) { alert('Sem dados para exportar'); return; }
    const keys = Object.keys(items[0]);
    let csv = keys.join(',') + '\n';
    items.forEach(r => {
      csv += keys.map(k => `"${r[k] ?? ''}"`).join(',') + '\n';
    });
    const blob = new Blob([csv], { type: 'text/csv' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = `relatorio_${type}_${period}_${start || ''}_${end || ''}.csv`;
    a.click();
  } catch(e) {
    alert('Erro ao exportar: ' + e.message);
  }
}
</script>
{% endblock %}