<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ventas | Trokkmart</title>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Outfit:wght@600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="/css/estilos.css" />
</head>
<body>
  <%- include('partials/nav', { activo: 'estadisticas' }) %>

  <main class="page">
    <div class="page-head">
      <div>
        <h1>Ventas</h1>
        <p class="page-sub">Solo cuenta como venta un pedido con el pago ya confirmado.</p>
      </div>
    </div>

    <div class="kpi-grid" style="margin-bottom: 1.6rem;">
      <div class="kpi-tile">
        <div class="kpi-label">Hoy</div>
        <div class="kpi-valor">$<%= ventasHoy %></div>
      </div>
      <div class="kpi-tile">
        <div class="kpi-label">Últimos 7 días</div>
        <div class="kpi-valor">$<%= ventasSemana %></div>
      </div>
      <div class="kpi-tile">
        <div class="kpi-label">Este mes</div>
        <div class="kpi-valor">$<%= ventasMes %></div>
      </div>
      <div class="kpi-tile">
        <div class="kpi-label">Total histórico</div>
        <div class="kpi-valor">$<%= totalVentas %></div>
      </div>
    </div>

    <div class="split-2" style="margin-bottom: 1.6rem;">
      <div class="card">
        <h3 style="font-family: var(--font-display); margin-top:0; font-size: 1rem;">Últimos 7 días</h3>
        <% if (Number(totalVentas) === 0) { %>
          <p class="page-sub">Todavía no hay ventas confirmadas.</p>
        <% } else { %>
          <div class="barras-dias">
            <% dias.forEach(function (d) { %>
              <div class="dia-col">
                <span class="dia-monto"><%= d.total > 0 ? '$' + d.total.toFixed(0) : '' %></span>
                <div class="dia-barra" style="height: <%= Math.max(3, Math.round((d.total / maxDia) * 100)) %>%;"></div>
                <span class="dia-etiqueta"><%= d.etiqueta %></span>
              </div>
            <% }) %>
          </div>
        <% } %>
      </div>

      <div class="card">
        <h3 style="font-family: var(--font-display); margin-top:0; font-size: 1rem;">Productos más vendidos</h3>
        <% if (topProductos.length === 0) { %>
          <p class="page-sub">Todavía no hay ventas confirmadas.</p>
        <% } else { %>
          <% topProductos.forEach(function (p) { %>
            <div class="barra-horizontal">
              <span class="barra-etiqueta"><%= p.nombre %></span>
              <div class="barra-track"><div class="barra-fill" style="width: <%= Math.round((p.cantidad / maxCantidadTop) * 100) %>%;"></div></div>
              <span class="barra-valor"><%= p.cantidad %> und.</span>
            </div>
          <% }) %>
        <% } %>
      </div>
    </div>

    <div class="card">
      <h3 style="font-family: var(--font-display); margin-top:0; font-size: 1rem;">Pedidos por estado (<%= totalPedidos %> en total)</h3>
      <div style="display:flex; gap:0.6rem; flex-wrap:wrap;">
        <% ["pendiente_pago", "pago_confirmado", "embalando", "enviado", "entregado", "cancelado"].forEach(function (estado) { %>
          <a href="/panel/pedidos?estado=<%= estado %>" class="card-mini" style="text-decoration:none; min-width: 130px;">
            <h3 style="font-size: 1.3rem;"><%= conteoPorEstado[estado] || 0 %></h3>
            <p><%= estado.replace('_',' ') %></p>
          </a>
        <% }) %>
      </div>
    </div>
  </main>
</body>
</html>
