{% extends 'base.html' %}

{% block content %}
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-lg-9">
      <div class="card shadow-sm border-0 rounded-4">
        <div class="card-body p-4">
          <h1 class="h3 fw-bold">{{ assessment.title }}</h1>
          <p class="text-muted">{{ assessment.description|default:"Answer the questions below carefully." }}</p>
          <p class="small text-muted">Duration: {{ assessment.duration_minutes }} mins</p>

          <div class="alert alert-info rounded-4 mb-4">
            <h2 class="h6 mb-2">Professional Exam Proctoring</h2>
            <p class="mb-1">This exam is monitored using browser activity and camera access. By continuing, you consent to on-screen and webcam monitoring.</p>
            <p class="mb-0 small text-muted">Do not switch tabs or applications during the exam. Switching browsers or leaving the exam window may trigger automatic submission.</p>
          </div>
          <form method="post" action="{% url 'cbt:submit_assessment' assessment.pk %}" id="cbt-exam-form">
            {% csrf_token %}
            <div class="mb-3 text-end">
              <strong>Time left:</strong>
              <span id="cbt-timer" class="fw-bold text-danger">--:--</span>
            </div>
            {% if questions %}
            <div id="cbt-questions-container">
              {% for question in questions %}
              <div class="border rounded-3 p-3 mb-3 cbt-question" data-index="{{ forloop.counter0 }}" {% if not forloop.first %}style="display:none;"{% endif %}>
                <div class="d-flex justify-content-between align-items-start mb-2">
                  <h2 class="h6 fw-semibold">{{ forloop.counter }}. {{ question.prompt }}</h2>
                  <span class="badge bg-secondary">{{ question.get_question_type_display }}</span>
                </div>

                {% with normalized_question_type=question.question_type|lower %}
                  {% if normalized_question_type == 'mcq' or normalized_question_type == 'multiple_choice' or normalized_question_type == 'multiple-choice' or normalized_question_type == 'multiple choice' %}
                    {% for option in question.options_list %}
                    <div class="form-check">
                      <input class="form-check-input" type="radio" name="question_{{ question.pk }}" id="q{{ question.pk }}_{{ forloop.counter }}" value="{{ option.text }}">
                      <label class="form-check-label" for="q{{ question.pk }}_{{ forloop.counter }}">{{ option.text }}</label>
                    </div>
                    {% endfor %}
                  {% elif normalized_question_type == 'true_false' or normalized_question_type == 'true/false' or normalized_question_type == 'true-false' or normalized_question_type == 'true false' %}
                    <div class="form-check">
                      <input class="form-check-input" type="radio" name="question_{{ question.pk }}" value="True">
                      <label class="form-check-label">True</label>
                    </div>
                    <div class="form-check">
                      <input class="form-check-input" type="radio" name="question_{{ question.pk }}" value="False">
                      <label class="form-check-label">False</label>
                    </div>
                  {% elif normalized_question_type == 'short_answer' or normalized_question_type == 'short-answer' or normalized_question_type == 'short answer' %}
                    <textarea class="form-control" name="question_{{ question.pk }}" rows="3"></textarea>
                  {% else %}
                    <textarea class="form-control" name="question_{{ question.pk }}" rows="3" placeholder="Type your mathematical solution or final answer"></textarea>
                    <small class="text-muted">You can include formulas such as 2x + 3 = 7 or A = πr².</small>
                  {% endif %}
                {% endwith %}
              </div>
              {% endfor %}
            </div>

            <div class="d-flex justify-content-between align-items-center mt-3">
              <div>
                <button type="button" id="cbt-prev" class="btn btn-outline-secondary" disabled>← Prev</button>
                <button type="button" id="cbt-next" class="btn btn-outline-secondary">Next →</button>
              </div>
              <div class="text-muted">
                <small id="cbt-progress">Question 1 of {{ questions|length }}</small>
              </div>
              <div>
                <button class="btn btn-danger d-none" id="cbt-abort" type="button">Abort Exam</button>
                <button class="btn btn-primary" id="cbt-submit-btn" type="submit">Submit Assessment</button>
              </div>
            </div>
            {% else %}
            <div class="alert alert-info">No questions have been added to this assessment yet.</div>
            {% endif %}
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_body %}
{{ block.super }}

<script>
  (function(){
    var remaining = {{ remaining_seconds|default:0 }};
    function formatTime(s){
      var m = Math.floor(s/60); var sec = s%60; return String(m).padStart(2,'0')+':'+String(sec).padStart(2,'0');
    }
    var display = document.getElementById('cbt-timer');
    if(display){
      display.textContent = formatTime(remaining);
      var interval = setInterval(function(){
        remaining -= 1;
        if(remaining < 0){
          clearInterval(interval);
          var f = document.getElementById('cbt-exam-form');
          if(f) f.submit();
          return;
        }
        display.textContent = formatTime(remaining);
      }, 1000);
    }
  })();
</script>

