{% extends "base.html" %}
{% block title %}Détail – {{ student.full_name }}{% endblock %}

{% block head %}
<style>
  body { -webkit-user-select: auto; user-select: auto; }
</style>
{% endblock %}

{% block body %}
<nav class="bg-white border-b border-slate-200 sticky top-0 z-40 shadow-sm">
  <div class="max-w-5xl mx-auto px-6 py-4 flex items-center gap-3">
    <a href="{{ root_path }}/instructor" class="text-slate-400 hover:text-slate-700 text-sm">← Dashboard</a>
    <span class="text-slate-300">/</span>
    <span class="text-slate-700 font-medium text-sm">{{ student.full_name }}</span>
  </div>
</nav>

<div class="max-w-5xl mx-auto px-6 py-8">

  <!-- Student info + grade summary -->
  <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6 mb-6">
    <div class="flex items-start justify-between flex-wrap gap-4">
      <div>
        <h1 class="text-xl font-bold text-slate-800">{{ student.full_name }}</h1>
        <p class="text-slate-500 text-sm">{{ student.email }}</p>
        {% if assessment %}
        <p class="text-xs text-slate-400 mt-1">
          Démarré : {{ assessment.started_at[:16].replace('T',' ') }}
          {% if assessment.submitted_at %}
          · Soumis : {{ assessment.submitted_at[:16].replace('T',' ') }}
          {% endif %}
        </p>
        {% endif %}
      </div>

      {% if grade %}
      <div class="flex gap-4">
        <div class="text-center bg-blue-50 rounded-xl px-5 py-3">
          <div class="text-xl font-bold text-blue-700">{{ "%.1f"|format(grade.quiz_score) }}/12</div>
          <div class="text-xs text-blue-500">QCM</div>
        </div>
        <div class="text-center bg-amber-50 rounded-xl px-5 py-3">
          <div class="text-xl font-bold text-amber-700">{{ "%.1f"|format(grade.usecase_score) }}/8</div>
          <div class="text-xs text-amber-500">Cas pratiques</div>
        </div>
        <div class="text-center bg-green-50 rounded-xl px-5 py-3 border-2 border-green-300">
          <div class="text-2xl font-bold text-green-700">{{ "%.1f"|format(grade.total_score) }}/20</div>
          <div class="text-xs text-green-500 font-semibold">Note finale</div>
        </div>
      </div>
      {% else %}
      <div class="text-slate-400 text-sm">Pas encore de note</div>
      {% endif %}
    </div>

    <!-- Manual grade adjustment -->
    {% if grade %}
    <div class="mt-5 pt-5 border-t border-slate-100">
      <h3 class="text-sm font-semibold text-slate-600 mb-3">Ajustement manuel de la note</h3>
      <div class="flex gap-3 items-end">
        <div>
          <label class="text-xs text-slate-500 block mb-1">Note totale /20</label>
          <input type="number" id="manual-score" min="0" max="20" step="0.5"
            value="{{ "%.1f"|format(grade.total_score) }}"
            class="border border-slate-300 rounded-lg px-3 py-2 text-sm w-24 focus:outline-none focus:ring-2 focus:ring-blue-500" />
        </div>
        <div class="flex-1">
          <label class="text-xs text-slate-500 block mb-1">Notes instructeur</label>
          <input type="text" id="instructor-notes"
            value="{{ grade.instructor_notes or '' }}"
            placeholder="Commentaire optionnel..."
            class="border border-slate-300 rounded-lg px-3 py-2 text-sm w-full focus:outline-none focus:ring-2 focus:ring-blue-500" />
        </div>
        <button onclick="updateGrade({{ assessment.id }})"
          class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
          Enregistrer
        </button>
        <span id="save-status" class="text-xs text-green-600 opacity-0 transition-opacity">✓ Sauvegardé</span>
      </div>
    </div>
    {% endif %}
  </div>

  {% if not assessment %}
  <div class="bg-white rounded-2xl border border-slate-200 p-10 text-center text-slate-400">
    <div class="text-4xl mb-3">📭</div>
    <p>Cet étudiant n'a pas encore démarré l'évaluation.</p>
  </div>
  {% else %}

  <!-- Quiz answers -->
  <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden mb-6">
    <div class="px-6 py-4 border-b border-slate-100 bg-blue-50">
      <h2 class="font-bold text-blue-800">Partie 1 – QCM</h2>
    </div>
    <div class="divide-y divide-slate-100">
      {% for qa in quiz_answers %}
      <div class="px-6 py-4">
        <div class="flex items-start justify-between gap-4 mb-2">
          <div class="flex items-center gap-2">
            <span class="text-xs font-semibold bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Q{{ loop.index }}</span>
            <span class="text-xs text-slate-400">{{ qa.topic }}</span>
          </div>
          <span class="flex-shrink-0">
            {% if qa.is_correct %}
              <span class="bg-green-100 text-green-700 text-xs font-bold px-2.5 py-1 rounded-full">✓ Correct</span>
            {% else %}
              <span class="bg-red-100 text-red-700 text-xs font-bold px-2.5 py-1 rounded-full">✗ Incorrect</span>
            {% endif %}
          </span>
        </div>
        <p class="text-sm text-slate-700 font-medium mb-3">{{ qa.question }}</p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-2 mb-3">
          {% for choice, label in [(qa.choice_a,'A'),(qa.choice_b,'B'),(qa.choice_c,'C'),(qa.choice_d,'D')] %}
          <div class="text-xs px-3 py-2 rounded-lg border
            {% if label == qa.correct_answer %}border-green-400 bg-green-50 text-green-800 font-semibold
            {% elif label == qa.student_answer and label != qa.correct_answer %}border-red-300 bg-red-50 text-red-700
            {% else %}border-slate-200 bg-white text-slate-600{% endif %}">
            {% if label == qa.student_answer %}<span class="font-bold">→ </span>{% endif %}
            {{ choice }}
          </div>
          {% endfor %}
        </div>
        {% if not qa.is_correct %}
        <div class="bg-amber-50 border border-amber-200 rounded-lg px-3 py-2 text-xs text-amber-800">
          💡 {{ qa.explanation }}
        </div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- Use case answers -->
  <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
    <div class="px-6 py-4 border-b border-slate-100 bg-amber-50 flex items-center justify-between">
      <h2 class="font-bold text-amber-800">Partie 2 – Cas Pratiques</h2>
      <!-- Legend -->
      <div class="flex items-center gap-3 text-xs">
        <span class="flex items-center gap-1"><span class="inline-block w-3 h-3 rounded-sm bg-green-500"></span> Correct coché</span>
        <span class="flex items-center gap-1"><span class="inline-block w-3 h-3 rounded-sm bg-red-500"></span> Faux coché</span>
        <span class="flex items-center gap-1"><span class="inline-block w-3 h-3 rounded-sm bg-orange-400"></span> Oublié</span>
        <span class="flex items-center gap-1"><span class="inline-block w-3 h-3 rounded-sm bg-slate-300"></span> Correct ignoré</span>
      </div>
    </div>
    <div class="divide-y divide-slate-100">
      {% for uca in uc_list %}
      <div class="px-6 py-6">

        <!-- Header: topic + score -->
        <div class="flex items-start justify-between mb-3">
          <div>
            <span class="text-xs font-semibold bg-amber-100 text-amber-700 px-2 py-0.5 rounded-full">Cas {{ loop.index }}</span>
            <span class="text-sm font-bold text-slate-700 ml-2">{{ uca.topic }}</span>
          </div>
          {% set score_pct = (uca.auto_score / uca.max_score * 100)|int if uca.max_score > 0 else 0 %}
          <div class="flex items-center gap-2">
            <div class="w-20 h-2 bg-slate-200 rounded-full overflow-hidden">
              <div class="h-2 rounded-full
                {% if score_pct >= 75 %}bg-green-500
                {% elif score_pct >= 40 %}bg-amber-400
                {% else %}bg-red-400{% endif %}"
                style="width: {{ score_pct }}%"></div>
            </div>
            <span class="font-bold text-sm
              {% if score_pct >= 75 %}text-green-700
              {% elif score_pct >= 40 %}text-amber-700
              {% else %}text-red-600{% endif %}">
              {{ "%.2f"|format(uca.auto_score) }}/{{ uca.max_score|int }}
            </span>
          </div>
        </div>

        <!-- Scenario -->
        <div class="bg-slate-50 border-l-4 border-blue-400 p-3 rounded-r-lg text-xs text-slate-600 mb-3 leading-relaxed">
          <strong class="text-slate-700">Contexte :</strong> {{ uca.scenario }}
        </div>

        <!-- Question -->
        <p class="text-sm font-medium text-slate-700 mb-3 italic">{{ uca.question }}</p>

        <!-- Annotated items -->
        <div class="mb-4 space-y-2">
          <p class="text-xs text-slate-500 font-semibold uppercase tracking-wide mb-2">Réponses cochées vs attendues</p>

          {% if uca.propositions %}
            {% for item in uca.propositions %}
              {% if item.result == 'tp' %}
                {# True positive: checked AND correct → green #}
                <div class="flex items-start gap-3 px-4 py-3 rounded-xl border border-green-300 bg-green-50">
                  <div class="flex-shrink-0 mt-0.5">
                    <span class="inline-flex items-center justify-center w-5 h-5 rounded bg-green-500 text-white text-xs font-bold">✓</span>
                  </div>
                  <span class="text-sm text-green-800 flex-1">{{ item.text }}</span>
                  <span class="flex-shrink-0 text-xs font-semibold text-green-600 bg-green-100 px-2 py-0.5 rounded-full whitespace-nowrap">✓ Correct coché</span>
                </div>
              {% elif item.result == 'fp' %}
                {# False positive: checked but NOT correct → red (penalty) #}
                <div class="flex items-start gap-3 px-4 py-3 rounded-xl border border-red-300 bg-red-50">
                  <div class="flex-shrink-0 mt-0.5">
                    <span class="inline-flex items-center justify-center w-5 h-5 rounded bg-red-500 text-white text-xs font-bold">✗</span>
                  </div>
                  <span class="text-sm text-red-800 flex-1">{{ item.text }}</span>
                  <span class="flex-shrink-0 text-xs font-semibold text-red-600 bg-red-100 px-2 py-0.5 rounded-full whitespace-nowrap">✗ Faux coché (−pénalité)</span>
                </div>
              {% elif item.result == 'fn' %}
                {# False negative: NOT checked but WAS correct → orange (missed) #}
                <div class="flex items-start gap-3 px-4 py-3 rounded-xl border border-orange-300 bg-orange-50">
                  <div class="flex-shrink-0 mt-0.5">
                    <span class="inline-flex items-center justify-center w-5 h-5 rounded border-2 border-orange-400 bg-white text-orange-500 text-xs font-bold">○</span>
                  </div>
                  <span class="text-sm text-orange-800 flex-1">{{ item.text }}</span>
                  <span class="flex-shrink-0 text-xs font-semibold text-orange-600 bg-orange-100 px-2 py-0.5 rounded-full whitespace-nowrap">⚠ Oublié (attendu)</span>
                </div>
              {% else %}
                {# True negative: NOT checked AND NOT correct → neutral/slate #}
                <div class="flex items-start gap-3 px-4 py-3 rounded-xl border border-slate-200 bg-slate-50">
                  <div class="flex-shrink-0 mt-0.5">
                    <span class="inline-flex items-center justify-center w-5 h-5 rounded border-2 border-slate-300 bg-white text-slate-400 text-xs">○</span>
                  </div>
                  <span class="text-sm text-slate-500 flex-1">{{ item.text }}</span>
                  <span class="flex-shrink-0 text-xs text-slate-400 bg-slate-100 px-2 py-0.5 rounded-full whitespace-nowrap">Correct ignoré</span>
                </div>
              {% endif %}
            {% endfor %}

            <!-- Score breakdown -->
            {% set tp_count = uca.propositions | selectattr('result', 'equalto', 'tp') | list | length %}
            {% set fp_count = uca.propositions | selectattr('result', 'equalto', 'fp') | list | length %}
            {% set fn_count = uca.propositions | selectattr('result', 'equalto', 'fn') | list | length %}
            {% set correct_count = uca.propositions | selectattr('correct', 'equalto', true) | list | length %}
            <div class="mt-3 flex flex-wrap gap-2 text-xs">
              <span class="bg-green-100 text-green-700 px-2.5 py-1 rounded-full font-medium">✓ {{ tp_count }}/{{ correct_count }} corrects cochés</span>
              {% if fp_count > 0 %}
              <span class="bg-red-100 text-red-700 px-2.5 py-1 rounded-full font-medium">✗ {{ fp_count }} faux positif{% if fp_count > 1 %}s{% endif %}</span>
              {% endif %}
              {% if fn_count > 0 %}
              <span class="bg-orange-100 text-orange-700 px-2.5 py-1 rounded-full font-medium">⚠ {{ fn_count }} oublié{% if fn_count > 1 %}s{% endif %}</span>
              {% endif %}
            </div>
          {% else %}
            <div class="bg-slate-50 border border-slate-200 rounded-xl p-4 text-sm text-slate-400 italic">
              (Aucune réponse fournie)
            </div>
          {% endif %}
        </div>

        <!-- Model answer (collapsible, instructor only) -->
        <details class="bg-green-50 border border-green-200 rounded-xl overflow-hidden">
          <summary class="px-4 py-3 text-xs font-semibold text-green-700 cursor-pointer select-none hover:bg-green-100 transition-colors">
            📖 Réponse modèle (instructeur)
          </summary>
          <div class="px-4 pb-4 pt-2 text-xs text-green-800 leading-relaxed border-t border-green-200">
            {{ uca.model_answer }}
          </div>
        </details>

      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}
</div>

<script>
const ROOT_PATH = "{{ root_path }}";
async function updateGrade(assessmentId) {
  const score = parseFloat(document.getElementById('manual-score').value);
  const notes = document.getElementById('instructor-notes').value;
  const resp = await fetch(`${ROOT_PATH}/instructor/update-grade/${assessmentId}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ total_score: score, notes: notes })
  });
  if (resp.ok) {
    const st = document.getElementById('save-status');
    st.style.opacity = '1';
    setTimeout(() => st.style.opacity = '0', 2000);
  }
}
</script>
{% endblock %}