{% extends 'base.html.twig' %}
{% block title %}Accueil{% endblock %}
{% block body %}

<div class="grid grid-cols-1 md:grid-cols-3 gap-3">

  <div class="md:col-span-2 rounded-xl bg-surface border border-line p-5">
    <div class="text-[10px] uppercase tracking-[0.14em] text-muted mb-3">Budget devis</div>
    <div class="amount text-3xl font-semibold leading-none">{{ stats.paidOnQuotes|number_format(0, ',', ' ') }} <span class="text-lg font-normal text-muted">€</span></div>
    <div class="text-sm text-muted mt-1">payés sur {{ stats.totalQuoteBudget|number_format(0, ',', ' ') }} € de devis</div>
    <div class="h-1.5 bg-surface-2 rounded-full overflow-hidden mt-4">
      <div class="h-full bg-ok rounded-full" style="width: {{ (stats.overallProgress * 100)|round }}%"></div>
    </div>
    <div class="text-xs text-muted mt-3 pt-3 border-t border-line">
      Hors devis : <span class="amount font-medium text-ink">{{ stats.offQuoteTotal|number_format(0, ',', ' ') }} €</span>
      · Total payé : <span class="amount font-medium text-ink">{{ stats.totalPaid|number_format(0, ',', ' ') }} €</span>
    </div>
  </div>

  <div class="rounded-xl bg-surface border border-line p-5">
    <div class="text-[10px] uppercase tracking-[0.14em] text-muted mb-3">Avancement</div>
    <div class="amount text-3xl font-semibold leading-none">{{ (stats.overallProgress * 100)|round }}<span class="text-xl font-normal text-muted"> %</span></div>
    <div class="text-sm text-muted mt-1">reste {{ stats.remainingOnQuotes|number_format(0, ',', ' ') }} € sur devis</div>
  </div>

  {% if showBalance %}
  <a href="{{ path('app_balance') }}" class="md:col-span-3 rounded-xl bg-surface border border-line p-4 flex items-center justify-between gap-4 hover:bg-surface-2 transition-colors group">
    <div class="min-w-0">
      <div class="text-[10px] uppercase tracking-[0.14em] text-muted mb-2">Équilibre</div>
      {% if balanceDebts|length > 0 %}
      <ul class="space-y-1">
        {% for debt in balanceDebts %}
        <li class="text-sm">
          <span class="font-medium">{{ debt.debtor.name }}</span> doit
          <span class="amount font-medium">{{ debt.amount|number_format(0, ',', ' ') }} €</span>
          à <span class="font-medium">{{ debt.creditor.name }}</span>
        </li>
        {% endfor %}
      </ul>
      {% else %}
      <div class="text-sm text-muted">Tout est équilibré</div>
      {% endif %}
    </div>
    <i class="ti ti-arrow-right text-muted group-hover:text-ink transition-colors shrink-0"></i>
  </a>
  {% endif %}

  {% if financingSummary|length > 0 %}
  <div class="md:col-span-3 rounded-xl bg-surface border border-line p-5">
    <div class="flex items-center justify-between pb-3 border-b border-line">
      <span class="text-sm font-semibold">Enveloppes de financement</span>
      <a href="{{ path('app_financing_overview') }}" class="text-xs text-muted hover:text-ink transition-colors">Détail</a>
    </div>
    <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-3 mt-3">
      {% for row in financingSummary %}
      <div class="rounded-lg bg-surface-2 p-3">
        <div class="text-xs text-muted truncate">{{ row.financing.name }}</div>
        <div class="amount text-lg font-semibold mt-0.5 {% if row.remaining < 0 %}text-danger{% endif %}">{{ row.remaining|number_format(0, ',', ' ') }} €</div>
        <div class="text-[11px] text-muted">restants · {{ row.totalPaid|number_format(0, ',', ' ') }} € consommés</div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  <div class="md:col-span-3 rounded-xl bg-surface border border-line p-5">
    <div class="flex items-center justify-between pb-3 mb-0 border-b border-line">
      <span class="text-sm font-semibold">Dernières dépenses</span>
      <a href="{{ path('app_expense_index') }}" class="text-xs text-muted hover:text-ink transition-colors">Tout voir</a>
    </div>
    <table class="data-table text-sm">
      <tbody class="divide-y divide-line">
        {% for expense in recent %}
          {{ include('expense/_card.html.twig', {expense: expense}) }}
        {% else %}
          <tr><td colspan="7" class="py-3 text-sm text-muted">Aucune dépense pour l'instant.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

</div>
{% endblock %}