{% extends "layout.html" %}
{% load static %}

{% block title %}- Stats · Graphiques{% endblock %}

{% block extra_head %}
  {% include "partials/_stats_head.html" %}
{% endblock %}

{% block content %}
  <div class="container">
    <h1>Graphiques statistiques</h1>

    {% include "partials/_stats_toolbar.html" %}

    <div class="grid">
      <div class="card">
        <h3>Visiteurs uniques par jour</h3>
        <canvas id="chartVisitors" height="120"></canvas>
      </div>
      <div class="card">
        <h3>Conversions (visiteurs devenus utilisateurs) par jour</h3>
        <canvas id="chartConversions" height="120"></canvas>
      </div>
    </div>

    <div class="grid-2">
      <div class="card">
        <h3>Top sources (visiteurs uniques)</h3>
        <canvas id="chartSources" height="200"></canvas>
      </div>
      <div class="card">
        <h3>Top pays (visiteurs uniques)</h3>
        <canvas id="chartCountries" height="200"></canvas>
      </div>
    </div>

    <p style="margin-top:16px"><a href="{% url 'home:stats_dashboard' %}">← Retour au tableau de bord</a></p>
  </div>

  <script>
    const labels = {{ labels_json|safe }};
    const visitorsSeries = {{ visitors_series_json|safe }};
    const conversionsSeries = {{ conversions_series_json|safe }};
    const sourcesLabels = {{ sources_labels_json|safe }};
    const sourcesValues = {{ sources_values_json|safe }};
    const countriesLabels = {{ countries_labels_json|safe }};
    const countriesValues = {{ countries_values_json|safe }};

    const ctxVisitors = document.getElementById('chartVisitors');
    new Chart(ctxVisitors, {
      type: 'line',
      data: { labels, datasets: [{ label: 'Visiteurs uniques', data: visitorsSeries, borderColor: '#4f46e5', backgroundColor: 'rgba(79,70,229,.2)', tension:.2 }] },
      options: { responsive: true, scales: { y: { beginAtZero: true } }, plugins: { legend: { position: 'bottom' } } }
    });

    const ctxConv = document.getElementById('chartConversions');
    new Chart(ctxConv, {
      type: 'line',
      data: { labels, datasets: [{ label: 'Conversions', data: conversionsSeries, borderColor: '#059669', backgroundColor: 'rgba(5,150,105,.2)', tension:.2 }] },
      options: { responsive: true, scales: { y: { beginAtZero: true } }, plugins: { legend: { position: 'bottom' } } }
    });

    const ctxSources = document.getElementById('chartSources');
    new Chart(ctxSources, {
      type: 'doughnut',
      data: { labels: sourcesLabels, datasets: [{ data: sourcesValues, backgroundColor: ['#4f46e5','#059669','#f59e0b','#ef4444','#10b981','#3b82f6','#8b5cf6','#f97316','#22c55e','#14b8a6'] }] },
      options: { plugins: { legend: { position: 'bottom' } } }
    });

    const ctxCountries = document.getElementById('chartCountries');
    new Chart(ctxCountries, {
      type: 'bar',
      data: { labels: countriesLabels, datasets: [{ label: 'Visiteurs', data: countriesValues, backgroundColor: '#f59e0b' }] },
      options: { responsive: true, scales: { y: { beginAtZero: true } }, plugins: { legend: { display: false } } }
    });
  </script>
{% endblock %}