{% extends "admin_custom/modern/base.html" %}
{% load static %}

{% block content %}
<h1 class="page-title">Tableau de bord</h1>

<div class="row g-4 mb-5" style="--bs-gutter-x:1.5rem; --bs-gutter-y:1.5rem;">
  <div class="col-12 col-sm-6 col-xl-3">
    <div class="metric-card">
      <div class="metric-icon primary"><i class="fa-solid fa-users"></i></div>
      <div class="metric-content">
        <h3 id="stat-users">{{ stats.orders|default:0 }}</h3>
        <p>Utilisateurs</p>
        <span class="metric-trend">Données en temps réel</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-xl-3">
    <div class="metric-card">
      <div class="metric-icon success"><i class="fa-solid fa-cart-shopping"></i></div>
      <div class="metric-content">
        <h3 id="stat-orders">{{ stats.orders|default:0 }}</h3>
        <p>Commandes</p>
        <span class="metric-trend">Total</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-xl-3">
    <div class="metric-card">
      <div class="metric-icon warning"><i class="fa-solid fa-file-invoice"></i></div>
      <div class="metric-content">
        <h3 id="stat-invoices">{{ stats.invoices|default:0 }}</h3>
        <p>Factures</p>
        <span class="metric-trend">Total</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-xl-3">
    <div class="metric-card">
      <div class="metric-icon danger"><i class="fa-solid fa-box"></i></div>
      <div class="metric-content">
        <h3 id="stat-products">{{ stats.products|default:0 }}</h3>
        <p>Produits</p>
        <span class="metric-trend">{{ stats.revenue|default:0|floatformat:0 }} € revenus</span>
      </div>
    </div>
  </div>
</div>

<div class="row g-4 mb-5">
  <div class="col-12 col-lg-8">
    <div class="card">
      <div class="card-header">Tendances - Revenus</div>
      <div class="card-body" style="height:320px;">
        <canvas id="chart-line"></canvas>
      </div>
    </div>
  </div>
  <div class="col-12 col-lg-4">
    <div class="card">
      <div class="card-header">Liens rapides</div>
      <div class="card-body">
        <div class="d-flex flex-column gap-2">
          <a href="{% url 'admin:admin_charts' %}" class="btn btn-primary">
            <i class="fa-solid fa-chart-line"></i> Graphiques
          </a>
          <a href="{% url 'admin:admin_grids' %}" class="btn btn-secondary">
            <i class="fa-solid fa-table"></i> Grilles de données
          </a>
          {% for app in app_list %}
          {% for model in app.models %}
          <a href="{{ model.admin_url }}" class="btn btn-secondary btn-sm">
            <i class="fa-solid fa-arrow-right"></i> {{ model.name }}
          </a>
          {% endfor %}
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row g-4">
  <div class="col-12">
    <div class="card">
      <div class="card-header">Accès aux applications</div>
      <div class="card-body">
        <div class="row g-3">
          {% for app in app_list %}
          <div class="col-md-6 col-lg-4">
            <div class="card" style="border:1px solid var(--color-border);">
              <div class="card-header" style="font-size:1rem;">{{ app.name }}</div>
              <div class="card-body">
                <div class="d-flex flex-wrap gap-2">
                  {% for model in app.models %}
                  <a href="{{ model.admin_url }}" class="btn btn-primary btn-sm">{{ model.name }}</a>
                  {% empty %}
                  <span class="text-muted">Aucun modèle</span>
                  {% endfor %}
                </div>
              </div>
            </div>
          </div>
          {% empty %}
          <p class="text-muted">Aucune application configurée.</p>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extrajs %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  fetch('/admin_custom/api/chart-data/?model=Order&field=total_amount&type=line&frequency=month&operation=sum')
    .then(function(r) { return r.json(); })
    .then(function(data) {
      var ctx = document.getElementById('chart-line');
      if (ctx && data.labels) {
        new Chart(ctx.getContext('2d'), {
          type: 'line',
          data: {
            labels: data.labels,
            datasets: [{
              label: 'Revenus (€)',
              data: data.data,
              borderColor: 'rgb(59, 130, 246)',
              backgroundColor: 'rgba(59, 130, 246, 0.1)',
              tension: 0.4,
              fill: true
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: { y: { beginAtZero: true } }
          }
        });
      }
    })
    .catch(function() {});
});
</script>
{% endblock %}