{% extends 'base.html.twig' %}
{% block title %}Personal{% 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">Personal Finance</h1>
        <p class="page-sub">Your private records — only visible to you</p>
    </div>
    <div style="display:flex;gap:.5rem;align-items:center">
        <a href="{{ path('app_change_password') }}" class="btn btn-secondary">🔑 Change Password</a>
        <a href="{{ path('app_personal_new') }}" class="btn btn-primary">+ Add Record</a>
    </div>
</div>

{# ── Personal Net Worth Stats ── #}
<div class="stats-grid" style="margin-bottom:1.5rem">
    <div class="stat-card {% if personalNetWorth >= 0 %}stat-card--positive{% else %}stat-card--negative{% endif %}">
        <div class="stat-label">👤 Personal Net Worth</div>
        <div class="stat-value">
            £{{ personalNetWorth|number_format(2) }}
            {% if networthChange is not null %}
                <span class="trend {% if networthChange >= 0 %}trend--up{% else %}trend--down{% endif %}">
                    {{ networthChange >= 0 ? '▲' : '▼' }} £{{ networthChange|abs|number_format(2) }}
                </span>
            {% endif %}
        </div>
        <div class="stat-meta">savings + pension + ½ equity − personal debts</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">🏦 Personal Savings</div>
        <div class="stat-value">£{{ personalSavingsTotal|number_format(2) }}</div>
        <div class="stat-meta">{{ personalSavings|length }} goal{{ personalSavings|length != 1 ? 's' : '' }}</div>
    </div>
    <div class="stat-card stat-card--positive">
        <div class="stat-label">🏛 Pension Pot</div>
        <div class="stat-value">
            £{{ pensionTotal|number_format(2) }}
            {% if latestPension %}
                <span style="font-size:.75rem;font-weight:400;opacity:.7">as of {{ latestPension.date|date('M Y') }}</span>
            {% endif %}
        </div>
        <div class="stat-meta">{{ latestPension ? latestPension.institution : 'No pension recorded yet' }}</div>
    </div>
    <div class="stat-card stat-card--negative">
        <div class="stat-label">🔒 Personal Debts</div>
        <div class="stat-value">£{{ personalDebtTotal|number_format(2) }}</div>
        <div class="stat-meta">{{ personalDebts|length }} debt{{ personalDebts|length != 1 ? 's' : '' }}</div>
    </div>
    {% if mortgage %}
    <div class="stat-card">
        <div class="stat-label">🏠 Your Half-Equity</div>
        <div class="stat-value">£{{ halfEquity|number_format(2) }}</div>
        <div class="stat-meta">50% of joint mortgage equity</div>
    </div>
    {% endif %}
</div>

{# ── Personal Net Worth Graph ── #}
{% if snapshots|length >= 1 %}
<div class="chart-card" style="margin-bottom:2rem">
    <div class="chart-header">
        <h2 class="chart-title">📈 Personal Net Worth Over Time</h2>
        <p style="font-size:.8rem;opacity:.6;margin:0">Updates automatically every time you visit — tracks savings, pension, equity &amp; debts</p>
    </div>
    <canvas id="personalNwChart" height="90"></canvas>
</div>
<script>
(function () {
    const labels      = {{ snapshots|map(s => s.month|date('M Y'))|json_encode|raw }};
    const nwData      = {{ snapshots|map(s => s.personalNetWorth)|json_encode|raw }};
    const savData     = {{ snapshots|map(s => s.personalSavingsTotal)|json_encode|raw }};
    const pensionData = {{ snapshots|map(s => s.pensionTotal)|json_encode|raw }};
    const halfEqData  = {{ snapshots|map(s => s.halfMortgageEquity)|json_encode|raw }};
    const debtData    = {{ snapshots|map(s => (0 - s.personalDebtTotal))|json_encode|raw }};

    new Chart(document.getElementById('personalNwChart'), {
        type: 'line',
        data: {
            labels,
            datasets: [
                { label: 'Personal Net Worth', data: nwData,      borderColor: '#4f6ef7', backgroundColor: 'rgba(79,110,247,.1)', tension: .4, fill: true,  pointRadius: 4, borderWidth: 2 },
                { label: 'Personal Savings',   data: savData,     borderColor: '#22c55e', backgroundColor: 'transparent',          tension: .4, fill: false, pointRadius: 3 },
                { label: 'Pension Pot',        data: pensionData, borderColor: '#a855f7', backgroundColor: 'transparent',          tension: .4, fill: false, pointRadius: 3 },
                { label: '½ Mortgage Equity',  data: halfEqData,  borderColor: '#f59e0b', backgroundColor: 'transparent',          tension: .4, fill: false, pointRadius: 3 },
                { label: 'Personal Debts (−)', data: debtData,    borderColor: '#ef4444', backgroundColor: 'transparent',          tension: .4, fill: false, pointRadius: 3 },
            ]
        },
        options: {
            responsive: true,
            interaction: { mode: 'index', intersect: false },
            plugins: {
                legend: { position: 'bottom' },
                tooltip: { callbacks: { label: ctx => ctx.dataset.label + ': £' + Number(ctx.parsed.y).toLocaleString('en-GB', {minimumFractionDigits:2}) } }
            },
            scales: {
                y: { ticks: { callback: v => '£' + Number(v).toLocaleString('en-GB') } }
            }
        }
    });
})();
</script>
{% endif %}

{# ── Tabs ── #}
<div class="tabs" data-controller="tabs">
    <div class="tabs-bar">
        <button class="tab-btn active" data-action="tabs#switch" data-tab="salary">💼 Salary</button>
        <button class="tab-btn" data-action="tabs#switch" data-tab="pension">🏛 Pension</button>
        <button class="tab-btn" data-action="tabs#switch" data-tab="networth">📈 NW Log</button>
        {% if personalDebts|length > 0 %}<button class="tab-btn" data-action="tabs#switch" data-tab="mydebt">🔒 My Debts</button>{% endif %}
        {% if personalSavings|length > 0 %}<button class="tab-btn" data-action="tabs#switch" data-tab="mysavings">🏦 My Savings</button>{% endif %}
        {% if others|length > 0 %}<button class="tab-btn" data-action="tabs#switch" data-tab="other">📦 Other</button>{% endif %}
    </div>

    {# Salary #}
    <div class="tab-panel active" data-tab-panel="salary">
        {% if salaries|length > 0 %}
        <div class="card">
            <ul class="item-list">
                {% for r in salaries %}{{ _self.record_row(r, 'app_personal_delete', 'app_personal_edit') }}{% endfor %}
            </ul>
        </div>
        {% else %}<p class="empty-state">No salary records yet.</p>{% endif %}
    </div>

    {# Pension #}
    <div class="tab-panel" data-tab-panel="pension">
        {% if latestPension %}
        <div class="stat-card stat-card--positive" style="margin-bottom:1rem">
            <div class="stat-label">🏛 Current Pension Value (used in net worth)</div>
            <div class="stat-value">£{{ pensionTotal|number_format(2) }}</div>
            <div class="stat-meta">From {{ latestPension.institution ?? 'your pension provider' }} · {{ latestPension.date|date('d M Y') }} · <span style="opacity:.7">Add a new entry below to update the value</span></div>
        </div>
        {% endif %}
        {% if pensions|length > 0 %}
        <div class="card">
            <ul class="item-list">
                {% for r in pensions %}{{ _self.record_row(r, 'app_personal_delete', 'app_personal_edit') }}{% endfor %}
            </ul>
        </div>
        <p class="form-hint" style="margin-top:.5rem">The most recent entry's value is used in your personal net worth calculation.</p>
        {% else %}<p class="empty-state">No pension records yet. Add one to include it in your net worth.</p>{% endif %}
    </div>

    {# Net Worth Log #}
    <div class="tab-panel" data-tab-panel="networth">
        {% if networths|length > 0 %}
        <div class="nw-timeline">
            {% set maxNW = max(networths|map(r => r.amount)) %}
            {% for r in networths|reverse %}
            <div class="nw-bar-row">
                <span class="nw-date">{{ r.date|date("M Y") }}</span>
                <div class="nw-bar-track">
                    <div class="nw-bar-fill" style="width: {{ maxNW > 0 ? ((r.amount / maxNW) * 100)|round : 0 }}%"></div>
                </div>
                <span class="nw-amount">£{{ r.amount|number_format(0) }}</span>
            </div>
            {% endfor %}
        </div>
        <div class="card" style="margin-top:1rem">
            <ul class="item-list">
                {% for r in networths %}{{ _self.record_row(r, 'app_personal_delete', 'app_personal_edit') }}{% endfor %}
            </ul>
        </div>
        {% else %}<p class="empty-state">No net worth records yet. Start tracking your wealth! 📈</p>{% endif %}
    </div>

    {# Personal Debts #}
    {% if personalDebts|length > 0 %}
    <div class="tab-panel" data-tab-panel="mydebt">
        <div class="page-sub" style="margin-bottom:1rem">These are your personal debts — not counted in the joint total. <a href="{{ path('app_debts_new') }}">Add another →</a></div>
        {% macro debtCard(debt) %}
        <div class="goal-card goal-card--debt" style="margin-bottom:1rem">
            <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>
                <a href="{{ path('app_debts_edit', {id: debt.id}) }}" class="btn btn-xs btn-ghost">Edit</a>
            </div>
            {% 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 }}mo left</span>{% endif %}
            </div>
        </div>
        {% endmacro %}
        {% for d in personalDebtsByType.loan %}{{ _self.debtCard(d) }}{% endfor %}
        {% for d in personalDebtsByType.credit_card %}{{ _self.debtCard(d) }}{% endfor %}
        {% for d in personalDebtsByType.bnpl %}{{ _self.debtCard(d) }}{% endfor %}
    </div>
    {% endif %}

    {# Personal Savings #}
    {% if personalSavings|length > 0 %}
    <div class="tab-panel" data-tab-panel="mysavings">
        <div class="page-sub" style="margin-bottom:1rem">Your personal savings pots — only you can see these. <a href="{{ path('app_savings_new') }}">Add more →</a></div>
        <div class="goals-grid">
            {% for g in personalSavings %}
            <div class="goal-card" style="border-left: 4px solid {{ g.color ?? '#22c55e' }}">
                <div class="goal-card-header">
                    <h3 class="goal-name">{{ g.name }}</h3>
                    <a href="{{ path('app_savings_edit', {id: g.id}) }}" class="btn btn-xs btn-ghost">Edit</a>
                </div>
                <div class="progress-track progress-track--lg">
                    <div class="progress-fill" style="width:{{ g.progressPercent }}%; background:{{ g.color ?? '#22c55e' }}"></div>
                </div>
                <div class="goal-amounts">
                    <div><span style="font-weight:600;color:{{ g.color ?? '#22c55e' }}">£{{ g.currentAmount|number_format(2) }}</span><span class="goal-target"> of £{{ g.targetAmount|number_format(2) }}</span></div>
                    <span class="goal-pct">{{ g.progressPercent }}%</span>
                </div>
                {% if g.institution %}<p class="goal-desc" style="margin-top:.25rem">{{ g.institution }}</p>{% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {# Other #}
    {% if others|length > 0 %}
    <div class="tab-panel" data-tab-panel="other">
        <div class="card">
            <ul class="item-list">
                {% for r in others %}{{ _self.record_row(r, 'app_personal_delete', 'app_personal_edit') }}{% endfor %}
            </ul>
        </div>
    </div>
    {% endif %}
</div>

{% macro record_row(r, delete_route, edit_route) %}
<li class="item-row">
    <div class="item-left">
        <div>
            <span class="item-name">{{ r.institution ?? (r.type|capitalize) }}</span>
            <span class="item-meta">{{ r.date|date("d M Y") }}{% if r.note %} · {{ r.note }}{% endif %}</span>
        </div>
    </div>
    <div class="item-right">
        <span class="item-amount">£{{ r.amount|number_format(2) }}</span>
        {% if edit_route is defined and edit_route %}
        <a href="{{ path(edit_route, {id: r.id}) }}" class="btn btn-xs btn-ghost">Edit</a>
        {% endif %}
        <form method="post" action="{{ path(delete_route, {id: r.id}) }}" style="display:inline">
            <input type="hidden" name="_token" value="{{ csrf_token('delete_personal_' ~ r.id) }}">
            <button type="submit" class="btn-icon btn-icon--danger" onclick="return confirm('Delete?')">×</button>
        </form>
    </div>
</li>
{% endmacro %}

{% endblock %}