{% extends 'base.html.twig' %}
{% block title %}Expenses{% endblock %}
{% block content %}

<div class="page-header">
    <div>
        <h1 class="page-title">Expenses</h1>
        <p class="page-sub">
            <a href="{{ path('app_expenses_index', {month: prevMonth, year: prevYear, category: category}) }}" class="month-nav">‹</a>
            {{ ['January','February','March','April','May','June','July','August','September','October','November','December'][month - 1] }} {{ year }}
            {% if not isCurrentMonth %}
            <a href="{{ path('app_expenses_index', {month: nextMonth, year: nextYear, category: category}) }}" class="month-nav">›</a>
            {% endif %}
            <span class="period-range">{{ periodStart|date('d M') }} – {{ periodEnd|date('d M') }}</span>
            — £{{ total|number_format(2) }} total
        </p>
    </div>
    <a href="{{ path('app_expenses_new') }}" class="btn btn-primary">+ Add Expense</a>
</div>

{% if categories|length > 0 %}
<div class="stats-grid stats-grid--3" style="margin-bottom:1.25rem">
    <div class="stat-card stat-card--expense">
        <div class="stat-label">Total spend</div>
        <div class="stat-value">£{{ total|number_format(2) }}</div>
        <div class="stat-meta">{{ periodStart|date('d M') }} – {{ periodEnd|date('d M') }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Essential bills</div>
        <div class="stat-value">£{{ billsTotal|number_format(2) }}</div>
        <div class="stat-meta">Tagged as 🏠 bill</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Day-to-day</div>
        <div class="stat-value">£{{ dailyTotal|number_format(2) }}</div>
        <div class="stat-meta">Non-bill spending</div>
    </div>
</div>

<div class="scroll-chips">
    <a href="{{ path('app_expenses_index', {month: month, year: year}) }}"
       class="chip{% if category == '' %} chip--active{% endif %}">All</a>
    {% for cat in categories %}
    <a href="{{ path('app_expenses_index', {month: month, year: year, category: cat.category}) }}"
       class="chip{% if category == cat.category %} chip--active{% endif %}">
        {{ cat.category|capitalize }} <strong>£{{ cat.total|number_format(2) }}</strong>
    </a>
    {% endfor %}
</div>
{% endif %}

{% if grouped|length > 0 %}
    {% for day, expenses in grouped %}
    <div class="day-group">
        <div class="day-header">
            <span class="day-label">{{ day|date("l, d F") }}</span>
            <span class="day-total">£{{ expenses|reduce((carry, e) => carry + e.amount, 0)|number_format(2) }}</span>
        </div>
        <div class="card">
            <ul class="item-list">
                {% for exp in expenses %}
                <li class="item-row {% if exp.isBill %}item-row--bill{% endif %}">
                    <div class="item-left">
                        <span class="item-dot" style="background: {{ exp.user.color ?? '#4f6ef7' }}"></span>
                        <div>
                            <span class="item-name">{{ exp.description ?? exp.category|capitalize }}</span>
                            <div class="item-tags">
                                <span class="tag tag--category">{{ exp.category|capitalize }}</span>
                                {% if exp.isBill %}<span class="tag tag--bill">🏠 Bill</span>{% endif %}
                                {% if exp.isRecurring %}<span class="tag tag--recurring">🔁 Recurring</span>{% endif %}
                                {% if exp.isJoint %}<span class="tag tag--joint">👥 Joint</span>{% endif %}
                                {% if exp.isSplit %}<span class="tag tag--split">÷ Split</span>{% endif %}
                                <span class="tag" style="background:{{ exp.user.color ?? '#4f6ef7' }}20; color:{{ exp.user.color ?? '#4f6ef7' }}">{{ exp.user.name }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="item-right">
                        <span class="item-amount">£{{ exp.amount|number_format(2) }}</span>
                        <form method="post" action="{{ path('app_expenses_toggle_bill', {id: exp.id}) }}" style="display:inline">
                            <input type="hidden" name="_token" value="{{ csrf_token('toggle_bill_expense_' ~ exp.id) }}">
                            <input type="hidden" name="month" value="{{ month }}">
                            <input type="hidden" name="year" value="{{ year }}">
                            <button type="submit" class="btn-icon {% if exp.isBill %}btn-icon--bill-on{% else %}btn-icon--bill-off{% endif %}" title="{{ exp.isBill ? 'Remove from bills' : 'Mark as bill' }}">🏠</button>
                        </form>
                        <form method="post" action="{{ path('app_expenses_toggle_recurring', {id: exp.id}) }}" style="display:inline">
                            <input type="hidden" name="_token" value="{{ csrf_token('toggle_recurring_' ~ exp.id) }}">
                            <input type="hidden" name="month" value="{{ month }}">
                            <input type="hidden" name="year" value="{{ year }}">
                            <button type="submit" class="btn-icon {% if exp.isRecurring %}btn-icon--recurring-on{% else %}btn-icon--recurring-off{% endif %}" title="{{ exp.isRecurring ? 'Stop recurring' : 'Mark as recurring direct debit' }}">🔁</button>
                        </form>
                        <form method="post" action="{{ path('app_expenses_delete', {id: exp.id}) }}" style="display:inline">
                            <input type="hidden" name="_token" value="{{ csrf_token('delete_expense_' ~ exp.id) }}">
                            <button type="submit" class="btn-icon btn-icon--danger" onclick="return confirm('Delete?')">×</button>
                        </form>
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    {% endfor %}
{% else %}
<div class="empty-card">
    <p>No expenses logged this month.</p>
    <a href="{{ path('app_expenses_new') }}" class="btn btn-primary">Log first expense</a>
</div>
{% endif %}

{% endblock %}