<%- include('header.ejs', { pageTitle: 'Kho câu hỏi · VUS CMS', pageHeading: 'Kho câu hỏi', activeTab: 'questions' }) %>
<div class="page-intro">
  <div>
    <div class="eyebrow blue">CONTENT LIBRARY</div>
    <h1>Quản lý câu hỏi</h1>
    <p class="muted">Câu hỏi được nhóm theo cấp độ câu hỏi để dễ theo dõi độ khó và nội dung.</p>
  </div>
  <a class="button button-primary" href="/admin/questions/new">＋ Thêm câu hỏi</a>
</div>

<div class="stat-grid">
  <div class="stat-card"><span class="stat-label">TỔNG CÂU HỎI</span><strong><%= total %></strong><span class="stat-accent">Đang sử dụng</span></div>
  <div class="stat-card"><span class="stat-label">CẤP ĐỘ CÂU HỎI</span><strong><%= levelCount %></strong><span class="stat-accent">Nhóm cấp độ</span></div>
  <div class="stat-card"><span class="stat-label">HÌNH ẢNH</span><strong><%= typeCounts[1] %></strong><span class="stat-accent">Type 1 · assetUrl</span></div>
  <div class="stat-card"><span class="stat-label">AUDIO</span><strong><%= typeCounts[3] %></strong><span class="stat-accent">Type 3 · assetUrl</span></div>
</div>

<% if (saved || deleted) { %><div class="notice success">✓ Thay đổi đã được lưu thành công.</div><% } %>
<section class="panel">
  <div class="panel-toolbar">
    <div><h2>Danh sách câu hỏi theo cấp độ</h2><span class="muted small-text"><%= questions.length %> kết quả · <%= levelCount %> cấp độ</span></div>
    <form class="search-form" method="get" action="/admin/questions">
      <input name="search" value="<%= search %>" placeholder="Tìm nội dung, hint hoặc asset URL..." aria-label="Tìm câu hỏi">
      <button class="search-button" type="submit">⌕</button>
    </form>
  </div>
  <div class="table-scroll">
    <table class="question-table">
      <thead><tr><th style="width: 70px">#</th><th>CÂU HỎI / ASSET</th><th style="width: 150px">LOẠI</th><th style="width: 240px">ĐÁP ÁN</th><th style="width: 130px">THAO TÁC</th></tr></thead>
      <tbody>
      <% groupedQuestions.forEach((group) => { %>
        <tr class="level-divider"><td colspan="5"><div class="level-title"><span class="level-badge">CẤP ĐỘ <%= group.level %></span><strong>Cấp độ câu hỏi <%= group.level %></strong><span><%= group.questions.length %> câu hỏi trong nhóm</span></div></td></tr>
        <% group.questions.forEach((item) => { %>
          <tr>
            <td class="id-cell">Q<%= String(item.id).padStart(2, '0') %></td>
            <td>
              <div class="question-text"><%= item.question %></div>
              <% if (item.hint) { %><div class="question-hint">Gợi ý: <%= item.hint %></div><% } %>
              <% if (item.assetUrl) { %><a class="asset-link" href="<%= item.assetUrl %>" target="_blank" rel="noreferrer">↗ <%= item.assetUrl.length > 45 ? item.assetUrl.slice(0, 45) + '…' : item.assetUrl %></a><% } %>
              <div class="answer-count"><%= item.answers.length %> đáp án · Cấp độ <%= item.challengeLevel %></div>
            </td>
            <td><span class="type-pill type-<%= item.type %>"><span class="type-dot"></span><%= ['Trắc nghiệm', 'Hình ảnh', 'Từ vựng', 'Audio'][item.type] %></span></td>
            <td><div class="answer-preview"><% item.answers.forEach((answer, index) => { %><span class="answer-chip <%= index === item.correctIndex ? 'correct' : '' %>"><%= index === item.correctIndex ? '✓ ' : '' %><%= answer.length > 26 ? answer.slice(0, 26) + '…' : answer %></span><% }) %></div></td>
            <td><div class="row-actions"><a class="icon-button" href="/admin/questions/<%= item.id %>/edit" title="Chỉnh sửa">✎</a><form method="post" action="/admin/questions/<%= item.id %>/delete" onsubmit="return confirm('Xóa câu hỏi này?')"><button class="icon-button danger" title="Xóa" type="submit">⌫</button></form></div></td>
          </tr>
        <% }) %>
      <% }) %>
      <% if (!questions.length) { %><tr><td colspan="5" class="empty-state">Chưa có câu hỏi phù hợp. Hãy thêm câu hỏi đầu tiên.</td></tr><% } %>
      </tbody>
    </table>
  </div>
</section>
<%- include('footer.ejs') %>
