<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= quiz.title %> — Attempt</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">
    <span style="color:rgba(255,255,255,0.6);font-size:0.9rem;">Good luck, <%= guestName %></span>
  </div>
</nav>

<div class="page">
  <div class="container">
    <div class="attempt-wrap">

      <!-- Questions -->
      <div>
        <div style="margin-bottom:1.5rem;">
          <h2 style="margin-bottom:0.25rem;"><%= quiz.title %></h2>
          <p style="color:var(--text-muted);font-size:0.9rem;"><%= questions.length %> questions &mdash; answer all before time runs out</p>
        </div>

        <form id="quiz-form" action="<%= base %>/quiz/<%= quiz.id %>/submit" method="POST">
          <input type="hidden" name="guest_name" value="<%= guestName %>">

          <% questions.forEach((q, idx) => { %>
            <div class="question-card">
              <div class="question-num">Question <%= idx + 1 %> of <%= questions.length %></div>
              <p class="question-text"><%= q.question_text %></p>
              <div class="options">
                <% q.answers.forEach(answer => { %>
                  <label class="option-label">
                    <input type="radio" name="question_<%= q.id %>" value="<%= answer.id %>">
                    <span><%= answer.answer_text %></span>
                  </label>
                <% }) %>
              </div>
            </div>
          <% }) %>

          <button type="submit" class="btn btn-primary btn-full" style="padding:16px;font-size:1rem;margin-top:0.5rem;" id="submit-btn">
            Submit Quiz &rarr;
          </button>
        </form>
      </div>

      <!-- Timer sidebar -->
      <div>
        <div class="timer-box">
          <div class="timer-label">Time Remaining</div>
          <div class="timer-display" id="timer-display">--:--</div>
          <div class="timer-progress">
            <div class="timer-progress-bar" id="timer-bar" style="width:100%"></div>
          </div>
          <div class="timer-quiz-name"><%= quiz.title %></div>
          <div style="margin-top:1.25rem;font-size:0.82rem;color:rgba(255,255,255,0.45);">
            <span id="answered-count">0</span> / <%= questions.length %> answered
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<script>
  const TOTAL_SECONDS = <%= quiz.time_limit %> * 60;
  const startTime = Date.now();
  const timerDisplay = document.getElementById('timer-display');
  const timerBar = document.getElementById('timer-bar');
  const form = document.getElementById('quiz-form');
  let submitted = false;

  function submitQuiz() {
    if (submitted) return;
    submitted = true;
    document.getElementById('submit-btn').disabled = true;
    form.submit();
  }

  function tick() {
    const elapsed = Math.floor((Date.now() - startTime) / 1000);
    const remaining = TOTAL_SECONDS - elapsed;

    if (remaining <= 0) {
      timerDisplay.textContent = '00:00';
      timerBar.style.width = '0%';
      submitQuiz();
      return;
    }

    const mins = Math.floor(remaining / 60);
    const secs = remaining % 60;
    timerDisplay.textContent = String(mins).padStart(2, '0') + ':' + String(secs).padStart(2, '0');
    timerBar.style.width = ((remaining / TOTAL_SECONDS) * 100) + '%';

    if (remaining <= 60) {
      timerDisplay.classList.add('warning');
      timerBar.style.background = '#f87171';
    }
  }

  setInterval(tick, 1000);
  tick();

  // Track answered questions
  document.querySelectorAll('input[type=radio]').forEach(radio => {
    radio.addEventListener('change', () => {
      const answered = new Set(
        [...document.querySelectorAll('input[type=radio]:checked')].map(r => r.name)
      ).size;
      document.getElementById('answered-count').textContent = answered;
    });
  });

  // Prevent accidental navigation
  window.addEventListener('beforeunload', e => {
    if (!submitted) {
      e.preventDefault();
      e.returnValue = '';
    }
  });

  document.getElementById('quiz-form').addEventListener('submit', () => {
    submitted = true;
    window.removeEventListener('beforeunload', () => {});
  });
</script>

</body>
</html>
