{% extends "base.html" %}
{% block title %}Évaluation en cours{% endblock %}

{% block head %}
<style>
  /* Sticky timer bar */
  #timer-bar {
    position: sticky;
    top: 0;
    z-index: 50;
  }

  /* Quiz choice selected state */
  .choice-label input:checked+span {
    border-color: #2563eb;
    background-color: #eff6ff;
    color: #1d4ed8;
    font-weight: 600;
  }

  .choice-label span {
    display: block;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .choice-label span:hover {
    border-color: #93c5fd;
    background: #f0f9ff;
  }

  .choice-label input {
    display: none;
  }

  /* Checkbox item styles */
  .item-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 8px;
    background: white;
  }

  .item-label:hover {
    border-color: #f59e0b;
    background: #fffbeb;
  }

  .item-label input[type="checkbox"] {
    display: none;
  }

  .item-checkbox-visual {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #94a3b8;
    border-radius: 4px;
    background: white;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-size: 13px;
    line-height: 1;
    color: transparent;
  }

  .item-label.is-checked {
    border-color: #f59e0b;
    background: #fffbeb;
  }

  .item-label.is-checked .item-checkbox-visual {
    border-color: #f59e0b;
    background: #f59e0b;
    color: white;
  }

  .item-label.is-checked .item-text-wrap {
    font-weight: 500;
    color: #1d4ed8;
  }

  /* Progress nav dots */
  .nav-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
  }

  .nav-dot.answered {
    background: #22c55e;
  }

  /* Section headers */
  .section-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  /* Autosave indicator */
  #autosave-indicator {
    transition: opacity 0.5s;
  }
</style>
{% endblock %}

{% block body %}

<!-- STICKY TIMER + PROGRESS BAR -->
<div id="timer-bar" class="bg-white border-b border-slate-200 shadow-sm px-4 py-3">
  <div class="max-w-5xl mx-auto flex items-center justify-between gap-4">
    <div class="flex items-center gap-3 min-w-0">
      <div class="text-blue-700 font-bold text-sm hidden sm:block">📝 Évaluation SI-ERP</div>
      <div id="autosave-indicator" class="text-xs text-green-600 opacity-0">✓ Sauvegardé</div>
    </div>
    <div class="flex-1 max-w-xs">
      <div class="flex justify-between text-xs text-slate-500 mb-1">
        <span id="progress-label">0 / {{ quiz_count + usecase_count }} répondus</span>
      </div>
      <div class="w-full bg-slate-200 rounded-full h-2">
        <div id="progress-bar" class="bg-blue-500 h-2 rounded-full transition-all duration-300" style="width:0%"></div>
      </div>
    </div>
    <div id="timer-display"
      class="flex items-center gap-2 bg-slate-800 text-white px-4 py-2 rounded-xl font-mono font-bold text-lg min-w-[100px] justify-center">
      <span>⏱</span>
      <span id="timer-text">--:--</span>
    </div>
  </div>
</div>

