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

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">{{ monthName }} {{ year }}</h1>
        <p class="page-sub">Joint finances overview</p>
    </div>
    <a href="{{ path('app_expenses_new') }}" class="btn btn-primary">+ Add Expense</a>
</div>

{# ── Income prompt banner ── #}
{% if not hasIncome %}
<div class="notice-banner">
    <span class="notice-emoji">👋</span>
    <div>
        <strong>New month — let's set up your income!</strong>
        <p>Add your salary so we can track how much you have left this month.</p>
    </div>
    <a href="{{ path('app_income_new') }}" class="btn btn-sm btn-accent">Add Income</a>
</div>
{% endif %}

{# ── Stat cards ── #}
<div class="stats-grid">
    <div class="stat-card stat-card--income">
        <div class="stat-label">Total Income</div>
        <div class="stat-value">£{{ totalIncome|number_format(2) }}</div>
        <div class="stat-meta">{{ incomes|length }} source{{ incomes|length != 1 ? 's' : '' }}</div>
    </div>
    <div class="stat-card stat-card--expense">
        <div class="stat-label">Spent</div>
        <div class="stat-value">£{{ (totalBills + totalExpenses)|number_format(2) }}</div>
        <div class="stat-meta">Bills £{{ totalBills|number_format(2) }} + daily £{{ totalExpenses|number_format(2) }}</div>
    </div>
    {% set remaining = totalIncome - totalBills - totalExpenses %}
    <div class="stat-card stat-card--{{ remaining >= 0 ? 'positive' : 'negative' }}">
        <div class="stat-label">Remaining</div>
        <div class="stat-value">£{{ remaining|number_format(2) }}</div>
        <div class="stat-meta">{{ remaining >= 0 ? 'Looking good 🎉' : 'Over budget ⚠️' }}</div>
    </div>
    {% for goal in favouriteSavings %}
    <div class="stat-card" style="border-top:3px solid {{ goal.color }}">
        <div class="stat-label">⭐ {{ goal.name }}</div>
        <div class="stat-value">£{{ goal.currentAmount|number_format(2) }}</div>
        <div class="progress-track" style="margin:.5rem 0">
            <div class="progress-fill" style="width:{{ goal.progressPercent }}%;background:{{ goal.color }}"></div>
        </div>
        <div class="stat-meta">{{ goal.progressPercent }}% of £{{ goal.targetAmount|number_format(2) }}{% if goal.institution %} · {{ goal.institution }}{% endif %}</div>
    </div>
    {% endfor %}
</div>

{# ── Days to payday card ── #}
<div class="payday-countdown-card">
    <div class="payday-countdown-left">
        <div class="stat-label">Pay period ends</div>
        <div style="font-weight:700;font-size:1rem;color:var(--text)">{{ periodEnd|date('l, d M Y') }}</div>
        <div class="stat-meta">
            {% if daysLeft == 0 %}Payday today! 🎉
            {% elseif daysLeft == 1 %}Tomorrow
            {% else %}{{ daysLeft }} days left
            {% endif %}
        </div>
    </div>
</div>

{# ── Category breakdown ── #}
{% if categoryTotals|length > 0 %}
<div class="section">
    <h2 class="section-title">Spending by Category</h2>
    <div class="category-bars">
        {% set grandTotal = totalExpenses > 0 ? totalExpenses : 1 %}
        {% for cat in categoryTotals %}
        <div class="cat-bar-row">
            <span class="cat-name">{{ cat.category|capitalize }}</span>
            <div class="cat-bar-track">
                <div class="cat-bar-fill" style="width: {{ ((cat.total / grandTotal) * 100)|round }}%"></div>
            </div>
            <span class="cat-amount">£{{ cat.total|number_format(2) }}</span>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<div class="two-col-grid">
    {# ── Upcoming bills ── #}
    <div class="section">
        <div class="section-header">
            <h2 class="section-title">Upcoming Bills</h2>
            <a href="{{ path('app_bills_index') }}" class="link-sm">View all →</a>
        </div>
        {# Show recurring expense-bills that have no transaction ID yet (still to pay) #}
        {% set upcomingExpBills = expenseBills|filter(e => e.monzoTransactionId is null) %}
        {% if upcomingExpBills|length > 0 %}
        <ul class="item-list">
            {% for exp in upcomingExpBills %}
            <li class="item-row">
                <div class="item-left">
                    <span class="item-dot item-dot--bill"></span>
                    <span class="item-name">{{ exp.description }}</span>
                    {% if exp.isRecurring %}<span class="item-tag">🔁 Recurring</span>{% endif %}
                </div>
                <span class="item-amount">£{{ exp.amount|number_format(2) }}</span>
            </li>
            {% endfor %}
        </ul>
        {% else %}
        <p class="empty-state">All bills paid this period 🎉</p>
        {% endif %}
    </div>

    {# ── Recent expenses ── #}
    <div class="section">
        <div class="section-header">
            <h2 class="section-title">Recent Expenses</h2>
            <a href="{{ path('app_expenses_index') }}" class="link-sm">View all →</a>
        </div>
        {% if recentExpenses|length > 0 %}
        <ul class="item-list">
            {% for exp in recentExpenses %}
            <li class="item-row">
                <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>
                        <span class="item-meta">{{ exp.date|date("d M") }} · {{ exp.user.name }}</span>
                    </div>
                </div>
                <span class="item-amount">£{{ exp.amount|number_format(2) }}</span>
            </li>
            {% endfor %}
        </ul>
        {% else %}
        <p class="empty-state">No expenses logged yet</p>
        {% endif %}
    </div>
</div>

{# ── Savings progress ── #}
{% if savingsGoals|length > 0 %}
<div class="section">
    <div class="section-header">
        <h2 class="section-title">Savings Goals</h2>
        <a href="{{ path('app_savings_index') }}" class="link-sm">Manage →</a>
    </div>
    <div class="goals-mini-grid">
        {% for goal in savingsGoals %}
        <div class="goal-mini-card">
            <div class="goal-mini-header">
                <span class="goal-mini-name">{{ goal.name }}</span>
                <span class="goal-mini-pct">{{ goal.progressPercent }}%</span>
            </div>
            <div class="progress-track">
                <div class="progress-fill" style="width: {{ goal.progressPercent }}%; background: {{ goal.color }}"></div>
            </div>
            <div class="goal-mini-amounts">
                <span>£{{ goal.currentAmount|number_format(2) }}</span>
                <span class="goal-mini-target">of £{{ goal.targetAmount|number_format(2) }}</span>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

{% endblock %}