<div class="container mx-auto">
  <h1 class="text-2xl font-bold mb-4">Raporlar</h1>
  <form class="mb-4 flex flex-wrap items-end gap-2" method="GET">
    <div>
      <label class="text-sm text-gray-600">Başlangıç</label>
      <input type="date" name="from" value="<%= from %>" class="input input-bordered input-sm">
    </div>
    <div>
      <label class="text-sm text-gray-600">Bitiş</label>
      <input type="date" name="to" value="<%= to %>" class="input input-bordered input-sm">
    </div>
    <button class="btn btn-sm">Uygula</button>
  </form>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="bg-base-100 rounded shadow p-4">
      <h2 class="font-semibold mb-2">Son 7 Gün Gönderim Başarı/Hata</h2>
      <canvas id="chart7" height="140"></canvas>
    </div>
    <div class="bg-base-100 rounded shadow p-4">
      <h2 class="font-semibold mb-2">En Çok Gönderim Yapan Kanallar</h2>
      <div class="overflow-x-auto">
        <table class="table">
          <thead>
            <tr><th>Kanal</th><th>Başarılı</th><th>Hata</th><th>Toplam</th></tr>
          </thead>
          <tbody>
            <% bySends.forEach(function(r){ %>
              <tr>
                <td><%= r.name %></td>
                <td><%= r.ok %></td>
                <td><%= r.err %></td>
                <td><%= r.total %></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    </div>

    <div class="bg-base-100 rounded shadow p-4">
      <h2 class="font-semibold mb-2">En Çok Hata Alan Kanallar</h2>
      <canvas id="chartErr" height="140" class="mb-3"></canvas>
      <div class="overflow-x-auto">
        <table class="table">
          <thead>
            <tr><th>Kanal</th><th>Hata</th><th>Başarılı</th><th>Toplam</th></tr>
          </thead>
          <tbody>
            <% byErrors.forEach(function(r){ %>
              <tr>
                <td><%= r.name %></td>
                <td><%= r.err %></td>
                <td><%= r.ok %></td>
                <td><%= r.total %></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  (async function(){
    try {
      // 7-day success/error
      const r = await fetch('/audit/stats/send_success7', { headers: { 'Accept': 'application/json' } });
      const js = await r.json();
      const items = Array.isArray(js.items) ? js.items : [];
      const labels = items.map(i => i.day);
      const ok = items.map(i => i.ok);
      const err = items.map(i => i.err);
      const ctx = document.getElementById('chart7').getContext('2d');
      new Chart(ctx, {
        type: 'line',
        data: { labels, datasets: [
          { label: 'Başarılı', data: ok, borderColor: '#22c55e', backgroundColor: 'rgba(34,197,94,0.2)', tension: .3 },
          { label: 'Hata', data: err, borderColor: '#ef4444', backgroundColor: 'rgba(239,68,68,0.2)', tension: .3 }
        ]},
        options: { responsive: true, plugins: { legend: { position: 'bottom' } }, scales: { y: { beginAtZero: true } } }
      });

      // Channel errors bar from server-provided byErrors (top 10)
      const byErrors = <%- JSON.stringify(byErrors.slice(0,10)) %>;
      const labelsErr = byErrors.map(i => i.name);
      const dataErr = byErrors.map(i => i.err);
      const ctxErr = document.getElementById('chartErr').getContext('2d');
      new Chart(ctxErr, {
        type: 'bar',
        data: { labels: labelsErr, datasets: [{ label: 'Hata', data: dataErr, backgroundColor: '#ef4444' }] },
        options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } }
      });
    } catch (e) { /* ignore */ }
  })();
</script>
