<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Admin Dashboard</title>
  <link rel="stylesheet" href="<%= base %>/public/css/style.css">
</head>
<body>

<nav class="nav">
  <div class="nav-brand">&#9632; <span>Quiz</span>Platform</div>
  <div class="nav-links">
    <a href="<%= base %>/admin/dashboard" class="active">Dashboard</a>
    <a href="<%= base %>/admin/quizzes">Quizzes</a>
    <a href="<%= base %>/" target="_blank">View Site</a>
    <a href="<%= base %>/admin/logout" class="logout">Logout</a>
  </div>
</nav>

<div class="page">
  <div class="container">

    <div class="page-header">
      <div>
        <p style="font-size:0.82rem;color:var(--text-muted);margin-bottom:4px;">Welcome back, <%= adminName %></p>
        <h2 class="page-title">Dashboard</h2>
      </div>
      <a href="<%= base %>/admin/quizzes/new" class="btn btn-primary">+ New Quiz</a>
    </div>

    <div class="stats-row">
      <div class="stat-card">
        <div class="stat-num"><%= quizCount %></div>
        <div class="stat-label">Total Quizzes</div>
      </div>
      <div class="stat-card">
        <div class="stat-num"><%= attemptCount %></div>
        <div class="stat-label">Total Attempts</div>
      </div>
      <div class="stat-card">
        <div class="stat-num">
          <% if (results.length > 0) { %>
            <%= Math.round(results.reduce((s, r) => s + r.percentage, 0) / results.length) %>%
          <% } else { %>
            —
          <% } %>
        </div>
        <div class="stat-label">Average Score</div>
      </div>
    </div>

    <h3 style="margin-bottom:1.25rem;">Recent Attempts</h3>

    <% if (results.length === 0) { %>
      <div class="empty">
        <div class="empty-icon">&#128202;</div>
        <h3>No attempts yet</h3>
        <p>Results will appear here once students complete a quiz.</p>
      </div>
    <% } else { %>
      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th>Student Name</th>
              <th>Quiz</th>
              <th>Score</th>
              <th>Percentage</th>
              <th>Date</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <% results.forEach(r => { %>
              <tr>
                <td><strong><%= r.guest_name %></strong></td>
                <td><%= r.quiz_title %></td>
                <td><%= r.score %> / <%= r.total_questions %></td>
                <td>
                  <span class="badge <%= r.percentage >= 70 ? 'badge-pass' : 'badge-fail' %>">
                    <%= r.percentage %>%
                  </span>
                </td>
                <td style="color:var(--text-muted);font-size:0.85rem;"><%= new Date(r.submitted_at).toLocaleString() %></td>
                <td><a href="<%= base %>/admin/results/<%= r.id %>" class="btn btn-outline btn-sm">View</a></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    <% } %>

  </div>
</div>

</body>
</html>