<!-- MAIN CONTENT -->
<div class="max-w-5xl mx-auto px-4 py-8">
  <form id="assessment-form" method="post" action="{{ root_path }}/assessment/submit/{{ assessment_id }}">

    <!-- SECTION 1 : QCM -->
    <div class="mb-12">
      <div class="flex items-center gap-3 mb-6">
        <span class="section-badge bg-blue-100 text-blue-700">Partie 1</span>
        <h2 class="text-xl font-bold text-slate-800">Questions à Choix Multiples</h2>
        <span class="ml-auto text-sm text-slate-500 bg-slate-100 px-3 py-1 rounded-full">
          {{ quiz_count }} questions · 12 points
        </span>
      </div>

      <!-- Nav dots -->
      <div class="flex flex-wrap gap-2 mb-6 p-3 bg-slate-50 rounded-xl">
        {% for q in quizzes %}
        <div class="nav-dot {% if q.student_answer %}answered{% endif %}" id="dot-q-{{ q.id }}"
          title="Q{{ loop.index }}: {{ q.topic }}" onclick="scrollToQuestion('quiz-{{ q.id }}')"></div>
        {% endfor %}
      </div>

      <div class="space-y-6">
        {% for q in quizzes %}
        <div id="quiz-{{ q.id }}" class="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm">
          <div class="flex items-start justify-between mb-4">
            <div class="flex items-center gap-2">
              <span class="bg-blue-700 text-white text-xs font-bold px-2.5 py-1 rounded-full">Q{{ loop.index }}</span>
              <span class="text-xs text-slate-400 bg-slate-100 px-2 py-0.5 rounded-full">{{ q.topic }}</span>
            </div>
            <span class="text-xs text-blue-600 font-medium">0.8 pt</span>
          </div>
          <p class="text-slate-800 font-medium mb-5 leading-relaxed no-copy">{{ q.question }}</p>
          <div class="space-y-2.5">
            {% for choice in q.choices %}
            {% set letter = ['A', 'B', 'C', 'D'][loop.index0] %}
            <label class="choice-label block">
              <input type="radio" name="quiz_{{ q.id }}" value="{{ letter }}" {% if q.student_answer==letter %}checked{%
                endif %} onchange="saveQuizAnswer({{ q.id }}, '{{ letter }}')" />
              <span class="no-copy">{{ choice }}</span>
            </label>
            {% endfor %}
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    <!-- SECTION 2 : CAS PRATIQUES (cases à cocher) -->
    <div class="mb-12">
      <div class="flex items-center gap-3 mb-6">
        <span class="section-badge bg-amber-100 text-amber-700">Partie 2</span>
        <h2 class="text-xl font-bold text-slate-800">Cas Pratiques</h2>
        <span class="ml-auto text-sm text-slate-500 bg-slate-100 px-3 py-1 rounded-full">
          {{ usecase_count }} cas · 8 points
        </span>
      </div>

      <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-6 text-sm text-amber-800">
        ✅ <strong>Consigne :</strong> Pour chaque cas, lisez le contexte puis cochez
        <strong>toutes les affirmations exactes</strong>.
        Chaque bonne réponse cochée vous rapporte des points.
        Chaque mauvaise réponse cochée vous en enlève. Ne cochez que ce dont vous êtes sûr(e).
      </div>

      <!-- Nav dots for use cases -->
      <div class="flex flex-wrap gap-2 mb-6 p-3 bg-slate-50 rounded-xl">
        {% for uc in use_cases %}
        <div class="nav-dot {% if uc.has_answer %}answered{% endif %}" id="dot-uc-{{ uc.id }}"
          style="width:14px; height:14px;" title="Cas {{ loop.index }}: {{ uc.topic }}"
          onclick="scrollToQuestion('uc-{{ uc.id }}')"></div>
        {% endfor %}
      </div>

      <div class="space-y-8">
        {% for uc in use_cases %}
        <div id="uc-{{ uc.id }}" class="bg-white rounded-2xl border border-amber-200 shadow-sm overflow-hidden">
          <!-- Header -->
          <div class="bg-amber-50 border-b border-amber-200 px-6 py-4">
            <div class="flex items-center justify-between mb-1">
              <span class="bg-amber-600 text-white text-xs font-bold px-2.5 py-1 rounded-full">Cas {{ loop.index
                }}</span>
              <span class="text-xs text-amber-600 font-medium">4 points</span>
            </div>
            <h3 class="font-bold text-slate-800 text-base mt-2">{{ uc.topic }}</h3>
          </div>

          <div class="p-6">
            <!-- Scenario -->
            <div class="bg-slate-50 border-l-4 border-blue-500 rounded-r-xl p-4 mb-5">
              <p class="text-xs font-semibold text-blue-600 uppercase tracking-wide mb-2">📋 Contexte</p>
              <p class="text-slate-700 text-sm leading-relaxed no-copy">{{ uc.scenario }}</p>
            </div>

            <!-- Question instruction -->
            <div class="mb-4">
              <p class="font-semibold text-slate-800 mb-1 no-copy">{{ uc.question }}</p>
              <p class="text-xs text-slate-500 italic">Cochez toutes les affirmations EXACTES :</p>
            </div>

            <!-- Checkbox items -->
            <div id="items-uc-{{ uc.id }}">
              {% for item in uc.propositions %}
              {% set is_chk = item.id in uc.checked_ids %}
              <label class="item-label{% if is_chk %} is-checked{% endif %}" id="lbl-{{ item.id }}">
                <input type="checkbox" name="uc_{{ uc.id }}_item" value="{{ item.id }}" id="chk-{{ item.id }}"
                  {% if is_chk %}checked{% endif %}
                  onchange="scheduleUsecaseSave({{ uc.id }})" />
                <div class="item-checkbox-visual">✓</div>
                <div class="item-text-wrap text-sm text-slate-700 leading-relaxed no-copy">
                  {{ item.text }}
                </div>
              </label>
              {% endfor %}
            </div>

            <!-- Checked count -->
            <div class="mt-3 text-xs text-slate-400" id="checked-count-{{ uc.id }}">
              <span class="checked-num">{{ uc.checked_ids|length }}</span> affirmation(s) cochée(s)
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    <!-- SUBMIT BUTTON -->
    <div class="sticky bottom-6 flex justify-center">
      <button type="button" onclick="submitAssessment()"
        class="bg-green-600 hover:bg-green-700 text-white font-bold px-10 py-4 rounded-2xl shadow-xl text-base transition-all hover:scale-105 active:scale-100">
        ✅ Soumettre l'évaluation
      </button>
    </div>

  </form>
