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

<% const num = (value) => Number(value || 0); %>
<% const stats = result.stats || {}; %>
<% const analytics = result.analytics || {}; %>
<% const availability = analytics.availability || {}; %>
<% const pct = (part, total) => total > 0 ? Math.round((num(part) / num(total)) * 100) : 0; %>
<% const signupRows = analytics.signupTrend || []; %>
<% const maxSignup = Math.max(1, ...signupRows.map((row) => num(row.total))); %>
<% const signupTotal = signupRows.reduce((sum, row) => sum + num(row.total), 0); %>
<% const widgets = analytics.widgets || []; %>
<% const widgetValue = (label) => { const found = widgets.find((item) => item.label === label); return found ? num(found.value) : 0; }; %>
<% const tradingUsers = widgetValue('Trading users'); %>
<% const activeSubscribers = widgetValue('Active subscribers'); %>
<% const reviewUsers = widgetValue('Transaction review users'); %>
<% const paperUsers = widgetValue('Paper adoption'); %>
<% const activeFilterCount = ['q','plan','verified','admin','activity'].filter((key) => filters[key]).length; %>

<section class="management-hero management-hero-users">
  <div>
    <span class="dashboard-eyebrow">Customer operations</span>
    <h2>Users</h2>
    <p>Find any account, understand its trading activity and open the complete trader profile without digging through reports.</p>
  </div>
  <nav class="management-quick-links" aria-label="User shortcuts">
    <a href="<%= adminUrl('/users') %>" class="<%= !filters.activity ? 'is-active' : '' %>"><span>All users</span><strong><%= num(stats.total_users).toLocaleString() %></strong></a>
    <a href="<%= adminUrl('/users?activity=trading&sort=trades') %>" class="<%= filters.activity === 'trading' ? 'is-active' : '' %>"><span>Traders</span><strong><%= tradingUsers.toLocaleString() %></strong></a>
    <a href="<%= adminUrl('/users?activity=open_positions&sort=open_positions') %>" class="<%= filters.activity === 'open_positions' ? 'is-active' : '' %>"><span>Open positions</span><strong>View</strong></a>
    <a href="<%= adminUrl('/users?activity=transaction_review&sort=needs_review') %>" class="<%= filters.activity === 'transaction_review' ? 'is-active' : '' %>"><span>Review queue</span><strong><%= reviewUsers.toLocaleString() %></strong></a>
  </nav>
</section>

<section class="management-kpi-grid" aria-label="User metrics">
  <article data-tone="sky"><span>Total users</span><strong><%= num(stats.total_users).toLocaleString() %></strong><small>+<%= num(stats.new_users_7d).toLocaleString() %> in the last 7 days</small></article>
  <article data-tone="emerald"><span>Verified accounts</span><strong><%= pct(stats.verified_users, stats.total_users) %>%</strong><small><%= num(stats.unverified_users).toLocaleString() %> awaiting verification</small></article>
  <article data-tone="violet"><span>Paid users</span><strong><%= num(stats.paid_users).toLocaleString() %></strong><small><%= pct(stats.paid_users, stats.total_users) %>% of all accounts</small></article>
  <article data-tone="amber"><span>30-day signups</span><strong><%= num(stats.new_users_30d).toLocaleString() %></strong><small><%= num(stats.admin_users).toLocaleString() %> administrator account(s)</small></article>
</section>

