<!DOCTYPE html>
<html lang="en">
<head>
  <title><%= title %></title>
  <%- include('partials/head') %>
</head>
<body class="bg-background text-on-surface selection:bg-primary-fixed">
<%- include('partials/sidebar') %>
<%- include('partials/flash') %>

<div class="ml-64 min-h-screen flex flex-col">
  <%- include('partials/topbar') %>

  <main class="p-8 lg:p-12 flex-1">
    <!-- Header -->
    <header class="mb-12">
      <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-10">
        <div>
          <h1 class="text-4xl font-extrabold tracking-tight text-on-surface mb-2 font-headline">Merchant Overview</h1>
          <p class="text-on-surface-variant text-lg">
            Welcome back, <span class="text-primary font-bold"><%= merchant ? merchant.full_name.split(' ')[0] : 'Merchant' %></span>.
            Here's how your store is performing.
          </p>
        </div>
        <div class="flex gap-4">
          <button class="bg-surface-container-lowest border border-outline-variant/20 px-4 py-2 rounded-lg flex items-center gap-2 text-sm font-semibold shadow-sm hover:bg-surface-container-high transition-colors">
            <span class="material-symbols-outlined text-sm">calendar_today</span>
            Last 30 Days
          </button>
          <button class="bg-primary text-on-primary px-6 py-2 rounded-lg font-bold shadow-lg shadow-primary/20 hover:scale-[1.02] transition-transform active:scale-95 text-sm">
            Download Report
          </button>
        </div>
      </div>

      <!-- KPI Bento Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-surface-container-lowest p-6 rounded-xl border border-outline-variant/10 shadow-sm">
          <div class="flex items-center justify-between mb-4">
            <span class="text-xs font-bold text-on-surface-variant uppercase tracking-wider">Total Sales</span>
            <div class="w-8 h-8 rounded-full bg-primary-fixed flex items-center justify-center text-primary">
              <span class="material-symbols-outlined text-lg">payments</span>
            </div>
          </div>
          <div class="text-3xl font-black text-on-surface">$<%= parseFloat(metrics.total_sales || 0).toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></div>
          <div class="flex items-center gap-1 mt-2 text-primary text-sm font-bold">
            <span class="material-symbols-outlined text-sm">trending_up</span>+8.2%
          </div>
        </div>
        <div class="bg-surface-container-lowest p-6 rounded-xl border border-outline-variant/10 shadow-sm">
          <div class="flex items-center justify-between mb-4">
            <span class="text-xs font-bold text-on-surface-variant uppercase tracking-wider">Orders</span>
            <div class="w-8 h-8 rounded-full bg-secondary-container flex items-center justify-center text-secondary">
              <span class="material-symbols-outlined text-lg">shopping_bag</span>
            </div>
          </div>
          <div class="text-3xl font-black text-on-surface"><%= metrics.total_orders || 0 %></div>
          <div class="flex items-center gap-1 mt-2 text-primary text-sm font-bold">
            <span class="material-symbols-outlined text-sm">trending_up</span>+14.5%
          </div>
        </div>
        <div class="bg-surface-container-lowest p-6 rounded-xl border border-outline-variant/10 shadow-sm">
          <div class="flex items-center justify-between mb-4">
            <span class="text-xs font-bold text-on-surface-variant uppercase tracking-wider">Sessions</span>
            <div class="w-8 h-8 rounded-full bg-tertiary-fixed flex items-center justify-center text-tertiary">
              <span class="material-symbols-outlined text-lg">visibility</span>
            </div>
          </div>
          <div class="text-3xl font-black text-on-surface"><%= (total_sessions || 0).toLocaleString() %></div>
          <div class="flex items-center gap-1 mt-2 text-tertiary text-sm font-bold">
            <span class="material-symbols-outlined text-sm">trending_down</span>-2.1%
          </div>
        </div>
        <div class="bg-surface-container-lowest p-6 rounded-xl border border-outline-variant/10 shadow-sm">
          <div class="flex items-center justify-between mb-4">
            <span class="text-xs font-bold text-on-surface-variant uppercase tracking-wider">Avg. Value</span>
            <div class="w-8 h-8 rounded-full bg-primary-fixed flex items-center justify-center text-primary">
              <span class="material-symbols-outlined text-lg">analytics</span>
            </div>
          </div>
          <div class="text-3xl font-black text-on-surface">$<%= parseFloat(metrics.avg_order_value || 0).toFixed(2) %></div>
          <div class="flex items-center gap-1 mt-2 text-primary text-sm font-bold">
            <span class="material-symbols-outlined text-sm">trending_up</span>+3.4%
          </div>
        </div>
      </div>
    </header>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- Sales Chart + Recent Orders -->
      <section class="lg:col-span-2 space-y-8">
        <div class="bg-surface-container-lowest p-8 rounded-2xl shadow-sm border border-outline-variant/10">
          <div class="flex items-center justify-between mb-8">
            <div>
              <h3 class="text-xl font-bold font-headline">Sales Performance</h3>
              <p class="text-sm text-on-surface-variant">Weekly gross sales</p>
            </div>
            <div class="flex items-center gap-6">
              <div class="flex items-center gap-2">
                <div class="w-3 h-3 rounded-full bg-primary"></div>
                <span class="text-xs font-medium">This Week</span>
              </div>
            </div>
          </div>
          <!-- Dynamic bar chart -->
          <div class="w-full h-64 flex items-end justify-between gap-2 pt-4" id="sales-chart">
            <% const days = ['MON','TUE','WED','THU','FRI','SAT','SUN']; %>
            <% const chartMax = weeklyData.length > 0 ? Math.max(...weeklyData.map(d => parseFloat(d.sales))) : 1000; %>
            <% days.forEach(function(day, i) { %>
            <%   const dataPoint = weeklyData[i]; %>
            <%   const height = dataPoint ? Math.max(8, Math.round((parseFloat(dataPoint.sales) / chartMax) * 100)) : Math.floor(Math.random()*50+10); %>
            <div class="flex-1 flex flex-col items-center gap-2">
              <div class="w-full rounded-t-lg transition-colors hover:bg-primary cursor-pointer <%= i === weeklyData.length-1 ? 'bg-primary' : 'bg-surface-container-low hover:bg-primary/40' %>"
                style="height:<%= height %>%;"
                title="<%= dataPoint ? '$'+parseFloat(dataPoint.sales).toFixed(2) : '' %>"></div>
              <span class="text-[10px] font-bold text-on-surface-variant"><%= day %></span>
            </div>
            <% }) %>
          </div>
        </div>

        <!-- Recent Orders Table -->
        <div class="bg-surface-container-lowest rounded-2xl shadow-sm overflow-hidden border border-outline-variant/10">
          <div class="p-6 flex items-center justify-between border-b border-surface-container">
            <h3 class="text-xl font-bold font-headline">Recent Orders</h3>
            <a class="text-primary text-sm font-bold hover:underline" href="/orders">View All</a>
          </div>
          <div class="overflow-x-auto">
            <table class="w-full text-left">
              <thead>
                <tr class="bg-surface-container-low">
                  <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Order ID</th>
                  <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Customer</th>
                  <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Status</th>
                  <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider text-right">Total</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-surface-container">
                <% if (recentOrders.length === 0) { %>
                <tr><td colspan="4" class="px-6 py-8 text-center text-on-surface-variant">No orders yet.</td></tr>
                <% } %>
                <% recentOrders.forEach(function(order) { %>
                <tr class="hover:bg-surface-container-low transition-colors group">
                  <td class="px-6 py-5 font-bold text-sm text-on-surface"><%= order.order_number %></td>
                  <td class="px-6 py-5">
                    <div class="flex items-center gap-3">
                      <div class="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center text-xs font-bold text-primary">
                        <%= (order.customer_name || 'U').charAt(0) %>
                      </div>
                      <span class="text-sm font-medium"><%= order.customer_name || 'Unknown' %></span>
                    </div>
                  </td>
                  <td class="px-6 py-5">
                    <% if (order.payment_status === 'paid') { %>
                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase bg-primary-fixed text-on-primary-fixed-variant">Fulfilled</span>
                    <% } else if (order.payment_status === 'pending') { %>
                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase bg-tertiary-fixed text-on-tertiary-fixed-variant">Pending</span>
                    <% } else { %>
                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase bg-secondary-container text-on-secondary-container"><%= order.payment_status %></span>
                    <% } %>
                  </td>
                  <td class="px-6 py-5 text-right font-bold text-sm">$<%= parseFloat(order.total).toFixed(2) %></td>
                </tr>
                <% }) %>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <!-- Right Sidebar -->
      <aside class="space-y-8">
        <!-- Insights -->
        <div class="bg-primary/5 p-6 rounded-2xl border border-primary/10 relative overflow-hidden">
          <div class="absolute top-0 right-0 p-4 opacity-10">
            <span class="material-symbols-outlined text-6xl">tips_and_updates</span>
          </div>
          <h3 class="text-lg font-bold font-headline text-primary mb-4">Merchant Insights</h3>
          <div class="space-y-4">
            <div class="bg-white p-4 rounded-xl shadow-sm">
              <h4 class="text-sm font-bold mb-1">Stock Alert: Top Product</h4>
              <p class="text-xs text-on-surface-variant">Your top-selling item is running low. Reorder soon to avoid lost sales.</p>
              <a href="/products" class="mt-3 text-primary text-xs font-bold flex items-center gap-1 group hover:gap-2 transition-all">
                Manage Inventory <span class="material-symbols-outlined text-sm">arrow_forward</span>
              </a>
            </div>
            <div class="bg-white p-4 rounded-xl shadow-sm">
              <h4 class="text-sm font-bold mb-1">Abandoned Cart Growth</h4>
              <p class="text-xs text-on-surface-variant">Carts are being abandoned at checkout. Consider offering free shipping over $100.</p>
              <a href="/marketing" class="mt-3 text-primary text-xs font-bold flex items-center gap-1 group hover:gap-2 transition-all">
                Apply Promotion <span class="material-symbols-outlined text-sm">arrow_forward</span>
              </a>
            </div>
          </div>
        </div>

        <!-- Top Selling -->
        <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/10">
          <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-bold font-headline">Top Selling</h3>
            <a href="/products" class="text-on-surface-variant hover:text-primary transition-colors">
              <span class="material-symbols-outlined">more_horiz</span>
            </a>
          </div>
          <div class="space-y-6">
            <% if (topProducts.length === 0) { %>
            <p class="text-sm text-on-surface-variant text-center py-4">No product data yet.</p>
            <% } %>
            <% topProducts.forEach(function(p) { %>
            <div class="flex items-center gap-4">
              <div class="w-12 h-12 rounded-lg bg-surface-container flex items-center justify-center">
                <span class="material-symbols-outlined text-on-surface-variant">inventory_2</span>
              </div>
              <div class="flex-1 min-w-0">
                <h4 class="text-sm font-bold truncate"><%= p.title %></h4>
                <p class="text-[10px] text-on-surface-variant uppercase font-bold tracking-wider"><%= p.units_sold || 0 %> Sold</p>
              </div>
              <div class="text-right">
                <div class="text-sm font-bold text-primary">$<%= parseFloat(p.price || 0).toFixed(2) %></div>
              </div>
            </div>
            <% }) %>
          </div>
        </div>

        <!-- Upgrade Card -->
        <div class="bg-inverse-surface rounded-2xl p-6 text-inverse-on-surface relative overflow-hidden group">
          <div class="absolute -right-8 -bottom-8 w-32 h-32 bg-primary rounded-full blur-3xl opacity-20 group-hover:opacity-40 transition-opacity"></div>
          <h3 class="text-lg font-bold font-headline mb-2">Upgrade to Pro</h3>
          <p class="text-sm opacity-80 mb-6">Unlock advanced analytics and custom reporting.</p>
          <a href="/pricing" class="block w-full bg-white text-on-surface py-3 rounded-xl font-bold text-sm text-center hover:bg-primary-fixed transition-colors active:scale-95">
            Upgrade Now
          </a>
        </div>
      </aside>
    </div>
  </main>

  <!-- Footer -->
  <footer class="py-8 px-8 flex flex-col md:flex-row justify-between items-center gap-4 border-t border-slate-100 bg-white mt-12">
    <div class="text-lg font-bold text-emerald-900 font-headline">Atrium Merchant</div>
    <div class="flex flex-wrap justify-center gap-6">
      <a href="#" class="text-xs text-slate-500 hover:text-slate-800">Privacy Policy</a>
      <a href="#" class="text-xs text-slate-500 hover:text-slate-800">Terms of Service</a>
      <a href="#" class="text-xs text-slate-500 hover:text-slate-800">Contact Support</a>
    </div>
    <div class="text-xs text-slate-500">© 2024 Atrium Commerce Inc.</div>
  </footer>
</div>
</body>
</html>
