{% extends 'base.html' %}
{% load static %}

{% block title %}Dashboard - PixelMinds{% endblock %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
{% endblock %}

{% block content %}
<section class="section bg-light">
  <div class="container">
    <div class="row mb-4 align-items-center">
        <div class="col-md-8">
            <h1 class="section-title mb-0">Your Dashboard</h1>
            <p class="lead">An overview of your mood entries.</p>
        </div>
        <div class="col-md-4 text-md-end">
            <a href="{% url 'core:create_mood_entry' %}" class="btn btn-primary">+ New Mood Entry</a>
        </div>
    </div>

    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <h5 class="card-title fw-bold mb-3">Filter by Date</h5>
            <form method="get" class="row g-3 align-items-center">
                <div class="col-md-5">
                    <label for="{{ form.start_date.id_for_label }}" class="form-label">Start Date</label>
                    {{ form.start_date }}
                </div>
                <div class="col-md-5">
                    <label for="{{ form.end_date.id_for_label }}" class="form-label">End Date</label>
                    {{ form.end_date }}
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-secondary w-100">Filter</button>
                </div>
            </form>
        </div>
    </div>
    
    <div class="card p-4 shadow-sm">
      <div class="card-body">
        <h5 class="card-title fw-bold mb-3">Mood Over Time</h5>
        {% if chart_data != '[]' %}
            <canvas id="moodChart"></canvas>
        {% else %}
            <div class="text-center p-5">
                <p class="lead">No mood entries found for the selected period.</p>
                <p class="text-muted">Try adjusting the filter or <a href="{% url 'core:create_mood_entry' %}">add a new entry</a>.</p>
            </div>
        {% endif %}
      </div>
    </div>
  </div>
</section>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const chartData = JSON.parse('{{ chart_data|safe }}');
        if (chartData.length > 0) {
            const ctx = document.getElementById('moodChart').getContext('2d');
            const dates = chartData.map(d => new Date(d.date_time));
            const scores = chartData.map(d => d.mood_score);

            const moodChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: dates,
                    datasets: [{
                        label: 'Mood Score',
                        data: scores,
                        borderColor: '#4f46e5', // primary-color
                        backgroundColor: 'rgba(79, 70, 229, 0.1)',
                        borderWidth: 2,
                        fill: true,
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            type: 'time',
                            time: {
                                unit: 'day',
                                tooltipFormat: 'MMM dd, yyyy',
                            },
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            beginAtZero: true,
                            max: 10,
                            grid: {
                                color: '#e5e7eb'
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });
        }
    });
</script>
{% endblock %}