<div class="mb-6 sm:mb-8">
  <h1 class="text-2xl sm:text-3xl font-display font-semibold">Request Kode Aktivasi IB</h1>
  <p class="text-muted text-sm mt-1">Approve atau reject permintaan kode aktivasi dari member yang mendaftar di bawah IB.</p>
</div>

<!-- Filter pills -->
<div class="flex items-center gap-2 text-sm mb-6 overflow-x-auto no-scrollbar pb-2">
  <a href="/admin/ib-requests" class="pill <%= !filter ? 'pill-gold' : '' %> px-4 py-1.5 shrink-0">Semua <%= (countMap.pending||0)+(countMap.approved||0)+(countMap.rejected||0) %></a>
  <a href="/admin/ib-requests?status=pending" class="pill <%= filter==='pending' ? 'pill-gold' : '' %> px-4 py-1.5 shrink-0">Pending <%= countMap.pending||0 %></a>
  <a href="/admin/ib-requests?status=approved" class="pill <%= filter==='approved' ? 'pill-green' : '' %> px-4 py-1.5 shrink-0">Approved <%= countMap.approved||0 %></a>
  <a href="/admin/ib-requests?status=rejected" class="pill <%= filter==='rejected' ? 'pill-red' : '' %> px-4 py-1.5 shrink-0">Rejected <%= countMap.rejected||0 %></a>
</div>

<% if (requests && requests.length) { %>

  <!-- Desktop table -->
  <div class="card p-0 overflow-hidden tbl-mobile-hide">
    <div class="tbl-wrap">
      <table class="tbl">
        <thead>
          <tr>
            <th>Member</th>
            <th>Broker</th>
            <th>Akun</th>
            <th>Kontak</th>
            <th>Status</th>
            <th>Kode</th>
            <th>Tanggal</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <% requests.forEach(function(r){ %>
            <tr>
              <td>
                <div class="font-medium"><%= r.user_name %></div>
                <div class="text-xs text-muted"><%= r.user_email %></div>
              </td>
              <td><%= r.broker_name %></td>
              <td class="mono text-sm"><%= r.account_number %></td>
              <td class="text-sm">
                <span class="text-muted-2 text-xs"><%= r.contact_type === 'telegram' ? 'TG' : 'WA' %></span>
                <span class="mono"><%= r.contact_value %></span>
              </td>
              <td><span class="pill <%= r.status==='approved' ? 'pill-green' : (r.status==='pending' ? 'pill-gold' : 'pill-red') %>"><%= r.status %></span></td>
              <td class="mono text-sm">
                <% if (r.activation_code) { %>
                  <span class="text-gold-200"><%= r.activation_code %></span>
                <% } else { %>
                  <span class="text-muted-2">—</span>
                <% } %>
              </td>
              <td class="text-xs whitespace-nowrap"><%= new Date(r.created_at).toLocaleDateString('id-ID',{day:'2-digit',month:'short',hour:'2-digit',minute:'2-digit'}) %></td>
              <td><a href="/admin/ib-requests/<%= r.id %>" class="text-gold-300 hover:text-gold-200 text-sm whitespace-nowrap">Detail →</a></td>
            </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
  </div>

  <!-- Mobile cards -->
  <div class="tbl-mobile-cards space-y-3">
    <% requests.forEach(function(r){ %>
      <a href="/admin/ib-requests/<%= r.id %>" class="block card p-4 hover:bg-white/[0.06] transition">
        <div class="flex items-start justify-between gap-3 mb-3">
          <div class="min-w-0 flex-1">
            <div class="font-medium text-sm truncate"><%= r.user_name %></div>
            <div class="text-xs text-muted truncate"><%= r.user_email %></div>
          </div>
          <span class="pill <%= r.status==='approved' ? 'pill-green' : (r.status==='pending' ? 'pill-gold' : 'pill-red') %> shrink-0">
            <%= r.status %>
          </span>
        </div>

        <div class="grid grid-cols-2 gap-3 text-xs">
          <div>
            <div class="text-muted-2 uppercase" style="font-size:10px">Broker</div>
            <div class="mt-1 truncate"><%= r.broker_name %></div>
          </div>
          <div>
            <div class="text-muted-2 uppercase" style="font-size:10px">Akun</div>
            <div class="mono mt-1"><%= r.account_number %></div>
          </div>
          <div>
            <div class="text-muted-2 uppercase" style="font-size:10px"><%= r.contact_type === 'telegram' ? 'Telegram' : 'WhatsApp' %></div>
            <div class="mono mt-1 truncate"><%= r.contact_value %></div>
          </div>
          <% if (r.activation_code) { %>
          <div>
            <div class="text-muted-2 uppercase" style="font-size:10px">Kode</div>
            <div class="mono mt-1 text-gold-200"><%= r.activation_code %></div>
          </div>
          <% } else { %>
          <div>
            <div class="text-muted-2 uppercase" style="font-size:10px">Dibuat</div>
            <div class="mt-1"><%= new Date(r.created_at).toLocaleDateString('id-ID',{day:'2-digit',month:'short',hour:'2-digit',minute:'2-digit'}) %></div>
          </div>
          <% } %>
        </div>
      </a>
    <% }); %>
  </div>
<% } else { %>
  <div class="card empty-state">
    <div class="empty-icon">🔑</div>
    <h2>Tidak ada request<% if (filter) { %> "<%= filter %>"<% } %></h2>
    <p>Request akan muncul saat member submit form di /member/ib-request.</p>
  </div>
<% } %>
