<%
  const pageTitle = 'Approval Management · ETA Admin';
  // mediaUrl resolves an uploads path against the backend origin, and returns
  // null for anything that is not one — so a bad column renders no image.
  const receiptSrc = mediaUrl;
  function statusOf(approved) {
    if (approved === true) return { key: 'approved', label: 'Approved' };
    if (approved === false) return { key: 'disapproved', label: 'Disapproved' };
    return { key: 'pending', label: 'Pending' };
  }
%>
<%- include('partials/head', { pageTitle }) %>
<body class="app">
  <button class="nav-toggle" id="navToggle" aria-label="Toggle navigation" aria-expanded="false">&#9776;</button>
  <div class="scrim" id="scrim" hidden style="display: none"></div>
  <%- include('partials/sidebar') %>

  <main class="main">
    <header class="main__header">
      <div>
        <h1 class="main__title">Approval Management</h1>
        <p class="muted">
          <span id="approvalCount"><%= approvals.length %></span>
          <span id="approvalCountNoun">submission<%= approvals.length === 1 ? '' : 's' %></span>
          in the <code>etas</code> table.
        </p>
      </div>
      <div class="bulk-actions">
        <a href="/approvals/approved" class="btn btn--primary">All Approved Users</a>
        <a href="/approvals/blocked" class="btn btn--ghost">Blocked Users</a>
        <form method="POST" action="/approvals/reset-picked-numbers"
              data-ajax="reset-picked"
              data-confirm
              data-confirm-title="Reset picked numbers"
              data-confirm-body="This will reset the picked number for every user in the etas table."
              data-confirm-note="Names, receipts and approval statuses are not affected. No user is deleted."
              data-confirm-accept="Yes, reset them">
          <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
          <input type="hidden" name="_return" value="/approvals" />
          <button type="submit" class="btn btn--warn">Reset Picked Numbers</button>
        </form>
        <form method="POST" action="/approvals/clear-submissions"
              data-ajax="clear-submissions"
              data-confirm
              data-confirm-title="Delete all approvals"
              data-confirm-body="This will remove the name and uploaded receipt of every user in the etas table."
              data-confirm-note="No user is deleted. Approval status, picked numbers and every other column stay exactly as they are."
              data-confirm-accept="Yes, delete them">
          <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
          <input type="hidden" name="_return" value="/approvals" />
          <button type="submit" class="btn btn--danger">Delete All Approvals</button>
        </form>
      </div>
    </header>

    <% if (flash) { %>
      <div class="alert alert--<%= flash.type === 'success' ? 'success' : 'error' %>" role="status">
        <%= flash.message %>
      </div>
    <% } %>

    <!-- Live region: AJAX results are announced here without a page reload. -->
    <div class="alert alert--success" id="approvalFlash" data-live-flash role="status" hidden style="display: none"></div>

    <div class="empty" id="approvalsEmpty" <%= approvals.length ? 'hidden style="display: none"' : '' %>>
      <div class="empty__icon" aria-hidden="true">&#128203;</div>
      <h2 class="empty__title">No submissions to review</h2>
      <p class="muted">Users appear here once they submit a name or upload a receipt.</p>
    </div>

    <div class="approvals" id="approvalsGrid">
      <% approvals.forEach(function (user) {
           const status = statusOf(user.approved);
           const src = receiptSrc(user.uploaded_receipt_photo);
           const label = user.name || 'this user';
      %>
        <article class="approval card<%= user.blocked ? ' is-blocked' : '' %>"
                 data-approval-id="<%= user.id %>">
          <header class="approval__head">
            <h2 class="approval__name"><%= user.name || 'Unnamed user' %></h2>
            <span class="badges">
              <span class="badge badge--blocked" data-blocked-badge
                    <%- user.blocked ? '' : 'hidden style="display: none"' %>>Blocked</span>
              <span class="badge badge--<%= status.key %>" data-approval-status><%= status.label %></span>
            </span>
          </header>

          <div class="approval__receipt">
            <% if (src) { %>
              <a href="<%= src %>" target="_blank" rel="noopener noreferrer"
                 title="Open full size receipt">
                <img src="<%= src %>" alt="Receipt uploaded by <%= label %>" loading="lazy" />
              </a>
            <% } else { %>
              <span class="approval__noreceipt">No receipt uploaded</span>
            <% } %>
          </div>

          <p class="approval__meta">
            Picked number:
            <span class="pay-cell__number" data-picked-number><%= user.picked_number || '—' %></span>
          </p>

          <div class="approval__actions">
            <form method="POST" action="/approvals/<%= user.id %>/approve" data-ajax="decide">
              <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
              <input type="hidden" name="_return" value="/approvals" />
              <button type="submit" class="btn btn--sm btn--success btn--block"
                      data-decision="approve"
                      <%= user.approved === true ? 'disabled' : '' %>>Approve</button>
            </form>
            <form method="POST" action="/approvals/<%= user.id %>/disapprove" data-ajax="decide">
              <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
              <input type="hidden" name="_return" value="/approvals" />
              <button type="submit" class="btn btn--sm btn--danger btn--block"
                      data-decision="disapprove"
                      <%= user.approved === false ? 'disabled' : '' %>>Disapprove</button>
            </form>
            <%- include('partials/user-actions', {
                  user,
                  csrfToken,
                  returnTo: '/approvals',
                  buttonClass: 'btn--sm btn--block',
                }) %>
          </div>
        </article>
      <% }); %>
    </div>
  </main>

  <%- include('partials/confirm-modal') %>

  <script src="/static/js/app.js?v=<%= typeof assetVersion !== 'undefined' ? assetVersion : '1' %>" defer></script>
</body>
</html>
