<a href="/admin/members" 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 member
</a>

<div class="flex items-start justify-between flex-wrap gap-3 mb-6 sm:mb-8">
  <div class="min-w-0 flex-1">
    <h1 class="text-2xl sm:text-3xl font-display font-semibold truncate"><%= m.name %></h1>
    <p class="text-muted text-sm mt-1"><%= m.email %> · bergabung <%= new Date(m.created_at).toLocaleDateString('id-ID',{day:'numeric',month:'long',year:'numeric'}) %></p>
  </div>
  <div class="flex gap-2 shrink-0">
    <% if (m.is_ib) { %><span class="pill pill-gold">⭐ IB</span><% } %>
    <span class="pill <%= m.status==='active' ? 'pill-green' : (m.status==='pending_verification' ? 'pill-gold' : 'pill-red') %>"><%= m.status %></span>
    <% if (m.email_verified_at) { %><span class="pill pill-blue">✓ verified</span><% } %>
  </div>
</div>

<!-- Stats summary -->
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-8">
  <div class="stat">
    <div class="stat-label">Total Order</div>
    <div class="stat-value"><%= stats.total_orders %></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">
    <div class="stat-label">Pending</div>
    <div class="stat-value text-gold-300"><%= stats.pending %></div>
  </div>
  <div class="stat">
    <div class="stat-label">Total Belanja</div>
    <div class="stat-value text-gold-200 text-lg sm:text-xl">Rp<%= Number(stats.total_spent || 0).toLocaleString('id-ID') %></div>
  </div>
