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

<div class="page-header">
    <div>
        <h1 class="page-title">Savings Goals</h1>
        <p class="page-sub">£{{ totalSaved|number_format(2) }} saved of £{{ totalTarget|number_format(2) }}</p>
    </div>
    <a href="{{ path('app_savings_new') }}" class="btn btn-primary">+ New Goal</a>
</div>

{% set totalRemaining = totalTarget - totalSaved %}
{% set overallPct = totalTarget > 0 ? ((totalSaved / totalTarget) * 100)|round(1) : 0 %}
<div class="stats-grid stats-grid--2" style="margin-bottom:1.5rem">
    <div class="stat-card stat-card--income">
        <div class="stat-label">Total Saved</div>
        <div class="stat-value">£{{ totalSaved|number_format(2) }}</div>
        <div class="stat-meta">{{ overallPct }}% of target · {{ goals|length }} goal{{ goals|length != 1 ? 's' : '' }}</div>
    </div>
    <div class="stat-card stat-card--{{ totalRemaining <= 0 ? 'positive' : 'expense' }}">
        <div class="stat-label">Still to save</div>
        <div class="stat-value">£{{ totalRemaining > 0 ? totalRemaining|number_format(2) : '0.00' }}</div>
        <div class="stat-meta">Target £{{ totalTarget|number_format(2) }}</div>
    </div>
</div>

{% if monzoPots|length > 0 %}
<div class="section-header" style="margin-bottom:.75rem">
    <span class="section-title">Monzo Pots</span>
</div>
<div class="stats-grid" style="margin-bottom:2rem">
    {% for pot in monzoPots %}
    <div class="stat-card" style="position:relative">
        <div class="stat-label">{{ pot.name }}</div>
        <div class="stat-value">£{{ (pot.balance / 100)|number_format(2) }}</div>
        {% if pot.goal_amount is defined and pot.goal_amount > 0 %}
        <div class="stat-meta">Goal: £{{ (pot.goal_amount / 100)|number_format(2) }}</div>
        <div class="progress-track" style="margin-top:.5rem">
            <div class="progress-fill" style="width:{{ min((pot.balance / pot.goal_amount) * 100, 100) }}%;background:var(--accent)"></div>
        </div>
        {% else %}
        <div class="stat-meta">Monzo pot</div>
        {% endif %}
    </div>
    {% endfor %}
</div>
{% endif %}

