<a href="/admin/orders" class="text-sm text-muted hover:text-white inline-flex items-center gap-2 mb-6">
  <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 pesanan
</a>

<div class="flex items-center justify-between flex-wrap gap-4 mb-8">
  <div>
    <div class="text-sm text-muted mono"><%= order.code %></div>
    <h1 class="text-3xl font-display font-semibold mt-1"><%= order.ea_name %></h1>
  </div>
  <span class="pill text-base px-5 py-2 <%= order.status==='approved' ? 'pill-green' : (order.status==='pending' ? 'pill-gold' : 'pill-red') %>">
    <%= order.status.toUpperCase() %>
  </span>
</div>

<div class="grid lg:grid-cols-[1.2fr_1fr] gap-6">
  <div class="space-y-4">
    <!-- Detail pesanan -->
    <div class="card p-6">
      <h2 class="text-lg font-display font-semibold mb-5">Detail Pesanan</h2>
      <dl class="grid grid-cols-2 gap-y-4 gap-x-6 text-sm">
        <dt class="text-muted">Member</dt>
        <dd class="text-right"><div class="font-medium"><%= order.user_name %></div><div class="text-xs text-muted-2"><%= order.user_email %></div></dd>

        <dt class="text-muted">No. WhatsApp</dt>
        <dd class="text-right mono"><%= order.user_phone || '-' %></dd>

        <dt class="text-muted">EA</dt>
        <dd class="text-right"><span class="pill pill-gold"><%= order.ea_code %></span> <%= order.ea_name %></dd>

        <dt class="text-muted">Total</dt>
        <dd class="text-right text-gold-200 font-medium mono">Rp<%= Number(order.amount).toLocaleString('id-ID') %></dd>

        <dt class="text-muted">Metode Bayar</dt>
        <dd class="text-right"><%= order.payment_method || '-' %></dd>

        <dt class="text-muted">Tanggal Order</dt>
        <dd class="text-right text-sm"><%= new Date(order.created_at).toLocaleString('id-ID') %></dd>

        <% if (order.approved_at) { %>
          <dt class="text-muted">Diproses pada</dt>
          <dd class="text-right text-sm"><%= new Date(order.approved_at).toLocaleString('id-ID') %></dd>
        <% } %>
      </dl>

      <!-- License & Akun (highlight section untuk admin) -->
      <div class="mt-5 pt-5 border-t border-white/5">
        <div class="text-sm font-medium mb-3 flex items-center gap-2">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4 text-gold-300"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
          Lisensi & Akun Broker
        </div>

        <% const lockLabels = {
          account_number: { label: 'Lock ke Nomor Akun', cls: 'pill-gold', icon: '🔒' },
          account_name:   { label: 'Lock ke Nama Akun', cls: 'pill-gold', icon: '🔒' },
          account_full:   { label: 'Lock ke Nama + Nomor', cls: 'pill-gold', icon: '🔒' },
          server:         { label: 'Lock ke Server Broker', cls: 'pill-blue', icon: '🔒' },
          none:           { label: 'Tanpa Lock', cls: 'pill-red', icon: '🔓' },
        };
        const lk = lockLabels[order.license_lock] || lockLabels.account_number; %>

        <div class="card-soft p-4 space-y-2.5">
          <div class="flex items-center gap-2">
            <span class="pill <%= lk.cls %>"><%= lk.icon %> <%= lk.label %></span>
            <span class="pill"><%= order.platform %></span>
          </div>
          <div class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm pt-2">
            <div>
              <div class="text-xs text-muted">Nomor Akun</div>
              <div class="mono text-gold-200 mt-0.5"><%= order.broker_account || '—' %></div>
            </div>
            <div>
              <div class="text-xs text-muted">Nama Akun</div>
              <div class="mt-0.5"><%= order.account_name || '—' %></div>
            </div>
            <div class="col-span-2">
              <div class="text-xs text-muted">Server Broker</div>
              <div class="mono text-sm mt-0.5"><%= order.broker_server || '—' %></div>
            </div>
          </div>
        </div>
      </div>

      <% if (order.notes) { %>
        <div class="mt-5 pt-5 border-t border-white/5">
          <div class="text-sm text-muted mb-1">Catatan dari member:</div>
          <div class="text-sm card-soft p-3"><%= order.notes %></div>
        </div>
      <% } %>

      <% if (order.admin_note) { %>
        <div class="mt-4">
          <div class="text-sm text-muted mb-1">Catatan admin:</div>
          <div class="text-sm card-soft p-3"><%= order.admin_note %></div>
        </div>
      <% } %>
    </div>

    <!-- Bukti bayar -->
    <div class="card p-6">
      <h2 class="text-lg font-display font-semibold mb-4">Bukti Pembayaran</h2>
      <% if (order.payment_proof) { %>
        <% const ext = order.payment_proof.split('.').pop().toLowerCase(); %>
        <% if (['jpg','jpeg','png','webp'].includes(ext)) { %>
          <a href="<%= order.payment_proof %>" target="_blank" class="block">
            <img src="<%= order.payment_proof %>" alt="Bukti bayar" class="rounded-2xl max-h-[420px] mx-auto border border-white/10" />
          </a>
        <% } else { %>
          <a href="<%= order.payment_proof %>" target="_blank" class="btn btn-outline rounded-full px-5 py-2.5 text-sm inline-flex">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/><path d="M12 15V3"/></svg>
            Buka File Bukti (PDF)
          </a>
        <% } %>
      <% } else { %>
        <p class="text-muted text-sm">Tidak ada bukti diupload.</p>
      <% } %>
    </div>
  </div>

  <!-- Action panel -->
  <aside class="space-y-4">
    <% if (order.status === 'pending') { %>
      <div class="card p-6">
        <h3 class="font-display font-semibold text-lg mb-4 text-emerald-300">Setujui Pesanan</h3>

        <form action="/admin/orders/<%= order.id %>/approve" method="post" enctype="multipart/form-data" class="needs-confirm space-y-4" data-confirm="Setujui pesanan ini dan kirim email ke member?">

          <!-- File selector -->
          <div>
            <label class="text-sm text-muted block mb-2">File yang dikirim ke pembeli</label>

            <div class="space-y-2">
              <!-- Mode 1: Default EA file (general) -->
              <label class="flex items-start gap-3 card-soft p-3 cursor-pointer hover:bg-white/[0.05] transition <%= !order.file_path ? 'opacity-50' : '' %>">
                <input type="radio" name="file_source" value="default" class="mt-1 accent-gold-400" <%= order.file_path ? 'checked' : 'disabled' %> />
                <div class="flex-1 min-w-0">
                  <div class="text-sm font-medium flex items-center gap-2">
                    <i style="font-size:13px">📦</i> File general EA
                  </div>
                  <% if (order.file_path) { %>
                    <div class="text-xs text-emerald-300 mt-1 truncate">✓ <%= order.file_original || order.file_path.split('/').pop() %></div>
                  <% } else { %>
                    <div class="text-xs text-red-300 mt-1">⚠ EA ini belum punya file general. <a href="/admin/eas/<%= order.ea_id %>/edit" class="underline">Upload</a> atau pilih opsi lain.</div>
                  <% } %>
                </div>
              </label>

              <!-- Mode 2: MT4 file dari EA ini -->
              <% if (order.file_mt4_path) { %>
                <label class="flex items-start gap-3 card-soft p-3 cursor-pointer hover:bg-white/[0.05] transition">
                  <input type="radio" name="file_source" value="mt4" class="mt-1 accent-gold-400" <%= order.platform === 'MT4' && order.file_mt4_path ? 'checked' : '' %> />
                  <div class="flex-1 min-w-0">
                    <div class="text-sm font-medium flex items-center gap-2">
                      <i style="font-size:13px">🟦</i> File MT4 dari EA ini
                    </div>
                    <div class="text-xs text-emerald-300 mt-1 truncate">✓ <%= order.file_mt4_original || order.file_mt4_path.split('/').pop() %></div>
                  </div>
                </label>
              <% } %>

              <!-- Mode 3: MT5 file dari EA ini -->
              <% if (order.file_mt5_path) { %>
                <label class="flex items-start gap-3 card-soft p-3 cursor-pointer hover:bg-white/[0.05] transition">
                  <input type="radio" name="file_source" value="mt5" class="mt-1 accent-gold-400" <%= order.platform === 'MT5' && order.file_mt5_path ? 'checked' : '' %> />
                  <div class="flex-1 min-w-0">
                    <div class="text-sm font-medium flex items-center gap-2">
                      <i style="font-size:13px">🟩</i> File MT5 dari EA ini
                    </div>
                    <div class="text-xs text-emerald-300 mt-1 truncate">✓ <%= order.file_mt5_original || order.file_mt5_path.split('/').pop() %></div>
                  </div>
                </label>
              <% } %>

              <!-- Mode 4: Pilih dari EA lain -->
              <% if (filesLibrary && filesLibrary.length) { %>
                <label class="flex items-start gap-3 card-soft p-3 cursor-pointer hover:bg-white/[0.05] transition">
                  <input type="radio" name="file_source" value="other" class="mt-1 accent-gold-400" onchange="document.getElementById('other-ea-picker').classList.toggle('hidden', !this.checked)" />
                  <div class="flex-1 min-w-0">
                    <div class="text-sm font-medium flex items-center gap-2">
                      <i style="font-size:13px">📚</i> Pilih dari file EA lain
                    </div>
                    <div class="text-xs text-muted mt-1">Kirim file dari produk lain (misal bonus / cross-sell)</div>
                    <div id="other-ea-picker" class="hidden mt-2.5 space-y-2">
                      <select name="other_ea_id" class="input text-sm">
                        <option value="">— Pilih EA —</option>
                        <% filesLibrary.forEach(function(f){ %>
                          <option value="<%= f.id %>"><%= f.code %> — <%= f.name %></option>
                        <% }); %>
                      </select>
                      <select name="other_ea_platform" class="input text-sm">
                        <option value="default">Pakai file general EA itu</option>
                        <option value="mt4">Pakai file MT4-nya</option>
                        <option value="mt5">Pakai file MT5-nya</option>
                      </select>
                    </div>
                  </div>
                </label>
              <% } %>

              <!-- Mode 5: Upload baru -->
              <label class="flex items-start gap-3 card-soft p-3 cursor-pointer hover:bg-white/[0.05] transition">
                <input type="radio" name="file_source" value="upload" class="mt-1 accent-gold-400" onchange="document.getElementById('ad-hoc-upload').classList.toggle('hidden', !this.checked)" <%= !order.file_path && !order.file_mt4_path && !order.file_mt5_path ? 'checked' : '' %> />
                <div class="flex-1 min-w-0">
                  <div class="text-sm font-medium flex items-center gap-2">
                    <i style="font-size:13px">⬆️</i> Upload file baru
                  </div>
                  <div class="text-xs text-muted mt-1">Kirim file khusus untuk order ini (versi custom akun broker, dll)</div>
                  <input type="file" name="ad_hoc_file" id="ad-hoc-upload" class="input mt-2.5 cursor-pointer text-sm <%= order.file_path || order.file_mt4_path || order.file_mt5_path ? 'hidden' : '' %>" />
                </div>
              </label>
            </div>
          </div>

          <!-- Catatan -->
          <div>
            <label class="text-sm text-muted">Catatan untuk member (opsional)</label>
            <textarea name="admin_note" rows="3" class="input mt-2" placeholder="Misal: EA sudah diset untuk akun MT5 Real Anda..."></textarea>
          </div>

          <button class="btn btn-gold w-full h-11 rounded-full">
            ✓ Approve & Kirim Email
          </button>
        </form>
      </div>

      <div class="card p-6">
        <h3 class="font-display font-semibold text-lg mb-4 text-red-300">Tolak Pesanan</h3>
        <form action="/admin/orders/<%= order.id %>/reject" method="post" class="needs-confirm space-y-3" data-confirm="Tolak pesanan ini?">
          <label class="text-sm text-muted">Alasan penolakan <span class="text-red-400">*</span></label>
          <textarea name="admin_note" rows="3" class="input" placeholder="Misal: Bukti bayar tidak valid / nominal tidak sesuai" required></textarea>
          <button class="btn btn-outline w-full h-11 rounded-full border-red-400/40 text-red-300 hover:bg-red-500/10">
            ✕ Reject & Kirim Email
          </button>
        </form>
      </div>
    <% } else { %>
      <div class="card p-6">
        <h3 class="font-display font-semibold mb-2">Status Final</h3>
        <p class="text-sm text-muted">Pesanan ini sudah diproses pada <%= order.approved_at ? new Date(order.approved_at).toLocaleString('id-ID') : '-' %>.</p>
        <% if (order.status === 'approved') { %>
          <% if (order.delivered_file_label) { %>
            <div class="mt-4 card-soft p-3">
              <div class="text-xs text-muted">File yang dikirim:</div>
              <div class="text-sm text-emerald-300 mt-1 truncate">📦 <%= order.delivered_file_label %></div>
              <% if (order.delivered_file) { %>
                <div class="text-xs text-muted-2 mt-1 mono truncate"><%= order.delivered_file %></div>
              <% } %>
            </div>
          <% } %>
          <div class="mt-3 text-sm text-emerald-300">✓ Email sudah dikirim ke member.</div>
        <% } %>
      </div>
    <% } %>

    <a href="/admin/eas/<%= order.ea_id %>/edit" class="card p-5 block hover:bg-white/[0.06] transition">
      <div class="text-sm text-muted">Cek/Edit EA</div>
      <div class="font-medium mt-1"><%= order.ea_name %></div>
    </a>
  </aside>
</div>
