reportPage.js

    const sessionId = localStorage.getItem('currentSessionId');
    
    async function fetchReportData() {
      try {
        if (!sessionId) {
          document.getElementById('dominant-emotion').textContent = "Tidak ada data";
          return;
        }
        
        const response = await fetch(`http://localhost:8080/api/session-report/${sessionId}`);
        const data = await response.json();
        
        if (data.error) {
          document.getElementById('dominant-emotion').textContent = data.error;
          return;
        }
        
        document.getElementById('dominant-emotion').textContent = capitalizeFirstLetter(data.dominantEmotion);
        document.getElementById('avg-stress').textContent = data.averageStressLevel;
        setStressLevelColor('avg-stress', data.averageStressLevel);
        document.getElementById('total-frames').textContent = data.totalFrames;
        document.getElementById('max-stress').textContent = data.maxStressLevel;
        document.getElementById('min-stress').textContent = data.minStressLevel;
        document.getElementById('duration').textContent = `${Math.round(data.totalFrames / 1)} detik`;
        
        setStressInterpretation(data.averageStressLevel);
        
        createEmotionChart(data.emotionCounts);
      } catch (error) {
        console.error('Error fetching report data:', error);
        document.getElementById('dominant-emotion').textContent = "Error mengambil data laporan";
      }
    }
    
    function capitalizeFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
    }
    
    function setStressLevelColor(elementId, stressLevel) {
      const element = document.getElementById(elementId);
      
      if (stressLevel >= 80) {
        element.classList.add('text-red-600');
      } else if (stressLevel >= 50) {
        element.classList.add('text-yellow-600');
      } else {
        element.classList.add('text-green-600');
      }
    }
    
    function setStressInterpretation(stressLevel) {
      const interpretationElement = document.getElementById('stress-interpretation');
      let message, bgColor, textColor;
      
      if (stressLevel >= 80) {
        message = "Tingkat stres tinggi. Rekomendasi: Istirahat dan konsultasi dengan profesional kesehatan mental.";
        bgColor = "bg-red-100";
        textColor = "text-red-800";
      } else if (stressLevel >= 50) {
        message = "Tingkat stres sedang. Rekomendasi: Pertimbangkan teknik relaksasi dan manajemen stres.";
        bgColor = "bg-yellow-100";
        textColor = "text-yellow-800";
      } else {
        message = "Tingkat stres rendah. Tetap jaga kesehatan fisik dan mental.";
        bgColor = "bg-green-100";
        textColor = "text-green-800";
      }
      
      interpretationElement.classList.add(bgColor, textColor);
      interpretationElement.textContent = message;
    }
    
    function createEmotionChart(emotionCounts) {
      const ctx = document.getElementById('emotion-chart').getContext('2d');
      
      const labels = Object.keys(emotionCounts).map(emotion => capitalizeFirstLetter(emotion));
      const data = Object.values(emotionCounts);
      
      const backgroundColors = [
        'rgba(255, 99, 132, 0.7)', 
        'rgba(75, 192, 192, 0.7)',
        'rgba(255, 205, 86, 0.7)',
        'rgba(54, 162, 235, 0.7)',
        'rgba(153, 102, 255, 0.7)',
        'rgba(201, 203, 207, 0.7)', 
        'rgba(255, 159, 64, 0.7)'
      ];
      
      new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: labels,
          datasets: [{
            data: data,
            backgroundColor: backgroundColors.slice(0, labels.length),
            borderColor: 'white',
            borderWidth: 2
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'right'
            }
          }
        }
      });
    }
    
    window.addEventListener('DOMContentLoaded', fetchReportData);