/* ========================================================
   EcoleDirecte -
   👋 Salut
   https://github.com/NotANumber-dev/ecoledirecte-
   Apache 2.0 License - (c) NotANumber-dev, noodlelover1
======================================================== */

(async () => {
  try {
    document.documentElement.innerHTML = '';
    document.body.style.backgroundColor = '#000000';
    var credentials = JSON.parse(sessionStorage.getItem("credentials"));
    var token = credentials.payload.authToken;
    var accounts = JSON.parse(sessionStorage.getItem("accounts"));
    var id = accounts.payload.accounts[0].id;

    var apiLogs = [];
    var debugEnabled = false;
    var isUpdating = false;

    function logApiCall(url, responseCode, duration) {
      if (!debugEnabled) return;
      apiLogs.unshift({
        timestamp: new Date().toLocaleString('fr-FR'),
        url: url,
        responseCode: responseCode,
        duration: duration + "ms"
      });
      if (apiLogs.length > 100) apiLogs.pop();
    }

    async function fetchWithLog(url, options, logUrl) {
      var startTime = Date.now();
      try {
        var res = await fetch(url, options);
        var duration = Date.now() - startTime;
        logApiCall(logUrl || url, res.status, duration);
        return res;
      } catch(e) {
        var duration = Date.now() - startTime;
        logApiCall(logUrl || url, "ERROR", duration);
        throw e;
      }
    }

    function fetchWithTimeout(url, options, timeout = 5000) {
      return Promise.race([
        fetch(url, options),
        new Promise((_, reject) =>
          setTimeout(() => reject(new Error('Timeout')), timeout)
        )
      ]);
    }

    var placeholderWidget = document.createElement('div');
    placeholderWidget.id = 'ed-widget-placeholder';
    placeholderWidget.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:#0B0B1A;z-index:999998;overflow:auto;color:#FFFFFF;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;';
    placeholderWidget.innerHTML = '<div class="m-container" style="padding:24px;"><div style="font-size:18px;color:#FFFFFF;">Chargement...</div></div>';
    document.body.appendChild(placeholderWidget);

    var notesPromise = fetchWithTimeout(`https://api.ecoledirecte.com/v3/eleves/${id}/notes.awp?verbe=get&v=6.17.0`, {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "X-Token": token
      },
      body: "data=" + encodeURIComponent(JSON.stringify({ anneeScolaire: "" }))
    }, 5000).then(function(res) {
      return res.ok ? res.json() : { data: { notes: [] } };
    }).catch(function() {
      return { data: { notes: [] } };
    });

    var devoirsPromise = fetchWithTimeout(`https://api.ecoledirecte.com/v3/Eleves/${id}/cahierdetexte.awp?verbe=get&v=4.98.0`, {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "X-Token": token
      },
      body: "data=" + encodeURIComponent(JSON.stringify({}))
    }, 5000).then(function(res) {
      return res.ok ? res.json() : { data: {} };
    }).catch(function() {
      return { data: {} };
    });

    var espacePromise = fetchWithTimeout(`https://api.ecoledirecte.com/v3/E/${id}/espacestravail.awp?verbe=get&typeModule=espaceTravail&v=4.98.0`, {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "X-Token": token
      },
      body: "data=" + encodeURIComponent(JSON.stringify({}))
    }, 5000).then(function(res) {
      return res.ok ? res.json() : { data: [] };
    }).catch(function() {
      return { data: [] };
    });

    var carnetPromise = fetchWithTimeout(`https://api.ecoledirecte.com/v3/eleves/${id}/eleveCarnetCorrespondance.awp?verbe=get&v=4.98.0`, {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "X-Token": token
      },
      body: "data=" + encodeURIComponent(JSON.stringify({}))
    }, 5000).then(function(res) {
      return res.ok ? res.json() : { data: { correspondances: [] } };
    }).catch(function() {
      return { data: { correspondances: [] } };
    });

    var vieScolairePromise = fetchWithTimeout(`https://api.ecoledirecte.com/v3/eleves/${id}/viescolaire.awp?verbe=get&v=4.98.0`, {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "X-Token": token
      },
      body: "data=" + encodeURIComponent(JSON.stringify({}))
    }, 5000).then(function(res) {
      return res.ok ? res.json() : { data: { absencesRetards: [], sanctionsEncouragements: [] } };
    }).catch(function() {
      return { data: { absencesRetards: [], sanctionsEncouragements: [] } };
    });

    var messagesPromise = fetchWithTimeout(`https://api.ecoledirecte.com/v3/eleves/${id}/messages.awp?verbe=get&v=4.98.0`, {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "X-Token": token
      },
      body: "data=" + encodeURIComponent(JSON.stringify({}))
    }, 5000).then(function(res) {
      return res.ok ? res.json() : { data: { messages: { received: [], sent: [], draft: [], archived: [] } } };
    }).catch(function() {
      return { data: { messages: { received: [], sent: [], draft: [], archived: [] } } };
    });

    var timelinePromise = fetchWithTimeout(`https://api.ecoledirecte.com/v3/eleves/${id}/timeline.awp?verbe=get&v=4.98.0`, {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "X-Token": token
      },
      body: "data=" + encodeURIComponent(JSON.stringify({}))
    }, 5000).then(function(res) {
      return res.ok ? res.json() : { data: [] };
    }).catch(function() {
      return { data: [] };
    });

    var results = await Promise.all([notesPromise, devoirsPromise, espacePromise, carnetPromise, vieScolairePromise, messagesPromise, timelinePromise]);
    var notesJson = results[0];
    var devoirsJson = results[1];
    var espaceJson = results[2];
    var carnetJson = results[3];
    var vieScolaireJson = results[4];
    var messagesJson = results[5];
    var timelineJson = results[6];

    var data = notesJson.data || {};
    var originalNotes = data.notes || [];
    var cahierData = devoirsJson.data || {};
    var espaceData = espaceJson.data || [];
    var carnetData = carnetJson.data || { correspondances: [] };
    var vieScolaireData = vieScolaireJson.data || { absencesRetards: [], sanctionsEncouragements: [] };
    var messagesData = messagesJson.data || { messages: { received: [], sent: [], draft: [], archived: [] } };
    var timelineData = Array.isArray(timelineJson.data) ? timelineJson.data : (Array.isArray(timelineJson) ? timelineJson : []);

    var loadingWidget = document.createElement('div');
    loadingWidget.id = 'ed-loading';
    loadingWidget.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#1C1C2E;color:#FFFFFF;padding:20px;border-radius:12px;z-index:1000000;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;';
    loadingWidget.innerHTML = '<div style="text-align:center;"><div style="font-size:16px;margin-bottom:8px;">Chargement...</div><div style="width:40px;height:4px;background:#2C2C44;border-radius:2px;overflow:hidden;margin:0 auto;"><div style="width:100%;height:100%;background:#5E5EFF;border-radius:2px;animation:loading 1.5s ease-in-out infinite;"></div></div></div><style>@keyframes loading { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }</style>';
    document.body.appendChild(loadingWidget);

    var placeholderElement = document.getElementById('ed-widget-placeholder');
    if (placeholderElement) placeholderElement.remove();

    var trimesters = {
      "A001": { name: "1er Trimestre", subjects: {} },
      "A002": { name: "2eme Trimestre", subjects: {} },
      "A003": { name: "3eme Trimestre", subjects: {} }
    };

    if (data.notes && Array.isArray(data.notes)) {
      var notesToProcess = data.notes.slice(0, 500);
      notesToProcess.forEach(function(note) {
        var valeur = note.valeur;
        var codePeriode = note.codePeriode;
        if (valeur && valeur !== "" && valeur !== "NE" && valeur !== "Abs" && trimesters[codePeriode]) {
          var numericValue = parseFloat(valeur.replace(',', '.'));
          if (!isNaN(numericValue)) {
            var noteSur = parseFloat(note.noteSur) || 20;
            var valueOn20 = (numericValue / noteSur) * 20;
            var subject = note.libelleMatiere;
            var coefficient = parseFloat(note.coef) || 1;
            if (!trimesters[codePeriode].subjects[subject]) {
              trimesters[codePeriode].subjects[subject] = { sum: 0, coefSum: 0, count: 0 };
            }
            trimesters[codePeriode].subjects[subject].sum += valueOn20 * coefficient;
            trimesters[codePeriode].subjects[subject].coefSum += coefficient;
            trimesters[codePeriode].subjects[subject].count++;
          }
        }
      });
    }

    Object.keys(trimesters).forEach(function(tri) {
      Object.keys(trimesters[tri].subjects).forEach(function(subject) {
        var subj = trimesters[tri].subjects[subject];
        subj.average = subj.sum / subj.coefSum;
      });
    });

    var loadingElement = document.getElementById('ed-loading');
    if (loadingElement) loadingElement.remove();

    var existingWidget = document.getElementById('ed-widget');
    if (existingWidget) existingWidget.remove();

    var widget = document.createElement('div');
    widget.id = 'ed-widget';
    widget.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:#0B0B1A;z-index:999999;overflow:auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;';

    var currentTab = "home";
    var currentTrimester = "A001";
    var dayDetailsCache = {};
    var previousView = null;
    var currentSpaceId = null;
    var currentPath = [];

    document.body.appendChild(widget);

    setTimeout(function() {

    function chooseDefaultTrimester() {
      var available = Object.keys(trimesters).filter(function(tri) {
        return Object.keys(trimesters[tri].subjects).length > 0;
      });
      return available.length > 0 ? available[available.length - 1] : "A001";
    }

    currentTrimester = chooseDefaultTrimester();

    function getEncouragementMessage(average) {
      if (average === null || isNaN(average)) return "Pret a commencer l'annee !";
      var messages = [];
      if (average >= 0 && average < 5) messages = ["Là, va falloir bosser", "Le bon coté des choses, c'est que tu peux difficilement faire pire", "Attention a ne pas faire tomber ta moyenne en negatif"];
      else if (average >= 5 && average < 10) messages = ["Euuuuuuuuuuuuuh", "Bah fais tes devoirs aussi", "Pense a ton futur"];
      else if (average >= 10 && average < 13) messages = ["Au moins tu as une moyenne à 2 chiffre", "Arrête de jouer à Valo", "Dis toi que c'est 10/10 et pas 10/20"];
      else if (average >= 13 && average < 15) messages = ["Bon bah c ok", "Lache pas trop quand meme", "Dis toi que l'art et la musique ne comptent pas au exams"];
      else if (average >= 15 && average < 17) messages = ["Bon travail ! Tu peux geekhumtravailler !", "Vzy t chill", "async function etreAuTop()"];
      else if (average >= 17 && average < 18.5) messages = ["Cool cool cool", "T bien soigné", "Bravo, tu es au top !"];
      else if (average >= 18.5 && average < 20) messages = ["Faut pas copier sur tes voisins tu sais ?", "Bon amuse toi un peu", "L3G3ND3"];
      else if (average === 20) messages = ["Tu as cheat comment ?"];
      if (messages.length > 0) return messages[Math.floor(Math.random() * messages.length)];
      return "Continue tes efforts !";
    }

    function getGradeColor(avg) {
      if (avg === null || isNaN(avg)) return '#8E8E93';
      if (avg < 10) return '#FF6B6B';
      if (avg < 12) return '#FFB340';
      if (avg < 14) return '#5E5EFF';
      return '#40D9A4';
    }

    function getTimelineCount() {
      var width = window.innerWidth;
      if (width < 600) return 1;
      if (width < 900) return 2;
      if (width < 1200) return 3;
      return 4;
    }

    function formatDate(dateStr) {
      var date = new Date(dateStr);
      var days = ["DIMANCHE", "LUNDI", "MARDI", "MERCREDI", "JEUDI", "VENDREDI", "SAMEDI"];
      var months = ["JANVIER", "FEVRIER", "MARS", "AVRIL", "MAI", "JUIN", "JUILLET", "AOUT", "SEPTEMBRE", "OCTOBRE", "NOVEMBRE", "DECEMBRE"];
      var dayName = days[date.getDay()];
      var dayNum = date.getDate();
      var month = months[date.getMonth()];
      return { dayName: dayName, date: dayNum + " " + month, fullDate: dateStr };
    }

    function decodeUtf8(str) {
      if (!str) return "";
      try {
        var bytes = [];
        for (var i = 0; i < str.length; i++) {
          bytes.push(str.charCodeAt(i) & 0xFF);
        }
        var decoder = new TextDecoder('utf-8');
        var decoded = decoder.decode(new Uint8Array(bytes));
        var txt = document.createElement('textarea');
        txt.innerHTML = decoded;
        decoded = txt.value;
        decoded = decoded.replace(/\s+/g, ' ').trim();
        return decoded;
      } catch(e) {
        return str;
      }
    }

    function decodeContent(str) {
      if (!str) return "";
      try {
        if (/^[A-Za-z0-9+\/=]+$/.test(str) && str.length % 4 === 0) {
          try {
            var base64Decoded = atob(str);
            var bytes = [];
            for (var i = 0; i < base64Decoded.length; i++) {
              bytes.push(base64Decoded.charCodeAt(i) & 0xFF);
            }
            var decoder = new TextDecoder('utf-8');
            return decoder.decode(new Uint8Array(bytes));
          } catch(e) {}
        }
        var fixed = str;
        var fixes = {
          'é': 'é', 'è': 'è', 'ê': 'ê', 'ë': 'ë', 'ä': 'ä', 'â': 'â',
          'î': 'î', 'ï': 'ï', 'ö': 'ö', 'ù': 'ù', 'û': 'û', 'ü': 'ü',
          'ç': 'ç', 'Ø': 'Ø', 'æ': 'æ', 'Ã¥': 'å', 'ã': 'ã', 'ñ': 'ñ',
          'à ': 'à', 'á': 'á', 'â': 'â', 'ã': 'ã', '€': '€', '’': "'",
          '“': '"', '”': '"', '•': '•', '–': '-', '—': '-', '‚': ',',
          '„': '"', '‹': '<', '›': '>', '‘': "'", '°': '°', '±': '±',
          '²': '²', '³': '³', 'µ': 'µ', '·': '·', '¹': '¹', 'º': 'º',
          '¼': '¼', '½': '½', '¾': '¾', '€': '€', '£': '£', 'Â¥': '¥',
          '§': '§', '©': '©', '®': '®', '™': '™', 'd': "d'", 'l': "l'",
          'n': "n'", 's': "s'", 'm': "m'", 't': "t'", 'c': "c'", 'j': "j'",
          'qu': "qu'", '': "'"
        };
        for (var wrong in fixes) {
          while (fixed.indexOf(wrong) !== -1) {
            fixed = fixed.split(wrong).join(fixes[wrong]);
          }
        }
        return fixed;
      } catch(e) {
        return str;
      }
    }

window.markHomework = function(devoirId, isDone, btn) {
  if (isUpdating) {
    alert("Veuillez patienter...");
    return;
  }
  isUpdating = true;
  var originalText = btn.textContent;
  var taskDiv = btn.closest('.task-block') || btn.closest('.task-card');
  var statusSpan = taskDiv ? taskDiv.querySelector('.task-status') : null;
  
  btn.textContent = "...";
  btn.disabled = true;
  
  var bodyObj = isDone ? 
    { idDevoirsEffectues: [devoirId], idDevoirsNonEffectues: [] } : 
    { idDevoirsEffectues: [], idDevoirsNonEffectues: [devoirId] };
    
  var formData = new URLSearchParams();
  formData.append("data", JSON.stringify(bodyObj));
  
  fetch(`https://api.ecoledirecte.com/v3/Eleves/${id}/cahierdetexte.awp?verbe=put&v=4.98.0`, {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      "X-Token": token
    },
    body: formData.toString()
  })
  .then(res => res.json())
  .then(json => {
    isUpdating = false;
    
    if (json.code === 200) {
      btn.setAttribute('data-done', isDone ? 'true' : 'false');
      
      if (statusSpan) {
        statusSpan.textContent = isDone ? "FAIT" : "A FAIRE";
        statusSpan.style.color = isDone ? "#5E5EFF" : "#FFB340";
      }
      
      btn.textContent = isDone ? "Non fait" : "Fait";
      btn.disabled = false;
      
      if (taskDiv) {
        taskDiv.style.borderLeftColor = isDone ? '#5E5EFF' : '#FFB340';
      }
      
      for (var dateKey in cahierData) {
        var tasks = cahierData[dateKey];
        for (var i = 0; i < tasks.length; i++) {
          var task = tasks[i];
          var taskId = task.idDevoir || task.id;
          if (taskId === devoirId) {
            task.effectue = isDone;
            
            if (dayDetailsCache[dateKey]) {
              for (var j = 0; j < dayDetailsCache[dateKey].length; j++) {
                var cachedTask = dayDetailsCache[dateKey][j];
                var cachedId = cachedTask.idDevoir || cachedTask.id;
                if (cachedId === devoirId) {
                  cachedTask.effectue = isDone;
                  break;
                }
              }
            }
            break;
          }
        }
      }
      
      var currentDatePill = document.querySelector('#ed-content .date-pill');
      if (currentDatePill) {
        var viewDate = currentDatePill.getAttribute('data-date');
        if (viewDate && dayDetailsCache[viewDate]) {
          for (var i = 0; i < dayDetailsCache[viewDate].length; i++) {
            var cachedTask = dayDetailsCache[viewDate][i];
            var cachedId = cachedTask.idDevoir || cachedTask.id;
            if (cachedId === devoirId) {
              cachedTask.effectue = isDone;
              break;
            }
          }
        }
      }
      
      if (currentTab === 'devoirs') {
        var visibleTasks = document.querySelectorAll('.task-card');
        for (var i = 0; i < visibleTasks.length; i++) {
          var card = visibleTasks[i];
          var cardBtn = card.querySelector('.mark-homework-btn');
          if (cardBtn) {
            var btnId = parseInt(cardBtn.getAttribute('data-id'));
            if (btnId === devoirId) {
              var cardStatus = card.querySelector('.task-status');
              if (cardStatus) {
                cardStatus.textContent = isDone ? "FAIT" : "A FAIRE";
                cardStatus.style.color = isDone ? "#5E5EFF" : "#FFB340";
              }
              card.style.borderLeftColor = isDone ? '#5E5EFF' : '#FFB340';
              cardBtn.setAttribute('data-done', isDone ? 'true' : 'false');
              cardBtn.textContent = isDone ? 'Non fait' : 'Fait';
              break;
            }
          }
        }
      }
      
      if (currentTab === 'home') {
        renderHome();
      }
    } else {
      btn.textContent = originalText;
      btn.disabled = false;
      alert("Erreur: " + json.message);
    }
  })
  .catch(err => {
    isUpdating = false;
    btn.textContent = originalText;
    btn.disabled = false;
    alert("Erreur: " + err.message);
  });
};

async function showDayDetails(dateKey) {
  var contentDiv = document.getElementById('ed-content');
  if (!contentDiv) return;
  previousView = currentTab;
  
  var cachedTasks = dayDetailsCache[dateKey];
  if (cachedTasks) {
    for (var i = 0; i < cachedTasks.length; i++) {
      var cachedTask = cachedTasks[i];
      var taskId = cachedTask.idDevoir || cachedTask.id;
      
      if (cahierData[dateKey]) {
        for (var j = 0; j < cahierData[dateKey].length; j++) {
          var sourceTask = cahierData[dateKey][j];
          var sourceId = sourceTask.idDevoir || sourceTask.id;
          if (sourceId === taskId) {
            cachedTask.effectue = sourceTask.effectue;
            break;
          }
        }
      }
    }
    renderDayDetailsView(dateKey, cachedTasks);
    return;
  }
  
  contentDiv.innerHTML = '<div class="empty-state"><p>Chargement...</p></div>';
  
  try {
    var startTime = Date.now();
    var res = await fetch(`https://api.ecoledirecte.com/v3/Eleves/${id}/cahierdetexte/${dateKey}.awp?verbe=get&v=4.98.0`, {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "X-Token": token
      },
      body: "data=" + encodeURIComponent(JSON.stringify({}))
    });
    var duration = Date.now() - startTime;
    logApiCall(`Cahier texte ${dateKey}`, res.status, duration);
    var json = await res.json();
    var matieres = json.data.matieres || [];
    var tasks = [];
    
    for (var i = 0; i < matieres.length; i++) {
      if (matieres[i].aFaire) {
        var task = matieres[i].aFaire;
        task.matiere = matieres[i].matiere;
        task.codeMatiere = matieres[i].codeMatiere;
        task.interrogation = matieres[i].interrogation || false;
        
        if (cahierData[dateKey]) {
          for (var j = 0; j < cahierData[dateKey].length; j++) {
            var sourceTask = cahierData[dateKey][j];
            var sourceId = sourceTask.idDevoir || sourceTask.id;
            var taskId = task.idDevoir || task.id;
            if (sourceId === taskId) {
              task.effectue = sourceTask.effectue;
              break;
            }
          }
        }
        
        tasks.push(task);
      }
    }
    
    dayDetailsCache[dateKey] = tasks;
    renderDayDetailsView(dateKey, tasks);
  } catch(e) {
    contentDiv.innerHTML = '<div class="empty-state"><p>Erreur: ' + e.message + '</p><button style="background:#2C2C44;border:none;color:white;padding:10px 20px;border-radius:12px;cursor:pointer;margin-top:20px;" onclick="window.goBack()">← Retour</button></div>';
  }
}

