<%- include('partials/head', {
  title,
  pageTitle: 'Visão geral',
  sectionLabel: 'Painel',
  active: 'dashboard'
}) %>

<% if (usingDefaultAdminPassword) { %>
<div class="admin-warning">
  <%- icon('alert') %>
  <span>O painel está usando a senha padrão. Defina <strong>ADMIN_PASSWORD</strong> e <strong>SESSION_SECRET</strong> nas variáveis de ambiente do servidor antes de publicar o site.</span>
</div>
<% } %>

<div class="admin-grid admin-grid--stats">
  <article class="stat-card">
    <span class="stat-card__icon"><%- icon('package') %></span>
    <strong class="stat-card__value"><%= stats.activeProducts %></strong>
    <span class="stat-card__label">Produtos ativos</span>
    <p class="stat-card__note"><%= stats.totalProducts %> cadastrados · <%= stats.inactiveProducts %> inativos</p>
  </article>

  <article class="stat-card">
    <span class="stat-card__icon"><%- icon('grid') %></span>
    <strong class="stat-card__value"><%= stats.categories %></strong>
    <span class="stat-card__label">Categorias</span>
    <p class="stat-card__note">Organizam a navegação da vitrine</p>
  </article>

  <article class="stat-card stat-card--gold">
    <span class="stat-card__icon"><%- icon('sparkles') %></span>
    <strong class="stat-card__value"><%= stats.featuredProducts %></strong>
    <span class="stat-card__label">Produtos em destaque</span>
    <p class="stat-card__note">Recebem o selo de destaque no catálogo</p>
  </article>

  <article class="stat-card">
    <span class="stat-card__icon"><%- icon('image') %></span>
    <strong class="stat-card__value"><%= bannerCount %></strong>
    <span class="stat-card__label">Banners ativos</span>
    <p class="stat-card__note"><%= stats.banners %> cadastrados no carrossel</p>
  </article>
</div>

<div class="admin-grid admin-grid--sidebar">
  <section class="panel">
    <div class="panel__head">
      <h2>Produtos recentes</h2>
      <a href="<%= url('/admin/produtos') %>">Ver todos</a>
    </div>
    <% if (recent.length) { %>
    <div class="table-wrap">
      <table class="admin-table admin-table--recent">
        <thead>
          <tr>
            <th>Produto</th>
            <th>Categoria</th>
            <th>Varejo</th>
            <th>Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <% recent.forEach(function(product) { %>
          <tr>
            <td>
              <a class="admin-product" href="<%= url('/admin/produtos/' + product.id + '/editar') %>">
                <span class="admin-product__thumb"><img src="<%= url(product.imagens[0]) %>" alt="" loading="lazy" width="42" height="42"></span>
                <span class="admin-product__info">
                  <strong><%= product.nome %></strong>
                  <small><%= product.sku %></small>
                </span>
              </a>
            </td>
            <td class="is-muted"><%= categoryName(product.categoria) %></td>
            <td class="is-nowrap"><strong><%= formatBRL(product.precoVarejo) %></strong></td>
            <td>
              <span class="badge <%= product.ativo === false ? 'badge--off' : 'badge--on' %>"><%= product.ativo === false ? 'Inativo' : 'Ativo' %></span>
            </td>
            <td class="is-right">
              <a class="admin-icon-btn" href="<%= url('/admin/produtos/' + product.id + '/editar') %>" aria-label="Editar <%= product.nome %>"><%- icon('pencil') %></a>
            </td>
          </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
    <% } else { %>
    <div class="admin-empty">
      <span class="admin-empty__icon"><%- icon('package') %></span>
      <h3>Nenhum produto cadastrado</h3>
      <p>Comece adicionando o primeiro produto da vitrine.</p>
      <a class="btn btn--green btn--sm" href="<%= url('/admin/produtos/novo') %>"><%- icon('plus') %> Novo produto</a>
    </div>
    <% } %>
  </section>

  <div class="admin-grid">
    <section class="panel">
      <div class="panel__head"><h2>Ações rápidas</h2></div>
      <div class="panel__body">
        <div class="quick-actions">
          <a class="quick-action" href="<%= url('/admin/produtos/novo') %>">
            <span class="quick-action__icon"><%- icon('plus') %></span>
            <span><strong>Cadastrar produto</strong><small>Fotos, preços e descrições</small></span>
          </a>
          <a class="quick-action" href="<%= url('/admin/banners/novo') %>">
            <span class="quick-action__icon"><%- icon('image') %></span>
            <span><strong>Novo banner</strong><small>Atualize a propaganda da vitrine</small></span>
          </a>
          <a class="quick-action" href="<%= url('/admin/categorias') %>">
            <span class="quick-action__icon"><%- icon('grid') %></span>
            <span><strong>Organizar categorias</strong><small>Edite nomes e descrições</small></span>
          </a>
          <a class="quick-action" href="<%= url('/admin/configuracoes') %>">
            <span class="quick-action__icon"><%- icon('settings') %></span>
            <span><strong>Dados da loja</strong><small>WhatsApp, endereço e textos</small></span>
          </a>
        </div>
      </div>
    </section>

    <section class="panel">
      <div class="panel__head">
        <h2>Produtos por categoria</h2>
        <a href="<%= url('/admin/categorias') %>">Gerenciar</a>
      </div>
      <div class="panel__body">
        <div class="admin-category-bars">
          <% categories.forEach(function(category) { const count = db.productsInCategory(category.slug).length; const percent = stats.totalProducts ? Math.round((count / stats.totalProducts) * 100) : 0; %>
          <div class="admin-category-bar">
            <div class="admin-category-bar__top">
              <span><%= category.nome %></span>
              <strong><%= count %></strong>
            </div>
            <span class="admin-category-bar__track"><i style="width: <%= percent %>%"></i></span>
          </div>
          <% }); %>
        </div>
      </div>
      <div class="panel__foot">
        <span>Total de produtos</span>
        <strong><%= stats.totalProducts %></strong>
      </div>
    </section>
  </div>
</div>

<%- include('partials/foot') %>
