{% extends 'base.html.twig' %}

{% block title %}Dashboard{% endblock %}

{% block body %}
<div class="d-flex align-items-center justify-content-between mb-4">
	<h1 class="display-5 fw-bold mb-0">Dashboard</h1>
	<span class="badge rounded-pill bg-primary fs-5 px-3 py-2 shadow">Vue synthétique</span>
</div>

<div class="alert alert-info shadow-sm mb-4">
	<h5 class="mb-2"><i class="bi bi-robot me-2"></i>Suggestions IA</h5>
	<ul class="mb-0 ps-3">
		<li>Vous avez <strong>{{ nbProjets }}</strong> projet{{ nbProjets > 1 ? 's' : '' }}, <strong>{{ nbMembres }}</strong> utilisateur{{ nbMembres > 1 ? 's' : '' }}, <strong>{{ nbAssistants }}</strong> assistant{{ nbAssistants > 1 ? 's IA' : ' IA' }}, et <strong>{{ nbContributions }}</strong> contribution{{ nbContributions > 1 ? 's' : '' }}.</li>
		<li>Surveillez les activités récentes pour suivre l’avancement et l’implication des membres.</li>
		<li>Relancez les membres ou clôturez les projets inactifs si besoin.</li>
		<li>Utilisez les tris et filtres pour analyser la répartition des contributions.</li>
		<li>Besoin d’aide ? <span class="text-primary">Cliquez sur « Aide » dans la barre de navigation.</span></li>
	</ul>
</div>

<div class="row g-4 mb-4">
	<div class="col-md-3">
		<div class="card border-0 shadow h-100 text-bg-primary">
			<div class="card-body text-center">
				<i class="bi bi-kanban-fill fs-1 mb-2"></i>
				<h5 class="card-title">Projets</h5>
				<p class="card-text display-6 fw-bold">{{ nbProjets }}</p>
			</div>
		</div>
	</div>
	<div class="col-md-3">
		<div class="card border-0 shadow h-100 text-bg-success">
			<div class="card-body text-center">
				<i class="bi bi-people-fill fs-1 mb-2"></i>
				<h5 class="card-title">Utilisateurs</h5>
				<p class="card-text display-6 fw-bold">{{ nbMembres }}</p>
			</div>
		</div>
	</div>
	<div class="col-md-3">
		<div class="card border-0 shadow h-100 text-bg-info">
			<div class="card-body text-center">
				<i class="bi bi-cpu-fill fs-1 mb-2"></i>
				<h5 class="card-title">Assistants IA</h5>
				<p class="card-text display-6 fw-bold">{{ nbAssistants }}</p>
			</div>
		</div>
	</div>
	<div class="col-md-3">
		<div class="card border-0 shadow h-100 text-bg-warning">
			<div class="card-body text-center">
				<i class="bi bi-lightbulb-fill fs-1 mb-2"></i>
				<h5 class="card-title">Contributions</h5>
				<p class="card-text display-6 fw-bold">{{ nbContributions }}</p>
			</div>
		</div>
	</div>
</div>

<h2 class="h4 mt-4 mb-3"><i class="bi bi-clock-history me-2"></i>Activités récentes</h2>
<div class="table-responsive shadow-sm rounded">
<table class="table table-hover align-middle mb-0">
	<thead class="table-light">
		<tr>
			<th style="display:none;">ID</th>
			<th>Projet</th>
			<th>Membre</th>
			<th>Durée</th>
			<th>Date</th>
			<th>Commentaire</th>
		</tr>
	</thead>
	<tbody>
	{% for contrib in recentContribs %}
		<tr>
			<td style="display:none;"><input type="hidden" value="{{ contrib.id }}" /></td>
			<td><span class="fw-semibold text-primary">{{ contrib.projet.nom }}</span></td>
			<td>{{ contrib.membre ? '<span class="badge bg-secondary">' ~ contrib.membre.nom ~ ' ' ~ contrib.membre.prenom ~ '</span>' : '' }}</td>
			<td><span class="badge bg-info text-dark">{{ contrib.duree }}</span></td>
			<td>{{ contrib.dateContribution ? contrib.dateContribution|date('d/m/Y') : '' }}</td>
			<td>{{ contrib.commentaire }}</td>
		</tr>
	{% else %}
		<tr><td colspan="5" class="text-center text-muted">Aucune activité récente.</td></tr>
	{% endfor %}
	</tbody>
</table>
</div>
{% endblock %}