<%
  const pageTitle = 'Winners · ETA Admin';
  /** `2026-08-26 14:03` in the server's local timezone, or an em dash. */
  function drawnAt(value) {
    if (!value) return '—';
    const d = new Date(value);
    if (Number.isNaN(d.getTime())) return '—';
    const pad = (n) => String(n).padStart(2, '0');
    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ` +
           `${pad(d.getHours())}:${pad(d.getMinutes())}`;
  }
%>
<%- 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">Winners</h1>
        <p class="muted">
          <span id="winnerCount"><%= winners.length %></span>
          <span id="winnerCountNoun">winner<%= winners.length === 1 ? '' : 's' %></span>
          drawn in the <code>manage</code> table.
        </p>
      </div>
      <div class="bulk-actions">
        <form method="POST" action="/winners/reset"
              data-ajax="reset-winners"
              data-confirm
              data-confirm-title="Reset winners"
              data-confirm-body="This will clear the winning number and the linked user for every record in the manage table."
              data-confirm-note="No user is deleted. Names, phone numbers and every other column in the etas table stay exactly as they are."
              data-confirm-accept="Yes, reset them">
          <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
          <button type="submit" class="btn btn--warn">Reset Winners</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="winnerFlash" data-live-flash role="status" hidden style="display: none"></div>

    <div class="empty" id="winnersEmpty" <%= winners.length ? 'hidden style="display: none"' : '' %>>
      <div class="empty__icon" aria-hidden="true">&#127942;</div>
      <h2 class="empty__title">No winners drawn yet</h2>
      <p class="muted">
        A record appears here once its <code>result_number</code> or
        <code>result_eta_id</code> is set.
      </p>
    </div>

    <div class="table-wrap" id="winnersTable" <%= winners.length ? '' : 'hidden style="display: none"' %>>
      <table class="table">
        <thead>
          <tr>
            <th scope="col">Record</th>
            <th scope="col">Winning Number</th>
            <th scope="col">Name</th>
            <th scope="col">Phone Number</th>
            <th scope="col">Telegram</th>
            <th scope="col">Drawn</th>
            <th scope="col" class="ta-right">Actions</th>
          </tr>
        </thead>
        <tbody id="winnersBody">
          <% winners.forEach(function (winner) { %>
            <tr data-winner-id="<%= winner.id %>">
              <td data-label="Record"><strong><%= winner.title || 'Untitled record' %></strong></td>
              <td data-label="Winning Number">
                <% if (winner.result_number) { %>
                  <span class="pay-cell__number"><%= winner.result_number %></span>
                <% } else { %>—<% } %>
              </td>
              <td data-label="Name">
                <% if (winner.result_eta_id === null) { %>
                  <span class="muted">No user linked</span>
                <% } else if (winner.phone_number === null) { %>
                  <span class="muted">User #<%= winner.result_eta_id %> not found</span>
                <% } else { %>
                  <%= winner.name || 'Unnamed user' %>
                <% } %>
              </td>
              <td data-label="Phone Number">
                <% if (winner.phone_number) { %>
                  <span class="pay-cell__number"><%= winner.phone_number %></span>
                <% } else { %>—<% } %>
              </td>
              <td data-label="Telegram">
                <% if (winner.telegram_username) { %>
                  <span class="chip">@<%= winner.telegram_username %></span>
                <% } else { %>—<% } %>
              </td>
              <td data-label="Drawn"><span class="num"><%= drawnAt(winner.result_drawn_at) %></span></td>
              <td data-label="Actions" class="ta-right">
                <div class="row-actions">
                  <form method="POST" action="/winners/<%= winner.id %>/cancel"
                        data-ajax="cancel-winner"
                        data-confirm
                        data-confirm-title="Cancel this winner"
                        data-confirm-body="This removes <%= winner.name || 'this winner' %> from the winners list."
                        data-confirm-note="Only the winning number and the link to the user are cleared on the record. The user keeps their name, phone number and every other column in the etas table."
                        data-confirm-accept="Yes, cancel it">
                    <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
                    <button type="submit" class="btn btn--sm btn--danger">Cancel</button>
                  </form>
                </div>
              </td>
            </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
  </main>

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

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