function renderDevoirs() {
  var contentDiv = document.getElementById('ed-content');
  if (!contentDiv) return;
  contentDiv.innerHTML = '';
  var dates = Object.keys(cahierData).sort();
  var hasTasks = false;
  var html = '<div class="devoirs-container">';
  
  for (var d = 0; d < dates.length; d++) {
    var dateKey = dates[d];
    var devoirs = cahierData[dateKey];
    var formatted = formatDate(dateKey);
    var notDoneTasks = [];
    var doneTasks = [];
    
    for (var i = 0; i < devoirs.length; i++) {
      if (devoirs[i].effectue === false) {
        notDoneTasks.push(devoirs[i]);
      } else {
        doneTasks.push(devoirs[i]);
      }
    }
    
    var allTasks = notDoneTasks.concat(doneTasks);
    if (allTasks.length > 0) {
      hasTasks = true;
      html += '<div style="margin-bottom:20px;">';
      html += '<div class="date-pill" data-date="' + dateKey + '" style="background:#1C1C2E;border-radius:20px;padding:14px 20px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;">';
      html += '<div><span style="font-weight:700;color:#5E5EFF;font-size:18px;">' + formatted.dayName + '</span><span style="color:#8E8E93;margin-left:12px;font-size:14px;">' + formatted.date + '</span></div>';
      html += '<div style="background:#2C2C44;padding:4px 10px;border-radius:20px;font-size:12px;color:#8E8E93;">' + allTasks.length + ' devoir(s)</div>';
      html += '</div>';
      html += '<div class="tasks-list" data-date="' + dateKey + '" style="margin-left:12px;margin-bottom:12px;">';
      
      for (var i = 0; i < allTasks.length; i++) {
        var task = allTasks[i];
        var isDone = (task.effectue === true);
        var taskType = task.interrogation ? "Interrogation" : "Devoir";
        var hasDocs = (task.documentsAFaire === true);
        var rawContent = '';
        if (typeof task.contenu === 'string') {
          rawContent = task.contenu;
        } else if (typeof task.aFaire === 'string') {
          rawContent = task.aFaire;
        }
        var taskContent = decodeContent(rawContent);
        var taskDate = task.donneLe ? new Date(task.donneLe).toLocaleDateString('fr-FR') : formatted.date;
        var taskId = task.idDevoir || task.id;
        
        html += '<div class="task-card" style="border-left:4px solid ' + (isDone ? '#5E5EFF' : '#FFB340') + ';background:#1C1C2E;border-radius:16px;padding:20px;margin-bottom:16px;">';
        html += '<div class="task-meta" style="display:flex;justify-content:space-between;margin-bottom:12px;">';
        html += '<div><strong style="color:#FFFFFF;font-size:16px;">' + task.matiere + '</strong> <span class="task-badge" style="background:#2C2C44;padding:4px 10px;border-radius:12px;font-size:12px;color:#8E8E93;margin-left:10px;">' + taskType + '</span></div>';
        html += '<div style="display:flex;align-items:center;gap:16px;">';
        html += '<span style="color:#8E8E93;font-size:12px;">' + taskDate + '</span>';
        html += '<span class="task-status" style="color:' + (isDone ? '#5E5EFF' : '#FFB340') + ';font-weight:500;font-size:13px;">' + (isDone ? 'FAIT' : 'A FAIRE') + '</span>';
        html += '<button class="mark-homework-btn" data-id="' + taskId + '" data-done="' + isDone + '" style="background:#2C2C44;border:none;color:#5E5EFF;padding:6px 12px;border-radius:8px;cursor:pointer;font-size:12px;">' + (isDone ? 'Non fait' : 'Fait') + '</button>';
        html += '</div>';
        html += '</div>';
        
        if (taskContent) {
          html += '<div class="task-content" style="color:#E0E0E0;font-size:14px;line-height:1.5;background:#0B0B1A;padding:12px;border-radius:12px;margin-bottom:12px;">' + taskContent + '</div>';
        }
        
        if (hasDocs) {
          html += '<div class="task-meta" style="margin-top:14px;color:#5E5EFF;">';
          html += '<span>📎 Pieces jointes disponibles</span>';
          html += '</div>';
        }
        
        html += '</div>';
      }
      
      html += '</div>';
      html += '</div>';
    }
  }
  
  if (!hasTasks) {
    html += '<div class="empty-state"><p>Aucun devoir a venir</p></div>';
  }
  
  html += '</div>';
  contentDiv.innerHTML = html;
  
  var datePills = document.querySelectorAll('#ed-content .date-pill');
  for (var i = 0; i < datePills.length; i++) {
    datePills[i].addEventListener('click', function(e) {
      e.stopPropagation();
      var dateKey = this.getAttribute('data-date');
      showDayDetails(dateKey);
    });
  }
  
  var markBtns = document.querySelectorAll('.mark-homework-btn');
  for (var i = 0; i < markBtns.length; i++) {
    markBtns[i].addEventListener('click', function(e) {
      e.stopPropagation();
      var btn = this;
      var taskId = parseInt(btn.getAttribute('data-id'));
      var isCurrentlyDone = btn.getAttribute('data-done') === 'true';
      window.markHomework(taskId, !isCurrentlyDone, btn);
    });
  }
}
       
