{% extends "base.html" %}

{% block content %}

<h2 class="page-title">Mood History</h2>

<p>Your emotional trend over time is shown below:</p>

<div class="chart-container">
    <canvas id="moodChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    // Data from Flask backend
    const labels = {{ labels | safe }};
    const values = {{ values | safe }};

    const ctx = document.getElementById("moodChart").getContext("2d");

    new Chart(ctx, {
        type: "line",
        data: {
            labels: labels,
            datasets: [{
                label: "Sentiment Trend",
                data: values,
                borderWidth: 2,
                borderColor: "#4a6fa5",
                backgroundColor: "rgba(74, 111, 165, 0.2)",
                tension: 0.3,
                pointRadius: 4,
                pointBackgroundColor: "#4a6fa5"
            }]
        },
        options: {
            scales: {
                y: {
                    min: -1,
                    max: 1,
                    ticks: {
                        stepSize: 1,
                        callback: function(value) {
                            if (value === 1) return "Positive";
                            if (value === 0) return "Neutral";
                            if (value === -1) return "Negative";
                        }
                    }
                }
            }
        }
    });
</script>

{% endblock %}