<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
    <div class="flex items-center justify-between">
      <div>
        <p class="text-sm text-gray-500">Total Revenue</p>
        <p class="text-2xl font-bold text-gray-800">₹<%= (typeof stats !== 'undefined' && stats.totalRevenue) ? parseFloat(stats.totalRevenue).toLocaleString('en-IN', { minimumFractionDigits: 2 }) : '0.00' %></p>
      </div>
      <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center"><i class="fas fa-rupee-sign text-green-600 text-xl"></i></div>
    </div>
  </div>
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
    <div class="flex items-center justify-between">
      <div>
        <p class="text-sm text-gray-500">Total Orders</p>
        <p class="text-2xl font-bold text-gray-800"><%= stats.totalOrders || 0 %></p>
      </div>
      <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center"><i class="fas fa-shopping-cart text-blue-600 text-xl"></i></div>
    </div>
  </div>
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
    <div class="flex items-center justify-between">
      <div>
        <p class="text-sm text-gray-500">Products</p>
        <p class="text-2xl font-bold text-gray-800"><%= stats.totalProducts || 0 %></p>
      </div>
      <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center"><i class="fas fa-box text-purple-600 text-xl"></i></div>
    </div>
  </div>
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
    <div class="flex items-center justify-between">
      <div>
        <p class="text-sm text-gray-500">Customers</p>
        <p class="text-2xl font-bold text-gray-800"><%= stats.totalCustomers || 0 %></p>
      </div>
      <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center"><i class="fas fa-users text-indigo-600 text-xl"></i></div>
    </div>
  </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
  <!-- Sales Chart -->
  <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-gray-200 p-6">
    <h2 class="font-semibold text-gray-800 mb-4">Sales (Last 30 Days)</h2>
    <canvas id="salesChart" height="250"></canvas>
  </div>

  <!-- Order Status -->
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
    <h2 class="font-semibold text-gray-800 mb-4">Order Status</h2>
    <div class="space-y-3">
      <div class="flex justify-between items-center"><span class="text-sm text-gray-600">Pending</span><span class="font-medium"><%= stats.pendingOrders || 0 %></span></div>
      <div class="flex justify-between items-center"><span class="text-sm text-gray-600">Processing</span><span class="font-medium"><%= stats.processingOrders || 0 %></span></div>
      <div class="flex justify-between items-center"><span class="text-sm text-gray-600">Shipped</span><span class="font-medium"><%= stats.shippedOrders || 0 %></span></div>
      <div class="flex justify-between items-center"><span class="text-sm text-gray-600">Delivered</span><span class="font-medium"><%= stats.deliveredOrders || 0 %></span></div>
      <div class="flex justify-between items-center"><span class="text-sm text-gray-600">Cancelled</span><span class="font-medium"><%= stats.cancelledOrders || 0 %></span></div>
    </div>
    <hr class="my-3">
    <div class="flex justify-between items-center text-sm">
      <span class="text-gray-600">Today Revenue</span>
      <span class="font-bold text-green-600">₹<%= parseFloat(stats.todayRevenue || 0).toFixed(2) %></span>
    </div>
    <div class="flex justify-between items-center text-sm mt-2">
      <span class="text-gray-600">This Month</span>
      <span class="font-bold text-indigo-600">₹<%= parseFloat(stats.monthRevenue || 0).toFixed(2) %></span>
    </div>
  </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
  <!-- Recent Orders -->
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
    <div class="flex justify-between items-center mb-4">
      <h2 class="font-semibold text-gray-800">Recent Orders</h2>
      <a href="/admin/orders" class="text-sm text-indigo-600 hover:underline">View All</a>
    </div>
    <% if (typeof recentOrders !== 'undefined' && recentOrders && recentOrders.length) { %>
      <div class="overflow-x-auto">
        <table class="w-full text-sm">
          <thead><tr class="text-left text-gray-500 border-b"><th class="pb-2 font-medium">Order</th><th class="pb-2 font-medium">Customer</th><th class="pb-2 font-medium">Status</th><th class="pb-2 font-medium text-right">Total</th></tr></thead>
          <tbody>
            <% recentOrders.forEach(function(order) { %>
              <tr class="border-b last:border-0">
                <td class="py-2"><a href="/admin/orders/<%= order.id %>" class="text-indigo-600 hover:underline">#<%= order.orderNumber %></a></td>
                <td class="py-2 text-gray-500"><%= order.shippingName || 'N/A' %></td>
                <td class="py-2"><span class="px-2 py-0.5 rounded-full text-xs font-medium <%= order.status === 'delivered' ? 'bg-green-100 text-green-700' : '' %><%= order.status === 'shipped' ? 'bg-blue-100 text-blue-700' : '' %><%= order.status === 'processing' ? 'bg-yellow-100 text-yellow-700' : '' %><%= order.status === 'pending' ? 'bg-gray-100 text-gray-700' : '' %><%= order.status === 'cancelled' ? 'bg-red-100 text-red-700' : '' %>"><%= order.status %></span></td>
                <td class="py-2 text-right font-medium">₹<%= parseFloat(order.total).toFixed(2) %></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    <% } else { %><p class="text-gray-400 text-center py-4">No orders yet.</p><% } %>
  </div>

  <!-- Low Stock -->
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
    <div class="flex justify-between items-center mb-4">
      <h2 class="font-semibold text-gray-800">Low Stock Products</h2>
      <a href="/admin/products" class="text-sm text-indigo-600 hover:underline">Manage</a>
    </div>
    <% if (typeof lowStock !== 'undefined' && lowStock && lowStock.length) { %>
      <div class="space-y-3">
        <% lowStock.forEach(function(product) { %>
          <div class="flex items-center justify-between">
            <div class="flex-1 min-w-0">
              <p class="text-sm font-medium text-gray-800 truncate"><%= product.name %></p>
              <p class="text-xs text-gray-500">SKU: <%= product.sku || 'N/A' %></p>
            </div>
            <span class="text-sm font-bold <%= product.stockQuantity <= 0 ? 'text-red-600' : 'text-yellow-600' %>"><%= product.stockQuantity %></span>
          </div>
        <% }) %>
      </div>
    <% } else { %><p class="text-gray-400 text-center py-4">All products well stocked.</p><% } %>
  </div>
</div>

<script>
  var salesData = <%- typeof salesChart !== 'undefined' ? salesChart : '[]' %>;
  if (salesData && salesData.length) {
    var ctx = document.getElementById('salesChart').getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: salesData.map(function(d) { return d.date; }),
        datasets: [{
          label: 'Revenue (₹)',
          data: salesData.map(function(d) { return d.revenue; }),
          borderColor: '#4f46e5',
          backgroundColor: 'rgba(79, 70, 229, 0.1)',
          fill: true,
          tension: 0.4,
        }],
      },
      options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: {
          y: { beginAtZero: true, ticks: { callback: function(v) { return '₹' + v; } } },
          x: { ticks: { maxTicksLimit: 10 } },
        },
      },
    });
  }
</script>