</div>

<!-- SUBMIT MODAL -->
<div id="submit-modal" class="hidden fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
  <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8 text-center">
    <div class="text-5xl mb-4">📤</div>
    <h2 class="text-xl font-bold text-slate-800 mb-2">Soumettre l'évaluation ?</h2>
    <p class="text-slate-600 text-sm mb-2">
      Vous avez répondu à <span id="modal-answered" class="font-bold text-blue-700">0</span> /
      <span class="font-bold">{{ quiz_count + usecase_count }}</span> questions.
    </p>
    <p class="text-slate-500 text-xs mb-6">Cette action est irréversible. Vous ne pourrez plus modifier vos réponses.
    </p>
    <div class="flex gap-3">
      <button onclick="closeModal()"
        class="flex-1 border border-slate-300 text-slate-700 py-3 rounded-xl hover:bg-slate-50 transition text-sm font-medium">
        ← Revenir
      </button>
      <form method="post" action="{{ root_path }}/assessment/submit/{{ assessment_id }}" id="final-submit-form" class="flex-1">
        <button type="submit"
          class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-xl transition text-sm font-bold">
          Confirmer →
        </button>
      </form>
    </div>
  </div>
</div>

<!-- TIME'S UP MODAL -->
<div id="times-up-modal" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4">
  <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8 text-center">
    <div class="text-5xl mb-4">⌛</div>
    <h2 class="text-2xl font-bold text-red-700 mb-2">Temps écoulé !</h2>
    <p class="text-slate-600 mb-6 text-sm">Votre évaluation va être soumise automatiquement avec les réponses
      enregistrées.</p>
    <div class="w-full bg-slate-200 rounded-full h-2 mb-2">
      <div id="submit-progress" class="bg-green-500 h-2 rounded-full transition-all duration-3000" style="width:0%">
      </div>
    </div>
    <p class="text-xs text-slate-400">Soumission en cours...</p>
  </div>
</div>

