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

{% block title %}- Tableau de bord{% endblock %}

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

{% block content %}
  <div class="container">
    <h1>Tableau de bord statistiques</h1>
    <p style="margin:8px 0">
      <a href="{% url 'home:stats_charts' %}">→ Voir la page de graphiques</a>
    </p>

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

    <section class="stats-grid">
      <div class="card">
        <h3>Visiteurs uniques (période)</h3>
        <div class="kpi">{{ kpi.unique_visitors }}</div>
      </div>
      <div class="card">
        <h3>Visiteurs revenants (période)</h3>
        <div class="kpi">{{ kpi.returning_visitors }}</div>
      </div>
      <div class="card">
        <h3>Conversions en utilisateurs (période)</h3>
        <div class="kpi">{{ kpi.converted_visitors }}</div>
      </div>
      <div class="card">
        <h3>Utilisateurs (total)</h3>
        <div class="kpi">{{ kpi.total_users }}</div>
      </div>
      <div class="card">
        <h3>Nouveaux utilisateurs (période)</h3>
        <div class="kpi">{{ kpi.new_users_period }}</div>
      </div>
      <div class="card">
        <h3>Utilisateurs actifs (période)</h3>
        <div class="kpi">{{ kpi.active_users_period }}</div>
      </div>
      <div class="card">
        <h3>Cours (publiés / total)</h3>
        <div class="kpi">{{ kpi.courses_enabled }} / {{ kpi.total_courses }}</div>
      </div>
      <div class="card">
        <h3>Leçons (total)</h3>
        <div class="kpi">{{ kpi.total_lessons }}</div>
      </div>
      <div class="card">
        <h3>Articles de blog (total)</h3>
        <div class="kpi">{{ kpi.total_posts }}</div>
      </div>
      <div class="card">
        <h3>Revenus</h3>
        {% if revenus_disponibles %}
          <div class="kpi">—</div>
        {% else %}
          <div class="kpi" title="Aucune source de données">N/A</div>
        {% endif %}
      </div>
      <div class="card">
        <h3>Technique</h3>
        {% if technique_disponible %}
          <div class="kpi">—</div>
        {% else %}
          <div class="kpi" title="Aucune source de données">N/A</div>
        {% endif %}
      </div>
    </section>

    <section class="tables" id="live-activity">
      <div class="card" style="grid-column: 1 / -1;">
        <h3>Activité en direct (5 dernières minutes)</h3>
        <table id="live-activity-table" style="width:100%">
          <thead>
            <tr><th>Type</th><th>Identité</th><th>Page</th><th>Il y a</th><th>Source</th><th>Pays</th></tr>
          </thead>
          <tbody>
            <tr id="live-empty"><td colspan="6">Chargement…</td></tr>
          </tbody>
        </table>
      </div>
    </section>

    <section class="charts">
      <div class="card">
        <h3>Évolution quotidienne</h3>
        <canvas id="chartMain" height="120"></canvas>
      </div>
    </section>

    <section class="tables">
      <div class="card">
        <h3>Nouveaux utilisateurs par jour</h3>
        <table>
          <thead><tr><th>Jour</th><th>Nb</th></tr></thead>
          <tbody>
            {% for row in new_users_table %}
              <tr><td>{{ row.0 }}</td><td>{{ row.1 }}</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class="card">
        <h3>Nouveaux cours par jour</h3>
        <table>
          <thead><tr><th>Jour</th><th>Nb</th></tr></thead>
          <tbody>
            {% for row in new_courses_table %}
              <tr><td>{{ row.0 }}</td><td>{{ row.1 }}</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>

    <section class="tables">
      <div class="card">
        <h3>Top sources (visiteurs uniques)</h3>
        <table>
          <thead><tr><th>Source</th><th>Visiteurs</th></tr></thead>
          <tbody>
            {% for row in top_sources_table %}
              <tr><td>{{ row.0 }}</td><td>{{ row.1 }}</td></tr>
            {% empty %}
              <tr><td colspan="2">Aucune donnée</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class="card">
        <h3>Top pays (visiteurs uniques)</h3>
        <table>
          <thead><tr><th>Pays</th><th>Visiteurs</th></tr></thead>
          <tbody>
            {% for row in top_countries_table %}
              <tr><td>{{ row.0 }}</td><td>{{ row.1 }}</td></tr>
            {% empty %}
              <tr><td colspan="2">Aucune donnée</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>
  </div>

  <script>
    const labels = {{ labels_json|safe }};
    const series = {{ series_json|safe }};
    const ctx = document.getElementById('chartMain');
    const chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [
          {label: 'Nouveaux utilisateurs', data: series.new_users, borderColor: '#4f46e5', backgroundColor: 'rgba(79,70,229,.2)', tension:.2},
          {label: 'Nouveaux cours', data: series.new_courses, borderColor: '#059669', backgroundColor: 'rgba(5,150,105,.2)', tension:.2},
          {label: 'Nouveaux articles', data: series.new_posts, borderColor: '#f59e0b', backgroundColor: 'rgba(245,158,11,.2)', tension:.2},
          {label: 'Activité progression', data: series.activity_progress, borderColor: '#ef4444', backgroundColor: 'rgba(239,68,68,.2)', tension:.2}
        ]
      },
      options: {
        responsive: true,
        scales: {y: {beginAtZero: true}},
        plugins: {legend: {position: 'bottom'}}
      }
    });

    // Live activity polling
    function humanizeSeconds(s) {
      if (s < 60) return s + 's';
      const m = Math.floor(s/60); const r = s % 60;
      if (m < 60) return m + 'm' + (r?(' '+r+'s'):'');
      const h = Math.floor(m/60); const mr = m % 60; return h + 'h' + (mr?(' '+mr+'m'):'');
    }
    async function fetchLive() {
      try {
        const res = await fetch('{% url "home:live_activity" %}', {headers: {'Accept': 'application/json'}});
        if (!res.ok) throw new Error('HTTP '+res.status);
        const payload = await res.json();
        const tbody = document.querySelector('#live-activity-table tbody');
        tbody.innerHTML = '';
        const items = payload.items || [];
        if (items.length === 0) {
          const tr = document.createElement('tr');
          const td = document.createElement('td'); td.colSpan = 6; td.textContent = 'Aucune activité récente';
          tr.appendChild(td); tbody.appendChild(tr); return;
        }
        for (const it of items) {
          const tr = document.createElement('tr');
          const type = document.createElement('td'); type.textContent = it.is_user ? 'Utilisateur' : 'Visiteur';
          const ident = document.createElement('td'); ident.textContent = it.is_user ? (it.username || 'Utilisateur') : it.visitor;
          const page = document.createElement('td'); page.textContent = it.path || '/';
          const ago = document.createElement('td'); ago.textContent = humanizeSeconds(it.seconds_ago);
          const src = document.createElement('td'); src.textContent = it.source || '';
          const country = document.createElement('td'); country.textContent = it.country || '';
          tr.append(type, ident, page, ago, src, country);
          tbody.appendChild(tr);
        }
      } catch (e) {
        // silent fail in UI
      }
    }
    fetchLive();
    setInterval(fetchLive, 10000);
  </script>
{% endblock %}