<script>
  // Proctoring client events: send to server for logging
  (function(){
    function getCsrf(){
      var cookieValue = null;
      var name = 'csrftoken';
      if (document.cookie && document.cookie !== ''){
        var cookies = document.cookie.split(';');
        for (var i=0;i<cookies.length;i++){
          var c = cookies[i].trim();
          if (c.substring(0, name.length+1) === (name + '=')){
            cookieValue = decodeURIComponent(c.substring(name.length+1));
            break;
          }
        }
      }
      return cookieValue;
    }

    var csrf = getCsrf();
    var attemptId = {{ attempt.pk|default:'null' }};
    var endpoint = "{% url 'cbt:proctor_event' %}";
    var warnings = 0;
    var switchCount = 0;
    var blurCount = 0;
    var cameraStream = null;
    var cameraActive = false;
    var autoSubmitThreshold = 2;
    var warningBanner = document.createElement('div');
    warningBanner.className = 'alert alert-warning rounded-4 mb-4';
    warningBanner.textContent = 'Proctoring is active. Please keep this browser window visible and do not switch applications.';
    var card = document.querySelector('.card-body');
    if(card) card.parentNode.insertBefore(warningBanner, card);

    function sendEvent(type, meta){
      if(!attemptId) return;
      try{
        fetch(endpoint, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrf
          },
          body: JSON.stringify({event_type: type, meta: meta || {}}),
          credentials: 'same-origin'
        });
      }catch(e){ console.warn('proctor send failed', e); }
    }

    function tryCamera(){
      if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        sendEvent('camera_unavailable', {});
        return;
      }
      var constraints = {video: {facingMode: {ideal: 'user'}}};
      navigator.mediaDevices.getUserMedia(constraints)
        .then(function(stream){
          cameraStream = stream;
          cameraActive = true;
          sendEvent('camera_granted', {facingMode: 'user'});
          var preview = document.createElement('video');
          preview.autoplay = true;
          preview.muted = true;
          preview.playsInline = true;
          preview.style.width = '120px';
          preview.style.height = '90px';
          preview.style.border = '1px solid #ccc';
          preview.style.borderRadius = '8px';
          preview.style.marginTop = '0.75rem';
          preview.srcObject = stream;
          warningBanner.appendChild(preview);
          captureSnapshotInterval();
        })
        .catch(function(err){
          cameraActive = false;
          sendEvent('camera_denied', {error: err.message});
          warningBanner.textContent = 'Camera permission was denied. Please allow camera access to continue the proctored exam.';
        });
    }

    function captureSnapshotInterval(){
      if(!cameraStream) return;
      var videoTracks = cameraStream.getVideoTracks();
      if(!videoTracks.length) return;
      var video = document.createElement('video');
      video.srcObject = cameraStream;
      video.play();
      setInterval(function(){
        if(video.readyState !== 4) return;
        var canvas = document.createElement('canvas');
        canvas.width = 160;
        canvas.height = 120;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        var snapshot = canvas.toDataURL('image/jpeg', 0.5);
        sendEvent('camera_snapshot', {snapshot: snapshot.substring(0, 200), timestamp: Date.now()});
      }, 45000);
    }

    function handleWarning(eventType, details){
      warnings += 1;
      sendEvent(eventType, details);
      if(warnings >= autoSubmitThreshold){
        warningBanner.className = 'alert alert-danger rounded-4 mb-4';
        warningBanner.textContent = 'Exam submitted automatically due to repeated proctoring violations.';
        var f = document.getElementById('cbt-exam-form');
        if(f) setTimeout(function(){ f.submit(); }, 1500);
      } else {
        warningBanner.textContent = 'Warning: proctoring violation detected (' + eventType + '). Continued violations may submit the exam automatically.';
      }
    }

    document.addEventListener('visibilitychange', function(){
      if(document.visibilityState === 'hidden'){
        switchCount += 1;
        handleWarning('tab_switch', {count: switchCount});
      }
    });

    window.addEventListener('blur', function(){
      blurCount += 1;
      handleWarning('blur', {count: blurCount});
    });

    window.addEventListener('copy', function(){ sendEvent('copy', {}); });
    window.addEventListener('paste', function(){ sendEvent('paste', {}); });
    window.addEventListener('contextmenu', function(){ sendEvent('contextmenu', {}); });

    window.addEventListener('beforeunload', function(){ sendEvent('beforeunload', {}); });

    setTimeout(function(){ tryCamera(); }, 1000);
  })();
</script>

<script>
  // Single-question navigation (client-side)
  (function(){
    var questions = Array.prototype.slice.call(document.querySelectorAll('.cbt-question'));
    if(!questions.length) return;
    var current = 0;
    var prevBtn = document.getElementById('cbt-prev');
    var nextBtn = document.getElementById('cbt-next');
    var progress = document.getElementById('cbt-progress');

    function show(index){
      if(index < 0 || index >= questions.length) return;
      questions.forEach(function(q,i){ q.style.display = (i===index)?'block':'none'; });
      current = index;
      progress.textContent = 'Question ' + (current+1) + ' of ' + questions.length;
      prevBtn.disabled = current === 0;
      nextBtn.textContent = (current === questions.length - 1) ? 'Finish' : 'Next →';
      // focus first input if present
      var firstInput = questions[current].querySelector('input, textarea, select');
      if(firstInput) firstInput.focus();
      window.scrollTo({ top: questions[current].getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' });
    }

    prevBtn.addEventListener('click', function(){ show(current-1); });
    nextBtn.addEventListener('click', function(){
      if(current === questions.length - 1){
        // on last question, submit the form
        document.getElementById('cbt-exam-form').submit();
      } else {
        show(current+1);
      }
    });

    // support left/right arrow keys
    document.addEventListener('keydown', function(e){
      if(e.key === 'ArrowLeft') return show(current-1);
      if(e.key === 'ArrowRight') return show(current+1);
    });

    // initial show
    show(0);
  })();
</script>

{% endblock %}