{% extends "base.html" %}
{% block title %}Dashboard Instructeur{% endblock %}

{% block head %}
<style>
  body { -webkit-user-select: auto; user-select: auto; }
  .grade-bar { transition: width 0.6s ease; }
  .stat-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); }
  .table-row:hover { background-color: #f8fafc; }
</style>
{% endblock %}

{% block body %}
<!-- Top nav -->
<nav class="bg-white border-b border-slate-200 sticky top-0 z-40 shadow-sm">
  <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
    <div class="flex items-center gap-3">
      <span class="text-2xl">🎓</span>
      <div>
        <h1 class="font-bold text-slate-800">Dashboard Instructeur</h1>
        <p class="text-xs text-slate-500">Évaluation SI-ERP – ESITH 2025</p>
      </div>
    </div>
    <div class="flex items-center gap-3">
      <a href="{{ root_path }}/instructor/add-students"
        class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors">
        + Ajouter étudiants
      </a>
      <a href="{{ root_path }}/instructor/export-grades"
        class="border border-slate-300 text-slate-700 hover:bg-slate-50 text-sm font-medium px-4 py-2 rounded-lg transition-colors">
        📥 Exporter CSV
      </a>
      <a href="{{ root_path }}/logout" class="text-slate-400 hover:text-slate-600 text-sm">Déconnexion</a>
    </div>
  </div>
</nav>

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

  <!-- ── Stats cards ──────────────────────────────────────── -->
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
    <div class="stat-card bg-white rounded-2xl border border-slate-200 p-5 text-center shadow-sm">
      <div class="text-3xl font-bold text-blue-700">{{ total_students }}</div>
      <div class="text-xs text-slate-500 mt-1">Étudiants inscrits</div>
    </div>
    <div class="stat-card bg-white rounded-2xl border border-slate-200 p-5 text-center shadow-sm">
      <div class="text-3xl font-bold text-green-600">{{ submitted }}</div>
      <div class="text-xs text-slate-500 mt-1">Évaluations soumises</div>
    </div>
    <div class="stat-card bg-white rounded-2xl border border-slate-200 p-5 text-center shadow-sm">
      <div class="text-3xl font-bold text-amber-600">{{ in_progress }}</div>
      <div class="text-xs text-slate-500 mt-1">En cours</div>
    </div>
    <div class="stat-card bg-white rounded-2xl border border-slate-200 p-5 text-center shadow-sm">
      <div class="text-3xl font-bold text-purple-700">
        {% if avg_score is not none %}{{ avg_score }}/20{% else %}–{% endif %}
      </div>
      <div class="text-xs text-slate-500 mt-1">Moyenne de la classe</div>
    </div>
  </div>

  <!-- ── Grade distribution chart ────────────────────────── -->
  {% if grades %}
  <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6 mb-8">
    <h2 class="font-bold text-slate-800 mb-5">📊 Distribution des notes</h2>
    <div class="space-y-2">
      {% set buckets = {'0-9': 0, '10-11': 0, '12-13': 0, '14-15': 0, '16-17': 0, '18-20': 0} %}
      {% for g in grades %}
        {% if g.total_score < 10 %}{% set _ = buckets.update({'0-9': buckets['0-9'] + 1}) %}
        {% elif g.total_score < 12 %}{% set _ = buckets.update({'10-11': buckets['10-11'] + 1}) %}
        {% elif g.total_score < 14 %}{% set _ = buckets.update({'12-13': buckets['12-13'] + 1}) %}
        {% elif g.total_score < 16 %}{% set _ = buckets.update({'14-15': buckets['14-15'] + 1}) %}
        {% elif g.total_score < 18 %}{% set _ = buckets.update({'16-17': buckets['16-17'] + 1}) %}
        {% else %}{% set _ = buckets.update({'18-20': buckets['18-20'] + 1}) %}
        {% endif %}
      {% endfor %}
      {% set max_count = [1, buckets.values() | max] | max %}
      {% for range_label, count in buckets.items() %}
      <div class="flex items-center gap-3">
        <span class="text-xs text-slate-500 w-12 text-right flex-shrink-0">{{ range_label }}</span>
        <div class="flex-1 bg-slate-100 rounded-full h-6 relative overflow-hidden">
          <div class="grade-bar h-full rounded-full flex items-center justify-end pr-2
            {% if range_label == '0-9' %}bg-red-400
            {% elif range_label in ['10-11', '12-13'] %}bg-amber-400
            {% else %}bg-green-500{% endif %}"
            style="width: {{ (count / max_count * 100) | int }}%">
            {% if count > 0 %}<span class="text-white text-xs font-bold">{{ count }}</span>{% endif %}
          </div>
        </div>
        <span class="text-xs text-slate-400 w-6">{{ count }}</span>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  <!-- ── Grades table ─────────────────────────────────────── -->
  <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 flex items-center justify-between">
      <h2 class="font-bold text-slate-800">📋 Résultats des étudiants</h2>
      <span class="text-sm text-slate-500">{{ grades | length }} évaluation(s) complétée(s)</span>
    </div>

    {% if grades %}
    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead>
          <tr class="border-b border-slate-100 bg-slate-50">
            <th class="text-left px-6 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wide">Étudiant</th>
            <th class="text-center px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wide">QCM /12</th>
            <th class="text-center px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wide">Cas /8</th>
            <th class="text-center px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wide">Total /20</th>
            <th class="text-center px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wide">Mention</th>
            <th class="text-center px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wide">Soumis le</th>
            <th class="text-center px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wide">Détail</th>
          </tr>
        </thead>
        <tbody>
          {% for g in grades %}
          {% set score = g.total_score %}
          <tr class="table-row border-b border-slate-50">
            <td class="px-6 py-4">
              <div class="font-medium text-slate-800">{{ g.full_name }}</div>
              <div class="text-xs text-slate-400">{{ g.email }}</div>
            </td>
            <td class="px-4 py-4 text-center">
              <span class="font-semibold">{{ "%.1f"|format(g.quiz_score) }}</span>
            </td>
            <td class="px-4 py-4 text-center">
              <span class="font-semibold">{{ "%.1f"|format(g.usecase_score) }}</span>
            </td>
            <td class="px-4 py-4 text-center">
              <div class="flex items-center justify-center gap-2">
                <!-- Mini score bar -->
                <div class="w-16 bg-slate-200 rounded-full h-2">
                  <div class="h-2 rounded-full
                    {% if score >= 16 %}bg-green-500
                    {% elif score >= 12 %}bg-blue-500
                    {% elif score >= 10 %}bg-amber-500
                    {% else %}bg-red-400{% endif %}"
                    style="width: {{ (score / 20 * 100) | int }}%"></div>
                </div>
                <span class="font-bold
                  {% if score >= 16 %}text-green-700
                  {% elif score >= 12 %}text-blue-700
                  {% elif score >= 10 %}text-amber-700
                  {% else %}text-red-600{% endif %}">
                  {{ "%.1f"|format(score) }}
                </span>
              </div>
            </td>
            <td class="px-4 py-4 text-center">
              <span class="px-2.5 py-1 rounded-full text-xs font-medium
                {% if score >= 16 %}bg-green-100 text-green-700
                {% elif score >= 14 %}bg-blue-100 text-blue-700
                {% elif score >= 12 %}bg-sky-100 text-sky-700
                {% elif score >= 10 %}bg-amber-100 text-amber-700
                {% else %}bg-red-100 text-red-700{% endif %}">
                {% if score >= 16 %}Très bien
                {% elif score >= 14 %}Bien
                {% elif score >= 12 %}Assez bien
                {% elif score >= 10 %}Passable
                {% else %}Insuffisant{% endif %}
              </span>
            </td>
            <td class="px-4 py-4 text-center text-xs text-slate-400">
              {% if g.submitted_at %}
                {{ g.submitted_at[:16].replace('T', ' ') }}
              {% else %}–{% endif %}
            </td>
            <td class="px-4 py-4 text-center">
              <a href="{{ root_path }}/instructor/detail/{{ g.email | urlencode }}"
                class="text-blue-600 hover:text-blue-800 text-xs font-medium hover:underline">
                Voir détail →
              </a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="px-6 py-16 text-center text-slate-400">
      <div class="text-4xl mb-3">📭</div>
      <p class="font-medium">Aucune évaluation soumise pour le moment</p>
      <p class="text-sm mt-1">Les résultats apparaîtront ici une fois les étudiants connectés</p>
    </div>
    {% endif %}
  </div>
</div>

<script>
// Auto-refresh every 30 seconds
setTimeout(() => location.reload(), 30000);
</script>
{% endblock %}