<%- include('../partials/shell-open') %>

<div class="topbar">
  <div>
    <div class="eyebrow">Dynamic codes</div>
    <h1>Codes</h1>
  </div>
  <div style="display:flex;gap:8px">
    <% if (['owner','superadmin'].includes(user.role)) { %>
      <button class="btn ghost sm hide-sm" data-action="bulk">Bulk create</button>
    <% } %>
    <% if (user.role !== 'viewer') { %>
      <button class="btn" data-action="new">New code</button>
    <% } %>
  </div>
</div>

<div class="content">
  <div class="stats">
    <div class="stat"><div class="n"><%= stats.total || 0 %></div><div class="k">Codes</div></div>
    <div class="stat"><div class="n"><%= stats.active || 0 %></div><div class="k">Active</div></div>
    <div class="stat"><div class="n"><%= Number(stats.scans || 0).toLocaleString() %></div><div class="k">Total scans</div></div>
  </div>

  <form method="get" action="/app" style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap">
    <input type="text" name="search" placeholder="Search name or code" value="<%= filters.search || '' %>" style="flex:1;min-width:180px">
    <select name="status" style="width:auto">
      <option value="">Any status</option>
      <option value="active"  <%= filters.status === 'active' ? 'selected' : '' %>>Active</option>
      <option value="paused"  <%= filters.status === 'paused' ? 'selected' : '' %>>Paused</option>
    </select>
    <select name="folder" style="width:auto">
      <option value="">All folders</option>
      <% folders.forEach(function(f){ %>
        <option value="<%= f.id %>" <%= String(filters.folder) === String(f.id) ? 'selected' : '' %>><%= f.name %></option>
      <% }); %>
    </select>
    <button class="btn ghost" type="submit">Filter</button>
  </form>

  <div class="card">
    <% if (!codes.length) { %>
      <div class="empty">
        <h3>No codes yet</h3>
        <p>Create a code, print it once, and change where it points whenever you need to.</p>
        <% if (user.role !== 'viewer') { %><button class="btn" data-action="new">New code</button><% } %>
      </div>
    <% } else { %>
      <table>
        <thead><tr>
          <th>Name</th><th>Code</th><th class="hide-sm">Type</th><th>Status</th>
          <th class="hide-sm">Scans</th><th class="hide-sm">Last scan</th>
        </tr></thead>
        <tbody>
        <% codes.forEach(function(c){ %>
          <tr class="linked" data-href="/app/codes/<%= c.code %>">
            <td><strong><%= c.name %></strong></td>
            <td><span class="code-ref"><%= c.code %></span></td>
            <td class="hide-sm"><span class="pill type"><%= c.type %></span></td>
            <td>
              <span class="pill <%= c.status %>"><%= c.status %></span>
              <% if (c.safety_state === 'blocked') { %><span class="pill blocked">blocked</span><% } %>
            </td>
            <td class="hide-sm mono"><%= c.scan_count %></td>
            <td class="hide-sm mono" style="font-size:12px;color:var(--muted)">
              <%= c.last_scan_at ? new Date(c.last_scan_at).toISOString().slice(0,10) : '—' %>
            </td>
          </tr>
        <% }); %>
        </tbody>
      </table>
    <% } %>
  </div>
</div>

<script src="/js/dashboard.js"></script>
<%- include('../partials/shell-close') %>