<section class="management-insight-grid">
  <article class="panel management-trend-panel">
    <div class="panel-header">
      <div><span class="dashboard-eyebrow">Growth</span><h2 class="panel-title">Signup activity</h2><p class="panel-subtitle">Daily registrations across the latest 30-day window.</p></div>
      <div class="management-trend-summary"><strong><%= signupTotal.toLocaleString() %></strong><small>new accounts</small></div>
    </div>
    <% if (!signupTotal) { %>
      <div class="empty-state">No signup activity was found in this period.</div>
    <% } else { %>
      <div class="management-bars management-bars-users" role="img" aria-label="Thirty-day signup trend">
        <% signupRows.forEach((row, index) => { %>
          <span style="height:<%= Math.max(5, Math.round((num(row.total) / maxSignup) * 100)) %>%" title="<%= row.label %>: <%= num(row.total) %> signup(s)"><i></i><% if (index % 7 === 0 || index === signupRows.length - 1) { %><small><%= String(row.label).slice(5).replace('-', '/') %></small><% } %></span>
        <% }) %>
      </div>
    <% } %>
  </article>

  <aside class="panel management-audience">
    <div class="panel-header"><div><span class="dashboard-eyebrow">Audience health</span><h2 class="panel-title">Account segments</h2><p class="panel-subtitle">The user groups that matter operationally.</p></div></div>
    <a href="<%= adminUrl('/users?activity=trading&sort=trades') %>"><span><strong>Trading users</strong><small>Accounts with trade history</small></span><span><strong><%= tradingUsers.toLocaleString() %></strong><small><%= pct(tradingUsers, stats.total_users) %>%</small></span></a>
    <a href="<%= adminUrl('/users?sort=revenue') %>"><span><strong>Active subscribers</strong><small>Current paid memberships</small></span><span><strong><%= activeSubscribers.toLocaleString() %></strong><small><%= pct(activeSubscribers, stats.total_users) %>%</small></span></a>
    <a href="<%= adminUrl('/users?activity=transaction_review&sort=needs_review') %>"><span><strong>Transaction review</strong><small>Users with pending transactions</small></span><span><strong><%= reviewUsers.toLocaleString() %></strong><small>Needs attention</small></span></a>
    <a href="<%= adminUrl('/users?sort=equity') %>"><span><strong>Paper accounts</strong><small>Users with simulator balance</small></span><span><strong><%= paperUsers.toLocaleString() %></strong><small><%= pct(paperUsers, stats.total_users) %>%</small></span></a>
  </aside>
</section>

