<%- include('_head') %>
  <div class="stat-grid">
    <div class="stat-card"><b><%= stats.live %></b><span>Live products</span></div>
    <div class="stat-card"><b><%= stats.products %></b><span>Total products</span></div>
    <div class="stat-card"><b><%= money(stats.revenue) %></b><span>Revenue</span></div>
    <div class="stat-card"><b><%= stats.orders %></b><span>Orders</span></div>
    <div class="stat-card"><b><%= stats.pending %></b><span>Pending</span></div>
    <div class="stat-card"><b><%= stats.lowStock %></b><span>Low stock (≤5)</span></div>
    <div class="stat-card"><b><%= stats.customers %></b><span>Customers</span></div>
    <div class="stat-card"><b><%= stats.unreadMessages %></b><span>Unread messages</span></div>
  </div>

  <% if (unassigned > 0 || noPrice > 0) { %>
  <div class="panel" style="border:1px solid rgba(231,194,104,.4); background:rgba(231,194,104,.05);">
    <h3>Store setup checklist</h3>
    <p class="admin-hint" style="margin-bottom:12px;">Your 45 uploaded product images were imported automatically. Finalise them to make the store fully shoppable:</p>
    <ul style="list-style:none; display:grid; gap:8px; color:var(--ink-2); font-size:14px;">
      <li>✔ <%= unassigned %> product<%= unassigned === 1 ? '' : 's' %> still need a <a href="/admin/products?status=live" style="color:var(--gold-2); font-weight:700;">category</a> (Gadgets / Jewelry / Shoes / Fragrances)</li>
      <li>✔ <%= noPrice %> product<%= noPrice === 1 ? '' : 's' %> still need a <a href="/admin/products" style="color:var(--gold-2); font-weight:700;">price</a></li>
      <li>✔ Edit each product's name & description, then set stock</li>
    </ul>
    <div style="display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;">
      <a class="btn btn-gold btn-sm" href="/admin/products">Manage products</a>
      <a class="btn btn-dark btn-sm" href="/admin/settings">Store settings</a>
    </div>
  </div>
  <% } %>

  <div class="panel">
    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:12px; flex-wrap:wrap;">
      <h3 style="margin-bottom:0;">Recent orders</h3>
      <a class="btn btn-dark btn-sm" href="/admin/orders">View all</a>
    </div>
    <div style="overflow-x:auto;">
      <table class="table">
        <thead><tr><th>Order</th><th>Customer</th><th>Total</th><th>Payment</th><th>Status</th><th>Date</th><th></th></tr></thead>
        <tbody>
          <% if (recentOrders.length) { recentOrders.forEach(function(o){ %>
            <tr>
              <td><b><%= o.order_number %></b></td>
              <td><%= o.name %></td>
              <td><b><%= money(o.total) %></b></td>
              <td><span class="status-tag st-<%= o.payment_status %>"><%= o.payment_status %></span></td>
              <td><span class="status-tag st-<%= o.status %>"><%= o.status %></span></td>
              <td style="color:var(--muted);"><%= new Date(o.created_at + 'Z').toLocaleDateString() %></td>
              <td><a class="btn btn-dark btn-sm" href="/admin/orders/<%= o.id %>">Manage</a></td>
            </tr>
          <% }); } else { %>
            <tr><td colspan="7" style="color:var(--muted); text-align:center; padding:26px;">No orders yet — they'll appear here.</td></tr>
          <% } %>
        </tbody>
      </table>
    </div>
  </div>
<%- include('_foot') %>
