<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">
    <p class="text-sm text-gray-500">Total Revenue</p>
    <p class="text-2xl font-bold text-gray-800">₹<%= parseFloat(stats.totalRevenue || 0).toLocaleString('en-IN', { minimumFractionDigits: 2 }) %></p>
  </div>
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
    <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="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
    <p class="text-sm text-gray-500">Today Revenue</p>
    <p class="text-2xl font-bold text-green-600">₹<%= parseFloat(stats.todayRevenue || 0).toFixed(2) %></p>
  </div>
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
    <p class="text-sm text-gray-500">This Month</p>
    <p class="text-2xl font-bold text-indigo-600">₹<%= parseFloat(stats.monthRevenue || 0).toFixed(2) %></p>
  </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
    <h2 class="font-semibold text-gray-800 mb-4">Sales Chart (30 Days)</h2>
    <canvas id="salesChart" height="250"></canvas>
  </div>
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
    <h2 class="font-semibold text-gray-800 mb-4">Top Selling Products</h2>
    <% if (typeof topProducts !== 'undefined' && topProducts && topProducts.length) { %>
      <div class="space-y-3">
        <% topProducts.forEach(function(p, i) { %>
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
              <span class="text-sm font-bold text-gray-400 w-6">#<%= i + 1 %></span>
              <span class="text-sm font-medium text-gray-800"><%= p.productName %></span>
            </div>
            <div class="text-right">
              <span class="text-sm font-medium"><%= p.totalSold || 0 %> sold</span>
              <span class="text-sm text-gray-500 ml-3">₹<%= parseFloat(p.totalRevenue || 0).toFixed(2) %></span>
            </div>
          </div>
        <% }) %>
      </div>
    <% } else { %><p class="text-gray-400 text-center py-4">No data yet.</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>