{% if goals|length > 0 %}
<div class="goals-grid">
    {% for goal in goals %}
    <div class="goal-card" style="--goal-color: {{ goal.color }}">
        <div class="goal-card-header">
            <div>
                <h3 class="goal-name">{{ goal.name }}</h3>
                {% if goal.institution %}
                <span class="goal-institution">🏦 {{ goal.institution }}</span>
                {% endif %}
            </div>
            <div style="display:flex;gap:.5rem;align-items:center">
                <span class="goal-pct {{ goal.progressPercent >= 100 ? 'goal-pct--done' : '' }}">{{ goal.progressPercent }}%</span>
                <a href="{{ path('app_savings_edit', {id: goal.id}) }}" class="btn btn-xs btn-ghost">Edit</a>
            </div>
        </div>

        {% if goal.description %}
        <p class="goal-desc">{{ goal.description }}</p>
        {% endif %}

        {% if goal.linkedExpenseDescription %}
        <div style="margin-bottom:.5rem"><span class="tag tag--linked">🔗 Auto-syncs: {{ goal.linkedExpenseDescription }}</span></div>
        {% endif %}

        <div class="progress-track progress-track--lg">
            <div class="progress-fill" style="width: {{ goal.progressPercent }}%; background: {{ goal.color }}"></div>
        </div>

        <div class="goal-amounts">
            <div>
                <span class="goal-saved">£{{ goal.currentAmount|number_format(2) }}</span>
                <span class="goal-target"> / £{{ goal.targetAmount|number_format(2) }}</span>
            </div>
            {% if goal.deadline %}
            <span class="goal-deadline">🎯 {{ goal.deadline|date("d M Y") }}</span>
            {% endif %}
        </div>

        {% if goal.monthlyContribution %}
        <div class="goal-contrib">
            <span>💰 £{{ goal.monthlyContribution|number_format(2) }}/month</span>
            {% if (goal.targetAmount - goal.currentAmount) > 0 and goal.monthlyContribution > 0 %}
            <span class="goal-contrib-months">· ~{{ ((goal.targetAmount - goal.currentAmount) / goal.monthlyContribution)|round(0, 'ceil') }} months left</span>
            {% endif %}
        </div>
        {% endif %}

        {# Deposit + Withdraw forms #}
        <div style="display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem">
            <div class="deposit-form" data-controller="collapsible" style="flex:1">
                <button type="button" class="btn btn-sm btn-outline" style="width:100%" data-action="collapsible#toggle">+ Deposit</button>
                <div class="collapsible-content" data-collapsible-target="content">
                    <form method="post" action="{{ path('app_savings_deposit', {id: goal.id}) }}" class="inline-form" style="margin-top:.5rem">
                        <input type="hidden" name="_token" value="{{ csrf_token('deposit_' ~ goal.id) }}">
                        {% if recentExpenses|length > 0 %}
                        <div style="margin-bottom:.5rem">
                            <label class="form-label" style="font-size:.78rem">Link to a transaction <span class="form-optional">(auto-fills amount)</span></label>
                            <select name="linked_expense_id" class="form-input form-input--sm" onchange="savExpChange(this, 'savAmt{{ goal.id }}')">
                                <option value="">— None (enter manually) —</option>
                                {% for exp in recentExpenses %}
                                <option value="{{ exp.id }}" data-amount="{{ exp.amount }}">{{ exp.date|date("d M") }} – {{ exp.description }} (£{{ exp.amount|number_format(2) }})</option>
                                {% endfor %}
                            </select>
                        </div>
                        {% endif %}
                        <input type="number" name="amount" step="0.01" min="0.01" class="form-input form-input--sm" placeholder="Amount" id="savAmt{{ goal.id }}">
                        <input type="date" name="date" class="form-input form-input--sm" value="{{ "now"|date("Y-m-d") }}">
                        <input type="text" name="note" class="form-input form-input--sm" placeholder="Note (optional)">
                        <button type="submit" class="btn btn-sm btn-primary">Save</button>
                    </form>
                </div>
            </div>
            <div class="deposit-form" data-controller="collapsible" style="flex:1">
                <button type="button" class="btn btn-sm btn-outline btn-outline--danger" style="width:100%" data-action="collapsible#toggle">− Withdraw</button>
                <div class="collapsible-content" data-collapsible-target="content">
                    <form method="post" action="{{ path('app_savings_withdraw', {id: goal.id}) }}" class="inline-form" style="margin-top:.5rem">
                        <input type="hidden" name="_token" value="{{ csrf_token('withdraw_' ~ goal.id) }}">
                        <input type="number" name="amount" step="0.01" min="0.01" class="form-input form-input--sm" placeholder="Amount">
                        <input type="date" name="date" class="form-input form-input--sm" value="{{ "now"|date("Y-m-d") }}">
                        <input type="text" name="note" class="form-input form-input--sm" placeholder="Reason (optional)">
                        <button type="submit" class="btn btn-sm btn-danger">Withdraw</button>
                    </form>
                </div>
            </div>
        </div>

        {% if goal.entries|length > 0 %}
        <details class="history-details">
            <summary>History ({{ goal.entries|length }})</summary>
            <ul class="history-list">
                {% for entry in goal.entries|slice(0, 10) %}
                <li class="history-item">
                    <span class="history-date">{{ entry.date|date("d M") }}</span>
                    <span class="history-user" style="color: {{ entry.user.color ?? '#4f6ef7' }}">{{ entry.user.name }}</span>
                    <span class="history-amount" style="color:{{ entry.amount < 0 ? 'var(--red,#ef4444)' : 'inherit' }}">
                        {{ entry.amount < 0 ? '−' : '+' }}£{{ entry.amount|abs|number_format(2) }}
                    </span>
                    {% if entry.linkedExpense %}<span class="tag tag--linked" style="font-size:.7rem">🔗 {{ entry.linkedExpense.description }}</span>{% endif %}
                    {% if entry.note %}<span class="history-note">{{ entry.note }}</span>{% endif %}
                </li>
                {% endfor %}
            </ul>
        </details>
        {% endif %}

        <div style="display:flex;justify-content:space-between;align-items:center;margin-top:.5rem">
            <form method="post" action="{{ path('app_savings_toggle_favourite', {id: goal.id}) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('fav_' ~ goal.id) }}">
                <button type="submit" class="btn btn-xs btn-ghost" title="{{ goal.isFavourite ? 'Remove from dashboard' : 'Pin to dashboard' }}">
                    {{ goal.isFavourite ? '⭐ Pinned' : '☆ Pin to dashboard' }}
                </button>
            </form>
            <form method="post" action="{{ path('app_savings_delete', {id: goal.id}) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('delete_goal_' ~ goal.id) }}">
                <button type="submit" class="btn btn-xs btn-ghost-danger" onclick="return confirm('Archive this goal?')">Archive</button>
            </form>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-card">
    <p>No savings goals yet. Start saving towards something! 🎯</p>
    <a href="{{ path('app_savings_new') }}" class="btn btn-primary">Create a goal</a>
</div>
{% endif %}

<script>
function savExpChange(sel, amtId) {
    const opt = sel.options[sel.selectedIndex];
    const amtEl = document.getElementById(amtId);
    if (opt.value && opt.dataset.amount) {
        amtEl.value = opt.dataset.amount;
    }
}
</script>

{% endblock %}