<a href="/admin/ib-requests" class="text-sm text-muted hover:text-white inline-flex items-center gap-2 mb-5">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
  Kembali ke daftar request
</a>

<div class="flex items-start justify-between flex-wrap gap-3 mb-6 sm:mb-8">
  <div>
    <h1 class="text-2xl sm:text-3xl font-display font-semibold">Request IB #<%= r.id %></h1>
    <p class="text-muted text-sm mt-1"><%= new Date(r.created_at).toLocaleDateString('id-ID',{day:'numeric',month:'long',year:'numeric',hour:'2-digit',minute:'2-digit'}) %></p>
  </div>
  <span class="pill <%= r.status==='approved' ? 'pill-green' : (r.status==='pending' ? 'pill-gold' : 'pill-red') %> text-sm px-4 py-2">
    <%= r.status.toUpperCase() %>
  </span>
</div>

<div class="grid lg:grid-cols-[1fr_1fr] gap-5 sm:gap-6">

  <!-- Detail Member & Akun -->
  <div class="space-y-4">
    <div class="card p-5 sm:p-6">
      <h2 class="text-base sm:text-lg font-display font-semibold mb-4">👤 Data Member</h2>
      <dl class="space-y-3 text-sm">
        <div class="flex flex-col sm:flex-row sm:justify-between gap-1">
          <dt class="text-muted">Nama</dt>
          <dd class="font-medium"><%= r.user_name %></dd>
        </div>
        <div class="flex flex-col sm:flex-row sm:justify-between gap-1">
          <dt class="text-muted">Email</dt>
          <dd class="mono text-sm"><%= r.user_email %></dd>
        </div>
        <% if (r.user_phone) { %>
        <div class="flex flex-col sm:flex-row sm:justify-between gap-1">
          <dt class="text-muted">WA Profil</dt>
          <dd class="mono"><%= r.user_phone %></dd>
        </div>
        <% } %>
        <% if (r.user_telegram) { %>
        <div class="flex flex-col sm:flex-row sm:justify-between gap-1">
          <dt class="text-muted">Telegram Profil</dt>
          <dd class="mono"><%= r.user_telegram %></dd>
        </div>
        <% } %>
      </dl>
    </div>

    <div class="card p-5 sm:p-6">
      <h2 class="text-base sm:text-lg font-display font-semibold mb-4">🔐 Detail Request</h2>
      <dl class="space-y-3 text-sm">
        <div class="flex flex-col sm:flex-row sm:justify-between gap-1">
          <dt class="text-muted">Broker</dt>
          <dd class="font-medium"><%= r.broker_name %></dd>
        </div>
        <div class="flex flex-col sm:flex-row sm:justify-between gap-1">
          <dt class="text-muted">Nomor Akun</dt>
          <dd class="mono font-medium"><%= r.account_number %></dd>
        </div>
        <div class="flex flex-col sm:flex-row sm:justify-between gap-1">
          <dt class="text-muted">Kontak Verifikasi</dt>
          <dd>
            <span class="pill <%= r.contact_type==='telegram' ? 'pill-blue' : 'pill-green' %>"><%= r.contact_type === 'telegram' ? '✈ Telegram' : '📱 WhatsApp' %></span>
            <button class="mono ml-2" data-copy="<%= r.contact_value %>" title="Copy"><%= r.contact_value %></button>
          </dd>
        </div>

        <% if (r.status !== 'pending') { %>
          <div class="flex flex-col sm:flex-row sm:justify-between gap-1 pt-2 border-t border-white/5">
            <dt class="text-muted">Diproses pada</dt>
            <dd><%= r.processed_at ? new Date(r.processed_at).toLocaleDateString('id-ID',{day:'numeric',month:'long',year:'numeric',hour:'2-digit',minute:'2-digit'}) : '-' %></dd>
          </div>
          <% if (r.activation_code) { %>
            <div class="flex flex-col sm:flex-row sm:justify-between gap-1">
              <dt class="text-muted">Kode Aktivasi</dt>
              <dd class="mono font-bold text-gold-200"><%= r.activation_code %></dd>
            </div>
          <% } %>
          <% if (r.admin_note) { %>
            <div class="card-soft p-3 mt-2 text-xs">
              <div class="text-muted-2 uppercase tracking-wide mb-1.5" style="font-size:10px">Catatan Admin</div>
              <div><%= r.admin_note %></div>
            </div>
          <% } %>
        <% } %>
      </dl>
    </div>
  </div>

  <!-- Action Panel -->
  <div>
    <% if (r.status === 'pending') { %>

      <!-- PREVIEW kode aktivasi -->
      <div class="card p-5 sm:p-6 mb-4 border-gold-300/30 bg-gold-300/[0.05]">
        <div class="text-xs text-muted-2 uppercase tracking-wide mb-2">Preview Kode Aktivasi</div>
        <div class="font-mono text-3xl sm:text-4xl font-bold text-gold-200 mb-2"><%= previewCode || '—' %></div>
        <div class="text-xs text-muted">
          Formula: <span class="mono"><%= r.account_number %> × 17 + 58975 = <%= previewCode %></span>
        </div>
        <div class="text-[10px] text-muted-2 mt-2">⚡ Otomatis dihitung. Klik APPROVE untuk kirim ke member via email.</div>
      </div>

      <!-- APPROVE -->
      <form action="/admin/ib-requests/<%= r.id %>/approve" method="post" class="card p-5 sm:p-6 mb-4 needs-confirm" data-confirm="Approve request ini? Kode <%= previewCode %> akan dikirim ke email member.">
        <h3 class="font-display font-semibold mb-3 text-emerald-300">✓ Approve Request</h3>
        <label class="text-sm text-muted">Catatan untuk member (opsional)</label>
        <textarea name="admin_note" rows="2" class="input mt-2 text-sm" placeholder="Misal: 'Pastikan masukkan kode di EA panel'"></textarea>
        <button class="btn btn-gold w-full h-11 rounded-full mt-4 text-sm">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><polyline points="20 6 9 17 4 12"/></svg>
          Approve & Kirim Kode <span class="mono"><%= previewCode %></span>
        </button>
      </form>

      <!-- REJECT -->
      <form action="/admin/ib-requests/<%= r.id %>/reject" method="post" class="card p-5 sm:p-6 needs-confirm" data-confirm="Reject request ini? Member akan dapat notifikasi email.">
        <h3 class="font-display font-semibold mb-3 text-red-300">✕ Reject Request</h3>
        <label class="text-sm text-muted">Alasan reject <span class="text-red-400">*</span></label>
        <textarea name="admin_note" rows="3" required class="input mt-2 text-sm"
          placeholder="Misal: 'Akun ini tidak terdaftar di bawah IB Trader Rebahan' atau 'Mohon daftar dulu dengan link IB kami: ...'"></textarea>
        <button class="btn btn-outline w-full h-11 rounded-full mt-4 text-sm border-red-500/30 text-red-300 hover:bg-red-500/10">
          Reject Request
        </button>
      </form>

    <% } else { %>

      <div class="card p-5 sm:p-6">
        <div class="text-center py-4">
          <div class="text-5xl mb-3">
            <%= r.status === 'approved' ? '✅' : '❌' %>
          </div>
          <div class="text-base font-display font-semibold mb-1">
            Request sudah <%= r.status === 'approved' ? 'di-approve' : 'di-reject' %>
          </div>
          <div class="text-sm text-muted">
            <%= new Date(r.processed_at).toLocaleDateString('id-ID',{day:'numeric',month:'long',year:'numeric',hour:'2-digit',minute:'2-digit'}) %>
          </div>
        </div>

        <% if (r.status === 'approved' && r.activation_code) { %>
          <div class="card-soft p-4 text-center mt-4">
            <div class="text-xs text-muted-2 uppercase tracking-wide">Kode Aktivasi</div>
            <button type="button" class="mono text-2xl font-bold text-gold-200 mt-1 hover:text-gold-100 transition" data-copy="<%= r.activation_code %>" title="Copy"><%= r.activation_code %></button>
          </div>
        <% } %>
      </div>

    <% } %>
  </div>
</div>
