HTMLify

document.addEventListener('DOMContentLoaded', () => {
  let currentPassword = localStorage.getItem('edumanage_admin_password') || 'admin123';
  let isAuthenticated = sessionStorage.getItem('edumanage_auth') === 'true';

  const authOverlay = document.getElementById('authOverlay');
  const authForm = document.getElementById('authForm');
  const authError = document.getElementById('authError');
  const logoutBtn = document.getElementById('logoutBtn');

  function checkAuth() {
    if (authOverlay) {
      if (isAuthenticated) {
        authOverlay.classList.add('hidden');
      } else {
        authOverlay.classList.remove('hidden');
      }
    }
  }
  checkAuth();

  if (authForm) {
    authForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const pwd = document.getElementById('adminPassword').value;
      if (pwd === currentPassword) {
        sessionStorage.setItem('edumanage_auth', 'true');
        isAuthenticated = true;
        authError.textContent = '';
        checkAuth();
      } else {
        authError.textContent = 'Mot de passe incorrect. (Par défaut: admin123)';
      }
    });
  }

  if (logoutBtn) {
    logoutBtn.addEventListener('click', () => {
      sessionStorage.removeItem('edumanage_auth');
      isAuthenticated = false;
      checkAuth();
      location.reload();
    });
  }

  const changePasswordBtn = document.getElementById('changePasswordBtn');
  const passwordModal = document.getElementById('passwordModal');
  const closePasswordModal = document.getElementById('closePasswordModal');
  const passwordForm = document.getElementById('passwordForm');

  if (changePasswordBtn && passwordModal) {
    changePasswordBtn.addEventListener('click', () => {
      passwordForm.reset();
      passwordModal.classList.add('active');
    });
  }
  if (closePasswordModal && passwordModal) {
    closePasswordModal.addEventListener('click', () => {
      passwordModal.classList.remove('active');
    });
  }
  if (passwordModal) {
    passwordModal.addEventListener('click', (e) => {
      if (e.target === passwordModal) passwordModal.classList.remove('active');
    });
  }

  if (passwordForm) {
    passwordForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const curr = document.getElementById('currentPassword').value;
      const next = document.getElementById('newPassword').value;
      if (curr === currentPassword) {
        currentPassword = next;
        localStorage.setItem('edumanage_admin_password', currentPassword);
        alert('Mot de passe mis à jour avec succès !');
        passwordModal.classList.remove('active');
      } else {
        alert('Le mot de passe actuel est incorrect.');
      }
    });
  }

  let students = JSON.parse(localStorage.getItem('edumanage_students')) || [];
  let teachers = JSON.parse(localStorage.getItem('edumanage_teachers')) || [];
  let fees = JSON.parse(localStorage.getItem('edumanage_fees')) || [];
  let grades = JSON.parse(localStorage.getItem('edumanage_grades')) || [];

  function saveData() {
    localStorage.setItem('edumanage_students', JSON.stringify(students));
    localStorage.setItem('edumanage_teachers', JSON.stringify(teachers));
    localStorage.setItem('edumanage_fees', JSON.stringify(fees));
    localStorage.setItem('edumanage_grades', JSON.stringify(grades));
    updateDashboardStats();
  }

  // Export and Import Data Feature
  const exportDataBtn = document.getElementById('exportDataBtn');
  const importDataBtn = document.getElementById('importDataBtn');
  const importFile = document.getElementById('importFile');

  if (exportDataBtn) {
    exportDataBtn.addEventListener('click', () => {
      const allData = {
        students,
        teachers,
        fees,
        grades,
        password: currentPassword
      };
      const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(allData, null, 2));
      const downloadAnchor = document.createElement('a');
      downloadAnchor.setAttribute("href", dataStr);
      downloadAnchor.setAttribute("download", "edumanage_backup_" + new Date().toISOString().split('T')[0] + ".json");
      document.body.appendChild(downloadAnchor);
      downloadAnchor.click();
      downloadAnchor.remove();
    });
  }

  if (importDataBtn && importFile) {
    importDataBtn.addEventListener('click', () => {
      importFile.click();
    });

    importFile.addEventListener('change', (event) => {
      const fileReader = new FileReader();
      if (event.target.files[0]) {
        fileReader.readAsText(event.target.files[0], "UTF-8");
        fileReader.onload = (e) => {
          try {
            const parsedData = JSON.parse(e.target.result);
            if (parsedData.students) students = parsedData.students;
            if (parsedData.teachers) teachers = parsedData.teachers;
            if (parsedData.fees) fees = parsedData.fees;
            if (parsedData.grades) grades = parsedData.grades;
            if (parsedData.password) {
              currentPassword = parsedData.password;
              localStorage.setItem('edumanage_admin_password', currentPassword);
            }
            saveData();
            alert('Données importées avec succès !');
            location.reload();
          } catch (error) {
            alert('Erreur lors de l\'importation du fichier JSON.');
          }
        };
      }
    });
  }

  function updateDashboardStats() {
    const totalStudentsEl = document.getElementById('total-students');
    const totalTeachersEl = document.getElementById('total-teachers');
    const totalFeesEl = document.getElementById('total-fees');
    const totalAvgGradesEl = document.getElementById('total-avg-grades');
    const feesTotalPercuEl = document.getElementById('fees-total-percu');
    const feesResteEl = document.getElementById('fees-reste');
    const feesTauxEl = document.getElementById('fees-taux');

    if (totalStudentsEl) totalStudentsEl.textContent = students.length.toLocaleString();
    if (totalTeachersEl) totalTeachersEl.textContent = teachers.length.toLocaleString();

    let totalPaid = 0;
    let totalExpected = 0;
    fees.forEach(f => {
      totalPaid += f.paid;
      totalExpected += f.total;
    });

    let taux = totalExpected > 0 ? Math.round((totalPaid / totalExpected) * 100) : 0;
    if (totalFeesEl) totalFeesEl.textContent = taux + '%';

    let avgGrade = 0;
    if (grades.length > 0) {
      const sum = grades.reduce((acc, g) => acc + parseFloat(g.value), 0);
      avgGrade = (sum / grades.length).toFixed(2);
    }
    if (totalAvgGradesEl) totalAvgGradesEl.textContent = avgGrade + '/20';

    if (feesTotalPercuEl) feesTotalPercuEl.textContent = totalPaid.toLocaleString() + ' $';
    if (feesResteEl) feesResteEl.textContent = (totalExpected - totalPaid).toLocaleString() + ' $';
    if (feesTauxEl) feesTauxEl.textContent = taux + '%';
  }

  const resetBtn = document.getElementById('resetSystemBtn');
  if (resetBtn) {
    resetBtn.addEventListener('click', () => {
      if (confirm('Êtes-vous sûr de vouloir réinitialiser toutes les données (élèves, enseignants, frais, notes) ?')) {
        students = [];
        teachers = [];
        fees = [];
        grades = [];
        localStorage.removeItem('edumanage_students');
        localStorage.removeItem('edumanage_teachers');
        localStorage.removeItem('edumanage_fees');
        localStorage.removeItem('edumanage_grades');
        localStorage.removeItem('edumanage_admin_password');
        alert('Toutes les données ont été réinitialisées avec succès.');
        location.reload();
      }
    });
  }

  const studentsTbody = document.getElementById('students-tbody');
  function renderStudents() {
    if (!studentsTbody) return;
    studentsTbody.innerHTML = '';
    if (students.length === 0) {
      studentsTbody.innerHTML = '<tr><td colspan="7" style="text-align: center; color: var(--text-muted);">Aucun élève enregistré</td></tr>';
      return;
    }
    students.forEach((s, index) => {
      const photoSrc = s.photo || 'https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?auto=format&fit=crop&w=200&q=80';
      const dateStr = s.date || '-';
      const row = document.createElement('tr');
      row.innerHTML = `<td><img src="${photoSrc}" style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover;"></td><td>${s.name}</td><td>${s.className}</td><td>${s.email}</td><td>${dateStr}</td><td><span class="badge success">Actif</span></td><td><button class="btn-icon btn-edit" data-index="${index}">Éditer</button></td>`;
      studentsTbody.appendChild(row);
    });
    setupStudentEditListeners();
  }

  const openModalBtn = document.getElementById('openModal');
  const closeModalBtn = document.getElementById('closeModal');
  const modal = document.getElementById('studentModal');
  const studentForm = document.getElementById('studentForm');
  const studentModalTitle = document.getElementById('studentModalTitle');
  const studentEditIndex = document.getElementById('studentEditIndex');

  if (openModalBtn && modal) {
    openModalBtn.addEventListener('click', () => {
      studentForm.reset();
      studentEditIndex.value = '-1';
      studentModalTitle.textContent = 'Ajouter un Nouvel Élève';
      const today = new Date().toISOString().split('T')[0];
      const dateInput = document.getElementById('studentDate');
      if (dateInput) dateInput.value = today;
      modal.classList.add('active');
    });
  }
  if (closeModalBtn && modal) {
    closeModalBtn.addEventListener('click', () => modal.classList.remove('active'));
  }
  if (modal) {
    modal.addEventListener('click', (e) => {
      if (e.target === modal) modal.classList.remove('active');
    });
  }

  function setupStudentEditListeners() {
    const editButtons = document.querySelectorAll('.btn-edit');
    editButtons.forEach((btn) => {
      btn.onclick = () => {
        const index = btn.getAttribute('data-index');
        const s = students[index];
        document.getElementById('studentName').value = s.name;
        document.getElementById('studentClass').value = s.className;
        document.getElementById('studentEmail').value = s.email;
        const dateInput = document.getElementById('studentDate');
        if (dateInput) dateInput.value = s.date || '';
        const photoInput = document.getElementById('studentPhotoUrl');
        if (photoInput) photoInput.value = s.photo || '';
        studentEditIndex.value = index;
        studentModalTitle.textContent = 'Éditer l\'Élève';
        modal.classList.add('active');
      };
    });
  }

  if (studentForm) {
    studentForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const name = document.getElementById('studentName').value;
      const className = document.getElementById('studentClass').value;
      const email = document.getElementById('studentEmail').value;
      const date = document.getElementById('studentDate') ? document.getElementById('studentDate').value : '';
      const photoInput = document.getElementById('studentPhotoUrl');
      const photo = photoInput ? photoInput.value : '';
      const idx = parseInt(studentEditIndex.value);

      if (idx === -1) {
        students.push({ name, className, email, date, photo });
        alert('Élève ajouté avec succès !');
      } else {
        students[idx] = { name, className, email, date: date || students[idx].date, photo: photo || students[idx].photo };
        alert('Élève mis à jour avec succès !');
      }
      saveData();
      studentForm.reset();
      modal.classList.remove('active');
      renderStudents();
    });
  }
  renderStudents();

  const teachersTbody = document.getElementById('teachers-tbody');
  function renderTeachers() {
    if (!teachersTbody) return;
    teachersTbody.innerHTML = '';
    if (teachers.length === 0) {
      teachersTbody.innerHTML = '<tr><td colspan="8" style="text-align: center; color: var(--text-muted);">Aucun enseignant enregistré</td></tr>';
      return;
    }
    teachers.forEach((t, index) => {
      const photoSrc = t.photo || 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=200&q=80';
      const dateStr = t.date || '-';
      const row = document.createElement('tr');
      row.innerHTML = `<td><img src="${photoSrc}" style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover;"></td><td>${t.name}</td><td>${t.subject}</td><td>${t.email}</td><td>${t.phone}</td><td>${dateStr}</td><td><span class="badge success">Actif</span></td><td><button class="btn-icon btn-edit-teacher" data-index="${index}">Éditer</button></td>`;
      teachersTbody.appendChild(row);
    });
    setupTeacherEditListeners();
  }

  const openTeacherModalBtn = document.getElementById('openTeacherModal');
  const closeTeacherModalBtn = document.getElementById('closeTeacherModal');
  const teacherModal = document.getElementById('teacherModal');
  const teacherForm = document.getElementById('teacherForm');
  const teacherModalTitle = document.getElementById('teacherModalTitle');
  const teacherEditIndex = document.getElementById('teacherEditIndex');

  if (openTeacherModalBtn && teacherModal) {
    openTeacherModalBtn.addEventListener('click', () => {
      teacherForm.reset();
      teacherEditIndex.value = '-1';
      teacherModalTitle.textContent = 'Ajouter un Nouvel Enseignant';
      const today = new Date().toISOString().split('T')[0];
      const dateInput = document.getElementById('teacherDate');
      if (dateInput) dateInput.value = today;
      teacherModal.classList.add('active');
    });
  }
  if (closeTeacherModalBtn && teacherModal) {
    closeTeacherModalBtn.addEventListener('click', () => teacherModal.classList.remove('active'));
  }
  if (teacherModal) {
    teacherModal.addEventListener('click', (e) => {
      if (e.target === teacherModal) teacherModal.classList.remove('active');
    });
  }

  function setupTeacherEditListeners() {
    const editButtons = document.querySelectorAll('.btn-edit-teacher');
    editButtons.forEach((btn) => {
      btn.onclick = () => {
        const index = btn.getAttribute('data-index');
        const t = teachers[index];
        document.getElementById('teacherName').value = t.name;
        document.getElementById('teacherSubject').value = t.subject;
        document.getElementById('teacherEmail').value = t.email;
        document.getElementById('teacherPhone').value = t.phone;
        const dateInput = document.getElementById('teacherDate');
        if (dateInput) dateInput.value = t.date || '';
        const photoInput = document.getElementById('teacherPhotoUrl');
        if (photoInput) photoInput.value = t.photo || '';
        teacherEditIndex.value = index;
        teacherModalTitle.textContent = 'Éditer l\'Enseignant';
        teacherModal.classList.add('active');
      };
    });
  }

  if (teacherForm) {
    teacherForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const name = document.getElementById('teacherName').value;
      const subject = document.getElementById('teacherSubject').value;
      const email = document.getElementById('teacherEmail').value;
      const phone = document.getElementById('teacherPhone').value;
      const date = document.getElementById('teacherDate') ? document.getElementById('teacherDate').value : '';
      const photoInput = document.getElementById('teacherPhotoUrl');
      const photo = photoInput ? photoInput.value : '';
      const idx = parseInt(teacherEditIndex.value);

      if (idx === -1) {
        teachers.push({ name, subject, email, phone, date, photo });
        alert('Enseignant ajouté avec succès !');
      } else {
        teachers[idx] = { name, subject, email, phone, date: date || teachers[idx].date, photo: photo || teachers[idx].photo };
        alert('Enseignant mis à jour avec succès !');
      }
      saveData();
      teacherForm.reset();
      teacherModal.classList.remove('active');
      renderTeachers();
    });
  }
  renderTeachers();

  const gradesTbody = document.getElementById('grades-tbody');
  function renderGrades() {
    if (!gradesTbody) return;
    gradesTbody.innerHTML = '';
    if (grades.length === 0) {
      gradesTbody.innerHTML = '<tr><td colspan="5" style="text-align: center; color: var(--text-muted);">Aucune note enregistrée</td></tr>';
      return;
    }
    grades.forEach((g, index) => {
      let badgeClass = 'success';
      if (g.value < 10) badgeClass = 'danger';
      else if (g.value < 12) badgeClass = 'warning';
      const row = document.createElement('tr');
      row.innerHTML = `<td>${g.name}</td><td>${g.subject}</td><td><span class="badge ${badgeClass}">${g.value}/20</span></td><td>${g.comment || '-'}</td><td><button class="btn-icon btn-edit-grade" data-index="${index}">Éditer</button></td>`;
      gradesTbody.appendChild(row);
    });
    setupGradeEditListeners();
    updateGradesStats();
  }

  function updateGradesStats() {
    const gradesAvgEl = document.getElementById('grades-avg');
    const gradesCountEl = document.getElementById('grades-count');
    const gradesMaxEl = document.getElementById('grades-max');

    if (gradesCountEl) gradesCountEl.textContent = grades.length;
    if (grades.length > 0) {
      const sum = grades.reduce((acc, g) => acc + parseFloat(g.value), 0);
      const max = Math.max(...grades.map(g => parseFloat(g.value)));
      if (gradesAvgEl) gradesAvgEl.textContent = (sum / grades.length).toFixed(2) + '/20';
      if (gradesMaxEl) gradesMaxEl.textContent = max + '/20';
    } else {
      if (gradesAvgEl) gradesAvgEl.textContent = '0/20';
      if (gradesMaxEl) gradesMaxEl.textContent = '0/20';
    }
  }

  const openGradeModalBtn = document.getElementById('openGradeModal');
  const closeGradeModalBtn = document.getElementById('closeGradeModal');
  const gradeModal = document.getElementById('gradeModal');
  const gradeForm = document.getElementById('gradeForm');
  const gradeModalTitle = document.getElementById('gradeModalTitle');
  const gradeEditIndex = document.getElementById('gradeEditIndex');

  if (openGradeModalBtn && gradeModal) {
    openGradeModalBtn.addEventListener('click', () => {
      gradeForm.reset();
      gradeEditIndex.value = '-1';
      gradeModalTitle.textContent = 'Saisir une Note';
      gradeModal.classList.add('active');
    });
  }
  if (closeGradeModalBtn && gradeModal) {
    closeGradeModalBtn.addEventListener('click', () => gradeModal.classList.remove('active'));
  }
  if (gradeModal) {
    gradeModal.addEventListener('click', (e) => {
      if (e.target === gradeModal) gradeModal.classList.remove('active');
    });
  }

  function setupGradeEditListeners() {
    const editButtons = document.querySelectorAll('.btn-edit-grade');
    editButtons.forEach((btn) => {
      btn.onclick = () => {
        const index = btn.getAttribute('data-index');
        const g = grades[index];
        document.getElementById('gradeStudentName').value = g.name;
        document.getElementById('gradeSubject').value = g.subject;
        document.getElementById('gradeValue').value = g.value;
        document.getElementById('gradeComment').value = g.comment || '';
        gradeEditIndex.value = index;
        gradeModalTitle.textContent = 'Éditer la Note';
        gradeModal.classList.add('active');
      };
    });
  }

  if (gradeForm) {
    gradeForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const name = document.getElementById('gradeStudentName').value;
      const subject = document.getElementById('gradeSubject').value;
      const value = parseFloat(document.getElementById('gradeValue').value);
      const comment = document.getElementById('gradeComment').value;
      const idx = parseInt(gradeEditIndex.value);

      if (idx === -1) {
        grades.push({ name, subject, value, comment });
        alert('Note enregistrée avec succès !');
      } else {
        grades[idx] = { name, subject, value, comment };
        alert('Note mise à jour avec succès !');
      }
      saveData();
      gradeForm.reset();
      gradeModal.classList.remove('active');
      renderGrades();
    });
  }
  renderGrades();

  const feesTbody = document.getElementById('fees-tbody');
  function renderFees() {
    if (!feesTbody) return;
    feesTbody.innerHTML = '';
    if (fees.length === 0) {
      feesTbody.innerHTML = '<tr><td colspan="7" style="text-align: center; color: var(--text-muted);">Aucun paiement enregistré</td></tr>';
      return;
    }
    fees.forEach((f, index) => {
      let badgeClass = 'success';
      let badgeText = 'Payé';
      if (f.paid === 0) {
        badgeClass = 'danger';
        badgeText = 'Impayé';
      } else if (f.paid < f.total) {
        badgeClass = 'warning';
        badgeText = 'Partiel';
      }
      const dateStr = f.date || '-';
      const row = document.createElement('tr');
      row.innerHTML = `<td>${f.name}</td><td>${f.className}</td><td>${f.total.toLocaleString()} $</td><td>${f.paid.toLocaleString()} $</td><td>${dateStr}</td><td><span class="badge ${badgeClass}">${badgeText}</span></td><td><button class="btn-icon btn-edit-fee" data-index="${index}">Éditer</button></td>`;
      feesTbody.appendChild(row);
    });
    setupFeeEditListeners();
  }

  const openFeeModalBtn = document.getElementById('openFeeModal');
  const closeFeeModalBtn = document.getElementById('closeFeeModal');
  const feeModal = document.getElementById('feeModal');
  const feeForm = document.getElementById('feeForm');
  const feeModalTitle = document.getElementById('feeModalTitle');
  const feeEditIndex = document.getElementById('feeEditIndex');

  if (openFeeModalBtn && feeModal) {
    openFeeModalBtn.addEventListener('click', () => {
      feeForm.reset();
      feeEditIndex.value = '-1';
      feeModalTitle.textContent = 'Enregistrer un Paiement';
      const today = new Date().toISOString().split('T')[0];
      const dateInput = document.getElementById('feeDate');
      if (dateInput) dateInput.value = today;
      feeModal.classList.add('active');
    });
  }
  if (closeFeeModalBtn && feeModal) {
    closeFeeModalBtn.addEventListener('click', () => feeModal.classList.remove('active'));
  }
  if (feeModal) {
    feeModal.addEventListener('click', (e) => {
      if (e.target === feeModal) feeModal.classList.remove('active');
    });
  }

  function setupFeeEditListeners() {
    const editButtons = document.querySelectorAll('.btn-edit-fee');
    editButtons.forEach((btn) => {
      btn.onclick = () => {
        const index = btn.getAttribute('data-index');
        const f = fees[index];
        document.getElementById('feeStudentName').value = f.name;
        document.getElementById('feeStudentClass').value = f.className;
        document.getElementById('feeTotal').value = f.total;
        document.getElementById('feePaid').value = f.paid;
        const dateInput = document.getElementById('feeDate');
        if (dateInput) dateInput.value = f.date || '';
        feeEditIndex.value = index;
        feeModalTitle.textContent = 'Éditer le Paiement';
        feeModal.classList.add('active');
      };
    });
  }

  if (feeForm) {
    feeForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const name = document.getElementById('feeStudentName').value;
      const className = document.getElementById('feeStudentClass').value;
      const total = parseFloat(document.getElementById('feeTotal').value);
      const paid = parseFloat(document.getElementById('feePaid').value);
      const date = document.getElementById('feeDate') ? document.getElementById('feeDate').value : '';
      const idx = parseInt(feeEditIndex.value);

      if (idx === -1) {
        fees.push({ name, className, total, paid, date });
        alert('Paiement enregistré avec succès !');
      } else {
        fees[idx] = { name, className, total, paid, date: date || fees[idx].date };
        alert('Paiement mis à jour avec succès !');
      }
      saveData();
      feeForm.reset();
      feeModal.classList.remove('active');
      renderFees();
    });
  }
  renderFees();
  updateDashboardStats();

  // Reports Logic
  const reportType = document.getElementById('reportType');
  const reportDateSelect = document.getElementById('reportDateSelect');
  const reportTitleType = document.getElementById('reportTitleType');
  const reportPeriodDisplay = document.getElementById('reportPeriodDisplay');
  const repStudentsCount = document.getElementById('rep-students-count');
  const repFeesCollected = document.getElementById('rep-fees-collected');
  const repFeesExpected = document.getElementById('rep-fees-expected');
  const repFeesTbody = document.getElementById('rep-fees-tbody');
  const repStudentsTbody = document.getElementById('rep-students-tbody');
  const printReportBtn = document.getElementById('printReportBtn');

  function updateReports() {
    if (!reportType) return;
    const type = reportType.value;
    const dateVal = reportDateSelect && reportDateSelect.value ? new Date(reportDateSelect.value) : new Date();

    if (type === 'daily') {
      reportTitleType.textContent = 'Journalier';
      const targetDateStr = dateVal.toISOString().split('T')[0];
      reportPeriodDisplay.textContent = targetDateStr;

      // Filter fees and students by date
      const filteredFees = fees.filter(f => f.date === targetDateStr);
      const filteredStudents = students.filter(s => s.date === targetDateStr);

      let collected = filteredFees.reduce((acc, f) => acc + f.paid, 0);
      let expected = filteredFees.reduce((acc, f) => acc + f.total, 0);

      if (repStudentsCount) repStudentsCount.textContent = filteredStudents.length;
      if (repFeesCollected) repFeesCollected.textContent = collected.toLocaleString() + ' $';
      if (repFeesExpected) repFeesExpected.textContent = expected.toLocaleString() + ' $';

      renderReportTables(filteredFees, filteredStudents);

    } else if (type === 'monthly') {
      reportTitleType.textContent = 'Mensuel';
      const targetYear = dateVal.getFullYear();
      const targetMonth = dateVal.getMonth();
      const monthNames = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
      reportPeriodDisplay.textContent = `${monthNames[targetMonth]} ${targetYear}`;

      const filteredFees = fees.filter(f => {
        if (!f.date) return false;
        const d = new Date(f.date);
        return d.getFullYear() === targetYear && d.getMonth() === targetMonth;
      });

      const filteredStudents = students.filter(s => {
        if (!s.date) return false;
        const d = new Date(s.date);
        return d.getFullYear() === targetYear && d.getMonth() === targetMonth;
      });

      let collected = filteredFees.reduce((acc, f) => acc + f.paid, 0);
      let expected = filteredFees.reduce((acc, f) => acc + f.total, 0);

      if (repStudentsCount) repStudentsCount.textContent = filteredStudents.length;
      if (repFeesCollected) repFeesCollected.textContent = collected.toLocaleString() + ' $';
      if (repFeesExpected) repFeesExpected.textContent = expected.toLocaleString() + ' $';

      renderReportTables(filteredFees, filteredStudents);

    } else if (type === 'annual') {
      reportTitleType.textContent = 'Annuel';
      const targetYear = dateVal.getFullYear();
      reportPeriodDisplay.textContent = `Année ${targetYear}`;

      const filteredFees = fees.filter(f => {
        if (!f.date) return false;
        const d = new Date(f.date);
        return d.getFullYear() === targetYear;
      });

      const filteredStudents = students.filter(s => {
        if (!s.date) return false;
        const d = new Date(s.date);
        return d.getFullYear() === targetYear;
      });

      let collected = filteredFees.reduce((acc, f) => acc + f.paid, 0);
      let expected = filteredFees.reduce((acc, f) => acc + f.total, 0);

      if (repStudentsCount) repStudentsCount.textContent = filteredStudents.length;
      if (repFeesCollected) repFeesCollected.textContent = collected.toLocaleString() + ' $';
      if (repFeesExpected) repFeesExpected.textContent = expected.toLocaleString() + ' $';

      renderReportTables(filteredFees, filteredStudents);
    }
  }

  function renderReportTables(fList, sList) {
    if (repFeesTbody) {
      repFeesTbody.innerHTML = '';
      if (fList.length === 0) {
        repFeesTbody.innerHTML = '<tr><td colspan="4" style="text-align: center; color: var(--text-muted);">Aucun paiement pour cette période</td></tr>';
      } else {
        fList.forEach(f => {
          const row = document.createElement('tr');
          row.innerHTML = `<td>${f.name}</td><td>${f.className}</td><td>${f.paid.toLocaleString()} $</td><td>${f.date || '-'}</td>`;
          repFeesTbody.appendChild(row);
        });
      }
    }

    if (repStudentsTbody) {
      repStudentsTbody.innerHTML = '';
      if (sList.length === 0) {
        repStudentsTbody.innerHTML = '<tr><td colspan="4" style="text-align: center; color: var(--text-muted);">Aucun élève inscrit pour cette période</td></tr>';
      } else {
        sList.forEach(s => {
          const row = document.createElement('tr');
          row.innerHTML = `<td>${s.name}</td><td>${s.className}</td><td>${s.email}</td><td>${s.date || '-'}</td>`;
          repStudentsTbody.appendChild(row);
        });
      }
    }
  }

  if (reportType && reportDateSelect) {
    const todayStr = new Date().toISOString().split('T')[0];
    reportDateSelect.value = todayStr;
    reportType.addEventListener('change', updateReports);
    reportDateSelect.addEventListener('change', updateReports);
    updateReports();
  }

  if (printReportBtn) {
    printReportBtn.addEventListener('click', () => {
      window.print();
    });
  }

  const studentSelect = document.getElementById('studentSelect');
  if (studentSelect) {
    students.forEach((s, idx) => {
      const opt = document.createElement('option');
      opt.value = idx;
      opt.textContent = `${s.name} (${s.className})`;
      studentSelect.appendChild(opt);
    });

    studentSelect.addEventListener('change', (e) => {
      const idx = e.target.value;
      if (idx === '') {
        document.getElementById('cardName').textContent = 'Aucun Élève Sélectionné';
        document.getElementById('cardClass').textContent = '-';
        document.getElementById('cardMatricule').textContent = '-';
        document.getElementById('cardPhoto').src = 'https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?auto=format&fit=crop&w=200&q=80';
      } else {
        const s = students[idx];
        document.getElementById('cardName').textContent = s.name;
        document.getElementById('cardClass').textContent = s.className;
        document.getElementById('cardMatricule').textContent = 'STU-' + (1000 + parseInt(idx));
        if (s.photo) {
          document.getElementById('cardPhoto').src = s.photo;
        } else {
          document.getElementById('cardPhoto').src = 'https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?auto=format&fit=crop&w=200&q=80';
        }
      }
    });
  }

  const printCardBtn = document.getElementById('printCardBtn');
  if (printCardBtn) {
    printCardBtn.addEventListener('click', () => {
      if (studentSelect && studentSelect.value === '') {
        alert('Veuillez sélectionner un élève avant d\'imprimer la carte.');
        return;
      }
      window.print();
    });
  }

  const teacherSelect = document.getElementById('teacherSelect');
  if (teacherSelect) {
    teachers.forEach((t, idx) => {
      const opt = document.createElement('option');
      opt.value = idx;
      opt.textContent = `${t.name} (${t.subject})`;
      teacherSelect.appendChild(opt);
    });

    teacherSelect.addEventListener('change', (e) => {
      const idx = e.target.value;
      if (idx === '') {
        document.getElementById('staffName').textContent = 'Aucun Enseignant Sélectionné';
        document.getElementById('staffSubject').textContent = '-';
        document.getElementById('staffMatricule').textContent = '-';
        document.getElementById('staffPhoto').src = 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=200&q=80';
      } else {
        const t = teachers[idx];
        document.getElementById('staffName').textContent = t.name;
        document.getElementById('staffSubject').textContent = t.subject;
        document.getElementById('staffMatricule').textContent = 'TCH-' + (1000 + parseInt(idx));
        if (t.photo) {
          document.getElementById('staffPhoto').src = t.photo;
        } else {
          document.getElementById('staffPhoto').src = 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=200&q=80';
        }
      }
    });
  }

  const printStaffBtn = document.getElementById('printStaffBtn');
  if (printStaffBtn) {
    printStaffBtn.addEventListener('click', () => {
      if (teacherSelect && teacherSelect.value === '') {
        alert('Veuillez sélectionner un enseignant avant d\'imprimer la carte.');
        return;
      }
      window.print();
    });
  }

  // Webcam Capture Logic
  const video = document.getElementById('webcam');
  const canvas = document.getElementById('canvas');
  const captureBtn = document.getElementById('captureBtn');
  const photoResult = document.getElementById('photoResult');
  const placeholderText = document.getElementById('placeholderText');
  const savePhotoBtn = document.getElementById('savePhotoBtn');
  const assignStudent = document.getElementById('assignStudent');

  let capturedDataUrl = null;

  if (video) {
    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
      .then((stream) => {
        video.srcObject = stream;
      })
      .catch((err) => {
        console.error("Erreur d'accès à la webcam: ", err);
      });
  }

  if (assignStudent) {
    students.forEach((s, idx) => {
      const opt = document.createElement('option');
      opt.value = idx;
      opt.textContent = `${s.name} (${s.className})`;
      assignStudent.appendChild(opt);
    });
  }

  if (captureBtn && video && canvas && photoResult) {
    captureBtn.addEventListener('click', () => {
      const context = canvas.getContext('2d');
      canvas.width = video.videoWidth || 400;
      canvas.height = video.videoHeight || 300;
      context.drawImage(video, 0, 0, canvas.width, canvas.height);
      capturedDataUrl = canvas.toDataURL('image/png');
      photoResult.src = capturedDataUrl;
      photoResult.style.display = 'block';
      placeholderText.style.display = 'none';
      if (savePhotoBtn) savePhotoBtn.removeAttribute('disabled');
    });
  }

  if (savePhotoBtn && assignStudent) {
    savePhotoBtn.addEventListener('click', () => {
      const idx = assignStudent.value;
      if (idx === '') {
        alert('Veuillez sélectionner un élève à associer.');
        return;
      }
      if (!capturedDataUrl) {
        alert('Veuillez d\'abord capturer une photo.');
        return;
      }
      students[idx].photo = capturedDataUrl;
      saveData();
      alert('Photo enregistrée avec succès pour l\'élève ' + students[idx].name + ' !');
      renderStudents();
    });
  }
});