{% extends "base.html" %}
{% block title %}Dashboard — GarageManager{% endblock %}
{% block content %}

<div class="page-header flex justify-between items-center">
    <div>
        <h1 class="page-title"><i class="fas fa-chart-line text-electric" style="margin-right:0.5rem"></i>Dashboard</h1>
        <p class="page-subtitle">Vue d'ensemble de votre garage</p>
    </div>
    <a href="/interventions/new" class="btn-primary">
        <i class="fas fa-plus"></i> Nouvelle intervention
    </a>
</div>

<!-- Stats -->
<div class="grid grid-4 mb-8">
    <div class="card" style="cursor:default">
        <div class="flex items-center justify-between mb-3">
            <div class="stat-label">Véhicules</div>
            <div style="width:38px;height:38px;background:rgba(0,212,255,0.1);border-radius:8px;display:flex;align-items:center;justify-content:center">
                <i class="fas fa-car text-electric"></i>
            </div>
        </div>
        <div class="stat-value">{{ stats.nb_vehicules }}</div>
        <a href="/vehicules" class="link-action text-xs mt-2" style="display:inline-block">Voir tous →</a>
    </div>

    <div class="card" style="cursor:default">
        <div class="flex items-center justify-between mb-3">
            <div class="stat-label">Interventions</div>
            <div style="width:38px;height:38px;background:rgba(250,204,21,0.1);border-radius:8px;display:flex;align-items:center;justify-content:center">
                <i class="fas fa-tools text-volt"></i>
            </div>
        </div>
        <div class="stat-value" style="color:var(--accent-volt)">{{ stats.nb_interventions }}</div>
        <a href="/interventions" class="link-action text-xs mt-2" style="display:inline-block;color:var(--accent-volt)">Voir toutes →</a>
    </div>

    <div class="card" style="cursor:default">
        <div class="flex items-center justify-between mb-3">
            <div class="stat-label">Pièces en stock</div>
            <div style="width:38px;height:38px;background:rgba(34,197,94,0.1);border-radius:8px;display:flex;align-items:center;justify-content:center">
                <i class="fas fa-cog text-green"></i>
            </div>
        </div>
        <div class="stat-value" style="color:var(--accent-green)">{{ stats.nb_pieces_stock }}</div>
        <span class="text-xs text-muted mt-2" style="display:inline-block">Pièces référencées</span>
    </div>

    <div class="card" style="cursor:default;border-color:rgba(250,204,21,0.2)">
        <div class="flex items-center justify-between mb-3">
            <div class="stat-label" style="color:var(--accent-volt)">Total dépensé</div>
            <div style="width:38px;height:38px;background:rgba(250,204,21,0.1);border-radius:8px;display:flex;align-items:center;justify-content:center">
                <i class="fas fa-euro-sign text-volt"></i>
            </div>
        </div>
        <div class="stat-value" style="color:var(--accent-volt)">{{ "%.0f"|format(stats.cout_total) }} €</div>
        <span class="text-xs text-muted mt-2" style="display:inline-block">Toutes interventions</span>
    </div>
</div>

<!-- Interventions récentes -->
<div class="card" style="padding:0">
    <div class="card-header">
        <span class="card-title"><i class="fas fa-clock-rotate-left text-electric" style="margin-right:0.4rem"></i>Interventions récentes</span>
        <a href="/interventions/new" class="btn-primary btn-sm">
            <i class="fas fa-plus"></i> Nouvelle
        </a>
    </div>

    {% if recent %}
    <div class="overflow-x-auto">
        <table>
            <thead>
                <tr>
                    <th>Véhicule</th>
                    <th>Description</th>
                    <th>Date</th>
                    <th>Kilométrage</th>
                    <th>Pièces</th>
                    <th class="text-right">Total</th>
                </tr>
            </thead>
            <tbody>
                {% for i in recent %}
                <tr style="cursor:pointer" onclick="window.location='/interventions/{{ i.id }}'">
                    <td>
                        <span class="font-semibold mono" style="color:var(--accent-electric);font-size:0.85rem">{{ i.immatriculation }}</span>
                        <br>
                        <span class="text-xs text-muted">{{ i.marque }} {{ i.modele }}</span>
                    </td>
                    <td style="max-width:280px">
                        <span class="truncate" style="display:block;max-width:280px">{{ i.description[:60] }}{% if i.description|length > 60 %}…{% endif %}</span>
                    </td>
                    <td class="text-xs text-secondary">{{ i.date_intervention or '—' }}</td>
                    <td class="text-xs text-secondary mono">{{ (i.kilometrage_intervention|string + ' km') if i.kilometrage_intervention else '—' }}</td>
                    <td>
                        <span class="text-xs text-secondary">{{ i.nb_pieces }} pièce(s)</span>
                        <br>
                        <span class="text-xs text-muted">{{ "%.0f"|format(i.cout_pieces) }} €</span>
                    </td>
                    <td class="text-right">
                        <span class="font-semibold" style="color:var(--accent-volt)">{{ "%.0f"|format(i.cout_main_oeuvre + i.cout_pieces) }} €</span>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        <i class="fas fa-tools"></i>
        <p>Aucune intervention pour l'instant</p>
        <a href="/interventions/new" class="link-action">Créer la première →</a>
    </div>
    {% endif %}
</div>

{% endblock %}