<!-- JAVASCRIPT -->
<script>
  const ROOT_PATH = "{{ root_path }}";
  const ASSESSMENT_ID = {{ assessment_id }};
  const REMAINING_SECONDS = {{ remaining_seconds }};
  const TOTAL_QUESTIONS = {{ quiz_count + usecase_count }};
  // Collect use case IDs for iteration
  const UC_IDS = [{% for uc in use_cases %}{{ uc.id }}{% if not loop.last %},{% endif %}{% endfor %}];

  let remainingSeconds = REMAINING_SECONDS;
  let answeredCount = 0;
  let saveTimers = {};

  // ── Timer ──────────────────────────────────────────────────
  function updateTimer() {
    const mins = Math.floor(remainingSeconds / 60);
    const secs = remainingSeconds % 60;
    document.getElementById('timer-text').textContent =
      `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;

    const timerEl = document.getElementById('timer-display');
    if (remainingSeconds <= 0) {
      timerEl.className = 'flex items-center gap-2 bg-red-600 text-white px-4 py-2 rounded-xl font-mono font-bold text-lg min-w-[100px] justify-center';
      timeUp(); return;
    }
    if (remainingSeconds <= 300) {
      timerEl.className = 'flex items-center gap-2 bg-red-600 text-white px-4 py-2 rounded-xl font-mono font-bold text-lg min-w-[100px] justify-center';
    } else if (remainingSeconds <= 600) {
      timerEl.className = 'flex items-center gap-2 bg-amber-500 text-white px-4 py-2 rounded-xl font-mono font-bold text-lg min-w-[100px] justify-center';
    }
    remainingSeconds--;
    setTimeout(updateTimer, 1000);
  }

  function timeUp() {
    document.getElementById('times-up-modal').classList.remove('hidden');
    setTimeout(() => { document.getElementById('submit-progress').style.width = '100%'; }, 100);
    setTimeout(() => { document.getElementById('final-submit-form').submit(); }, 3500);
  }

  // ── Progress tracking ──────────────────────────────────────
  function updateProgress() {
    const quizNames = new Set();
    document.querySelectorAll('input[type="radio"]:checked').forEach(r => quizNames.add(r.name));
    let answered = quizNames.size;

    UC_IDS.forEach(ucId => {
      const n = document.querySelectorAll(`input[name="uc_${ucId}_item"]:checked`).length;
      if (n > 0) answered++;
    });

    answeredCount = answered;
    const pct = Math.round((answered / TOTAL_QUESTIONS) * 100);
    document.getElementById('progress-bar').style.width = pct + '%';
    document.getElementById('progress-label').textContent = `${answered} / ${TOTAL_QUESTIONS} répondus`;

    document.querySelectorAll('input[type="radio"]:checked').forEach(r => {
      const qid = r.name.replace('quiz_', '');
      const dot = document.getElementById(`dot-q-${qid}`);
      if (dot) dot.classList.add('answered');
    });
  }

  // ── Save quiz answer via AJAX ──────────────────────────────
  async function saveQuizAnswer(quizId, letter) {
    try {
      await fetch(`${ROOT_PATH}/assessment/save-answer`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ assessment_id: ASSESSMENT_ID, type: 'quiz', question_id: quizId, answer: letter })
      });
      showAutosave();
      const dot = document.getElementById(`dot-q-${quizId}`);
      if (dot) dot.classList.add('answered');
      updateProgress();
    } catch (e) { console.error('Save error', e); }
  }

  // ── Save use case checkboxes (debounced) ──────────────────
  function scheduleUsecaseSave(ucId) {
    clearTimeout(saveTimers[ucId]);
    saveTimers[ucId] = setTimeout(() => saveUsecaseAnswer(ucId), 800);
  }

  async function saveUsecaseAnswer(ucId) {
    const checkedIds = [];
    document.querySelectorAll(`input[name="uc_${ucId}_item"]:checked`).forEach(cb => checkedIds.push(cb.value));

    // Update visual state of labels
    document.querySelectorAll(`input[name="uc_${ucId}_item"]`).forEach(cb => {
      const lbl = cb.closest('.item-label');
      if (lbl) {
        if (cb.checked) lbl.classList.add('is-checked');
        else lbl.classList.remove('is-checked');
      }
    });

    // Update count display
    const countEl = document.getElementById(`checked-count-${ucId}`);
    if (countEl) countEl.querySelector('.checked-num').textContent = checkedIds.length;

    // Update dot
    const dot = document.getElementById(`dot-uc-${ucId}`);
    if (dot) {
      if (checkedIds.length > 0) dot.classList.add('answered');
      else dot.classList.remove('answered');
    }

    try {
      const resp = await fetch(`${ROOT_PATH}/assessment/save-answer`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ assessment_id: ASSESSMENT_ID, type: 'usecase', question_id: ucId, answer: checkedIds })
      });
      const data = await resp.json();
      if (data.ok) { showAutosave(); updateProgress(); }
    } catch (e) { console.error('Save error', e); }
  }

  // ── Autosave indicator ─────────────────────────────────────
  let autosaveTimer;
  function showAutosave() {
    const el = document.getElementById('autosave-indicator');
    el.style.opacity = '1';
    clearTimeout(autosaveTimer);
    autosaveTimer = setTimeout(() => { el.style.opacity = '0'; }, 2500);
  }

  // ── Submit modal ───────────────────────────────────────────
  function submitAssessment() {
    UC_IDS.forEach(ucId => saveUsecaseAnswer(ucId));
    updateProgress();
    document.getElementById('modal-answered').textContent = answeredCount;
    document.getElementById('submit-modal').classList.remove('hidden');
  }

  function closeModal() { document.getElementById('submit-modal').classList.add('hidden'); }

  function scrollToQuestion(id) {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
  }

  // ── Init ───────────────────────────────────────────────────
  document.addEventListener('DOMContentLoaded', () => {
    updateTimer();
    updateProgress();

    // Auto-save every 30 seconds
    setInterval(() => { UC_IDS.forEach(ucId => saveUsecaseAnswer(ucId)); }, 30000);

    // Warn before leave
    window.addEventListener('beforeunload', e => {
      e.preventDefault();
      e.returnValue = 'Attention ! Si vous quittez, le chronomètre continue.';
    });

    // Prevent Enter key submit
    document.getElementById('assessment-form').addEventListener('keydown', e => {
      if (e.key === 'Enter') e.preventDefault();
    });
  });
</script>

{% endblock %}