<%- include('partials/head', { pageTitle: 'Status Order - ' + settings.storeName }) %>
<div class="app-container">
  <%- include('partials/header', { settings, activePage, currentUser: typeof currentUser !== 'undefined' ? currentUser : null }) %>

  <div class="status-page">
    <% if (error || !order) { %>
      <div class="status-icon failed"><i class="fa-solid fa-xmark"></i></div>
      <div class="status-title">Order Tidak Ditemukan</div>
      <div class="status-desc"><%= error || 'Order yang kamu cari tidak tersedia' %></div>
      <a href="/" class="btn-full-gold" style="display:flex;"><i class="fa-solid fa-house"></i> Kembali ke Home</a>

    <% } else if (order.status === 'paid') { %>
      <div class="status-icon success"><i class="fa-solid fa-check"></i></div>
      <div class="status-title">Pembayaran Berhasil!</div>
      <div class="status-desc">Key kamu sudah dikirim. Simpan key di bawah ini dengan baik.</div>

      <% order.deliveredKeys.forEach((key, idx) => { %>
        <div class="key-display-box">
          <div class="key-display-label">Key #<%= idx + 1 %> - <%= order.productName %></div>
          <div class="key-display-value"><%= key %></div>
        </div>
      <% }) %>

      <a href="/" class="btn-full-gold" style="display:flex; margin-top:16px;"><i class="fa-solid fa-house"></i> Kembali ke Home</a>

    <% } else if (order.status === 'pending' || order.status === 'processing') { %>
      <div class="status-icon pending"><i class="fa-solid fa-clock"></i></div>
      <div class="status-title">Menunggu Pembayaran</div>
      <div class="status-desc">Order #<%= order.orderId %> belum terkonfirmasi. Halaman ini akan otomatis update setelah pembayaran terverifikasi.</div>
      <button class="btn-full-gold" style="display:flex;" onclick="checkStatus()"><i class="fa-solid fa-rotate"></i> Cek Status Sekarang</button>

    <% } else { %>
      <div class="status-icon failed"><i class="fa-solid fa-xmark"></i></div>
      <div class="status-title">Pembayaran Gagal / Expired</div>
      <div class="status-desc">Order #<%= order.orderId %> tidak berhasil diproses. Silakan coba lagi.</div>
      <a href="/" class="btn-full-gold" style="display:flex;"><i class="fa-solid fa-house"></i> Kembali ke Home</a>
    <% } %>
  </div>

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

<% if (order && (order.status === 'pending' || order.status === 'processing')) { %>
<script>
  async function checkStatus() {
    try {
      const res = await fetch('/api/order/status/<%= order.orderId %>');
      const data = await res.json();
      if (data.success && data.status === 'paid') {
        window.location.reload();
      } else {
        alert('Pembayaran belum terkonfirmasi, coba lagi beberapa saat.');
      }
    } catch (err) {
      alert('Gagal cek status, coba lagi.');
    }
  }

  // Auto-check setiap 5 detik
  setInterval(checkStatus, 5000);
</script>
<% } %>
</body>
</html>