<section class="panel management-list-panel">
  <div class="panel-header">
    <div><span class="dashboard-eyebrow">User directory</span><h2 class="panel-title">All accounts</h2><p class="panel-subtitle"><%= result.total %> matching account(s)</p></div>
    <% if (activeFilterCount) { %><span class="badge badge-info"><%= activeFilterCount %> active filter(s)</span><% } %>
  </div>

  <form method="get" action="<%= adminUrl('/users') %>" class="management-filters management-user-filters">
    <label class="field management-search"><span>Search users</span><input class="input" type="search" name="q" value="<%= filters.q || '' %>" placeholder="Name, email or user ID"></label>
    <label class="field"><span>Plan</span><select class="input" name="plan"><option value="">All plans</option><% (result.planOptions || []).forEach((option) => { %><option value="<%= option.label %>" <%= String(filters.plan || '').toLowerCase() === String(option.label || '').toLowerCase() ? 'selected' : '' %>><%= option.label %> (<%= num(option.total).toLocaleString() %>)</option><% }) %></select></label>
    <label class="field"><span>Activity</span><select class="input" name="activity"><option value="">All activity</option><option value="trading" <%= filters.activity === 'trading' ? 'selected' : '' %>>Has trade history</option><option value="open_positions" <%= filters.activity === 'open_positions' ? 'selected' : '' %>>Has open positions</option><option value="transaction_review" <%= filters.activity === 'transaction_review' ? 'selected' : '' %>>Needs transaction review</option><option value="never_logged_in" <%= filters.activity === 'never_logged_in' ? 'selected' : '' %>>Never logged in</option></select></label>
    <label class="field"><span>Verification</span><select class="input" name="verified"><option value="">All</option><option value="1" <%= filters.verified === '1' ? 'selected' : '' %>>Verified</option><option value="0" <%= filters.verified === '0' ? 'selected' : '' %>>Not verified</option></select></label>
    <label class="field"><span>Role</span><select class="input" name="admin"><option value="">All roles</option><option value="1" <%= filters.admin === '1' ? 'selected' : '' %>>Administrators</option><option value="0" <%= filters.admin === '0' ? 'selected' : '' %>>Standard users</option></select></label>
    <label class="field"><span>Sort</span><select class="input" name="sort"><option value="newest" <%= !filters.sort || filters.sort === 'newest' ? 'selected' : '' %>>Newest first</option><option value="last_login" <%= filters.sort === 'last_login' ? 'selected' : '' %>>Recent login</option><option value="revenue" <%= filters.sort === 'revenue' ? 'selected' : '' %>>Highest revenue</option><option value="trades" <%= filters.sort === 'trades' ? 'selected' : '' %>>Most trades</option><option value="open_positions" <%= filters.sort === 'open_positions' ? 'selected' : '' %>>Most open positions</option><option value="equity" <%= filters.sort === 'equity' ? 'selected' : '' %>>Highest equity</option><option value="needs_review" <%= filters.sort === 'needs_review' ? 'selected' : '' %>>Needs review first</option><option value="oldest" <%= filters.sort === 'oldest' ? 'selected' : '' %>>Oldest first</option><option value="email" <%= filters.sort === 'email' ? 'selected' : '' %>>Email A–Z</option></select></label>
    <div class="management-filter-actions"><button class="btn btn-primary" type="submit">Apply filters</button><a class="btn btn-secondary" href="<%= adminUrl('/users') %>">Reset</a></div>
  </form>

  <% if (!result.items.length) { %>
    <div class="empty-state">No users match these filters.</div>
  <% } else { %>
    <div class="management-table-wrap">
      <table class="management-table management-users-table">
        <thead><tr><th>User</th><th>Account</th><th>Plan</th><th>Trading</th><th>Transactions</th><th>Last activity</th><th></th></tr></thead>
        <tbody>
          <% result.items.forEach((item) => { %>
            <tr>
              <td data-label="User"><a class="management-user-cell" href="<%= adminUrl('/users/' + item.id) %>"><span aria-hidden="true"><%= String(item.name || item.email || '?').slice(0, 1).toUpperCase() %></span><span><strong><%= item.name || 'Unnamed user' %></strong><small><%= item.email || ('User #' + item.id) %></small></span></a></td>
              <td data-label="Account"><div class="management-badges"><span class="<%= Number(item.email_verified) === 1 ? 'badge badge-success' : 'badge badge-warning' %>"><%= Number(item.email_verified) === 1 ? 'Verified' : 'Unverified' %></span><% if (Number(item.is_admin) === 1) { %><span class="badge badge-danger">Admin</span><% } %></div><small>User ID #<%= item.id %></small></td>
              <td data-label="Plan"><span class="badge badge-info"><%= item.plan_name || 'Free' %></span><small><%= num(item.active_subscriptions).toLocaleString() %> active subscription(s)</small></td>
              <td data-label="Trading"><strong><%= num(item.virtual_trades).toLocaleString() %> trades</strong><small><%= num(item.open_positions).toLocaleString() %> open · Equity <%= formatMoney(item.paper_equity || 0) %></small></td>
              <td data-label="Transactions"><strong><%= formatMoney(item.confirmed_revenue || 0) %></strong><small><%= num(item.confirmed_payments).toLocaleString() %> confirmed<% if (num(item.pending_payments)) { %> · <span class="trade-negative"><%= num(item.pending_payments).toLocaleString() %> review</span><% } %></small></td>
              <td data-label="Last activity"><strong><%= formatDate(item.last_login, false) %></strong><small>Joined <%= formatDate(item.created_at, false) %></small></td>
              <td data-label="Action"><a class="btn btn-secondary" href="<%= adminUrl('/users/' + item.id) %>">Open profile</a></td>
            </tr>
          <% }) %>
        </tbody>
      </table>
    </div>
    <%- include('partials/pagination', { result }) %>
  <% } %>
</section>

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