<div class="container mx-auto">
  <% if (typeof success_msg !== 'undefined' && success_msg) { %>
    <div class="alert alert-success shadow mb-3"><%= success_msg %></div>
  <% } %>
  <% if (typeof error_msg !== 'undefined' && error_msg) { %>
    <div class="alert alert-error shadow mb-3"><%= error_msg %></div>
  <% } %>
  <h1 class="text-2xl font-bold mb-4">Dashboard</h1>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
    <div class="stat bg-base-100 shadow">
      <div class="stat-title">Kullanıcılar</div>
      <div class="stat-value"><%= stats.users %></div>
    </div>
    <div class="stat bg-base-100 shadow">
      <div class="stat-title">Kanallar</div>
      <div class="stat-value"><%= stats.channels %></div>
    </div>
    <div class="stat bg-base-100 shadow">
      <div class="stat-title">Başarılı Gönderimler</div>
      <div class="stat-value"><%= stats.sent_posts %></div>
    </div>
    <div class="stat bg-base-100 shadow">
      <div class="stat-title">Havuzlar</div>
      <div class="stat-value"><%= stats.pools %></div>
    </div>
    <div class="stat bg-base-100 shadow">
      <div class="stat-title">Planlı İşler</div>
      <div class="stat-value"><%= stats.schedules %></div>
    </div>
    <div class="stat bg-base-100 shadow">
      <div class="stat-title">Bu Ay Ciro</div>
      <div class="stat-value"><%= stats.revenue_month %> ₺</div>
    </div>
  </div>

  <div class="bg-base-100 rounded shadow p-4">
    <div class="flex items-center justify-between mb-2">
      <h2 class="font-semibold">Son 7 Gün Gönderimler</h2>
      <div class="text-sm text-gray-500">Adet</div>
    </div>
    <canvas id="sendChart" height="120"></canvas>
  </div>

  <div class="bg-base-100 rounded shadow p-4 mt-6">
    <div class="flex items-center justify-between">
      <div>
        <h2 class="font-semibold">Telegram Webhook</h2>
        <div class="text-sm text-gray-500">Aktif tüm kanalların botları için webhook kur</div>
      </div>
      <form method="POST" action="/admin/webhooks/setup-all">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <button class="btn btn-primary btn-sm" type="submit">Tüm Webhookları Kur</button>
      </form>
    </div>
  </div>

  <div class="bg-base-100 rounded shadow p-4 mt-6">
    <div class="flex items-center justify-between mb-2">
      <h2 class="font-semibold">Son 7 Gün Yeni Kayıtlar</h2>
      <div class="text-sm text-gray-500">Adet</div>
    </div>
    <canvas id="signupChart" height="120"></canvas>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
    <div class="bg-base-100 rounded shadow p-4">
      <div class="flex items-center justify-between mb-2">
        <h2 class="font-semibold">Plan Dağılımı</h2>
      </div>
      <canvas id="planDistrib" height="160"></canvas>
    </div>
    <div class="bg-base-100 rounded shadow p-4">
      <div class="flex items-center justify-between mb-2">
        <h2 class="font-semibold">Son 7 Gün Gönderim Başarısı</h2>
        <div class="text-sm text-gray-500">OK / Hata</div>
      </div>
      <canvas id="sendOkErr" height="160"></canvas>
    </div>
  </div>

  <% if (Array.isArray(approaching) && approaching.length) { %>
  <div class="bg-base-100 rounded shadow p-4 mt-6">
    <div class="flex items-center justify-between mb-2">
      <h2 class="font-semibold">Limite Yaklaşan Kullanıcılar</h2>
      <div class="text-sm text-gray-500">İlk <%= approaching.length %></div>
    </div>
    <div class="overflow-x-auto">
      <table class="table">
        <thead>
          <tr>
            <th>Kullanıcı</th>
            <th>Plan</th>
            <th>Kritik Metrik</th>
            <th>Kullanım</th>
            <th>%</th>
          </tr>
        </thead>
        <tbody>
          <% approaching.forEach(function(r){ %>
            <tr>
              <td><a class="link" href="/admin/users/<%= r.user_id %>"><%= r.username %></a></td>
              <td><span class="badge"><%= r.plan_name %></span></td>
              <td><%= r.top.kind %></td>
              <td><%= r.top.used %> / <%= r.top.limit %></td>
              <td><%= r.top.pct %>%</td>
            </tr>
          <% }) %>
        </tbody>
      </table>
    </div>
  </div>
  <% } %>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
(async function(){
  try {
    const res = await fetch('/audit/stats/sent7');
    const data = await res.json();
    const labels = (data.items||[]).map(x => x.day);
    const values = (data.items||[]).map(x => x.count);
    const ctx = document.getElementById('sendChart');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels,
        datasets: [{ label: 'Gönderimler', data: values, fill:false, borderColor:'#3b82f6', tension:0.3 }]
      },
      options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero:true } } }
    });
  } catch (e) {}
})();

(async function(){
  try {
    const res = await fetch('/audit/stats/signup7');
    const data = await res.json();
    const labels = (data.items||[]).map(x => x.day);
    const values = (data.items||[]).map(x => x.count);
    const ctx = document.getElementById('signupChart');
    new Chart(ctx, {
      type: 'bar',
      data: { labels, datasets: [{ label: 'Kayıtlar', data: values, backgroundColor:'#10b981' }] },
      options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero:true } } }
    });
  } catch (e) {}
})();

(async function(){
  try {
    const res = await fetch('/audit/stats/plan_distrib');
    const data = await res.json();
    const labels = (data.items||[]).map(x => x.name);
    const values = (data.items||[]).map(x => x.count);
    const ctx = document.getElementById('planDistrib');
    new Chart(ctx, {
      type: 'pie',
      data: { labels, datasets: [{ data: values, backgroundColor: ['#3b82f6','#10b981','#f59e0b','#ef4444','#8b5cf6'] }] },
      options: { plugins: { legend: { position: 'bottom' } } }
    });
  } catch (e) {}
})();

(async function(){
  try {
    const res = await fetch('/audit/stats/send_success7');
    const data = await res.json();
    const labels = (data.items||[]).map(x => x.day);
    const ok = (data.items||[]).map(x => x.ok);
    const err = (data.items||[]).map(x => x.err);
    const ctx = document.getElementById('sendOkErr');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels,
        datasets: [
          { label: 'OK', data: ok, backgroundColor:'#10b981' },
          { label: 'Hata', data: err, backgroundColor:'#ef4444' }
        ]
      },
      options: { scales: { y: { beginAtZero: true } } }
    });
  } catch (e) {}
})();
</script>
