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

<div class="page-header">
    <div>
        <h1 class="page-title">Debts</h1>
        <p class="page-sub">£{{ jointTotal|number_format(2) }} joint remaining</p>
    </div>
    <a href="{{ path('app_debts_new') }}" class="btn btn-primary">+ Add Debt</a>
</div>

{# ── Stat cards ── #}
<div class="stats-grid" style="margin-bottom:1.5rem">
    <div class="stat-card stat-card--negative">
        <div class="stat-label">📉 Joint Debt Remaining</div>
        <div class="stat-value">
            £{{ jointTotal|number_format(2) }}
            {% if periodPayments > 0 %}
                <span class="trend trend--up">▼ £{{ periodPayments|number_format(2) }}</span>
            {% endif %}
        </div>
        <div class="stat-meta">
            {% if periodPayments > 0 %}
                Reduced by £{{ periodPayments|number_format(2) }} this period
            {% else %}
                No payments logged this period yet
            {% endif %}
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-label">💳 Active Joint Debts</div>
        <div class="stat-value">{{ jointDebts|length }}</div>
        <div class="stat-meta">across all types</div>
    </div>
    <div class="stat-card stat-card--positive">
        <div class="stat-label">🏦 Net Worth Tracker</div>
        <div class="stat-value" style="font-size:1rem;padding-top:.25rem">
            <a href="{{ path('app_net_worth') }}" class="btn btn-sm btn-primary">View Net Worth →</a>
        </div>
        <div class="stat-meta">incl. savings &amp; equity</div>
    </div>
</div>

{% macro debtSection(sectionTitle, sectionIcon, sectionDebts, recentExpenses) %}
{% if sectionDebts|length > 0 %}
<div class="section-header" style="margin-top:2rem">
    <h2 class="section-title">{{ sectionIcon }} {{ sectionTitle }}</h2>
    <span class="tag tag--info">{{ sectionDebts|length }} debt{{ sectionDebts|length != 1 ? 's' : '' }}</span>
</div>
<div class="goals-grid">
    {% for debt in sectionDebts %}
    <div class="goal-card goal-card--debt">
        <div class="goal-card-header">
            <div>
                <h3 class="goal-name">{{ debt.label }}</h3>
                {% if debt.creditor %}<p class="goal-desc">{{ debt.creditor }}</p>{% endif %}
            </div>
            <div style="display:flex;gap:.5rem;align-items:center">
                {% if debt.isPersonal %}<span class="tag tag--personal">🔒 Personal</span>{% endif %}
                <a href="{{ path('app_debts_edit', {id: debt.id}) }}" class="btn btn-xs btn-ghost">Edit</a>
            </div>
        </div>

        {# Credit card: show utilization bar; others: show paid% bar #}
        {% if debt.type == 'credit_card' and debt.utilizationPercent is not null %}
            {% set util = debt.utilizationPercent %}
            <div class="progress-track progress-track--lg">
                <div class="progress-fill" style="width:{{ util }}%; background: {% if util >= 70 %}var(--danger){% elseif util >= 40 %}var(--warning,#f59e0b){% else %}var(--success,#22c55e){% endif %}"></div>
            </div>
            <div class="goal-amounts">
                <div>
                    <span class="debt-remaining">£{{ debt.remainingAmount|number_format(2) }}</span>
                    <span class="goal-target"> of £{{ debt.creditLimit|number_format(2) }} limit</span>
                </div>
                <span class="goal-pct {% if util >= 70 %}text-danger{% endif %}">{{ util }}% utilised</span>
            </div>
        {% else %}
            <div class="progress-track progress-track--lg">
                <div class="progress-fill progress-fill--debt" style="width: {{ debt.paidPercent }}%"></div>
            </div>
            <div class="goal-amounts">
                <div>
                    <span class="debt-remaining">£{{ debt.remainingAmount|number_format(2) }}</span>
                    <span class="goal-target"> remaining of £{{ debt.totalAmount|number_format(2) }}</span>
                </div>
                <span class="goal-pct">{{ debt.paidPercent }}% paid</span>
            </div>
        {% endif %}

        <div class="debt-meta">
            {% if debt.interestRate %}<span class="tag">{{ debt.interestRate }}% APR</span>{% endif %}
            {% if debt.monthlyPayment %}<span class="tag">£{{ debt.monthlyPayment|number_format(2) }}/mo</span>{% endif %}
            {% if debt.monthsRemaining is not null %}
                <span class="tag tag--info">{{ debt.monthsRemaining }} month{{ debt.monthsRemaining != 1 ? 's' : '' }} left</span>
            {% endif %}
            {% if debt.dueDate %}
                <span class="tag">Settled {{ debt.dueDate|date("M Y") }}</span>
            {% elseif debt.estimatedPayoffDate %}
                <span class="tag">Paid off {{ debt.estimatedPayoffDate|date("M Y") }}</span>
            {% endif %}
            {% if debt.linkedExpenseDescription %}
                <span class="tag tag--linked">🔗 {{ debt.linkedExpenseDescription }}</span>
            {% endif %}
        </div>

        {# Payment form #}
        <div class="deposit-form" data-controller="collapsible">
            <button type="button" class="btn btn-sm btn-outline" data-action="collapsible#toggle">+ Log Payment</button>
            <div class="collapsible-content" data-collapsible-target="content">
                <form method="post" action="{{ path('app_debts_payment', {id: debt.id}) }}" class="inline-form">
                    <input type="hidden" name="_token" value="{{ csrf_token('payment_' ~ debt.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="debtExpChange(this, 'debtAmt{{ debt.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="debtAmt{{ debt.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>

        {% if debt.payments|length > 0 %}
        <details class="history-details">
            <summary>Payment history ({{ debt.payments|length }})</summary>
            <ul class="history-list">
                {% for p in debt.payments|slice(0, 10) %}
                <li class="history-item">
                    <span class="history-date">{{ p.date|date("d M") }}</span>
                    <span class="history-user" style="color: {{ p.user.color ?? '#4f6ef7' }}">{{ p.user.name }}</span>
                    <span class="history-amount">-£{{ p.amount|number_format(2) }}</span>
                    {% if p.linkedExpense %}<span class="tag tag--linked" style="font-size:.7rem">🔗 {{ p.linkedExpense.description }}</span>{% endif %}
                    {% if p.note %}<span class="history-note">{{ p.note }}</span>{% endif %}
                </li>
                {% endfor %}
            </ul>
        </details>
        {% endif %}

        <form method="post" action="{{ path('app_debts_delete', {id: debt.id}) }}" style="margin-top:.5rem">
            <input type="hidden" name="_token" value="{{ csrf_token('delete_debt_' ~ debt.id) }}">
            <button type="submit" class="btn btn-xs btn-ghost-danger" onclick="return confirm('Archive this debt?')">Archive</button>
        </form>
    </div>
    {% endfor %}
</div>
{% endif %}
{% endmacro %}

{# ── Joint Debts ── #}
{% if jointDebts|length > 0 %}
    {{ _self.debtSection('Loans', '🏦', debtsByType.loan, recentExpenses) }}
    {{ _self.debtSection('Credit Cards', '💳', debtsByType.credit_card, recentExpenses) }}
    {{ _self.debtSection('Buy Now Pay Later', '🛍️', debtsByType.bnpl, recentExpenses) }}
{% else %}
<div class="empty-card">
    <p>No joint debts tracked. 🎉</p>
    <a href="{{ path('app_debts_new') }}" class="btn btn-primary">Track a debt</a>
</div>
{% endif %}

{# ── Personal Debts ── #}
{% if personalDebts|length > 0 %}
<div class="section-header" style="margin-top:3rem;border-top:1px solid var(--border);padding-top:1.5rem">
    <h2 class="section-title">🔒 My Personal Debts</h2>
    <span class="tag tag--personal">£{{ personalTotal|number_format(2) }} — not in joint total</span>
</div>
<p class="page-sub" style="margin-bottom:1rem">These debts are private to you. Full details also visible in <a href="{{ path('app_personal_index') }}">Personal →</a></p>
{{ _self.debtSection('Loans', '🏦', personalByType.loan, recentExpenses) }}
{{ _self.debtSection('Credit Cards', '💳', personalByType.credit_card, recentExpenses) }}
{{ _self.debtSection('Buy Now Pay Later', '🛍️', personalByType.bnpl, recentExpenses) }}
{% endif %}

<script>
function debtExpChange(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 %}