async function showAttachmentModal(fileId, fileName) {
  var modal = document.createElement('div');
  modal.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:10000000;display:flex;align-items:center;justify-content:center;';
  
  var content = document.createElement('div');
  content.style.cssText = 'background:#1C1C2E;border-radius:16px;padding:20px;width:90vw;height:90vh;display:flex;flex-direction:column;';
  
  var header = document.createElement('div');
  header.style.cssText = 'display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;';
  header.innerHTML = `<span style="color:white;font-size:18px;">${fileName}</span>`;
  
  var btnGroup = document.createElement('div');
  btnGroup.style.cssText = 'display:flex;gap:12px;';
  
  var downloadBtn = document.createElement('a');
  downloadBtn.textContent = 'Télécharger';
  downloadBtn.style.cssText = 'background:#5E5EFF;color:white;padding:8px 16px;border-radius:8px;text-decoration:none;font-size:14px;opacity:0.4;pointer-events:none;';
  
  var closeBtn = document.createElement('button');
  closeBtn.textContent = '✕';
  closeBtn.style.cssText = 'background:#2C2C44;border:none;color:white;padding:8px 16px;border-radius:8px;cursor:pointer;';
  closeBtn.onclick = function() { modal.remove(); };
  
  btnGroup.appendChild(downloadBtn);
  btnGroup.appendChild(closeBtn);
  header.appendChild(btnGroup);
  
  var body = document.createElement('div');
  body.style.cssText = 'flex:1;display:flex;align-items:center;justify-content:center;background:#0B0B1A;border-radius:12px;overflow:auto;';
  body.innerHTML = '<div style="color:#8E8E93;padding:40px;">Chargement...</div>';
  
  content.appendChild(header);
  content.appendChild(body);
  modal.appendChild(content);
  document.body.appendChild(modal);
  modal.onclick = function(e) { if (e.target === modal) modal.remove(); };
  
  try {
    var formData = new URLSearchParams();
    formData.append("data", JSON.stringify({ forceDownload: 0, anneeMessages: "2025-2026" }));
    
    var res = await fetch(`https://api.ecoledirecte.com/v3/telechargement.awp?verbe=get&fichierId=${fileId}&leTypeDeFichier=PIECE_JOINTE&v=4.98.0`, {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded", "X-Token": token },
      body: formData.toString()
    });
    
    if (!res.ok) throw new Error('HTTP ' + res.status);
    
    var blob = await res.blob();
    var blobUrl = URL.createObjectURL(blob);
    
    downloadBtn.href = blobUrl;
    downloadBtn.download = fileName;
    downloadBtn.style.opacity = '1';
    downloadBtn.style.pointerEvents = 'auto';
    
    if (blob.type.startsWith('image/')) {
      body.innerHTML = `<img src="${blobUrl}" style="max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;">`;
    } else if (blob.type === 'application/pdf') {
      body.innerHTML = `<embed src="${blobUrl}" type="application/pdf" style="width:100%;height:100%;border:none;border-radius:8px;">`;
    } else if (blob.type.startsWith('text/')) {
      var text = await blob.text();
      body.innerHTML = `<pre style="color:#E0E0E0;text-align:left;background:#0B0B1A;padding:20px;border-radius:8px;overflow:auto;width:100%;height:100%;white-space:pre-wrap;word-break:break-word;">${text}</pre>`;
    } else if (blob.type.startsWith('video/')) {
      body.innerHTML = `<video src="${blobUrl}" controls style="max-width:100%;max-height:100%;border-radius:8px;"></video>`;
    } else if (blob.type.startsWith('audio/')) {
      body.innerHTML = `<audio src="${blobUrl}" controls style="width:100%;"></audio>`;
    } else {
      body.innerHTML = `<div style="color:#8E8E93;text-align:center;"><div style="font-size:48px;margin-bottom:16px;"> </div><div>impossible de charger le fichier: non supporté</div></div>`;
    }
  } catch(err) {
    body.innerHTML = `<div style="color:#8E8E93;text-align:center;"><div style="font-size:48px;margin-bottom:16px;"> </div><div>Impossible de charger</div></div>`;
  }
}

window.showAttachmentModal = showAttachmentModal;
       
function renderDayDetailsView(dateKey, tasks) {
  var formatted = formatDate(dateKey);
  var contentDiv = document.getElementById('ed-content');
  if (!contentDiv) return;
  
  var html = '<div style="margin-bottom:20px;">';
  html += '<button style="background:#2C2C44;border:none;color:white;padding:10px 20px;border-radius:12px;cursor:pointer;margin-bottom:20px;" onclick="window.goBack()">← Retour</button>';
  html += '<div style="background:#1C1C2E;border-radius:20px;padding:24px;margin-bottom:20px;">';
  html += '<h2 style="color:#5E5EFF;margin-bottom:8px;">' + formatted.dayName + '</h2>';
  html += '<p style="color:#8E8E93;margin-bottom:24px;">' + formatted.date + '</p>';
  html += '</div>';
  
  for (var i = 0; i < tasks.length; i++) {
    var task = tasks[i];
    var isDone = (task.effectue === true);
    var taskType = task.interrogation ? "Interrogation" : "Devoir";
    var hasDocs = (task.documents && task.documents.length > 0);
    var rawContent = typeof task.contenu === 'string' ? task.contenu : '';
    var cleanContent = decodeContent(rawContent);
    var taskId = task.idDevoir || task.id;
    
    html += '<div class="task-block" style="background:#1C1C2E;border-radius:16px;padding:20px;margin-bottom:16px;border-left:4px solid ' + (isDone ? '#5E5EFF' : '#FFB340') + ';">';
    html += '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;">';
    html += '<div><span style="font-weight:700;color:white;font-size:18px;">' + task.matiere + '</span> <span style="color:#8E8E93;font-size:13px;margin-left:8px;">' + taskType + '</span></div>';
    html += '<div><span class="task-status" style="color:' + (isDone ? '#5E5EFF' : '#FFB340') + ';font-size:13px;font-weight:500;">' + (isDone ? 'FAIT' : 'A FAIRE') + '</span>';
    html += '<button class="mark-homework-btn" data-id="' + taskId + '" data-done="' + isDone + '" style="background:#2C2C44;border:none;color:#5E5EFF;padding:6px 12px;border-radius:8px;cursor:pointer;font-size:12px;margin-left:12px;">' + (isDone ? 'Non fait' : 'Fait') + '</button>';
    html += '</div></div>';
    
    if (cleanContent) {
      html += '<div style="color:#E0E0E0;font-size:14px;line-height:1.5;margin-bottom:12px;background:#0B0B1A;padding:12px;border-radius:12px;">' + cleanContent + '</div>';
    }
    
    if (task.donneLe) {
      var givenDate = new Date(task.donneLe);
      html += '<div style="color:#8E8E93;font-size:12px;margin-bottom:8px;">Donne le: ' + givenDate.toLocaleDateString('fr-FR') + '</div>';
    }
    
if (hasDocs) {
  html += '<div style="margin-top:12px;padding-top:12px;border-top:1px solid #2C2C44;">';
  html += '<span style="color:#8E8E93;font-size:12px;">Pièces jointes:</span>';
  for (var d = 0; d < task.documents.length; d++) {
    html += '<div style="color:#5E5EFF;font-size:13px;margin-top:6px;margin-left:12px;cursor:pointer;" onclick="window.showAttachmentModal(' + task.documents[d].id + ', \'' + task.documents[d].libelle.replace(/'/g, "\\'") + '\')">📄 ' + task.documents[d].libelle + '</div>';
  }
  html += '</div>';
}
    
    html += '</div>';
  }
  
  html += '</div>';
  contentDiv.innerHTML = html;
  
  var btns = document.querySelectorAll('.mark-homework-btn');
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function(e) {
      e.stopPropagation();
      var btn = this;
      var taskId = parseInt(btn.getAttribute('data-id'));
      var isCurrentlyDone = btn.getAttribute('data-done') === 'true';
      window.markHomework(taskId, !isCurrentlyDone, btn);
    });
  }
}

window.goBack = function() {
  if (previousView === 'devoirs') {
    renderDevoirs();
  } else if (previousView === 'moyennes') {
    renderMoyennes();
  } else {
    renderDevoirs();
  }
};

