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

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

{% block extra_head %}
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
  <style>
    .card{background:var(--bg-200);border-radius:12px;padding:16px;border:1px solid var(--bg-300)}
    .grid{display:grid;grid-template-columns:1fr;gap:24px;margin:16px 0}
    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
    .toolbar{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:8px 0}
    @media (max-width: 960px){.grid-2{grid-template-columns:1fr}}
  </style>
{% endblock %}

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

    <form method="get" class="toolbar">
      <div>
        <label for="p">Période:&nbsp;</label>
        <select id="p" name="p" onchange="this.form.submit()">
          {% for opt in period_options %}
            <option value="{{ opt }}" {% if p == opt %}selected{% endif %}>{{ opt }} jours</option>
          {% endfor %}
        </select>
        <span style="margin-left:8px;color:var(--fg-300)">Du {{ start_date }} au {{ end_date }}</span>
      </div>
      <div style="color:var(--fg-300)">Mise en cache 15 minutes</div>
    </form>

    <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 %}