{% extends "base.html" %}

{% block title %}Statistiques | SPARC{% endblock %}

{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}

{% block content %}
<div class="row mb-4 mt-4">
  <div class="col">
    <h2 class="fw-bold"><i class="bi bi-bar-chart-fill text-primary me-2"></i>Statistiques Globales</h2>
    <p class="text-muted">Analyse des performances et tendances des simulations</p>
  </div>
  <div class="col-auto align-self-center">
    <a href="{{ url_for('form') }}" class="btn btn-primary btn-sm">
      <i class="bi bi-play-circle me-1"></i>Nouvelle Simulation
    </a>
  </div>
</div>

{% if statistics %}
<!-- Key Metrics -->
<div class="row mb-4">
  <div class="col-sm-6 col-lg-3 mb-3">
    <div class="card text-center h-100">
      <div class="card-body">
        <div class="display-4 mb-3 text-primary"><i class="bi bi-cpu"></i></div>
        <h3 class="card-title">{{ statistics.total_simulations }}</h3>
        <p class="card-text text-muted">Simulations totales</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3 mb-3">
    <div class="card text-center h-100">
      <div class="card-body">
        <div class="display-4 mb-3 text-success"><i class="bi bi-check-circle"></i></div>
        <h3 class="card-title">{{ "%.1f"|format(statistics.success_rate) }}%</h3>
        <p class="card-text text-muted">Taux de succès</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3 mb-3">
    <div class="card text-center h-100">
      <div class="card-body">
        <div class="display-4 mb-3 text-info"><i class="bi bi-sun"></i></div>
        <h3 class="card-title">{{ "%.2f"|format(statistics.average_efficiency) }}%</h3>
        <p class="card-text text-muted">Efficacité moyenne</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3 mb-3">
    <div class="card text-center h-100">
      <div class="card-body">
        <div class="display-4 mb-3 text-warning"><i class="bi bi-speedometer2"></i></div>
        <h3 class="card-title">{{ statistics.completed_simulations }}</h3>
        <p class="card-text text-muted">Simulations réussies</p>
      </div>
    </div>
  </div>
</div>

<!-- Charts -->
<div class="row mb-4">
  <div class="col-lg-8 mb-4">
    <div class="card h-100">
      <div class="card-header">
        <h5 class="mb-0"><i class="bi bi-graph-up me-2"></i>Distribution des Efficacités</h5>
      </div>
      <div class="card-body">
        <canvas id="efficiencyChart" height="280"></canvas>
      </div>
    </div>
  </div>
  <div class="col-lg-4 mb-4">
    <div class="card h-100">
      <div class="card-header">
        <h5 class="mb-0"><i class="bi bi-pie-chart me-2"></i>Statuts</h5>
      </div>
      <div class="card-body">
        <canvas id="statusChart" height="280"></canvas>
      </div>
    </div>
  </div>
</div>

<!-- Simulation Types Table -->
<div class="row mb-4">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h5 class="mb-0"><i class="bi bi-table me-2"></i>Répartition par Type de Simulation</h5>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-striped align-middle mb-0">
            <thead>
              <tr>
                <th>Type</th>
                <th>Total</th>
                <th>Réussies</th>
                <th>Taux de succès</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              {% for sim_type, info in type_stats.items() %}
              <tr>
                <td><span class="badge bg-secondary">{{ sim_type }}</span></td>
                <td>{{ info.total }}</td>
                <td>{{ info.completed }}</td>
                <td>
                  <div class="progress" style="min-width:100px;height:18px;">
                    <div class="progress-bar bg-{{ 'success' if info.rate > 80 else 'warning' if info.rate > 50 else 'danger' }}"
                         style="width:{{ info.rate }}%">
                      {{ "%.0f"|format(info.rate) }}%
                    </div>
                  </div>
                </td>
                <td>
                  <a href="{{ url_for('history') }}" class="btn btn-sm btn-outline-primary">
                    <i class="bi bi-eye"></i>
                  </a>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Performance Trend -->
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h5 class="mb-0"><i class="bi bi-graph-up-arrow me-2"></i>Activité Récente</h5>
      </div>
      <div class="card-body">
        <canvas id="trendsChart" height="80"></canvas>
      </div>
    </div>
  </div>
</div>

{% else %}
<div class="text-center py-5">
  <div class="display-1 text-muted mb-4"><i class="bi bi-bar-chart"></i></div>
  <h3>Aucune statistique disponible</h3>
  <p class="text-muted mb-4">Lancez des simulations pour voir les statistiques globales.</p>
  <a href="{{ url_for('form') }}" class="btn btn-primary">
    <i class="bi bi-play-circle me-1"></i>Nouvelle Simulation
  </a>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
{% if statistics %}
<script>
const COLORS = [
  'rgba(54,162,235,.7)','rgba(255,99,132,.7)','rgba(255,205,86,.7)',
  'rgba(75,192,192,.7)','rgba(153,102,255,.7)','rgba(255,159,64,.7)'
];
const BORDERS = COLORS.map(c => c.replace('.7',',1)'));

// Efficiency distribution (bar chart)
new Chart(document.getElementById('efficiencyChart').getContext('2d'), {
  type: 'bar',
  data: {
    labels: {{ efficiency_labels|tojson }},
    datasets: [{
      label: 'Simulations',
      data: {{ efficiency_data|tojson }},
      backgroundColor: 'rgba(54,162,235,.5)',
      borderColor: 'rgba(54,162,235,1)',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true, maintainAspectRatio: false,
    plugins: { legend: { display: false } },
    scales: {
      y: { beginAtZero: true, title: { display: true, text: 'Nombre' } },
      x: { title: { display: true, text: 'Efficacité (%)' } }
    }
  }
});

// Status doughnut chart
new Chart(document.getElementById('statusChart').getContext('2d'), {
  type: 'doughnut',
  data: {
    labels: {{ status_labels|tojson }},
    datasets: [{
      data: {{ status_data|tojson }},
      backgroundColor: COLORS,
      borderColor: BORDERS,
      borderWidth: 1
    }]
  },
  options: {
    responsive: true, maintainAspectRatio: false,
    plugins: { legend: { position: 'bottom' } }
  }
});

// Recent activity trend
new Chart(document.getElementById('trendsChart').getContext('2d'), {
  type: 'bar',
  data: {
    labels: {{ trend_labels|tojson }},
    datasets: [{
      label: 'Simulations lancées',
      data: {{ trend_data|tojson }},
      backgroundColor: 'rgba(75,192,192,.4)',
      borderColor: 'rgba(75,192,192,1)',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true, maintainAspectRatio: false,
    plugins: { legend: { display: false } },
    scales: {
      y: { beginAtZero: true, ticks: { stepSize: 1 } },
      x: {}
    }
  }
});
</script>
{% endif %}
{% endblock %}