{% extends 'base.html.twig' %}
{% block title %}Net Worth{% endblock %}

{% block head_extra %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
{% endblock %}

{% block content %}

<div class="page-header">
    <div>
        <h1 class="page-title">Net Worth</h1>
        <p class="page-sub">Joint financial picture</p>
    </div>
    <div style="display:flex;gap:.5rem">
        <form method="post" action="{{ path('app_net_worth_snapshot_refresh') }}" style="display:inline">
            <input type="hidden" name="_token" value="{{ csrf_token('snapshot_refresh') }}">
            <button type="submit" class="btn btn-ghost btn-sm">↻ Refresh snapshot</button>
        </form>
        {% if mortgage %}
            <a href="{{ path('app_mortgage_edit', {id: mortgage.id}) }}" class="btn btn-ghost btn-sm">✏️ Edit Mortgage</a>
        {% else %}
            <a href="{{ path('app_mortgage_new') }}" class="btn btn-primary btn-sm">+ Add Mortgage</a>
        {% endif %}
    </div>
</div>

{# ── Stat cards ── #}
<div class="stats-grid">

    <div class="stat-card stat-card--networth">
        <div class="stat-label">💰 Net Worth</div>
        <div class="stat-value" style="color:{{ netWorth >= 0 ? 'var(--accent)' : 'var(--red,#ef4444)' }}">
            £{{ netWorth|number_format(2) }}
            {% if networthChange is not null %}
                <span class="trend trend--{{ networthChange >= 0 ? 'up' : 'down' }}">
                    {{ networthChange >= 0 ? '▲' : '▼' }} £{{ networthChange|abs|number_format(2) }}
                </span>
            {% endif %}
        </div>
        <div class="stat-meta">vs last month</div>
    </div>

    <div class="stat-card stat-card--income">
        <div class="stat-label">🏦 Total Savings</div>
        <div class="stat-value">£{{ savingsTotal|number_format(2) }}</div>
        <div class="stat-meta">across all goals</div>
    </div>

    <div class="stat-card stat-card--negative">
        <div class="stat-label">📉 Total Debts</div>
        <div class="stat-value">£{{ debtTotal|number_format(2) }}</div>
        <div class="stat-meta">loans, credit cards & BNPL</div>
    </div>

    {% if mortgage %}
    <div class="stat-card stat-card--negative">
        <div class="stat-label">🏠 Mortgage Balance</div>
        <div class="stat-value">£{{ mortgagePrincipal|number_format(2) }}</div>
        <div class="stat-meta">{{ mortgage.paidPercent }}% paid off</div>
    </div>

    <div class="stat-card stat-card--positive">
        <div class="stat-label">🏡 House Equity</div>
        <div class="stat-value" style="color:{{ equity >= 0 ? 'var(--green)' : 'var(--red,#ef4444)' }}">
            £{{ equity|number_format(2) }}
        </div>
        <div class="stat-meta">
            {% if houseValue > 0 %}House value £{{ houseValue|number_format(0) }}{% endif %}
            {% if mortgage.ltv is not null %} · LTV {{ mortgage.ltv }}%{% endif %}
        </div>
    </div>

    {% if htbLoanBalance > 0 %}
    <div class="stat-card stat-card--negative">
        <div class="stat-label">🏛️ HTB / Equity Loan</div>
        <div class="stat-value">£{{ htbLoanBalance|number_format(2) }}</div>
        <div class="stat-meta">Help to Buy balance</div>
    </div>
    {% endif %}
    {% endif %}

</div>

{# ── Net Worth Chart ── #}
{% if snapshots|length > 1 %}
<div class="chart-card" style="margin-top:1.5rem">
    <div class="chart-header">
        <h2 class="chart-title">📈 Net Worth Over Time</h2>
    </div>
    <div style="position:relative;height:300px">
        <canvas id="nwChart"></canvas>
    </div>
</div>
{% elseif snapshots|length == 1 %}
<div class="notice-banner" style="margin-top:1rem">
    <span class="notice-emoji">📊</span>
    <div>Graph will appear next month once more snapshots are captured. Visit this page monthly to track growth!</div>
</div>
{% endif %}

{# ── Mortgage Detail Card ── #}
{% if mortgage %}
<div class="section-header" style="margin-top:2rem">
    <h2 class="section-title">🏠 Mortgage Details</h2>
</div>
<div class="goal-card" style="max-width:680px">
    <div class="goal-card-header">
        <div>
            <h3 class="goal-name">{{ mortgage.label }}</h3>
            {% if mortgage.lender %}<p class="goal-desc">{{ mortgage.lender }}</p>{% endif %}
        </div>
        <a href="{{ path('app_mortgage_edit', {id: mortgage.id}) }}" class="btn btn-xs btn-ghost">Edit</a>
    </div>

    <div class="progress-track progress-track--lg" style="margin:.75rem 0">
        <div class="progress-fill" style="width:{{ mortgage.paidPercent }}%;background:#6366f1"></div>
    </div>
    <div class="goal-amounts">
        <div>
            <span class="debt-remaining">£{{ mortgage.principalRemaining|number_format(2) }}</span>
            <span class="goal-target"> remaining of £{{ mortgage.originalPrincipal|number_format(2) }}</span>
        </div>
        <span class="goal-pct">{{ mortgage.paidPercent }}% paid</span>
    </div>

    <div class="debt-meta" style="margin-top:.75rem">
        <span class="tag">{{ mortgage.interestRate }}% p.a.</span>
        <span class="tag">{{ mortgage.termMonths }} month term</span>
        {% if mortgage.startDate %}<span class="tag">Started {{ mortgage.startDate|date("M Y") }}</span>{% endif %}
        {% set mp = mortgage.monthlyPayment ?? mortgage.computeMonthlyPayment|number_format(2) %}
        <span class="tag tag--info">£{{ mortgage.monthlyPayment ? mortgage.monthlyPayment|number_format(2) : mortgage.computeMonthlyPayment|number_format(2) }}/mo</span>
        <span class="tag tag--info">{{ mortgage.monthsRemaining }} months left</span>
        {% if mortgage.linkedExpenseDescription %}
            <span class="tag tag--linked">🔗 {{ mortgage.linkedExpenseDescription }} (auto-reduces on sync)</span>
        {% endif %}
    </div>

    {% if houseValue > 0 %}
    <div class="mortgage-equity-breakdown" style="margin-top:1rem;padding:.75rem;background:var(--bg);border-radius:.5rem;border:1px solid var(--border)">
        <div class="mortgage-eq-row">
            <span>🏡 House value</span>
            <strong>£{{ houseValue|number_format(2) }}</strong>
        </div>
        <div class="mortgage-eq-row">
            <span>− Mortgage balance</span>
            <span style="color:var(--red,#ef4444)">£{{ mortgagePrincipal|number_format(2) }}</span>
        </div>
        {% if htbLoanBalance > 0 %}
        <div class="mortgage-eq-row">
            <span>− Help to Buy loan</span>
            <span style="color:var(--red,#ef4444)">£{{ htbLoanBalance|number_format(2) }}</span>
        </div>
        {% endif %}
        <div class="mortgage-eq-row mortgage-eq-total">
            <span>= Your equity</span>
            <strong style="color:{{ equity >= 0 ? 'var(--green)' : 'var(--red,#ef4444)' }}">£{{ equity|number_format(2) }}</strong>
        </div>
    </div>
    {% endif %}
</div>
{% else %}
<div class="empty-card" style="margin-top:1.5rem">
    <p>No mortgage added yet. Add your mortgage to track your house equity and true net worth.</p>
    <a href="{{ path('app_mortgage_new') }}" class="btn btn-primary">+ Add Mortgage</a>
</div>
{% endif %}

{# ── Snapshot History ── #}
{% if snapshots|length > 0 %}
<div class="section-header" style="margin-top:2rem">
    <h2 class="section-title">📅 Monthly Snapshots</h2>
</div>
<div class="history-table-wrap">
    <table class="history-table">
        <thead>
            <tr>
                <th>Month</th>
                <th>Net Worth</th>
                <th>Savings</th>
                <th>Debts</th>
                <th>Mortgage</th>
                <th>Equity</th>
            </tr>
        </thead>
        <tbody>
            {% for snap in snapshots|reverse %}
            {% set snapEquity = snap.houseValue - snap.mortgagePrincipal - snap.htbLoanBalance %}
            <tr>
                <td>{{ snap.month|date("M Y") }}</td>
                <td style="font-weight:700;color:{{ snap.netWorth >= 0 ? 'var(--accent)' : 'var(--red,#ef4444)' }}">£{{ snap.netWorth|number_format(2) }}</td>
                <td style="color:var(--green)">£{{ snap.savingsTotal|number_format(2) }}</td>
                <td style="color:var(--red,#ef4444)">£{{ snap.debtTotal|number_format(2) }}</td>
                <td>£{{ snap.mortgagePrincipal|number_format(2) }}</td>
                <td>£{{ snapEquity|number_format(2) }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

{% if snapshots|length > 1 %}
<script>
(function () {
    const labels = {{ snapshots|map(s => s.month|date("M Y"))|json_encode|raw }};
    const nwData = {{ snapshots|map(s => s.netWorth)|json_encode|raw }};
    const savingsData = {{ snapshots|map(s => s.savingsTotal)|json_encode|raw }};
    const debtData = {{ snapshots|map(s => (s.debtTotal + s.mortgagePrincipal + s.htbLoanBalance) * -1)|json_encode|raw }};
    const equityData = {{ snapshots|map(s => s.houseValue - s.mortgagePrincipal - s.htbLoanBalance)|json_encode|raw }};

    const ctx = document.getElementById('nwChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels,
            datasets: [
                {
                    label: 'Net Worth',
                    data: nwData,
                    borderColor: '#6366f1',
                    backgroundColor: 'rgba(99,102,241,0.12)',
                    fill: true,
                    tension: 0.35,
                    pointRadius: 5,
                    pointHoverRadius: 7,
                    borderWidth: 2.5,
                },
                {
                    label: 'Savings',
                    data: savingsData,
                    borderColor: '#22c55e',
                    backgroundColor: 'rgba(34,197,94,0.07)',
                    fill: false,
                    tension: 0.35,
                    pointRadius: 4,
                    borderWidth: 1.5,
                    borderDash: [4, 3],
                },
                {
                    label: 'House Equity',
                    data: equityData,
                    borderColor: '#f59e0b',
                    backgroundColor: 'rgba(245,158,11,0.07)',
                    fill: false,
                    tension: 0.35,
                    pointRadius: 4,
                    borderWidth: 1.5,
                    borderDash: [4, 3],
                },
                {
                    label: 'Total Liabilities (neg)',
                    data: debtData,
                    borderColor: '#ef4444',
                    backgroundColor: 'rgba(239,68,68,0.07)',
                    fill: false,
                    tension: 0.35,
                    pointRadius: 4,
                    borderWidth: 1.5,
                    borderDash: [4, 3],
                },
            ],
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: { mode: 'index', intersect: false },
            plugins: {
                legend: { position: 'bottom' },
                tooltip: {
                    callbacks: {
                        label: ctx => ctx.dataset.label + ': £' + parseFloat(ctx.raw).toLocaleString('en-GB', { minimumFractionDigits: 2 }),
                    },
                },
            },
            scales: {
                y: {
                    ticks: {
                        callback: v => '£' + Number(v).toLocaleString('en-GB'),
                    },
                    grid: { color: 'rgba(0,0,0,0.05)' },
                },
                x: { grid: { display: false } },
            },
        },
    });
})();
</script>
{% endif %}

{% endblock %}