<%- include('partials/page-start', { pageTitle, activePage }) %>

<% const num = (value) => Number(value || 0); %>
<% const pct = (part, total) => total > 0 ? Math.round((num(part) / num(total)) * 100) : 0; %>
<% const paidUsers = num(stats.pro_users) + num(stats.vip_users); %>
<% const reviewPayments = num(stats.pending_payments) + num(stats.submitted_payments); %>
<% const actionClass = (tone) => ({ success: 'badge badge-success', warning: 'badge badge-warning', danger: 'badge badge-danger', info: 'badge badge-info' }[tone] || 'badge badge-muted'); %>

<section class="dashboard-hero">
  <div class="dashboard-hero-copy">
    <div class="dashboard-eyebrow">Command center</div>
    <h2 class="dashboard-hero-title">Your platform, at a glance.</h2>
    <p class="dashboard-hero-text">Focus on the numbers and actions that matter today. Detailed reports remain available in their dedicated sections.</p>
  </div>
  <nav class="dashboard-quick-links" aria-label="Quick actions">
    <a href="<%= adminUrl('/users') %>"><span class="dashboard-shortcut-key">U</span><span>Users</span></a>
    <a href="<%= adminUrl('/payments') %>"><span class="dashboard-shortcut-key">$</span><span>Transactions</span></a>
    <a href="<%= adminUrl('/subscriptions') %>"><span class="dashboard-shortcut-key">S</span><span>Subscriptions</span></a>
    <a href="<%= adminUrl('/plans') %>"><span class="dashboard-shortcut-key">P</span><span>Plans</span></a>
  </nav>
</section>

<% if (schemaWarnings && schemaWarnings.length) { %>
  <details class="dashboard-notice">
    <summary><span>Setup notices</span><span class="badge badge-warning"><%= schemaWarnings.length %></span></summary>
    <ul>
      <% schemaWarnings.forEach((warning) => { %><li><%= warning %></li><% }) %>
    </ul>
  </details>
<% } %>

<section class="dashboard-kpi-grid" aria-label="Key metrics">
  <a href="<%= adminUrl('/users') %>" class="dashboard-kpi" data-tone="sky">
    <div class="dashboard-kpi-top"><span class="dashboard-kpi-label">Total users</span><span class="dashboard-kpi-symbol" aria-hidden="true">U</span></div>
    <strong class="dashboard-kpi-value"><%= num(stats.total_users).toLocaleString() %></strong>
    <span class="dashboard-kpi-meta"><strong>+<%= num(stats.new_users_7d).toLocaleString() %></strong> in the last 7 days</span>
  </a>
  <a href="<%= adminUrl('/payments') %>" class="dashboard-kpi" data-tone="emerald">
    <div class="dashboard-kpi-top"><span class="dashboard-kpi-label">30-day revenue</span><span class="dashboard-kpi-symbol" aria-hidden="true">$</span></div>
    <strong class="dashboard-kpi-value"><%= formatMoney(stats.revenue_30d || 0) %></strong>
    <span class="dashboard-kpi-meta"><strong><%= formatMoney(stats.revenue_today || 0) %></strong> today</span>
  </a>
  <a href="<%= adminUrl('/payments?status=pending') %>" class="dashboard-kpi" data-tone="<%= reviewPayments ? 'amber' : 'slate' %>">
    <div class="dashboard-kpi-top"><span class="dashboard-kpi-label">Needs review</span><span class="dashboard-kpi-symbol" aria-hidden="true">!</span></div>
    <strong class="dashboard-kpi-value"><%= reviewPayments.toLocaleString() %></strong>
    <span class="dashboard-kpi-meta"><strong><%= num(stats.today_orders).toLocaleString() %></strong> orders today</span>
  </a>
  <a href="<%= adminUrl('/subscriptions?status=active') %>" class="dashboard-kpi" data-tone="violet">
    <div class="dashboard-kpi-top"><span class="dashboard-kpi-label">Active subscriptions</span><span class="dashboard-kpi-symbol" aria-hidden="true">S</span></div>
    <strong class="dashboard-kpi-value"><%= num(stats.active_subscriptions).toLocaleString() %></strong>
    <span class="dashboard-kpi-meta"><strong><%= num(stats.expiring_subscriptions_7d).toLocaleString() %></strong> expire within 7 days</span>
  </a>
</section>

<section class="dashboard-today" aria-label="Today">
  <div class="dashboard-section-heading">
    <div>
      <span class="dashboard-eyebrow">Live pulse</span>
      <h2>Today</h2>
    </div>
    <span class="dashboard-live"><span aria-hidden="true"></span>Updated on refresh</span>
  </div>
  <dl class="dashboard-today-grid">
    <div><dt>New users</dt><dd><%= num(stats.new_users_today).toLocaleString() %></dd></div>
    <div><dt>Transactions</dt><dd><%= num(stats.today_orders).toLocaleString() %></dd></div>
    <div><dt>Revenue</dt><dd><%= formatMoney(stats.revenue_today || 0) %></dd></div>
    <div><dt>Expiring soon</dt><dd><%= num(stats.expiring_subscriptions_7d).toLocaleString() %></dd></div>
  </dl>
</section>

