{% extends "layout.html.twig" %}
{% import "macros.twig" as lbl %}

{% block title %}Dashboard · {{ app_name }}{% endblock %}

{% block content %}
    <h1>Dashboard</h1>
    <p class="mt-1 text-sm text-stone-500">Ciao {{ current_user.nome }}, ecco la situazione.</p>

    {% include 'partials/alert_scorte.html.twig' %}

    {# Card indicatori #}
    <div class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <a href="{{ url('/gruppi') }}" class="card hover:border-orto-500">
            <div class="text-sm text-stone-500">Animali</div>
            <div class="mt-1 text-2xl font-bold">{{ capi_totali }} <span class="text-base font-normal text-stone-500">capi</span></div>
            <div class="text-sm text-stone-500">{{ gruppi_attivi }} gruppi attivi</div>
        </a>
        <a href="{{ url('/mangimi') }}" class="card hover:border-orto-500">
            <div class="text-sm text-stone-500">Mangimi in magazzino</div>
            <div class="mt-1 text-2xl font-bold">{{ scorta_totale }} <span class="text-base font-normal text-stone-500">kg</span></div>
            <div class="text-sm {{ mangimi_sotto > 0 ? 'text-red-600' : 'text-stone-500' }}">
                {{ mangimi_count }} tipi · {{ mangimi_sotto }} sotto soglia
            </div>
        </a>
        <a href="{{ url('/spese/report') }}" class="card hover:border-orto-500">
            <div class="text-sm text-stone-500">Spese {{ anno }}</div>
            <div class="mt-1 text-2xl font-bold">€ {{ spese_anno }}</div>
            <div class="text-sm text-stone-500">mangimi inclusi</div>
        </a>
        <a href="{{ url('/calendario') }}" class="card hover:border-orto-500">
            <div class="text-sm text-stone-500">Calendario</div>
            <div class="mt-1 text-2xl font-bold">Sett. {{ settimana }}</div>
            <div class="text-sm text-stone-500">{{ attivita_settimana|length }} attività in periodo</div>
        </a>
    </div>

    <div class="mt-6 grid gap-6 lg:grid-cols-2">
        {# Questa settimana #}
        <div>
            <h2>Questa settimana (sett. {{ settimana }})</h2>
            {% if attivita_settimana is empty %}
                <p class="mt-2 text-sm text-stone-500">Nessuna attività in periodo questa settimana.</p>
            {% else %}
                <div class="card mt-2">
                    {% for a in attivita_settimana %}
                        <div class="flex items-center gap-2 {{ not loop.first ? 'mt-2 border-t border-stone-100 pt-2' : '' }}">
                            <span class="inline-block h-3 w-3 rounded-full {{ a.stato == 'verde' ? 'bg-orto-500' : 'bg-amber-400' }}"></span>
                            <span class="font-medium">{{ a.attivita_nome }}</span>
                            <span class="text-sm text-stone-500">— {{ a.elemento_nome }} · {{ a.sezione_nome }}</span>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        {# Spese anno per categoria #}
        <div>
            <h2>Spese {{ anno }} per categoria</h2>
            {% if spese_breakdown is empty %}
                <p class="mt-2 text-sm text-stone-500">Nessuna spesa quest'anno.</p>
            {% else %}
                <div class="card mt-2">
                    {% set max_cat = max(spese_breakdown|map(r => r.tot)) %}
                    {% for r in spese_breakdown %}
                        <div class="{{ not loop.first ? 'mt-3' : '' }}">
                            <div class="flex items-baseline justify-between text-sm">
                                <span class="font-medium">{{ r.nome }}</span>
                                <span>€ {{ r.tot }}</span>
                            </div>
                            <div class="mt-1 h-2.5 w-full overflow-hidden rounded bg-stone-100">
                                <div class="h-2.5 rounded {{ r.mangimi ? 'bg-amber-400' : 'bg-orto-500' }}"
                                     style="width: {{ max_cat > 0 ? (r.tot / max_cat * 100)|round(1) : 0 }}%"></div>
                            </div>
                        </div>
                    {% endfor %}
                    <p class="mt-3 text-sm"><a href="{{ url('/spese/report') }}">Report completo →</a></p>
                </div>
            {% endif %}
        </div>
    </div>

    {# Ultimi interventi #}
    <div class="mt-6 flex items-center justify-between gap-4">
        <h2>Ultimi interventi</h2>
        <a class="btn-secondary" href="{{ url('/interventi') }}">Tutti</a>
    </div>
    {% if ultimi_interventi is empty %}
        <p class="mt-2 text-sm text-stone-500">Nessun intervento registrato.</p>
    {% else %}
        <div class="card mt-2">
            {% for i in ultimi_interventi %}
                <div class="{{ not loop.first ? 'mt-2 border-t border-stone-100 pt-2 dark:border-stone-700' : '' }}">
                    {# Riga principale: data · tipo · luogo · elemento #}
                    <div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
                        <span class="text-sm text-stone-500">{{ i.data|date('d/m/Y') }}</span>
                        <span class="badge">{{ i.tipo_nome }}</span>
                        <a href="{{ url('/luoghi/' ~ i.luogo_id ~ '/interventi') }}">{{ i.luogo_nome }}</a>
                        {% if i.elemento_id %}
                            <span class="text-sm text-stone-400">·</span>
                            <a class="text-sm" href="{{ url('/elementi/' ~ i.elemento_id) }}">{{ i.elemento_nome }}</a>
                        {% endif %}
                    </div>
                    {# Dettaglio: descrizione (troncata) + quantità — a capo su schermo stretto #}
                    {% if i.descrizione or i.quantita is not null %}
                        <div class="mt-0.5 flex flex-wrap items-baseline gap-x-2 text-sm text-stone-600 dark:text-stone-400">
                            {% if i.descrizione %}<span>{{ i.descrizione|length > 60 ? i.descrizione|slice(0, 60) ~ '…' : i.descrizione }}</span>{% endif %}
                            {% if i.quantita is not null %}<span class="whitespace-nowrap text-stone-500">📏 {{ i.quantita + 0 }}{{ i.unita ? ' ' ~ i.unita : '' }}</span>{% endif %}
                        </div>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endblock %}