<%- include('partials/head', { pageTitle: 'Akun Saya - ' + settings.storeName }) %>
<div class="app-container">
  <%- include('partials/header', { settings, activePage, currentUser }) %>

  <div class="static-page">
    <div style="display:flex; align-items:center; gap:14px; margin-bottom:24px;">
      <div style="width:56px; height:56px; border-radius:50%; background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep)); display:flex; align-items:center; justify-content:center; font-size:22px; color:#1a1305; overflow:hidden;">
        <% if (currentUser.avatar) { %>
          <img src="<%= currentUser.avatar %>" alt="" style="width:100%; height:100%; object-fit:cover;">
        <% } else { %>
          <i class="fa-solid fa-user"></i>
        <% } %>
      </div>
      <div>
        <div style="font-weight:800; font-size:16px;"><%= currentUser.name %></div>
        <div style="font-size:12px; color:var(--text-muted);"><%= currentUser.email %></div>
      </div>
    </div>

    <h1 style="font-size:16px; margin-bottom:14px;"><i class="fa-solid fa-receipt"></i> Riwayat Pembelian</h1>

    <% if (orders.length === 0) { %>
      <div class="empty-state">
        <i class="fa-solid fa-box-open"></i>
        <p>Belum ada riwayat pembelian</p>
      </div>
    <% } else { %>
      <% orders.forEach(order => { %>
        <div class="faq-item">
          <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:8px;">
            <div>
              <div style="font-weight:700; font-size:14px;"><%= order.productName %><% if (order.variantLabel) { %> <span style="color:var(--text-muted); font-weight:500;">(<%= order.variantLabel %>)</span><% } %></div>
              <div style="font-size:11px; color:var(--text-muted);"><%= order.orderId %></div>
            </div>
            <span class="product-badge" style="
              <% if (order.status === 'paid') { %> color: var(--success); border-color: var(--success); background: rgba(34,197,94,0.1);
              <% } else if (order.status === 'pending' || order.status === 'processing') { %> color: var(--warning); border-color: var(--warning); background: rgba(245,158,11,0.1);
              <% } else { %> color: var(--danger); border-color: var(--danger); background: rgba(239,68,68,0.1);
              <% } %>
            "><%= order.status === 'paid' ? 'paid' : (order.status === 'pending' || order.status === 'processing') ? 'pending' : order.status %></span>
          </div>
          <div style="font-size:12px; color:var(--text-secondary); margin-bottom:8px;">
            Qty: <%= order.qty %> &bull; Total: Rp <%= order.totalAmount.toLocaleString('id-ID') %>
          </div>
          <% if (order.deliveredKeys && order.deliveredKeys.length > 0) { %>
            <% order.deliveredKeys.forEach(key => { %>
              <div class="key-display-box" style="margin-bottom:8px; padding:10px 12px;">
                <div class="key-display-value" style="font-size:13px;"><%= key %></div>
              </div>
            <% }) %>
          <% } %>
        </div>
      <% }) %>
    <% } %>

    <form action="/logout" method="POST" style="margin-top:24px;">
      <button type="submit" class="btn-back-step">
        <i class="fa-solid fa-right-from-bracket"></i> Logout
      </button>
    </form>
  </div>

  <%- include('partials/footer', { settings }) %>
</div>
</body>
</html>
