{% extends "base.html" %}
{% block title %}Ajouter des étudiants{% 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 shadow-sm">
  <div class="max-w-4xl 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">Ajouter des étudiants</span>
  </div>
</nav>

<div class="max-w-4xl mx-auto px-6 py-8">
  <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-8">
    <h1 class="text-xl font-bold text-slate-800 mb-2">Inscrire les étudiants</h1>
    <p class="text-slate-500 text-sm mb-6">
      Saisissez un étudiant par ligne au format <code class="bg-slate-100 px-1 rounded">email,Prénom Nom</code>.
      Un mot de passe sera généré et envoyé par email à chaque étudiant.
    </p>

    <!-- Quick paste area -->
    <div class="mb-6">
      <label class="block text-sm font-semibold text-slate-700 mb-2">
        Liste des étudiants (email,Nom Prénom)
      </label>
      <textarea id="students-input" rows="12"
        class="w-full border-2 border-slate-200 focus:border-blue-400 rounded-xl px-4 py-3 text-sm font-mono outline-none resize-none"
        placeholder="etudiant1@esith.ac.ma,Ahmed Benali
etudiant2@esith.ac.ma,Fatima Chraibi
etudiant3@esith.ac.ma,Youssef Alami"></textarea>
      <p class="text-xs text-slate-400 mt-1" id="count-label">0 étudiant(s) détecté(s)</p>
    </div>

    <!-- Email config warning -->
    <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 text-sm text-amber-800 mb-6">
      ⚠️ <strong>Configuration SMTP requise</strong> : Si les variables d'environnement
      <code>SMTP_USER</code> et <code>SMTP_PASS</code> ne sont pas configurées, les mots de passe
      seront affichés ici (mode démonstration) mais pas envoyés par email.
    </div>

    <div class="flex gap-3">
      <button onclick="submitStudents()"
        class="bg-blue-700 hover:bg-blue-800 text-white font-semibold px-6 py-3 rounded-xl transition-colors text-sm">
        ➕ Inscrire et envoyer les accès
      </button>
      <a href="{{ root_path }}/instructor" class="border border-slate-300 text-slate-700 hover:bg-slate-50 px-6 py-3 rounded-xl text-sm font-medium transition-colors">
        Annuler
      </a>
    </div>

    <!-- Results -->
    <div id="results" class="hidden mt-8">
      <h3 class="font-bold text-slate-700 mb-3">Résultats d'inscription</h3>
      <div id="results-table" class="overflow-x-auto">
        <table class="w-full text-sm border-collapse">
          <thead>
            <tr class="bg-slate-50 border-b">
              <th class="text-left px-4 py-2 text-xs font-semibold text-slate-500">Nom</th>
              <th class="text-left px-4 py-2 text-xs font-semibold text-slate-500">Email</th>
              <th class="text-left px-4 py-2 text-xs font-semibold text-slate-500">Mot de passe</th>
              <th class="text-center px-4 py-2 text-xs font-semibold text-slate-500">Email envoyé</th>
            </tr>
          </thead>
          <tbody id="results-body"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script>
const ROOT_PATH = "{{ root_path }}";
const input = document.getElementById('students-input');
const countLabel = document.getElementById('count-label');

input.addEventListener('input', () => {
  const lines = input.value.split('\n').filter(l => l.trim() && l.includes(','));
  countLabel.textContent = `${lines.length} étudiant(s) détecté(s)`;
});

async function submitStudents() {
  const lines = input.value.split('\n').filter(l => l.trim() && l.includes(','));
  if (lines.length === 0) {
    alert('Veuillez saisir au moins un étudiant.');
    return;
  }

  const students = lines.map(line => {
    const [email, ...nameParts] = line.split(',');
    return { email: email.trim(), full_name: nameParts.join(',').trim() };
  });

  const btn = document.querySelector('button[onclick="submitStudents()"]');
  btn.disabled = true;
  btn.textContent = '⏳ Inscription en cours...';

  const resp = await fetch(`${ROOT_PATH}/instructor/add-students`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ students })
  });
  const data = await resp.json();

  if (data.ok) {
    const tbody = document.getElementById('results-body');
    tbody.innerHTML = '';
    if (data.results.length === 0) {
      tbody.innerHTML = '<tr><td colspan="4" class="px-4 py-4 text-center text-slate-400">Tous ces étudiants sont déjà inscrits.</td></tr>';
    } else {
      data.results.forEach(r => {
        tbody.innerHTML += `<tr class="border-b">
          <td class="px-4 py-2">${r.name}</td>
          <td class="px-4 py-2 text-slate-500">${r.email}</td>
          <td class="px-4 py-2 font-mono text-xs bg-slate-50">${r.password}</td>
          <td class="px-4 py-2 text-center">${r.sent ? '✅' : '❌'}</td>
        </tr>`;
      });
    }
    document.getElementById('results').classList.remove('hidden');
  }

  btn.disabled = false;
  btn.textContent = '➕ Inscrire et envoyer les accès';
}
</script>
{% endblock %}