<%- include('header.ejs', { pageTitle: 'Kết quả trò chơi · VUS CMS', pageHeading: 'Kết quả trò chơi', activeTab: 'playrecord' }) %>
<% function formatDuration(seconds) { const value = Number(seconds) || 0; if (!value) return '—'; const minutes = Math.floor(value / 60); const remaining = value % 60; return minutes ? `${minutes} phút ${remaining} giây` : `${remaining} giây`; } %>
<div class="page-intro">
  <div><div class="eyebrow blue">LỊCH SỬ TRÒ CHƠI</div><h1>Kết quả trò chơi</h1><p class="muted">Theo dõi kết quả, khu vực chơi và chi tiết từng câu hỏi người chơi đã trả lời.</p></div>
  <span class="security-badge">● Số câu đúng cần thiết: <%= requiredCorrectCount %></span>
</div>

<section class="panel filter-panel">
  <form class="record-filter-form" method="get" action="/admin/playrecord">
    <label><span>Khu vực chơi</span><input name="region" value="<%= filters.region %>" placeholder="HCM, Hà Nội..."></label>
    <label><span>Từ ngày</span><input name="dateFrom" type="date" lang="vi" value="<%= filters.dateFrom %>"></label>
    <label><span>Đến ngày</span><input name="dateTo" type="date" lang="vi" value="<%= filters.dateTo %>"></label>
    <div class="filter-actions"><button class="button button-primary" type="submit">⌕ Lọc dữ liệu</button><a class="button button-light" href="/admin/playrecord">Xóa lọc</a></div>
  </form>
</section>

<section class="panel playrecord-panel">
  <div class="panel-toolbar">
    <div><h2>Danh sách kết quả trò chơi</h2><span class="muted small-text"><%= total %> lượt chơi · Trang <%= page %>/<%= totalPages %></span></div>
    <div class="export-actions"><a class="button button-export" href="/admin/playrecord/export/csv?region=<%= encodeURIComponent(filters.region) %>&dateFrom=<%= encodeURIComponent(filters.dateFrom) %>&dateTo=<%= encodeURIComponent(filters.dateTo) %>">⇩ CSV</a><a class="button button-export excel" href="/admin/playrecord/export/excel?region=<%= encodeURIComponent(filters.region) %>&dateFrom=<%= encodeURIComponent(filters.dateFrom) %>&dateTo=<%= encodeURIComponent(filters.dateTo) %>">⇩ Excel</a></div>
  </div>
  <div class="table-scroll">
    <table class="playrecord-table">
      <thead><tr><th style="width: 70px">ID</th><th>THỜI GIAN CHƠI</th><th>THỜI ĐIỂM</th><th>KHU VỰC</th><th>KẾT QUẢ</th><th>ĐIỂM</th><th>CHI TIẾT</th></tr></thead>
      <tbody>
      <% items.forEach((record) => { %>
        <tr>
          <td class="id-cell">#<%= record.id %></td>
          <td><strong><%= formatDuration(record.elapsedTimeSeconds) %></strong></td>
          <td><strong><%= new Date(record.playedAt).toLocaleDateString('vi-VN') %></strong><span class="record-time"><%= new Date(record.playedAt).toLocaleTimeString('vi-VN') %></span></td>
          <td><span class="region-pill">⌖ <%= record.region %></span></td>
          <td><span class="result-pill <%= record.result === 'WIN' ? 'result-win' : 'result-loss' %>"><%= record.result === 'WIN' ? '✓ WIN' : '× LOSS' %></span></td>
          <td><strong><%= record.correctCount %>/<%= record.totalQuestions %></strong><span class="record-time">cần <%= record.requiredCorrectCount %></span></td>
          <td><details class="record-details"><summary>Xem <%= record.answerDetails.length %> câu</summary><div class="detail-list"><% record.answerDetails.forEach((detail, index) => { %><div class="detail-item <%= detail.isTimedOut ? 'detail-timeout' : (detail.isCorrect ? 'detail-correct' : 'detail-wrong') %>"><div class="detail-topline"><strong>Câu <%= index + 1 %> · Cấp độ <%= detail.ChallengeLevel %></strong><span><%= detail.isTimedOut ? '◷ Hết giờ' : (detail.isCorrect ? '✓ Đúng' : '× Sai') %></span></div><div class="detail-question"><%= detail.question %></div><div class="detail-answer"><span>Người chơi chọn:</span> <%= detail.isTimedOut ? 'Hết giờ — không chọn đáp án' : (detail.userAnswer || '(không có)') %> <span class="detail-correct-answer">· Đáp án đúng: <%= detail.answers[detail.correctIndex] %></span></div><% if (detail.hint) { %><div class="detail-hint">Gợi ý: <%= detail.hint %></div><% } %><% if (detail.assetUrl) { %><a class="asset-link" href="<%= detail.assetUrl %>" target="_blank" rel="noreferrer">↗ Tài nguyên</a><% } %></div><% }) %></div></details></td>
        </tr>
      <% }) %>
      <% if (!items.length) { %><tr><td colspan="7" class="empty-state">Chưa có lượt chơi phù hợp.</td></tr><% } %>
      </tbody>
    </table>
  </div>
  <div class="pagination"><% if (page > 1) { %><a class="button button-light" href="/admin/playrecord?page=<%= page - 1 %>&region=<%= encodeURIComponent(filters.region) %>&dateFrom=<%= encodeURIComponent(filters.dateFrom) %>&dateTo=<%= encodeURIComponent(filters.dateTo) %>">← Trước</a><% } %><span>Trang <strong><%= page %></strong> / <%= totalPages %></span><% if (page < totalPages) { %><a class="button button-light" href="/admin/playrecord?page=<%= page + 1 %>&region=<%= encodeURIComponent(filters.region) %>&dateFrom=<%= encodeURIComponent(filters.dateFrom) %>&dateTo=<%= encodeURIComponent(filters.dateTo) %>">Sau →</a><% } %></div>
</section>
<%- include('footer.ejs') %>