<section class="dashboard-main-grid">
  <article class="panel dashboard-priorities">
    <div class="panel-header">
      <div>
        <span class="dashboard-eyebrow">Action center</span>
        <h2 class="panel-title">Needs your attention</h2>
        <p class="panel-subtitle">The most important follow-ups right now.</p>
      </div>
    </div>
    <div class="dashboard-action-list">
      <% actionItems.forEach((item) => { %>
        <a href="<%= adminUrl(item.href) %>" class="dashboard-action">
          <span class="dashboard-action-marker" data-tone="<%= item.tone %>" aria-hidden="true"></span>
          <span class="dashboard-action-copy"><strong><%= item.label %></strong><small>Open related records</small></span>
          <span class="<%= actionClass(item.tone) %>"><%= typeof item.value === 'number' ? Number(item.value).toLocaleString() : item.value %></span>
          <span class="dashboard-action-arrow" aria-hidden="true">→</span>
        </a>
      <% }) %>
    </div>
  </article>

  <article class="panel dashboard-health">
    <div class="panel-header">
      <div>
        <span class="dashboard-eyebrow">Account health</span>
        <h2 class="panel-title">User quality</h2>
        <p class="panel-subtitle">A compact view of user growth and conversion.</p>
      </div>
      <a href="<%= adminUrl('/users') %>" class="btn btn-secondary">View users</a>
    </div>
    <div class="dashboard-health-list">
      <div class="dashboard-health-item">
        <div><span>Verified accounts</span><strong><%= pct(stats.verified_users, stats.total_users) %>%</strong></div>
        <div class="dashboard-progress"><span style="width: <%= pct(stats.verified_users, stats.total_users) %>%"></span></div>
        <small><%= num(stats.verified_users).toLocaleString() %> of <%= num(stats.total_users).toLocaleString() %> users</small>
      </div>
      <div class="dashboard-health-item">
        <div><span>Paid accounts</span><strong><%= pct(paidUsers, stats.total_users) %>%</strong></div>
        <div class="dashboard-progress dashboard-progress-violet"><span style="width: <%= pct(paidUsers, stats.total_users) %>%"></span></div>
        <small><%= paidUsers.toLocaleString() %> Pro or VIP users</small>
      </div>
      <div class="dashboard-health-summary">
        <div><span>30-day signups</span><strong><%= num(stats.new_users_30d).toLocaleString() %></strong></div>
        <div><span>Free accounts</span><strong><%= num(stats.free_users).toLocaleString() %></strong></div>
      </div>
    </div>
  </article>
</section>

<section class="dashboard-recent-grid">
  <article class="panel">
    <div class="panel-header">
      <div>
        <span class="dashboard-eyebrow">Money movement</span>
        <h2 class="panel-title">Recent transactions</h2>
        <p class="panel-subtitle">The latest billing transactions across the platform.</p>
      </div>
      <a href="<%= adminUrl('/payments') %>" class="btn btn-secondary">View all</a>
    </div>
    <% if (!latestPayments.length) { %>
      <div class="empty-state">No transactions found.</div>
    <% } else { %>
      <div class="dashboard-payment-list">
        <% latestPayments.slice(0, 5).forEach((payment) => { %>
          <a href="<%= adminUrl('/payments/' + payment.id) %>" class="dashboard-payment-row">
            <span class="dashboard-payment-id">#<%= payment.order_id || payment.id %></span>
            <span class="dashboard-payment-user"><strong><%= payment.user_name || 'Unnamed user' %></strong><small><%= payment.user_email || 'Unknown user' %></small></span>
            <span class="<%= statusBadgeClass(payment.status) %>"><%= payment.status %></span>
            <strong class="dashboard-payment-amount"><%= formatMoney(payment.payable_amount || payment.amount_usd, payment.currency || 'USD') %></strong>
            <time><%= formatDate(payment.created_at, false) %></time>
          </a>
        <% }) %>
      </div>
    <% } %>
  </article>

  <article class="panel">
    <div class="panel-header">
      <div>
        <span class="dashboard-eyebrow">Growth</span>
        <h2 class="panel-title">Newest users</h2>
        <p class="panel-subtitle">Recently registered accounts.</p>
      </div>
      <a href="<%= adminUrl('/users') %>" class="btn btn-secondary">View all</a>
    </div>
    <% if (!latestUsers.length) { %>
      <div class="empty-state">No users found.</div>
    <% } else { %>
      <div class="dashboard-user-list">
        <% latestUsers.slice(0, 5).forEach((user) => { %>
          <a href="<%= adminUrl('/users/' + user.id) %>" class="dashboard-user-row">
            <span class="dashboard-user-avatar" aria-hidden="true"><%= String(user.name || user.email || '?').charAt(0).toUpperCase() %></span>
            <span class="dashboard-user-copy"><strong><%= user.name || 'Unnamed user' %></strong><small><%= user.email %></small></span>
            <span class="dashboard-user-meta"><span class="badge badge-muted"><%= user.plan_name %></span><time><%= formatDate(user.created_at, false) %></time></span>
          </a>
        <% }) %>
      </div>
    <% } %>
  </article>
</section>

<%- include('partials/page-end', { activePage }) %>