</div>

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

  <!-- Form Edit Member -->
  <div class="card p-5 sm:p-6">
    <h2 class="text-base sm:text-lg font-display font-semibold mb-4">Edit Data Member</h2>
    <form action="/admin/members/<%= m.id %>" method="post" class="space-y-4">
      <div>
        <label class="text-sm text-muted">Nama Lengkap <span class="text-red-400">*</span></label>
        <input name="name" value="<%= m.name %>" class="input mt-1.5" required>
      </div>
      <div>
        <label class="text-sm text-muted">Email <span class="text-red-400">*</span></label>
        <input type="email" name="email" value="<%= m.email %>" class="input mt-1.5 mono text-sm" required>
      </div>
      <div class="grid sm:grid-cols-2 gap-3">
        <div>
          <label class="text-sm text-muted">No. WhatsApp</label>
          <input type="tel" name="phone" value="<%= m.phone || '' %>" class="input mt-1.5 mono text-sm" placeholder="08xxxx">
        </div>
        <div>
          <label class="text-sm text-muted">Username Telegram</label>
          <input name="telegram" value="<%= m.telegram || '' %>" class="input mt-1.5 mono text-sm" placeholder="@username">
        </div>
      </div>
      <div>
        <label class="text-sm text-muted">Akun Broker Default</label>
        <input name="broker_account" value="<%= m.broker_account || '' %>" class="input mt-1.5 mono text-sm" placeholder="Exness 1234567">
      </div>

      <div class="grid sm:grid-cols-2 gap-3">
        <div>
          <label class="text-sm text-muted">Status Akun</label>
          <select name="status" class="input mt-1.5">
            <option value="active" <%= m.status==='active' ? 'selected' : '' %>>Active</option>
            <option value="suspended" <%= m.status==='suspended' ? 'selected' : '' %>>Suspended</option>
            <option value="pending_verification" <%= m.status==='pending_verification' ? 'selected' : '' %>>Pending Verification</option>
          </select>
        </div>
        <div>
          <label class="flex items-center gap-3 mt-7 cursor-pointer">
            <input type="checkbox" name="is_ib" value="1" <%= m.is_ib ? 'checked' : '' %> class="w-5 h-5 accent-gold-400">
            <span class="text-sm">⭐ Status IB Aktif</span>
          </label>
        </div>
      </div>

      <details class="card-soft p-3 mt-4">
        <summary class="text-sm cursor-pointer font-medium text-red-300">🔐 Reset Password Member (opsional)</summary>
        <div class="mt-3">
          <label class="text-xs text-muted">Password baru (kosongkan kalau tidak mau diganti)</label>
          <input type="text" name="reset_password" class="input mt-1.5 mono text-sm" placeholder="Min 6 karakter" minlength="6">
          <div class="text-[10px] text-muted-2 mt-1.5">⚠ Beritahu member password baru via WhatsApp/email.</div>
        </div>
      </details>

      <button class="btn btn-gold w-full h-11 rounded-full">💾 Simpan Perubahan</button>
    </form>

    <!-- Quick actions -->
    <div class="flex flex-wrap gap-2 mt-5 pt-5 border-t border-white/5">
      <form action="/admin/members/<%= m.id %>/toggle" method="post" class="needs-confirm" data-confirm="<%= m.status==='active' ? 'Suspend member ini?' : 'Aktifkan kembali member ini?' %>">
        <button class="btn btn-outline px-4 py-2 rounded-full text-xs whitespace-nowrap">
          <%= m.status==='active' ? '⏸ Suspend' : '▶ Aktifkan' %>
        </button>
      </form>
      <a href="mailto:<%= m.email %>" class="btn btn-outline px-4 py-2 rounded-full text-xs">📧 Email</a>
      <% if (m.phone) { %>
        <a href="https://wa.me/<%= m.phone.replace(/[^0-9]/g, '').replace(/^0/, '62') %>" target="_blank" class="btn btn-outline px-4 py-2 rounded-full text-xs">
          💬 WhatsApp
        </a>
      <% } %>
    </div>
  </div>

  <!-- Sidebar: History & Activity -->
  <div class="space-y-5">

    <!-- Order History -->
    <div class="card p-5 sm:p-6">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-base sm:text-lg font-display font-semibold">Riwayat Pesanan</h2>
        <span class="pill"><%= orders.length %></span>
      </div>
      <% if (orders.length) { %>
        <div class="space-y-2 max-h-96 overflow-y-auto">
          <% orders.forEach(function(o){ %>
            <a href="/admin/orders/<%= o.id %>" class="block card-soft p-3 hover:bg-white/[0.06] transition">
              <div class="flex items-start justify-between gap-2 mb-1">
                <div class="font-medium text-sm truncate"><%= o.ea_name || o.ea_code || 'EA' %></div>
                <span class="pill <%= o.status==='approved' ? 'pill-green' : (o.status==='pending' ? 'pill-gold' : 'pill-red') %> shrink-0" style="font-size:9px;padding:2px 8px"><%= o.status %></span>
              </div>
              <div class="flex items-center justify-between text-xs gap-2">
                <span class="mono text-muted truncate"><%= o.code %></span>
                <span class="mono text-gold-200 font-medium shrink-0">Rp<%= Number(o.amount).toLocaleString('id-ID') %></span>
              </div>
              <div class="text-xs text-muted-2 mt-1"><%= new Date(o.created_at).toLocaleDateString('id-ID',{day:'2-digit',month:'short',year:'numeric'}) %></div>
            </a>
          <% }); %>
        </div>
      <% } else { %>
        <p class="text-sm text-muted text-center py-4">Belum ada pesanan</p>
      <% } %>
    </div>

    <!-- IB Requests -->
    <% if (ibRequests && ibRequests.length) { %>
      <div class="card p-5 sm:p-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-base sm:text-lg font-display font-semibold">🔑 Request IB</h2>
          <span class="pill"><%= ibRequests.length %></span>
        </div>
        <div class="space-y-2">
          <% ibRequests.forEach(function(r){ %>
            <a href="/admin/ib-requests/<%= r.id %>" class="block card-soft p-3 hover:bg-white/[0.06] transition">
              <div class="flex items-start justify-between gap-2">
                <div class="text-sm">
                  <%= r.broker_name %> · <span class="mono"><%= r.account_number %></span>
                </div>
                <span class="pill <%= r.status==='approved' ? 'pill-green' : (r.status==='pending' ? 'pill-gold' : 'pill-red') %> shrink-0" style="font-size:9px;padding:2px 8px"><%= r.status %></span>
              </div>
              <% if (r.activation_code) { %>
                <div class="text-xs text-gold-200 mono mt-1">Kode: <%= r.activation_code %></div>
              <% } %>
            </a>
          <% }); %>
        </div>
      </div>
    <% } %>

  </div>
</div>
