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

{% block title %}{{ group.name }} — Pipou{% endblock %}
{% block body_class %}bg-stone-100 dark:bg-stone-950{% endblock %}

{% block body %}
<div class="flex flex-col w-full" style="padding-top: var(--safe-top)">

    {# Header #}
    <div class="flex items-center gap-3 px-4 pt-4 pb-3">
        <a href="{{ path('front.expense.index') }}"
           class="flex items-center justify-center size-9 rounded-full bg-stone-200 dark:bg-stone-800 active:bg-stone-300 transition-colors shrink-0">
            <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"/>
            </svg>
        </a>
        <div class="flex-1 min-w-0">
            <h1 class="text-lg font-bold truncate">{{ group.name }}</h1>
            <p class="text-xs text-stone-500">{{ group.members|length }} membre{{ group.members|length > 1 ? 's' }}</p>
        </div>
        <a href="{{ path('front.expense.group.edit', {id: group.id}) }}"
           class="flex items-center justify-center size-9 rounded-full bg-stone-200 dark:bg-stone-800 shrink-0">
            <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125"/>
            </svg>
        </a>
    </div>

    {# Balance Live Component #}
    <div class="px-4 mb-3">
        <twig:Expense:ExpenseGroupBalance groupId="{{ group.id }}" />
    </div>

    {# Actions #}
    <div class="px-4 flex gap-2 mb-4">
        <a href="{{ path('front.expense.expense.new', {id: group.id}) }}"
           class="flex-1 flex items-center justify-center gap-2 py-3 rounded-2xl bg-violet-600 text-white font-semibold text-sm active:bg-violet-700 transition-colors">
            <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
            </svg>
            Dépense
        </a>
        <a href="{{ path('front.expense.settlement.new', {id: group.id}) }}"
           class="flex-1 flex items-center justify-center gap-2 py-3 rounded-2xl bg-emerald-600 text-white font-semibold text-sm active:bg-emerald-700 transition-colors">
            <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/>
            </svg>
            Remboursement
        </a>
    </div>

    {# Activity feed #}
    <div class="px-4 pb-6 space-y-2">
        <h2 class="text-sm font-semibold text-stone-500 dark:text-stone-400 uppercase tracking-wide mb-3">Historique</h2>

        {% for event in activity %}
            {% if event.type == 'expense' %}
                {% set expense = event.item %}
                <div class="bg-white dark:bg-stone-900 rounded-2xl p-4">
                    <div class="flex items-start justify-between gap-3">
                        <div class="flex items-start gap-3 flex-1 min-w-0">
                            <div class="size-8 rounded-xl bg-violet-100 dark:bg-violet-900/40 flex items-center justify-center shrink-0 mt-0.5">
                                <svg class="size-4 text-violet-600 dark:text-violet-400" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"/>
                                </svg>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="font-semibold text-sm truncate">{{ expense.description }}</p>
                                <p class="text-xs text-stone-500 mt-0.5">
                                    Payé par <span class="font-medium text-stone-700 dark:text-stone-300">{{ expense.paidBy.displayName }}</span>
                                    · {{ expense.date|date('d/m/y') }}
                                    {% if expense.category %}· <span class="capitalize">{{ expense.category.value }}</span>{% endif %}
                                </p>
                            </div>
                        </div>
                        <div class="text-right shrink-0">
                            <p class="font-bold text-base">{{ expense.amount|number_format(2, ',', ' ') }} €</p>
                            <a href="{{ path('front.expense.expense.edit', {id: expense.id}) }}"
                               class="text-xs text-stone-400 hover:text-stone-600">modifier</a>
                        </div>
                    </div>
                </div>
            {% else %}
                {% set settlement = event.item %}
                <div class="bg-white dark:bg-stone-900 rounded-2xl p-4">
                    <div class="flex items-center gap-3">
                        <div class="size-8 rounded-xl bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center shrink-0">
                            <svg class="size-4 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/>
                            </svg>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium">
                                <span class="font-semibold">{{ settlement.paidBy.displayName }}</span>
                                a remboursé
                                <span class="font-semibold">{{ settlement.paidTo.displayName }}</span>
                            </p>
                            <p class="text-xs text-stone-500 mt-0.5">
                                {{ settlement.date|date('d/m/y') }}
                                {% if settlement.note %} · {{ settlement.note }}{% endif %}
                            </p>
                        </div>
                        <p class="font-bold text-base text-emerald-600 dark:text-emerald-400 shrink-0 tabular-nums">
                            {{ settlement.amount|number_format(2, ',', ' ') }} €
                        </p>
                    </div>
                </div>
            {% endif %}
        {% else %}
            <div class="text-center py-10 text-stone-500 text-sm">Aucune activité pour l'instant.</div>
        {% endfor %}
    </div>

</div>
{% endblock %}