{% extends "base.html" %}

{% block title %}Accueil — TicketTracker{% endblock %}

{% block content %}
<h1>Tableau de bord</h1>

{% if empty %}
<article>
    <p>
        Aucun ticket importé. Utilisez la CLI pour importer vos tickets :
    </p>
    <pre><code>python -m tickettracker.cli import chemin/vers/ticket.html  # Picnic
python -m tickettracker.cli import chemin/vers/ticket.pdf   # Leclerc</code></pre>
</article>
{% else %}

<!-- Cartes de statistiques -->
<div class="stat-grid">
    <article class="stat-card">
        <h3>{{ stats.total_receipts }}</h3>
        <p>Tickets importés</p>
    </article>
    <article class="stat-card">
        <h3>{{ "%.2f"|format(stats.total_spent) }} €</h3>
        <p>Total dépensé</p>
    </article>
    <article class="stat-card">
        <h3>{{ stats.distinct_products }}</h3>
        <p>Produits distincts</p>
    </article>
    <article class="stat-card">
        <h3>{{ stats.total_items }}</h3>
        <p>Articles scannés</p>
    </article>
</div>

<!-- Graphique dépenses par mois -->
<article>
    <h2>Dépenses par mois</h2>
    <div class="chart-container">
        <canvas id="monthlyChart"></canvas>
    </div>
</article>

<script>
(function () {
    const data = {{ chart_data | tojson }};
    const ctx = document.getElementById("monthlyChart").getContext("2d");
    new Chart(ctx, {
        type: "bar",
        data: data,
        options: {
            responsive: true,
            plugins: {
                legend: { position: "top" }
            },
            scales: {
                x: { stacked: true },
                y: {
                    stacked: true,
                    ticks: {
                        callback: function(value) { return value + " €"; }
                    }
                }
            }
        }
    });
})();
</script>

<!-- Tableau des derniers tickets -->
<article>
    <h2>Derniers tickets</h2>
    <div class="overflow-auto">
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Enseigne</th>
                    <th>Date</th>
                    <th>Total</th>
                    <th>Articles</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for r in receipts %}
                <tr>
                    <td>{{ r.id }}</td>
                    <td>{{ r.store }}</td>
                    <td>{{ r.date }}</td>
                    <td>{{ "%.2f"|format(r.total) }} €</td>
                    <td>{{ r.nb_items }}</td>
                    <td><a href="/receipt/{{ r.id }}">Voir</a></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</article>

{% endif %}
{% endblock %}