<!DOCTYPE html>
<html lang="tr">
<head>
  <%- include('../partials/head') %>
  <title>Dashboard — LexaClip Admin</title>
</head>
<body class="min-h-screen bg-slate-950 text-slate-100 antialiased">

  <%- include('../partials/admin-nav', { active: 'dashboard', adminUsername }) %>

  <main class="mx-auto max-w-6xl px-6 py-10">
    <h1 class="text-2xl font-bold">Dashboard</h1>
    <p class="mt-1 text-sm text-slate-400">Extension kullanıcılarına genel bakış</p>

    <div class="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
      <div class="rounded-2xl border border-slate-800 bg-slate-900/50 p-6">
        <p class="text-sm text-slate-400">Toplam Kullanıcı</p>
        <p class="mt-2 text-3xl font-bold"><%= stats.total %></p>
      </div>
      <div class="rounded-2xl border border-slate-800 bg-slate-900/50 p-6">
        <p class="text-sm text-slate-400">Aktif Kullanıcı</p>
        <p class="mt-2 text-3xl font-bold text-emerald-400"><%= stats.active %></p>
      </div>
      <div class="rounded-2xl border border-slate-800 bg-slate-900/50 p-6">
        <p class="text-sm text-slate-400">Bu Hafta Yeni</p>
        <p class="mt-2 text-3xl font-bold text-indigo-400"><%= stats.new_this_week %></p>
      </div>
      <div class="rounded-2xl border border-slate-800 bg-slate-900/50 p-6">
        <p class="text-sm text-slate-400">Son 24 Saatte Aktif</p>
        <p class="mt-2 text-3xl font-bold text-sky-400"><%= stats.active_today %></p>
      </div>
    </div>

    <div class="mt-10">
      <div class="mb-4 flex items-center justify-between">
        <h2 class="text-lg font-semibold">Son Kayıt Olan Kullanıcılar</h2>
        <a href="/admin/users" class="text-sm text-indigo-400 hover:text-indigo-300">Tümünü gör →</a>
      </div>
      <div class="overflow-x-auto rounded-2xl border border-slate-800">
        <table class="w-full text-left text-sm">
          <thead class="bg-slate-900/70 text-slate-400">
            <tr>
              <th class="px-5 py-3 font-medium">Email</th>
              <th class="px-5 py-3 font-medium">İsim</th>
              <th class="px-5 py-3 font-medium">Plan</th>
              <th class="px-5 py-3 font-medium">Durum</th>
              <th class="px-5 py-3 font-medium">Kayıt Tarihi</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-800/70">
            <% if (latest.length === 0) { %>
              <tr><td colspan="5" class="px-5 py-8 text-center text-slate-500">Henüz kullanıcı yok</td></tr>
            <% } %>
            <% latest.forEach(function(u) { %>
              <tr class="hover:bg-slate-900/40">
                <td class="px-5 py-3"><%= u.email %></td>
                <td class="px-5 py-3 text-slate-400"><%= u.name || '—' %></td>
                <td class="px-5 py-3"><span class="rounded-full bg-slate-800 px-2.5 py-0.5 text-xs"><%= u.plan %></span></td>
                <td class="px-5 py-3">
                  <% if (u.status === 'active') { %>
                    <span class="rounded-full bg-emerald-500/15 px-2.5 py-0.5 text-xs text-emerald-400">aktif</span>
                  <% } else { %>
                    <span class="rounded-full bg-red-500/15 px-2.5 py-0.5 text-xs text-red-400">engelli</span>
                  <% } %>
                </td>
                <td class="px-5 py-3 text-slate-400"><%= new Date(u.created_at).toLocaleDateString('tr-TR') %></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    </div>
  </main>

</body>
</html>