window.goBack = function() {
  if (previousView === 'devoirs') {
    renderDevoirs();
  } else if (previousView === 'moyennes') {
    renderMoyennes();
  } else {
    renderDevoirs();
  }
};

    async function showDayDetails(dateKey) {
      var contentDiv = document.getElementById('ed-content');
      if (!contentDiv) return;
      previousView = currentTab;
      if (dayDetailsCache[dateKey]) {
        renderDayDetailsView(dateKey, dayDetailsCache[dateKey]);
        return;
      }
      contentDiv.innerHTML = '<div class="empty-state"><p>Chargement...</p></div>';
      try {
        var startTime = Date.now();
        var res = await fetch(`https://api.ecoledirecte.com/v3/Eleves/${id}/cahierdetexte/${dateKey}.awp?verbe=get&v=4.98.0`, {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            "X-Token": token
          },
          body: "data=" + encodeURIComponent(JSON.stringify({}))
        });
        var duration = Date.now() - startTime;
        logApiCall(`Cahier texte ${dateKey}`, res.status, duration);
        var json = await res.json();
        var matieres = json.data.matieres || [];
        var tasks = [];
        for (var i = 0; i < matieres.length; i++) {
          if (matieres[i].aFaire) {
            var task = matieres[i].aFaire;
            task.matiere = matieres[i].matiere;
            task.codeMatiere = matieres[i].codeMatiere;
            task.interrogation = matieres[i].interrogation || false;
            tasks.push(task);
          }
        }
        dayDetailsCache[dateKey] = tasks;
        renderDayDetailsView(dateKey, tasks);
      } catch(e) {
        contentDiv.innerHTML = '<div class="empty-state"><p>Erreur: ' + e.message + '</p><button style="background:#2C2C44;border:none;color:white;padding:10px 20px;border-radius:12px;cursor:pointer;margin-top:20px;" onclick="window.goBack()">← Retour</button></div>';
      }
    }

    function renderDayDetailsView(dateKey, tasks) {
      var formatted = formatDate(dateKey);
      var contentDiv = document.getElementById('ed-content');
      if (!contentDiv) return;
      var html = '<div style="margin-bottom:20px;">';
      html += '<button style="background:#2C2C44;border:none;color:white;padding:10px 20px;border-radius:12px;cursor:pointer;margin-bottom:20px;" onclick="window.goBack()">← Retour</button>';
      html += '<div style="background:#1C1C2E;border-radius:20px;padding:24px;margin-bottom:20px;">';
      html += '<h2 style="color:#5E5EFF;margin-bottom:8px;">' + formatted.dayName + '</h2>';
      html += '<p style="color:#8E8E93;margin-bottom:24px;">' + formatted.date + '</p>';
      html += '</div>';
      for (var i = 0; i < tasks.length; i++) {
        var task = tasks[i];
        var isDone = (task.effectue === true);
        var taskType = task.interrogation ? "Interrogation" : "Devoir";
        var hasDocs = (task.documents && task.documents.length > 0);
        var rawContent = typeof task.contenu === 'string' ? task.contenu : '';
        var cleanContent = decodeContent(rawContent);
        var taskId = task.idDevoir || task.id;
        html += '<div class="task-block" style="background:#1C1C2E;border-radius:16px;padding:20px;margin-bottom:16px;border-left:4px solid ' + (isDone ? '#5E5EFF' : '#FFB340') + ';">';
        html += '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;">';
        html += '<div><span style="font-weight:700;color:white;font-size:18px;">' + task.matiere + '</span> <span style="color:#8E8E93;font-size:13px;margin-left:8px;">' + taskType + '</span></div>';
        html += '<div><span class="task-status" style="color:' + (isDone ? '#5E5EFF' : '#FFB340') + ';font-size:13px;font-weight:500;">' + (isDone ? 'FAIT' : 'A FAIRE') + '</span>';
        html += '<button class="mark-homework-btn" data-id="' + taskId + '" data-done="' + isDone + '" style="background:#2C2C44;border:none;color:#5E5EFF;padding:6px 12px;border-radius:8px;cursor:pointer;font-size:12px;margin-left:12px;">' + (isDone ? 'Non fait' : 'Fait') + '</button>';
        html += '</div></div>';
        if (cleanContent) {
          html += '<div style="color:#E0E0E0;font-size:14px;line-height:1.5;margin-bottom:12px;background:#0B0B1A;padding:12px;border-radius:12px;">' + cleanContent + '</div>';
        }
        if (task.donneLe) {
          var givenDate = new Date(task.donneLe);
          html += '<div style="color:#8E8E93;font-size:12px;margin-bottom:8px;">Donne le: ' + givenDate.toLocaleDateString('fr-FR') + '</div>';
        }
        if (hasDocs) {
          html += '<div style="margin-top:12px;padding-top:12px;border-top:1px solid #2C2C44;">';
          html += '<span style="color:#8E8E93;font-size:12px;">Pieces jointes:</span>';
          for (var d = 0; d < task.documents.length; d++) {
            html += '<div style="color:#5E5EFF;font-size:13px;margin-top:6px;margin-left:12px;">📄 ' + task.documents[d].libelle + '</div>';
          }
          html += '</div>';
        }
        html += '</div>';
      }
      html += '</div>';
      contentDiv.innerHTML = html;
      var btns = document.querySelectorAll('.mark-homework-btn');
      for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', function(e) {
          e.stopPropagation();
          var btn = this;
          var taskId = parseInt(btn.getAttribute('data-id'));
          var isCurrentlyDone = btn.getAttribute('data-done') === 'true';
          window.markHomework(taskId, !isCurrentlyDone, btn);
        });
      }
    }

    function renderHome() {
      var contentDiv = document.getElementById('ed-content');
      if (!contentDiv) return;
      contentDiv.innerHTML = '';
      var currentTrim = trimesters[currentTrimester];
      var subjects = Object.keys(currentTrim.subjects).map(function(subject) {
        var subj = currentTrim.subjects[subject];
        return { name: subject, average: subj.average, count: subj.count };
      }).sort(function(a, b) { return b.average - a.average; }).slice(0, 4);
      var previousAvg = null;
      var avgDiff = null;
      var diffColor = '#8E8E93';
      var diffText = '';
      var homeworkCount = 0;
      var dates = Object.keys(cahierData || {});
      for (var i = 0; i < dates.length; i++) {
        var tasks = cahierData[dates[i]] || [];
        for (var j = 0; j < tasks.length; j++) {
          if (tasks[j].effectue === false) homeworkCount++;
        }
      }
      var currentTrimAvg = null;
      var totalWeighted = 0;
      var totalCoef = 0;
      for (var subject in currentTrim.subjects) {
        var subj = currentTrim.subjects[subject];
        totalWeighted += subj.sum;
        totalCoef += subj.coefSum;
      }
      if (totalCoef > 0) {
        currentTrimAvg = totalWeighted / totalCoef;
      }
      var html = '';
      html += '<div class="home-hero">';
      html += '<div class="hero-copy">';
      html += '<div class="eyebrow">Accueil</div>';
      html += '<div class="title-container">';
      html += '<h1>EcoleDirecte</h1>';
      html += '<span class="dash-animated">—</span>';
      html += '</div>';
      html += '<p style="color:#B3B3D2;margin-top:12px;font-size:16px;font-weight:500;">' + getEncouragementMessage(currentTrimAvg) + '</p>';
      html += '</div>';
      html += '<div class="hero-card">';
      html += '<div class="hero-stats"><span>Devoirs à faire</span><strong>' + homeworkCount + '</strong></div>';
      html += '<div class="hero-stats"><span>Moyenne générale</span><strong>' + (currentTrimAvg !== null ? currentTrimAvg.toFixed(2) : '—') + '</strong></div>';
      html += '<div style="display:flex;align-items:baseline;gap:8px;">';
      html += '<strong>' + (currentTrimAvg !== null ? currentTrimAvg.toFixed(2) : '—') + '</strong>';
      if (diffText) {
        html += '<span style="font-size:14px;color:' + diffColor + ';">' + diffText + '</span>';
      }
      html += '</div>';
      html += '</div>';
      html += '<div class="home-grid">';
      if (subjects.length > 0) {
        html += '<div class="home-card"><div class="card-title">Top matières</div>';
        for (var k = 0; k < subjects.length; k++) {
          var item = subjects[k];
          html += '<div class="home-subject"><span>' + item.name + '</span><strong>' + item.average.toFixed(2) + '</strong></div>';
        }
        html += '</div>';
      }
      html += '</div>';
//      if (timelineData && timelineData.length > 0) {
        var timelineCount = getTimelineCount();
        var displayedTimeline = timelineData.slice(0, timelineCount);
        html += '<div class="timeline-section" style="width:100%;margin:24px 0;padding:0 24px;">';
        html += '<div class="card-title" style="margin-bottom:16px;">Timeline récente</div>';
        html += '<div style="display:flex;gap:16px;flex-wrap:wrap;">';
        for (var t = 0; t < displayedTimeline.length; t++) {
          var event = displayedTimeline[t];
          var eventDate = event.date ? new Date(event.date).toLocaleDateString('fr-FR') : 'Date inconnue';
          var subtitle = event.soustitre || '';
          var content = event.contenu || '';
          html += '<div style="flex:1;min-width:260px;background:#111123;border:1px solid #2C2C44;border-radius:20px;padding:18px;">';
          html += '<div style="font-size:15px;font-weight:700;color:#FFFFFF;margin-bottom:8px;">' + (event.titre || 'Événement') + '</div>';
          if (subtitle) html += '<div style="font-size:13px;color:#8E8E93;margin-bottom:10px;">' + subtitle + '</div>';
          html += '<div style="font-size:12px;color:#8E8E93;margin-bottom:12px;">' + (event.typeElement || '') + '</div>';
          html += '<div style="font-size:12px;color:#8E8E93;white-space:nowrap;margin-bottom:12px;">' + eventDate + '</div>';
          if (content) html += '<div style="color:#DFE0FF;font-size:14px;line-height:1.6;">' + content + '</div>';
          html += '</div>';
        }
        html += '</div>';
        html += '</div>';
//      }
      contentDiv.innerHTML = html;
    }

    function renderMoyennes() {
      var contentDiv = document.getElementById('ed-content');
      if (!contentDiv) return;
      contentDiv.innerHTML = '';
      var triData = trimesters[currentTrimester];
      var subjectsList = [];
      var totalWeighted = 0;
      var totalCoef = 0;
      var totalGrades = 0;
      for (var subject in triData.subjects) {
        var subj = triData.subjects[subject];
        subjectsList.push({
          name: subject,
          average: subj.average,
          count: subj.count,
          coefSum: subj.coefSum
        });
        totalWeighted += subj.sum;
        totalCoef += subj.coefSum;
        totalGrades += subj.count;
      }
      subjectsList.sort(function(a, b) { return b.average - a.average; });
      var trimesterAverage = totalCoef > 0 ? (totalWeighted / totalCoef) : null;
      var allTotalWeighted = 0;
      var allTotalCoef = 0;
      var allTotalGrades = 0;
      for (var tri in trimesters) {
        for (var sub in trimesters[tri].subjects) {
          var s = trimesters[tri].subjects[sub];
          allTotalWeighted += s.sum;
          allTotalCoef += s.coefSum;
          allTotalGrades += s.count;
        }
      }
      var annualAverage = allTotalCoef > 0 ? (allTotalWeighted / allTotalCoef) : null;
      var html = '';
      if (subjectsList.length === 0) {
        html += '<div class="empty-state"><p>Aucune note pour ce trimestre</p></div>';
      } else {
        html += '<div class="stats-grid">';
        html += '<div class="stat-card"><div class="stat-label">MOYENNE GENERALE</div><div class="stat-value">' + trimesterAverage.toFixed(2) + '</div><div class="stat-sub">Coefficientee</div></div>';
        html += '<div class="stat-card"><div class="stat-label">NOMBRE DE NOTES</div><div class="stat-value">' + totalGrades + '</div><div class="stat-sub">Ce trimestre</div></div>';
        html += '</div>';
        html += '<div class="subjects-grid">';
        for (var i = 0; i < subjectsList.length; i++) {
          var sub = subjectsList[i];
          var gradeColor = getGradeColor(sub.average);
          var diff = sub.average - trimesterAverage;
          var diffColor = getDifferenceColor(diff);
          var diffText = formatDifference(diff);
          html += '<div class="subject-card" data-subject="' + sub.name.replace(/'/g, "\\'") + '" style="cursor:pointer;">';
          html += '<div class="subject-header">';
          html += '<span class="subject-name">' + sub.name + '</span>';
          html += '<span class="subject-average" style="color:' + gradeColor + ';">' + sub.average.toFixed(2) + '</span>';
          html += '</div>';
          html += '<div class="subject-stats">';
          html += '<span><span class="grade-indicator" style="background:' + gradeColor + ';"></span>' + sub.count + ' note(s)</span>';
          html += '<span>Coeff. ' + sub.coefSum.toFixed(1) + '</span>';
          html += '<div style="font-size:12px;color:' + diffColor + ';margin-left:8px;">' + diffText + '</div>';
          html += '</div>';
          html += '</div>';
        }
        html += '</div>';
      }
      if (annualAverage !== null) {
        html += '<div class="annual-card">';
        html += '<div class="annual-label">MOYENNE ANNUELLE PONDEREE</div>';
        html += '<div class="annual-value">' + annualAverage.toFixed(2) + '</div>';
        html += '<div class="annual-note-count">' + allTotalGrades + ' notes sur toute l annee</div>';
        html += '</div>';
      }
      contentDiv.innerHTML = html;
      var subjectCards = contentDiv.querySelectorAll('.subject-card[data-subject]');
      for (var i = 0; i < subjectCards.length; i++) {
        subjectCards[i].addEventListener('click', function() {
          var subjectName = this.getAttribute('data-subject');
          showSubjectGrades(subjectName);
        });
      }
    }

    function showSubjectGrades(subjectName) {
      var contentDiv = document.getElementById('ed-content');
      if (!contentDiv) return;
      previousView = 'moyennes';
      var subjectGrades = originalNotes.filter(function(note) {
        return note.libelleMatiere === subjectName && note.codePeriode === currentTrimester;
      });
      if (subjectGrades.length === 0) {
        subjectGrades = originalNotes.filter(function(note) {
          return note.libelleMatiere === subjectName;
        });
        var trimesterDisplay = 'Toutes les periodes';
      } else {
        var trimesterDisplay = trimesters[currentTrimester].name;
      }
      var html = '<div style="margin-bottom:20px;">';
      html += '<button id="back-to-moyennes" style="background:#2C2C44;border:none;color:white;padding:10px 20px;border-radius:12px;cursor:pointer;margin-bottom:20px;">← Retour aux moyennes</button>';
      html += '<div style="background:#1C1C2E;border-radius:20px;padding:24px;margin-bottom:20px;">';
      html += '<h2 style="color:#5E5EFF;margin-bottom:8px;">' + subjectName + '</h2>';
      html += '<p style="color:#8E8E93;margin-bottom:24px;">' + trimesterDisplay + '</p>';
      html += '</div>';
      if (subjectGrades.length === 0) {
        html += '<div class="empty-state"><p>Aucune note trouvee pour cette matiere</p></div>';
      } else {
        html += '<div style="background:#1C1C2E;border-radius:16px;overflow:hidden;">';
        for (var i = 0; i < subjectGrades.length; i++) {
          var grade = subjectGrades[i];
          var gradeValue = grade.valeur;
          var noteSur = grade.noteSur || 20;
          var gradeColor = getGradeColor(parseFloat(gradeValue.replace(',', '.')) / noteSur * 20);
          var dateStr = grade.date || grade.dateSaisie;
          var formattedDate = dateStr ? new Date(dateStr).toLocaleDateString('fr-FR') : 'Date inconnue';
          var commentaire = grade.commentaire || '';
          var decodedComment = decodeContent(commentaire);
          html += '<div style="padding:16px 20px;border-bottom:1px solid #2C2C44;display:flex;justify-content:space-between;align-items:center;">';
          html += '<div>';
          html += '<div style="font-size:16px;font-weight:600;color:#FFFFFF;margin-bottom:4px;">' + gradeValue + '/' + noteSur + '</div>';
          html += '<div style="font-size:12px;color:#8E8E93;">' + formattedDate + '</div>';
          if (decodedComment) {
            html += '<div style="font-size:13px;color:#B3B3D2;margin-top:8px;max-width:400px;">' + decodedComment + '</div>';
          }
          html += '</div>';
          html += '<div style="text-align:right;">';
          html += '<div style="font-size:24px;font-weight:700;color:' + gradeColor + ';">' + gradeValue + '</div>';
          html += '<div style="font-size:11px;color:#8E8E93;margin-top:4px;">Coeff. ' + (grade.coef || 1) + '</div>';
          html += '</div>';
          html += '</div>';
        }
        html += '</div>';
      }
      html += '</div>';
      contentDiv.innerHTML = html;
      var backButton = document.getElementById('back-to-moyennes');
      if (backButton) {
        backButton.addEventListener('click', function() {
          renderMoyennes();
        });
      }
    }

    function getDifferenceColor(diff) {
      if (diff > 0) return '#40D9A4';
      if (diff < 0) return '#FF6B6B';
      return '#8E8E93';
    }

    function formatDifference(diff) {
      if (diff > 0) return '+' + diff.toFixed(2);
      if (diff < 0) return diff.toFixed(2);
      return '0.00';
    }

    function renderDevoirs() {
      var contentDiv = document.getElementById('ed-content');
      if (!contentDiv) return;
      contentDiv.innerHTML = '';
      var dates = Object.keys(cahierData).sort();
      var hasTasks = false;
      var html = '<div class="devoirs-container">';
      for (var d = 0; d < dates.length; d++) {
        var dateKey = dates[d];
        var devoirs = cahierData[dateKey];
        var formatted = formatDate(dateKey);
        var notDoneTasks = [];
        var doneTasks = [];
        for (var i = 0; i < devoirs.length; i++) {
          if (devoirs[i].effectue === false) {
            notDoneTasks.push(devoirs[i]);
          } else {
            doneTasks.push(devoirs[i]);
          }
        }
        var allTasks = notDoneTasks.concat(doneTasks);
        if (allTasks.length > 0) {
          hasTasks = true;
          html += '<div style="margin-bottom:20px;">';
          html += '<div class="date-pill" data-date="' + dateKey + '" style="background:#1C1C2E;border-radius:20px;padding:14px 20px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;">';
          html += '<div><span style="font-weight:700;color:#5E5EFF;font-size:18px;">' + formatted.dayName + '</span><span style="color:#8E8E93;margin-left:12px;font-size:14px;">' + formatted.date + '</span></div>';
          html += '<div style="background:#2C2C44;padding:4px 10px;border-radius:20px;font-size:12px;color:#8E8E93;">' + allTasks.length + ' devoir(s)</div>';
          html += '</div>';
          html += '<div class="tasks-list" data-date="' + dateKey + '" style="margin-left:12px;margin-bottom:12px;">';
          for (var i = 0; i < allTasks.length; i++) {
            var task = allTasks[i];
            var isDone = (task.effectue === true);
            var taskType = task.interrogation ? "Interrogation" : "Devoir";
            var hasDocs = (task.documentsAFaire === true);
            var rawContent = '';
            if (typeof task.contenu === 'string') {
              rawContent = task.contenu;
            } else if (typeof task.aFaire === 'string') {
              rawContent = task.aFaire;
            }
            var taskContent = decodeContent(rawContent);
            var taskDate = task.donneLe ? new Date(task.donneLe).toLocaleDateString('fr-FR') : formatted.date;
            html += '<div class="task-card" style="border-left-color:' + (isDone ? '#5E5EFF' : '#FFB340') + ';">';
            html += '<div class="task-meta">';
            html += '<div><strong style="color:#FFFFFF;">' + task.matiere + '</strong> <span class="task-badge">' + taskType + '</span></div>';
            html += '<div><span>' + taskDate + '</span><span>' + (isDone ? 'FAIT' : 'A FAIRE') + '</span></div>';
            html += '</div>';
            if (taskContent) {
              html += '<div class="task-content">' + taskContent + '</div>';
            }
            if (hasDocs) {
              html += '<div class="task-meta" style="margin-top:14px;">';
              html += '<span>📎 Pieces jointes disponibles</span>';
              html += '</div>';
            }
            html += '</div>';
          }
          html += '</div>';
          html += '</div>';
        }
      }
      if (!hasTasks) {
        html += '<div class="empty-state"><p>Aucun devoir a venir</p></div>';
      }
      html += '</div>';
      contentDiv.innerHTML = html;
      var datePills = document.querySelectorAll('#ed-content .date-pill');
      for (var i = 0; i < datePills.length; i++) {
        datePills[i].addEventListener('click', function(e) {
          e.stopPropagation();
          var dateKey = this.getAttribute('data-date');
          showDayDetails(dateKey);
        });
      }
    }

    function isActuallySigned(msg) {
      if (!msg.signature) return false;
      if (Array.isArray(msg.signature)) {
        if (msg.signature.length === 0) return false;
        for (var i = 0; i < msg.signature.length; i++) {
          var sig = msg.signature[i];
          if (sig.dateValidation && sig.dateValidation !== "") return true;
          if (sig.datevalidation && sig.datevalidation !== "") return true;
        }
        return false;
      }
      if (typeof msg.signature === 'object') {
        if (msg.signature.dateValidation && msg.signature.dateValidation !== "") return true;
        if (msg.signature.datevalidation && msg.signature.datevalidation !== "") return true;
      }
      return false;
    }

    function hasSignatureOption(msg) {
      return msg.isSignatureDemandee === true;
    }

    function getSignature(msg) {
      if (!msg.signature) return null;
      if (Array.isArray(msg.signature) && msg.signature.length > 0) {
        return msg.signature[0];
      }
      if (typeof msg.signature === 'object') {
        return msg.signature;
      }
      return null;
    }

    function renderCarnet() {
      var contentDiv = document.getElementById('ed-content');
      if (!contentDiv) return;
      contentDiv.innerHTML = '';
      var correspondances = carnetData.correspondances || [];
      function highlightText(text, searchTerm) {
        if (!searchTerm || searchTerm.trim() === "") return text;
        var regex = new RegExp('(' + searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');
        return text.replace(regex, '<mark style="background:#FFD700;color:#1C1C2E;padding:0 2px;border-radius:4px;">$1</mark>');
      }
      var html = '<div class="carnet-container">';
      html += '<div class="search-bar" style="margin-bottom:20px;position:sticky;top:0;background:#0B0B1A;padding:12px 0;z-index:10;">';
      html += '<div style="display:flex;gap:12px;align-items:center;background:#1C1C2E;border-radius:16px;padding:8px 16px;">';
      html += '<span style="color:#8E8E93;">🔍</span>';
      html += '<input type="text" id="carnetSearch" placeholder="Rechercher par expediteur, contenu ou date..." style="flex:1;background:transparent;border:none;color:white;font-size:15px;outline:none;">';
      html += '<button id="clearSearch" style="background:#2C2C44;border:none;color:#8E8E93;padding:6px 12px;border-radius:10px;cursor:pointer;font-size:12px;">Effacer</button>';
      html += '</div>';
      html += '<div style="display:flex;gap:8px;margin-top:8px;">';
      html += '<button class="filter-btn" data-filter="all" style="background:#2C2C44;border:none;color:#5E5EFF;padding:6px 12px;border-radius:10px;cursor:pointer;font-size:12px;">Tous</button>';
      html += '<button class="filter-btn" data-filter="unsigned" style="background:#2C2C44;border:none;color:#FFB340;padding:6px 12px;border-radius:10px;cursor:pointer;font-size:12px;">Non signes</button>';
      html += '<button class="filter-btn" data-filter="signed" style="background:#2C2C44;border:none;color:#5E5EFF;padding:6px 12px;border-radius:10px;cursor:pointer;font-size:12px;">Signes</button>';
      html += '</div>';
      html += '</div>';
      html += '<div id="carnetMessages"></div>';
      html += '</div>';
      contentDiv.innerHTML = html;
      function renderMessages(filterText, filterType) {
        var messagesDiv = document.getElementById('carnetMessages');
        if (!messagesDiv) return;
        var filtered = correspondances.filter(function(msg) {
          var auteur = msg.auteur || {};
          var auteurName = ((auteur.nom || "") + " " + (auteur.prenom || "")).toLowerCase();
          var content = (msg.contenu || "").toLowerCase();
          var date = (msg.dateCreation || "").toLowerCase();
          var searchLower = filterText.toLowerCase();
          var matchesSearch = filterText === "" || auteurName.indexOf(searchLower) !== -1 || content.indexOf(searchLower) !== -1 || date.indexOf(searchLower) !== -1;
          var isSigned = isActuallySigned(msg);
          var matchesFilter = true;
          if (filterType === "signed") matchesFilter = isSigned;
          if (filterType === "unsigned") matchesFilter = hasSignatureOption(msg) && !isSigned;
          return matchesSearch && matchesFilter;
        });
        if (filtered.length === 0) {
          messagesDiv.innerHTML = '<div class="empty-state"><p>Aucun message trouve</p></div>';
          return;
        }
        var html = '';
        for (var i = 0; i < filtered.length; i++) {
          var msg = filtered[i];
          var date = msg.dateCreation || "";
          var formattedDate = date.replace(/-/g, '/').substring(0, 16);
          var isSigned = isActuallySigned(msg);
          var hasOption = hasSignatureOption(msg);
          var sig = getSignature(msg);
          var auteur = msg.auteur || {};
          var auteurName = (auteur.nom || "") + " " + (auteur.prenom || "");
          var cleanContent = decodeContent(msg.contenu || "");
          var hasAttachment = msg.urlFichier && msg.urlFichier !== "";
          var highlightedName = filterText ? highlightText(auteurName, filterText) : auteurName;
          var highlightedContent = filterText ? highlightText(cleanContent, filterText) : cleanContent;
          var highlightedDate = filterText ? highlightText(formattedDate, filterText) : formattedDate;
          var borderColor = '#2C2C44';
          if (isSigned) borderColor = '#5E5EFF';
          else if (hasOption) borderColor = '#FFB340';
          html += '<div class="carnet-card" style="background:#1C1C2E;border-radius:16px;padding:20px;margin-bottom:16px;border-left:4px solid ' + borderColor + ';">';
          html += '<div style="display:flex;justify-content:space-between;margin-bottom:12px;">';
          html += '<div><strong style="color:#5E5EFF;">' + highlightedName + '</strong> <span style="color:#8E8E93;font-size:12px;">(' + (msg.type || "") + ')</span></div>';
          html += '<div style="color:#8E8E93;font-size:12px;">' + highlightedDate + '</div>';
          html += '</div>';
          html += '<div style="color:#E0E0E0;font-size:14px;line-height:1.5;margin-bottom:12px;">' + highlightedContent + '</div>';
          html += '<div style="margin-top:12px;">';
          if (isSigned && sig) {
            var sigDate = sig.dateValidation || sig.datevalidation || "";
            sigDate = sigDate.replace(/-/g, '/').substring(0, 16);
            var sigName = (sig.nom || "") + " " + (sig.prenom || "");
            var highlightedSigName = filterText ? highlightText(sigName, filterText) : sigName;
            var highlightedSigDate = filterText ? highlightText(sigDate, filterText) : sigDate;
            html += '<span style="color:#5E5EFF;font-size:12px;">✓ Signe par ' + highlightedSigName + ' le ' + highlightedSigDate + '</span>';
          } else if (hasOption) {
            html += '<span style="color:#FFB340;font-size:12px;">○ En attente de signature</span>';
          }
          if (hasAttachment) {
            html += '<button class="attachment-btn" data-file="' + msg.urlFichier + '" style="background:#2C2C44;border:none;color:#5E5EFF;padding:8px 16px;border-radius:10px;cursor:pointer;font-size:12px;margin-left:12px;">📎 Piece jointe</button>';
          }
          html += '</div></div>';
        }
        messagesDiv.innerHTML = html;
        var attachBtns = document.querySelectorAll('.attachment-btn');
        for (var i = 0; i < attachBtns.length; i++) {
          attachBtns[i].addEventListener('click', function(e) {
            e.stopPropagation();
            alert("Piece jointe disponible. Veuillez utiliser l'application Ecole Directe ou le site web pour y acceder.");
          });
        }
      }
      var searchInput = document.getElementById('carnetSearch');
      var clearBtn = document.getElementById('clearSearch');
      var currentFilter = "all";
      function updateMessages() {
        var searchText = searchInput ? searchInput.value : "";
        renderMessages(searchText, currentFilter);
      }
      if (searchInput) {
        searchInput.addEventListener('input', updateMessages);
      }
      if (clearBtn) {
        clearBtn.addEventListener('click', function() {
          if (searchInput) searchInput.value = "";
          updateMessages();
        });
      }
      var filterBtns = document.querySelectorAll('.filter-btn');
      for (var i = 0; i < filterBtns.length; i++) {
        filterBtns[i].addEventListener('click', function() {
          currentFilter = this.getAttribute('data-filter');
          for (var j = 0; j < filterBtns.length; j++) {
            filterBtns[j].style.opacity = "0.6";
          }
          this.style.opacity = "1";
          updateMessages();
        });
        filterBtns[i].style.opacity = i === 0 ? "1" : "0.6";
      }
      renderMessages("", "all");
    }

    function renderVieScolaire() {
      var contentDiv = document.getElementById('ed-content');
      if (!contentDiv) return;
      contentDiv.innerHTML = '';
      var absencesRetards = vieScolaireData.absencesRetards || [];
      var sanctionsEncouragements = vieScolaireData.sanctionsEncouragements || [];
      var absences = absencesRetards.filter(function(item) { return item.typeElement === "Absence"; });
      var retards = absencesRetards.filter(function(item) { return item.typeElement === "Retard"; });
      var repas = absencesRetards.filter(function(item) { return item.typeElement === "Repas"; });
      var punitions = sanctionsEncouragements.filter(function(item) { return item.typeElement === "Punition"; });
      var encouragements = sanctionsEncouragements.filter(function(item) { return item.typeElement === "Encouragement"; });
      var html = '<div class="viescolaire-container">';
      if (absences.length > 0) {
        html += '<div class="viescolaire-section" style="background:#1C1C2E;border-radius:16px;padding:20px;margin-bottom:20px;">';
        html += '<h3 style="color:#FF5E5E;margin-bottom:16px;">Absences</h3>';
        for (var i = 0; i < absences.length; i++) {
          var a = absences[i];
          html += '<div style="border-bottom:1px solid #2C2C44;padding:12px 0;">';
          html += '<div><strong>' + a.displayDate + '</strong></div>';
          html += '<div style="color:#8E8E93;font-size:13px;">' + a.libelle + '</div>';
          html += '<div style="color:' + (a.justifie ? '#5E5EFF' : '#FFB340') + ';font-size:13px;">' + (a.justifie ? '✓ Justifiee' : '○ Non justifiee') + '</div>';
          if (a.motif && a.motif !== "En attente de motif") {
            html += '<div style="color:#E0E0E0;font-size:13px;">Motif: ' + a.motif + '</div>';
          }
          if (a.commentaire && a.commentaire !== "") {
            html += '<div style="color:#8E8E93;font-size:12px;margin-top:6px;">' + a.commentaire.substring(0, 100) + (a.commentaire.length > 100 ? '...' : '') + '</div>';
          }
          html += '</div>';
        }
        html += '</div>';
      }
      if (retards.length > 0) {
        html += '<div class="viescolaire-section" style="background:#1C1C2E;border-radius:16px;padding:20px;margin-bottom:20px;">';
        html += '<h3 style="color:#FFB340;margin-bottom:16px;">Retards</h3>';
        for (var i = 0; i < retards.length; i++) {
          var r = retards[i];
          var isJustified = r.justifie === true;
          html += '<div style="border-bottom:1px solid #2C2C44;padding:12px 0;">';
          html += '<div style="display:flex;align-items:center;gap:8px;">';
          html += '<strong>' + r.displayDate + '</strong>';
          if (!isJustified) {
            html += '<span style="color:#FF5E5E;font-size:14px;">⚠️</span>';
          }
          html += '</div>';
          html += '<div style="color:#8E8E93;font-size:13px;">Duree: ' + r.libelle + '</div>';
          html += '<div style="color:' + (isJustified ? '#5E5EFF' : '#FF5E5E') + ';font-size:13px;">' + (isJustified ? '✓ Justifie' : '⚠️ Non justifie') + '</div>';
          if (r.motif && r.motif !== "En attente de motif") {
            html += '<div style="color:#E0E0E0;font-size:13px;">Motif: ' + r.motif + '</div>';
          }
          html += '</div>';
        }
        html += '</div>';
      }
      if (repas.length > 0) {
        html += '<div class="viescolaire-section" style="background:#1C1C2E;border-radius:16px;padding:20px;margin-bottom:20px;">';
        html += '<h3 style="color:#FFB340;margin-bottom:16px;">Absences cantine</h3>';
        for (var i = 0; i < repas.length; i++) {
          var rp = repas[i];
          html += '<div style="border-bottom:1px solid #2C2C44;padding:12px 0;">';
          html += '<div><strong>' + rp.displayDate + '</strong></div>';
          html += '<div style="color:#8E8E93;font-size:13px;">' + rp.libelle + '</div>';
          html += '<div style="color:#FFB340;font-size:13px;">○ Absent</div>';
          if (rp.commentaire && rp.commentaire !== "") {
            html += '<div style="color:#8E8E93;font-size:12px;margin-top:6px;">' + rp.commentaire.substring(0, 100) + (rp.commentaire.length > 100 ? '...' : '') + '</div>';
          }
          html += '</div>';
        }
        html += '</div>';
      }
      if (punitions.length > 0) {
        html += '<div class="viescolaire-section" style="background:#1C1C2E;border-radius:16px;padding:20px;margin-bottom:20px;">';
        html += '<h3 style="color:#FF5E5E;margin-bottom:16px;">⚠️ Punitions</h3>';
        for (var i = 0; i < punitions.length; i++) {
          var p = punitions[i];
          html += '<div style="border-bottom:1px solid #2C2C44;padding:12px 0;">';
          html += '<div><strong>' + p.libelle + '</strong> - ' + p.date + '</div>';
          html += '<div style="color:#E0E0E0;font-size:13px;">Par: ' + p.par + '</div>';
          if (p.motif) html += '<div style="color:#8E8E93;font-size:13px;">Motif: ' + p.motif + '</div>';
          if (p.commentaire) html += '<div style="color:#8E8E93;font-size:12px;margin-top:6px;">' + p.commentaire + '</div>';
          if (p.dateDeroulement) html += '<div style="color:#5E5EFF;font-size:12px;margin-top:6px;">' + p.dateDeroulement + '</div>';
          html += '</div>';
        }
        html += '</div>';
      }
      if (encouragements.length > 0) {
        html += '<div class="viescolaire-section" style="background:#1C1C2E;border-radius:16px;padding:20px;margin-bottom:20px;">';
        html += '<h3 style="color:#5E5EFF;margin-bottom:16px;">Encouragements</h3>';
        for (var i = 0; i < encouragements.length; i++) {
          var e = encouragements[i];
          html += '<div style="border-bottom:1px solid #2C2C44;padding:12px 0;">';
          html += '<div><strong>' + e.libelle + '</strong> - ' + e.date + '</div>';
          if (e.motif) html += '<div style="color:#E0E0E0;font-size:13px;">' + e.motif + '</div>';
          if (e.commentaire) html += '<div style="color:#8E8E93;font-size:12px;">' + e.commentaire + '</div>';
          html += '</div>';
        }
        html += '</div>';
      }
      if (absences.length === 0 && retards.length === 0 && repas.length === 0 && punitions.length === 0 && encouragements.length === 0) {
        html += '<div class="empty-state"><p>Aucune information de vie scolaire</p></div>';
      }
      html += '</div>';
      contentDiv.innerHTML = html;
    }

function renderMessagerie() {
  var contentDiv = document.getElementById('ed-content');
  if (!contentDiv) return;
  contentDiv.innerHTML = '';
  
  var received = [];
  var sent = [];
  var draft = [];
  var archived = [];
  
  var currentFolder = "received";
  var searchTerm = "";
  var currentPage = 1;
  var messagesPerPage = 20;
  var foldersLoaded = false;
  
  function loadAllMessages() {
    contentDiv.innerHTML = '<div style="color:#8E8E93;text-align:center;padding:40px;">Chargement des messages...</div>';
    
    Promise.all([
      fetch(`https://api.ecoledirecte.com/v3/eleves/${id}/messages.awp?force=false&typeRecuperation=received&idClasseur=0&orderBy=date&order=desc&query=&onlyRead=&page=0&itemsPerPage=1000&getAll=0&verbe=get&v=4.98.0`, {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded", "X-Token": token },
        body: "data=" + encodeURIComponent(JSON.stringify({}))
      }).then(res => res.json()),
      
      fetch(`https://api.ecoledirecte.com/v3/eleves/${id}/messages.awp?force=false&typeRecuperation=sent&idClasseur=0&orderBy=date&order=desc&query=&onlyRead=&page=0&itemsPerPage=1000&getAll=0&verbe=get&v=4.98.0`, {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded", "X-Token": token },
        body: "data=" + encodeURIComponent(JSON.stringify({}))
      }).then(res => res.json()),
      
      fetch(`https://api.ecoledirecte.com/v3/eleves/${id}/messages.awp?force=false&typeRecuperation=draft&idClasseur=0&orderBy=date&order=desc&query=&onlyRead=&page=0&itemsPerPage=1000&getAll=0&verbe=get&v=4.98.0`, {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded", "X-Token": token },
        body: "data=" + encodeURIComponent(JSON.stringify({}))
      }).then(res => res.json()),
      
      fetch(`https://api.ecoledirecte.com/v3/eleves/${id}/messages.awp?force=false&typeRecuperation=archived&idClasseur=0&orderBy=date&order=desc&query=&onlyRead=&page=0&itemsPerPage=1000&getAll=0&verbe=get&v=4.98.0`, {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded", "X-Token": token },
        body: "data=" + encodeURIComponent(JSON.stringify({}))
      }).then(res => res.json())
    ]).then(function(results) {
      if (results[0].code === 200) received = results[0].data.messages.received || [];
      if (results[1].code === 200) sent = results[1].data.messages.sent || [];
      if (results[2].code === 200) draft = results[2].data.messages.draft || [];
      if (results[3].code === 200) archived = results[3].data.messages.archived || [];
      foldersLoaded = true;
      buildMessagerieUI();
    }).catch(function() {
      buildMessagerieUI();
    });
  }
  
  function decodeBase64Content(str) {
    if (!str) return "";
    try {
      var base64Decoded = atob(str);
      var bytes = [];
      for (var i = 0; i < base64Decoded.length; i++) bytes.push(base64Decoded.charCodeAt(i) & 0xFF);
      var decoder = new TextDecoder('utf-8');
      return decoder.decode(new Uint8Array(bytes));
    } catch(e) {
      return str;
    }
  }
  
  function getMessagesByFolder() {
    var messages = [];
    if (currentFolder === "received") messages = received.slice();
    if (currentFolder === "sent") messages = sent.slice();
    if (currentFolder === "draft") messages = draft.slice();
    if (currentFolder === "archived") messages = archived.slice();
    messages.sort(function(a, b) { return new Date(b.date || 0) - new Date(a.date || 0); });
    return messages;
  }
  
  function showMessageDetail(messageId) {
    var detailDiv = document.getElementById('messageDetail');
    if (!detailDiv) return;
    detailDiv.innerHTML = '<div style="color:#8E8E93;text-align:center;padding:20px;">Chargement...</div>';
    
  var mode = "destinataire";
  if (currentFolder === "sent") mode = "expediteur";
  else if (currentFolder === "draft") mode = "brouillon";
    
    fetch(`https://api.ecoledirecte.com/v3/eleves/${id}/messages/${messageId}.awp?verbe=get&mode=${mode}&v=4.98.0`, {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded", "X-Token": token },
      body: "data=" + encodeURIComponent(JSON.stringify({}))
    })
    .then(res => res.json())
    .then(function(json) {
      var msg = json.data;
      if (!msg) { detailDiv.innerHTML = '<div style="color:#FF5E5E;text-align:center;padding:20px;">Message non trouvé</div>'; return; }
      
      var contactName = "";
      if (currentFolder === "received" && msg.from) contactName = msg.from.prenom + " " + msg.from.nom;
      else if (currentFolder === "sent" && msg.to && msg.to[0]) contactName = msg.to[0].prenom + " " + msg.to[0].nom;
      else if (currentFolder === "archived" && msg.from) contactName = msg.from.prenom + " " + msg.from.nom;
      
      var date = (msg.date || "").replace(/-/g, '/').substring(0, 16);
      var cleanContent = decodeBase64Content(msg.content || "");
      var subject = msg.subject || "(Sans objet)";
      var hasAttachment = msg.files && msg.files.length > 0;
      
      var html = '<div style="background:#1C1C2E;border-radius:20px;padding:24px;">';
      html += '<div style="display:flex;justify-content:space-between;margin-bottom:20px;"><div><strong style="color:#5E5EFF;font-size:18px;">' + contactName + '</strong></div><div style="color:#8E8E93;">' + date + '</div></div>';
      html += '<div style="font-size:20px;font-weight:700;color:white;margin-bottom:20px;">' + subject + '</div>';
      html += '<div style="color:#E0E0E0;line-height:1.6;">' + cleanContent + '</div>';
html += '</div>';
detailDiv.innerHTML = html;

if (hasAttachment) {
  var attachSection = document.createElement('div');
  attachSection.style.cssText = 'margin-top:20px;padding-top:16px;border-top:1px solid #2C2C44;';
  
  var label = document.createElement('span');
  label.textContent = 'Pièces jointes:';
  label.style.cssText = 'color:#8E8E93;display:block;margin-bottom:8px;';
  attachSection.appendChild(label);
  
  for (var i = 0; i < msg.files.length; i++) {
    (function(file) {
      var btn = document.createElement('button');
      btn.textContent = '📎 ' + file.libelle;
      btn.style.cssText = 'background:#2C2C44;border:none;color:#5E5EFF;padding:10px 16px;border-radius:12px;cursor:pointer;margin-right:8px;margin-bottom:8px;font-size:14px;font-weight:500;display:block;width:100%;text-align:left;';
      btn.onclick = function(e) {
        e.preventDefault();
        e.stopPropagation();
        window.showAttachmentModal(file.id, file.libelle);
      };
      attachSection.appendChild(btn);
    })(msg.files[i]);
  }
  
  detailDiv.appendChild(attachSection);
}
    })
    .catch(function(err) { detailDiv.innerHTML = '<div style="color:#FF5E5E;text-align:center;padding:20px;">Erreur: ' + err.message + '</div>'; });
  }
  
  function renderMessages() {
    var allMessages = getMessagesByFolder();
    var filtered = allMessages.filter(function(msg) {
      if (!searchTerm) return true;
      var contact = "";
      if (currentFolder === "received" && msg.from) contact = msg.from.prenom + " " + msg.from.nom;
      else if (currentFolder === "sent" && msg.to && msg.to[0]) contact = msg.to[0].prenom + " " + msg.to[0].nom;
      else if (currentFolder === "archived" && msg.from) contact = msg.from.prenom + " " + msg.from.nom;
      return contact.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1 || (msg.subject || "").toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1;
    });
    
    var totalPages = Math.ceil(filtered.length / messagesPerPage);
    var start = (currentPage - 1) * messagesPerPage;
    var pageMessages = filtered.slice(start, start + messagesPerPage);
    
    var listDiv = document.getElementById('messageList');
    if (!listDiv) return;
    if (filtered.length === 0) { listDiv.innerHTML = '<div style="color:#8E8E93;text-align:center;padding:40px;">Aucun message</div>'; return; }
    
    var html = '<div style="margin-bottom:12px;color:#8E8E93;font-size:12px;">' + filtered.length + ' message(s)</div>';
    
    for (var i = 0; i < pageMessages.length; i++) {
      var msg = pageMessages[i];
      var contactName = "";
      if (currentFolder === "received" && msg.from) contactName = msg.from.prenom + " " + msg.from.nom;
      else if (currentFolder === "sent" && msg.to && msg.to[0]) contactName = msg.to[0].prenom + " " + msg.to[0].nom;
      else if (currentFolder === "archived" && msg.from) contactName = msg.from.prenom + " " + msg.from.nom;
      
      var date = (msg.date || "").replace(/-/g, '/').substring(0, 16);
      var subject = msg.subject || "(Sans objet)";
      var isRead = msg.read !== false;
      var hasAttachment = msg.files && msg.files.length > 0;
      
      html += '<div class="message-item" data-id="' + msg.id + '" style="background:#1C1C2E;border-radius:12px;padding:16px;margin-bottom:12px;border-left:4px solid ' + (isRead ? '#2C2C44' : '#5E5EFF') + ';cursor:pointer;">';
      html += '<div style="display:flex;justify-content:space-between;margin-bottom:8px;"><div><strong style="color:#5E5EFF;">' + contactName + '</strong></div><div style="color:#8E8E93;font-size:11px;">' + date + '</div></div>';
      html += '<div style="font-weight:600;color:white;margin-bottom:6px;">' + subject + '</div>';
      if (hasAttachment) html += '<div style="color:#5E5EFF;font-size:11px;">📎 ' + msg.files.length + ' piece(s)</div>';
      html += '</div>';
    }
    
    if (totalPages > 1) {
      html += '<div style="display:flex;justify-content:center;gap:8px;margin-top:20px;padding:16px;">';
      if (currentPage > 1) {
        html += '<button class="page-btn" data-page="1" style="background:#2C2C44;border:none;color:white;padding:8px 12px;border-radius:8px;cursor:pointer;">«</button>';
        html += '<button class="page-btn" data-page="' + (currentPage - 1) + '" style="background:#2C2C44;border:none;color:white;padding:8px 12px;border-radius:8px;cursor:pointer;">←</button>';
      }
      for (var p = Math.max(1, currentPage - 2); p <= Math.min(totalPages, currentPage + 2); p++) {
        if (p === currentPage) html += '<span style="background:#5E5EFF;color:white;padding:8px 12px;border-radius:8px;">' + p + '</span>';
        else html += '<button class="page-btn" data-page="' + p + '" style="background:#2C2C44;border:none;color:white;padding:8px 12px;border-radius:8px;cursor:pointer;">' + p + '</button>';
      }
      if (currentPage < totalPages) {
        html += '<button class="page-btn" data-page="' + (currentPage + 1) + '" style="background:#2C2C44;border:none;color:white;padding:8px 12px;border-radius:8px;cursor:pointer;">→</button>';
        html += '<button class="page-btn" data-page="' + totalPages + '" style="background:#2C2C44;border:none;color:white;padding:8px 12px;border-radius:8px;cursor:pointer;">»</button>';
      }
      html += '</div>';
    }
    
    listDiv.innerHTML = html;
    document.querySelectorAll('.message-item').forEach(el => el.addEventListener('click', e => showMessageDetail(el.dataset.id)));
    document.querySelectorAll('.page-btn').forEach(el => el.addEventListener('click', e => { currentPage = parseInt(el.dataset.page); renderMessages(); document.getElementById('messageList').scrollTop = 0; }));
  }
  
  function refreshUI() {
    currentPage = 1;
    renderMessages();
    document.querySelectorAll('.folder-btn').forEach(btn => {
      btn.style.background = btn.dataset.folder === currentFolder ? '#5E5EFF' : '#2C2C44';
      btn.style.color = 'white';
    });
  }
  
  function buildMessagerieUI() {
    var html = '<div style="max-width:1400px;margin:0 auto;">';
    html += '<div style="margin-bottom:24px;">';
    html += '<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;">';
    html += '<button class="folder-btn" data-folder="received" style="padding:10px 20px;background:#2C2C44;border:none;border-radius:12px;color:white;cursor:pointer;">Reçus (' + received.length + ')</button>';
    html += '<button class="folder-btn" data-folder="sent" style="padding:10px 20px;background:#2C2C44;border:none;border-radius:12px;color:white;cursor:pointer;">Envoyés (' + sent.length + ')</button>';
    html += '<button class="folder-btn" data-folder="draft" style="padding:10px 20px;background:#2C2C44;border:none;border-radius:12px;color:white;cursor:pointer;">Brouillons (' + draft.length + ')</button>';
    html += '<button class="folder-btn" data-folder="archived" style="padding:10px 20px;background:#2C2C44;border:none;border-radius:12px;color:white;cursor:pointer;">Archive (' + archived.length + ')</button>';
    html += '</div>';
    html += '<div style="background:#1C1C2E;border-radius:12px;padding:10px 16px;display:flex;gap:12px;align-items:center;">';
    html += '<span style="color:#8E8E93;">🔍</span>';
    html += '<input type="text" id="searchInput" placeholder="Rechercher..." style="flex:1;background:transparent;border:none;color:white;font-size:14px;outline:none;">';
    html += '<button id="clearSearch" style="background:#2C2C44;border:none;color:#8E8E93;padding:6px 12px;border-radius:8px;cursor:pointer;">Effacer</button>';
    html += '</div></div>';
    html += '<div style="display:flex;gap:24px;">';
    html += '<div id="messageList" style="flex:1;max-height:600px;overflow-y:auto;"></div>';
    html += '<div id="messageDetail" style="flex:1;min-width:400px;"></div>';
    html += '</div></div>';
    
    contentDiv.innerHTML = html;
    
    document.querySelectorAll('.folder-btn').forEach(btn => btn.addEventListener('click', function() {
      currentFolder = this.dataset.folder;
      document.getElementById('searchInput').value = '';
      searchTerm = '';
      refreshUI();
    }));
    
    document.getElementById('searchInput').addEventListener('input', e => { searchTerm = e.target.value; currentPage = 1; renderMessages(); });
    document.getElementById('clearSearch').addEventListener('click', () => { document.getElementById('searchInput').value = ''; searchTerm = ''; currentPage = 1; renderMessages(); });
    
    refreshUI();
  }
  
  if (!foldersLoaded) loadAllMessages();
  else buildMessagerieUI();
}
    function renderApiLog() {
      var contentDiv = document.getElementById('ed-content');
      if (!contentDiv) return;
      if (apiLogs.length === 0) {
        contentDiv.innerHTML = '<div class="empty-state"><p>Aucun log API. Activez le debug dans les parametres.</p></div>';
        return;
      }
      var html = '<div style="background:#1C1C2E;border-radius:20px;padding:20px;">';
      html += '<h2 style="color:#5E5EFF;margin-bottom:16px;">📋 API Logs</h2>';
      html += '<div style="overflow-x:auto;">';
      html += '<table style="width:100%;border-collapse:collapse;">';
      html += '<tr style="border-bottom:1px solid #2C2C44;">';
      html += '<th style="text-align:left;padding:8px;color:#8E8E93;">Date</th>';
      html += '<th style="text-align:left;padding:8px;color:#8E8E93;">API</th>';
      html += '<th style="text-align:left;padding:8px;color:#8E8E93;">Status</th>';
      html += '<th style="text-align:left;padding:8px;color:#8E8E93;">Duree</th>';
      html += '</tr>';
      for (var i = 0; i < apiLogs.length; i++) {
        var log = apiLogs[i];
        var statusColor = log.responseCode === 200 ? '#5E5EFF' : '#FF5E5E';
        html += '<tr style="border-bottom:1px solid #2C2C44;">';
        html += '<td style="padding:8px;font-size:12px;color:#8E8E93;">' + log.timestamp + '</td>';
        html += '<td style="padding:8px;font-size:12px;">' + (log.url.substring(0, 50) + (log.url.length > 50 ? '...' : '')) + '</td>';
        html += '<td style="padding:8px;font-size:12px;color:' + statusColor + ';">' + log.responseCode + '</td>';
        html += '<td style="padding:8px;font-size:12px;color:#8E8E93;">' + log.duration + '</td>';
        html += '</tr>';
      }
      html += '</table></div></div>';
      contentDiv.innerHTML = html;
    }

    function renderSettings() {
      var contentDiv = document.getElementById('ed-content');
      if (!contentDiv) return;
      var html = '<div class="settings-container">';
      html += '<div style="background:#1C1C2E;border-radius:20px;padding:24px;margin-bottom:20px;">';
      html += '<h2 style="color:#5E5EFF;margin-bottom:16px;">Parametres</h2>';
      html += '<div style="display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #2C2C44;">';
      html += '<div><strong style="color:white;">Mode Debug</strong><p style="color:#8E8E93;font-size:12px;margin-top:4px;">Activer les logs API</p></div>';
      html += '<label style="position:relative;display:inline-block;width:50px;height:24px;">';
      html += '<input type="checkbox" id="debugToggle" ' + (debugEnabled ? 'checked' : '') + ' style="opacity:0;width:0;height:0;">';
      html += '<span style="position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#2C2C44;transition:0.3s;border-radius:24px;"></span>';
      html += '<span style="position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:white;transition:0.3s;border-radius:50%;' + (debugEnabled ? 'transform:translateX(26px);' : '') + '"></span>';
      html += '</label></div>';
      html += '<button id="viewApiLogsBtn" style="width:100%;margin-top:16px;background:#2C2C44;border:none;color:#5E5EFF;padding:12px;border-radius:12px;cursor:pointer;font-size:14px;">📋 Voir les logs API</button>';
      html += '</div>';
      html += '</div>';
      contentDiv.innerHTML = html;
      var debugToggle = document.getElementById('debugToggle');
      if (debugToggle) {
        debugToggle.addEventListener('change', function(e) {
          debugEnabled = e.target.checked;
          if (!debugEnabled) {
            apiLogs.length = 0;
          }
        });
      }
      var viewLogsBtn = document.getElementById('viewApiLogsBtn');
      if (viewLogsBtn) {
        viewLogsBtn.addEventListener('click', function() {
          if (debugEnabled) {
            renderApiLog();
            var tabBtns = document.querySelectorAll('#ed-widget .tab-btn');
            for (var i = 0; i < tabBtns.length; i++) {
              tabBtns[i].classList.remove('active');
            }
            currentTab = "apilog";
          } else {
            alert("Activez le mode Debug d'abord dans les parametres");
          }
        });
      }
    }

    function renderEspaceTravail() {
      var contentDiv = document.getElementById('ed-content');
      if (!contentDiv) return;
      contentDiv.innerHTML = '';
      if (!espaceData || espaceData.length === 0) {
        contentDiv.innerHTML = '<div class="empty-state"><p>Aucun espace de travail disponible</p></div>';
        return;
      }
      var mySpaces = [];
      var otherSpaces = [];
      for (var i = 0; i < espaceData.length; i++) {
        var space = espaceData[i];
        if (space.estMembre === true) {
          mySpaces.push(space);
        } else {
          otherSpaces.push(space);
        }
      }
      var html = '';
      if (mySpaces.length > 0) {
        html += '<h2 style="color:#5E5EFF;margin-bottom:16px;font-size:20px;">Mes espaces</h2>';
        html += '<div class="espaces-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:32px;">';
        for (var i = 0; i < mySpaces.length; i++) {
          var space = mySpaces[i];
          var resumeText = decodeContent(space.resume || "");
          html += '<div class="espace-card" data-space-id="' + space.id + '" data-space-title="' + space.titre.replace(/'/g, "\\'") + '" style="background:#1C1C2E;border-radius:16px;padding:16px;border-left:4px solid #5E5EFF;cursor:pointer;">';
          html += '<h3 style="color:white;font-size:16px;margin-bottom:8px;">' + space.titre + '</h3>';
          if (resumeText) {
            html += '<p style="color:#8E8E93;font-size:13px;margin-bottom:12px;">' + resumeText + '</p>';
          }
          html += '<div style="display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;">';
          if (space.cloud) html += '<span style="background:#2C2C44;padding:4px 8px;border-radius:8px;font-size:11px;color:#5E5EFF;">Cloud</span>';
          if (space.discussion) html += '<span style="background:#2C2C44;padding:4px 8px;border-radius:8px;font-size:11px;color:#5E5EFF;">Discussion</span>';
          if (space.agenda) html += '<span style="background:#2C2C44;padding:4px 8px;border-radius:8px;font-size:11px;color:#5E5EFF;">Agenda</span>';
          html += '</div>';
          html += '<div style="margin-top:12px;"><span style="color:#8E8E93;font-size:11px;">Cree par: ' + (space.creePar || "Inconnu") + '</span></div>';
          html += '</div>';
        }
        html += '</div>';
      }
      if (otherSpaces.length > 0) {
        html += '<h2 style="color:#8E8E93;margin-bottom:16px;font-size:18px;">Autres espaces disponibles</h2>';
        html += '<div class="espaces-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;">';
        for (var i = 0; i < otherSpaces.length; i++) {
          var space = otherSpaces[i];
          var resumeText = decodeContent(space.resume || "");
          html += '<div class="espace-card" style="background:#1C1C2E;border-radius:16px;padding:16px;border-left:4px solid #2C2C44;opacity:0.8;">';
          html += '<h3 style="color:white;font-size:16px;margin-bottom:8px;">' + space.titre + '</h3>';
          if (resumeText) {
            html += '<p style="color:#8E8E93;font-size:13px;margin-bottom:12px;">' + resumeText + '</p>';
          }
          html += '<div style="display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;">';
          if (space.cloud) html += '<span style="background:#2C2C44;padding:4px 8px;border-radius:8px;font-size:11px;color:#8E8E93;">Cloud</span>';
          if (space.discussion) html += '<span style="background:#2C2C44;padding:4px 8px;border-radius:8px;font-size:11px;color:#8E8E93;">Discussion</span>';
          if (space.agenda) html += '<span style="background:#2C2C44;padding:4px 8px;border-radius:8px;font-size:11px;color:#8E8E93;">Agenda</span>';
          html += '</div>';
          html += '</div>';
        }
        html += '</div>';
      }
      contentDiv.innerHTML = html;
      var spaceCards = document.querySelectorAll('.espace-card[data-space-id]');
      for (var i = 0; i < spaceCards.length; i++) {
        spaceCards[i].addEventListener('click', function(e) {
          var spaceId = this.getAttribute('data-space-id');
          var spaceTitle = this.getAttribute('data-space-title');
          showCloudExplorer(spaceId, spaceTitle);
        });
      }
    }

    function showCloudExplorer(spaceId, spaceTitle) {
      currentSpaceId = spaceId;
      currentPath = [];
      loadFolder(spaceId, null);
    }

    function loadFolder(spaceId, folderId) {
      var contentDiv = document.getElementById('ed-content');
      if (!contentDiv) return;
      contentDiv.innerHTML = '<div class="empty-state"><p>Chargement...</p></div>';
      var url = `https://api.ecoledirecte.com/v3/cloud/W/${spaceId}.awp?verbe=get&v=4.98.0`;
      if (folderId && folderId !== '/') {
        url = `https://api.ecoledirecte.com/v3/cloud/W/${spaceId}/${encodeURIComponent(folderId)}.awp?verbe=get&v=4.98.0`;
      }
      fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          "X-Token": token
        },
        body: "data=" + encodeURIComponent(JSON.stringify({}))
      })
      .then(function(res) { return res.json(); })
      .then(function(json) {
        var data = json.data;
        var items = [];
        if (data && data.length > 0) {
          if (folderId && folderId !== '/') {
            items = data;
          } else {
            for (var i = 0; i < data.length; i++) {
              if (data[i].libelle === '/' && data[i].type === 'folder') {
                items = data[i].children || [];
                break;
              }
            }
          }
        }
        renderCloudExplorer(spaceId, items, folderId);
      })
      .catch(function(e) {
        contentDiv.innerHTML = '<div class="empty-state"><p>Erreur: ' + e.message + '</p><button id="cloudBackBtn" style="background:#2C2C44;border:none;color:white;padding:10px 20px;border-radius:12px;cursor:pointer;margin-top:20px;">← Retour aux espaces</button></div>';
        document.getElementById('cloudBackBtn').addEventListener('click', function() {
          renderEspaceTravail();
        });
      });
    }

    function renderCloudExplorer(spaceId, items, currentFolderId) {
      var contentDiv = document.getElementById('ed-content');
      if (!contentDiv) return;
      var html = '<div style="margin-bottom:20px;">';
      if (currentPath.length > 0) {
        html += '<button id="backBtn" style="background:#2C2C44;border:none;color:white;padding:10px 20px;border-radius:12px;cursor:pointer;margin-bottom:20px;">← Retour</button>';
      }
      html += '<button id="cloudBackToSpacesBtn" style="background:#2C2C44;border:none;color:white;padding:10px 20px;border-radius:12px;cursor:pointer;margin-bottom:20px;margin-left:10px;">← Retour aux espaces</button>';
      html += '</div>';
      if (items && items.length > 0) {
        html += '<div style="background:#1C1C2E;border-radius:16px;overflow:hidden;">';
        for (var i = 0; i < items.length; i++) {
          var item = items[i];
          var isFolder = item.type === 'folder';
          var icon = isFolder ? '📁' : '📄';
          html += '<div style="padding:12px 16px;border-bottom:1px solid #2C2C44;display:flex;align-items:center;justify-content:space-between;' + (isFolder ? 'cursor:pointer;' : '') + '"';
          if (isFolder) {
            html += ' onclick="window.navigateToFolder(\'' + encodeURIComponent(item.id) + '\')"';
          }
          html += '>';
          html += '<div style="display:flex;align-items:center;gap:12px;">';
          html += '<span style="font-size:18px;">' + icon + '</span>';
          html += '<span style="color:#E0E0E0;">' + item.libelle + '</span>';
          html += '</div>';
          if (!isFolder) {
            var size = item.taille || 0;
            html += '<span style="color:#8E8E93;font-size:12px;">' + formatFileSize(size) + '</span>';
          } else {
            html += '<span style="color:#5E5EFF;font-size:12px;">Dossier</span>';
          }
          html += '</div>';
        }
        html += '</div>';
      } else {
        html += '<div class="empty-state"><p>Dossier vide</p></div>';
      }
      contentDiv.innerHTML = html;
      if (currentPath.length > 0) {
        var backBtn = document.getElementById('backBtn');
        if (backBtn) {
          backBtn.addEventListener('click', function() {
            currentPath.pop();
            var parentId = currentPath.length > 0 ? currentPath[currentPath.length - 1] : null;
            loadFolder(currentSpaceId, parentId);
          });
        }
      }
      var backToSpacesBtn = document.getElementById('cloudBackToSpacesBtn');
      if (backToSpacesBtn) {
        backToSpacesBtn.addEventListener('click', function() {
          currentPath = [];
          renderEspaceTravail();
        });
      }
    }

    window.navigateToFolder = function(folderId) {
      currentPath.push(folderId);
      loadFolder(currentSpaceId, folderId);
    };

    function formatFileSize(bytes) {
      if (!bytes) return '';
      if (bytes < 1024) return bytes + ' o';
      if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' Ko';
      return (bytes / 1048576).toFixed(1) + ' Mo';
    }

    function renderContent() {
      if (currentTab === "home") {
        renderHome();
      } else if (currentTab === "moyennes") {
        renderMoyennes();
      } else if (currentTab === "devoirs") {
        renderDevoirs();
      } else if (currentTab === "espacetravail") {
        renderEspaceTravail();
      } else if (currentTab === "carnet") {
        renderCarnet();
      } else if (currentTab === "viescolaire") {
        renderVieScolaire();
      } else if (currentTab === "messagerie") {
        renderMessagerie();
      } else if (currentTab === "apilog") {
        renderApiLog();
      } else if (currentTab === "settings") {
        renderSettings();
      }
    }

    widget.innerHTML = `
      <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        #ed-widget { background-color: #0B0B1A; color: #FFFFFF; }
        .m-container { max-width: 1200px; margin: 0 auto; padding: 24px; }
        .tab-bar { display: flex; gap: 12px; margin-bottom: 24px; background: #1C1C2E; padding: 8px; border-radius: 16px; flex-wrap: wrap; }
        .tab-btn { flex: 1; padding: 10px; text-align: center; font-size: 16px; font-weight: 600; color: #8E8E93; background: transparent; border: none; border-radius: 18px; cursor: pointer; transition: all 0.3s ease; }
        .tab-btn.active { background: #2C2C44; color: #5E5EFF; }
        .selector-container { margin-bottom: 32px; }
        .trimester-selector { background: #1C1C2E; border-radius: 16px; padding: 8px; display: flex; gap: 8px; }
        .trimester-option { flex: 1; padding: 16px; text-align: center; font-size: 17px; font-weight: 600; color: #8E8E93; background: transparent; border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; }
        .trimester-option.active { background: #2C2C44; color: #5E5EFF; box-shadow: 0 2px 8px rgba(94, 94, 255, 0.2); }
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 32px; }
        .stat-card { background: #1C1C2E; border-radius: 20px; padding: 20px; text-align: center; }
        .stat-label { font-size: 14px; color: #8E8E93; margin-bottom: 8px; }
        .stat-value { font-size: 44px; font-weight: 700; color: #5E5EFF; }
        .stat-sub { font-size: 12px; color: #8E8E93; margin-top: 8px; }
        .subjects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 32px; }
        .subject-card { background: #1C1C2E; border-radius: 20px; padding: 20px; transition: transform 0.2s ease; cursor: pointer; }
        .subject-card:hover { transform: scale(1.02); }
        .subject-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #2C2C44; }
        .subject-name { font-size: 17px; font-weight: 600; color: #FFFFFF; }
        .subject-average { font-size: 28px; font-weight: 700; }
        .subject-stats { display: flex; justify-content: space-between; color: #8E8E93; font-size: 13px; }
        .grade-indicator { width: 8px; height: 8px; border-radius: 4px; display: inline-block; margin-right: 6px; }
        .annual-card { background: linear-gradient(135deg, #2C2C44 0%, #1C1C2E 100%); border-radius: 24px; padding: 28px; text-align: center; border: 1px solid rgba(94, 94, 255, 0.3); }
        .annual-label { font-size: 15px; color: #8E8E93; margin-bottom: 12px; letter-spacing: 0.5px; }
        .annual-value { font-size: 56px; font-weight: 800; background: linear-gradient(135deg, #FFFFFF 0%, #5E5EFF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .annual-note-count { font-size: 13px; color: #8E8E93; margin-top: 12px; }
        .home-hero { display: flex; flex-direction: row; background: #15152B; padding: 32px; border-radius: 24px; margin-bottom: 28px; align-items: flex-start; justify-content: space-between; min-height: 200px; flex-wrap: wrap; gap: 20px; }
        .hero-copy { max-width: 500px; }
        .eyebrow { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #5E5EFF; margin-bottom: 8px; }
        .title-container { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
        .home-hero h1 { font-size: 34px; color: #FFFFFF; margin: 0; line-height: 1; }
        .dash-animated { display: inline-block; font-size: 2.2em; animation: dashGlow 3s ease-in-out infinite; line-height: 1; }
        @keyframes dashGlow {
          0% { color: #FF6B9D; text-shadow: 0 0 4px rgba(255, 107, 157, 0.4); }
          25% { color: #00D4FF; text-shadow: 0 0 4px rgba(0, 212, 255, 0.4); }
          50% { color: #7D5FFF; text-shadow: 0 0 4px rgba(125, 95, 255, 0.4); }
          75% { color: #FF9D5C; text-shadow: 0 0 4px rgba(255, 157, 92, 0.4); }
          100% { color: #FF6B9D; text-shadow: 0 0 4px rgba(255, 107, 157, 0.4); }
        }
        .hero-card { max-width: 320px; width: 320px; background: radial-gradient(circle at top left, rgba(94,94,255,0.2), transparent 45%), linear-gradient(180deg, rgba(31, 31, 57, 0.95), #111123); border: 1px solid rgba(94,94,255,0.22); border-radius: 28px; padding: 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); display: grid; gap: 18px; height: fit-content; flex-shrink: 0; }
        .hero-stats { display: flex; flex-direction: column; justify-content: center; color: #E5E5FF; gap: 10px; }
        .hero-stats span { color: #8E8E93; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; }
        .hero-stats strong { font-size: 32px; letter-spacing: 0.03em; }
        .home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 28px; }
        .home-card { background: #1C1C2E; border-radius: 20px; padding: 22px; width: 90vw; display: grid; height: fit-content; flex-shrink: 0; gap: 8px; }
        .card-title { color: #8E8E93; font-size: 13px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.8px; }
        .home-subject { display: flex; justify-content: space-between; margin-bottom: 12px; color: #E8E8FF; font-size: 15px; }
        .task-card { background: #1C1C2E; border-radius: 18px; padding: 18px; margin-bottom: 12px; border-left: 4px solid #5E5EFF; }
        .task-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
        .task-meta span { color: #8E8E93; font-size: 12px; }
        .task-content { color: #DFE0FF; font-size: 14px; line-height: 1.7; margin-top: 10px; white-space: pre-line; }
        .task-badge { font-size: 11px; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: rgba(94,94,255,0.12); color: #5E5EFF; }
        .empty-state { text-align: center; padding: 60px 20px; background: #1C1C2E; border-radius: 24px; }
        .empty-state p { color: #8E8E93; font-size: 17px; }
        .date-pill:hover { background: #2C2C44 !important; cursor: pointer; }
        .carnet-card { transition: transform 0.2s ease; }
        .carnet-card:hover { transform: scale(1.01); }
        @media (max-width: 768px) { .m-container { padding: 16px; } .subjects-grid { grid-template-columns: 1fr; } .stat-value { font-size: 36px; } .annual-value { font-size: 44px; } .tab-bar { gap: 6px; } .tab-btn { padding: 10px; font-size: 12px; } }
      </style>
      <div class="m-container">
        <div class="tab-bar">
          <button class="tab-btn" data-tab="home">Accueil</button>
          <button class="tab-btn" data-tab="moyennes">Notes</button>
          <button class="tab-btn" data-tab="devoirs">Devoirs</button>
          <button class="tab-btn" data-tab="espacetravail">Espace travail</button>
          <button class="tab-btn" data-tab="carnet">Carnet</button>
          <button class="tab-btn" data-tab="viescolaire">Vie scolaire</button>
          <button class="tab-btn" data-tab="messagerie">Messages</button>
          <button class="tab-btn" data-tab="settings">Parametres</button>
        </div>
        <div id="ed-content"></div>
      </div>
    `;

    document.body.appendChild(widget);

    window.goBack = goBack;
    window.navigateToFolder = navigateToFolder;

    var tabBtns = document.querySelectorAll('#ed-widget .tab-btn');
    function setTab(tab) {
      currentTab = tab;
      for (var j = 0; j < tabBtns.length; j++) {
        tabBtns[j].classList.remove('active');
      }
      var button = document.querySelector('#ed-widget .tab-btn[data-tab="' + tab + '"]');
      if (button) button.classList.add('active');
      var trimesterSelector = document.querySelector('#ed-widget .selector-container');
      if (trimesterSelector) {
        if (tab === "moyennes") {
          trimesterSelector.style.display = 'block';
        } else {
          trimesterSelector.style.display = 'none';
        }
      }
      renderContent();
    }

    for (var i = 0; i < tabBtns.length; i++) {
      tabBtns[i].addEventListener('click', function(e) {
        setTab(this.getAttribute('data-tab'));
      });
    }

    window.setTab = setTab;

    var activeTab = document.querySelector('#ed-widget .tab-btn[data-tab="home"]');
    if (activeTab) activeTab.classList.add('active');

    var trimesterSelectorHtml = document.createElement('div');
    trimesterSelectorHtml.className = 'selector-container';
    trimesterSelectorHtml.innerHTML = `
      <div class="trimester-selector">
        <button class="trimester-option" data-tri="A001">1er Trimestre</button>
        <button class="trimester-option" data-tri="A002">2eme Trimestre</button>
        <button class="trimester-option" data-tri="A003">3eme Trimestre</button>
      </div>
    `;

    var contentDiv = document.getElementById('ed-content');
    var parentDiv = contentDiv.parentNode;
    parentDiv.insertBefore(trimesterSelectorHtml, contentDiv);
    trimesterSelectorHtml.style.display = 'none';

    renderContent();

    var triButtons = document.querySelectorAll('#ed-widget .trimester-option');
    for (var i = 0; i < triButtons.length; i++) {
      triButtons[i].addEventListener('click', function(e) {
        var tri = this.getAttribute('data-tri');
        currentTrimester = tri;
        for (var j = 0; j < triButtons.length; j++) {
          triButtons[j].classList.remove('active');
        }
        this.classList.add('active');
        if (currentTab === "moyennes") {
          renderMoyennes();
        }
      });
    }

    var activeTri = document.querySelector('#ed-widget .trimester-option[data-tri="' + currentTrimester + '"]');
    if (activeTri) activeTri.classList.add('active');

    renderContent();

    }, 50);

    completion("Charge");

  } catch (error) {
    console.error('Erreur dans le script EcoleDirecte:', error);
    var loadingElement = document.getElementById('ed-loading');
    if (loadingElement) loadingElement.remove();
    var placeholderElement = document.getElementById('ed-widget-placeholder');
    if (placeholderElement) placeholderElement.remove();
    completion("Erreur: " + (error.message || "Erreur inconnue"));
  }
})();

/* ===================
   Script End ✨
=================== */