<div class="mb-6 sm:mb-8">
  <h1 class="text-2xl sm:text-3xl font-display font-semibold">Admin Dashboard</h1>
  <p class="text-muted text-sm mt-1">Ringkasan operasional Trader Rebahan.</p>
</div>

<!-- Stats row -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4 mb-6 sm:mb-8">
  <div class="stat">
    <div class="stat-label">Member</div>
    <div class="stat-value"><%= stats.members %></div>
  </div>
  <div class="stat">
    <div class="stat-label">EA Aktif</div>
    <div class="stat-value"><%= stats.eas %></div>
  </div>
  <div class="stat">
    <div class="stat-label">Pesanan</div>
    <div class="stat-value"><%= stats.orders %></div>
  </div>
  <div class="stat">
    <div class="stat-label">Pending</div>
    <div class="stat-value text-gold-300"><%= stats.pending %></div>
    <% if (stats.pending > 0) { %><div class="stat-trend up">⚡ Perlu approval</div><% } %>
  </div>
  <div class="stat">
    <div class="stat-label">Approved</div>
    <div class="stat-value text-emerald-300"><%= stats.approved %></div>
  </div>
  <div class="stat col-span-2 sm:col-span-1">
    <div class="stat-label">Revenue</div>
    <div class="stat-value text-gold-200 text-lg sm:text-xl">Rp<%= Number(stats.revenue||0).toLocaleString('id-ID') %></div>
  </div>
</div>

<!-- Quick links -->
<% if (stats.pending > 0) { %>
  <a href="/admin/orders?status=pending" class="block card p-5 mb-6 hover:bg-white/[0.06] transition border-gold-300/30 bg-gold-300/[0.05]">
    <div class="flex items-center gap-4">
      <div class="grid h-12 w-12 place-items-center rounded-2xl bg-gold-300/20 text-gold-300 text-2xl">⚡</div>
      <div class="flex-1 min-w-0">
        <div class="font-display font-semibold">Ada <%= stats.pending %> pesanan menunggu approval</div>
        <div class="text-sm text-muted mt-1">Klik untuk verifikasi → kirim file EA ke pembeli</div>
      </div>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5 text-muted shrink-0"><path d="M9 18l6-6-6-6"/></svg>
    </div>
  </a>
<% } %>

<!-- Recent orders -->
<div class="card p-5 sm:p-6">
  <div class="flex items-center justify-between mb-5">
    <h2 class="text-base sm:text-lg font-display font-semibold">Pesanan Terbaru</h2>
    <a href="/admin/orders" class="text-sm text-gold-300 hover:text-gold-200">Semua →</a>
  </div>

  <% if (recentOrders && recentOrders.length) { %>
    <!-- Desktop -->
    <div class="tbl-wrap tbl-mobile-hide">
      <table class="tbl">
        <thead>
          <tr>
            <th>Kode</th>
            <th>Member</th>
            <th>EA</th>
            <th>Total</th>
            <th>Status</th>
            <th>Tanggal</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <% recentOrders.forEach(function(o){ %>
            <tr>
              <td class="mono text-xs"><%= o.code %></td>
              <td>
                <div class="font-medium"><%= o.user_name %></div>
                <div class="text-xs text-muted"><%= o.user_email %></div>
              </td>
              <td><%= o.ea_name %></td>
              <td class="mono">Rp<%= Number(o.amount).toLocaleString('id-ID') %></td>
              <td><span class="pill <%= o.status==='approved' ? 'pill-green' : (o.status==='pending' ? 'pill-gold' : 'pill-red') %>"><%= o.status %></span></td>
              <td class="text-xs whitespace-nowrap"><%= new Date(o.created_at).toLocaleDateString('id-ID',{day:'2-digit',month:'short',hour:'2-digit',minute:'2-digit'}) %></td>
              <td><a href="/admin/orders/<%= o.id %>" class="text-gold-300 hover:text-gold-200 text-sm">Detail →</a></td>
            </tr>
          <% }); %>
        </tbody>
      </table>
    </div>

    <!-- Mobile cards -->
    <div class="tbl-mobile-cards space-y-3">
      <% recentOrders.forEach(function(o){ %>
        <a href="/admin/orders/<%= o.id %>" class="block card-soft p-4 hover:bg-white/[0.06] transition">
          <div class="flex items-start justify-between gap-3">
            <div class="min-w-0 flex-1">
              <div class="font-medium text-sm truncate"><%= o.user_name %></div>
              <div class="text-xs text-muted truncate"><%= o.user_email %></div>
              <div class="text-xs text-muted mt-1.5 mono"><%= o.code %></div>
            </div>
            <span class="pill <%= o.status==='approved' ? 'pill-green' : (o.status==='pending' ? 'pill-gold' : 'pill-red') %> shrink-0">
              <%= o.status %>
            </span>
          </div>
          <div class="mt-3 pt-3 border-t border-white/5 flex items-center justify-between text-xs">
            <span class="text-muted truncate"><%= o.ea_name %></span>
            <span class="mono text-gold-200 font-medium shrink-0 ml-2">Rp<%= Number(o.amount).toLocaleString('id-ID') %></span>
          </div>
        </a>
      <% }); %>
    </div>
  <% } else { %>
    <p class="text-muted text-sm py-6 text-center">Belum ada pesanan.</p>
  <% } %>
</div>
