{% extends 'base.html.twig' %}
{% block title %}{{ mortgage ? 'Edit Mortgage' : 'Add Mortgage' }}{% endblock %}
{% block content %}

<div class="page-header">
    <div>
        <h1 class="page-title">{{ mortgage ? 'Edit Mortgage' : 'Add Mortgage' }}</h1>
        <p class="page-sub">Track your mortgage and calculate equity</p>
    </div>
    <a href="{{ path('app_net_worth') }}" class="btn btn-ghost">← Back</a>
</div>

<div class="form-card">
    <form method="post" action="{{ mortgage ? path('app_mortgage_edit', {id: mortgage.id}) : path('app_mortgage_new') }}" class="notion-form" id="mortgageForm">

        <div class="form-group">
            <label class="form-label">Label</label>
            <input type="text" name="label" class="form-input" value="{{ mortgage ? mortgage.label : '' }}" placeholder="e.g. Main Residence Mortgage" required autofocus>
        </div>

        <div class="form-group">
            <label class="form-label">Lender <span class="form-optional">(optional)</span></label>
            <input type="text" name="lender" class="form-input" value="{{ mortgage ? mortgage.lender : '' }}" placeholder="e.g. Barclays, NatWest...">
        </div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Original principal (£)</label>
                <input type="number" name="original_principal" id="origPrincipal" step="0.01" min="0" class="form-input"
                       value="{{ mortgage ? mortgage.originalPrincipal : '' }}" placeholder="e.g. 200000" required>
            </div>
            <div class="form-group">
                <label class="form-label">Current remaining balance (£)</label>
                <input type="number" name="principal_remaining" id="principalRemaining" step="0.01" min="0" class="form-input"
                       value="{{ mortgage ? mortgage.principalRemaining : '' }}" placeholder="e.g. 185000" required
                       oninput="recalcPayment()">
            </div>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Annual interest rate (%)</label>
                <input type="number" name="interest_rate" id="interestRate" step="0.01" min="0" max="30" class="form-input"
                       value="{{ mortgage ? mortgage.interestRate : '' }}" placeholder="e.g. 3.75" required
                       oninput="recalcPayment()">
            </div>
            <div class="form-group">
                <label class="form-label">Total term (months)</label>
                <input type="number" name="term_months" id="termMonths" step="1" min="1" class="form-input"
                       value="{{ mortgage ? mortgage.termMonths : '' }}" placeholder="e.g. 300 = 25 years" required
                       oninput="recalcPayment()">
            </div>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Mortgage start date <span class="form-optional">(optional)</span></label>
                <input type="date" name="start_date" id="startDate" class="form-input"
                       value="{{ mortgage and mortgage.startDate ? mortgage.startDate|date('Y-m-d') : '' }}"
                       oninput="recalcPayment()">
            </div>
            <div class="form-group">
                <label class="form-label">Monthly payment (£) <span class="form-optional">(leave blank to auto-calculate)</span></label>
                <input type="number" name="monthly_payment" id="monthlyPayment" step="0.01" min="0" class="form-input"
                       value="{{ mortgage ? mortgage.monthlyPayment : '' }}" placeholder="Auto-calculated below">
            </div>
        </div>

        <div class="notice-banner" id="paymentPreview" style="display:none;margin:.5rem 0">
            <span class="notice-emoji">🔢</span>
            <div>Estimated monthly payment: <strong id="paymentPreviewVal">—</strong> <span style="font-size:.8rem;color:var(--text-2)">(interest + principal)</span></div>
        </div>

        <div class="form-section-divider">House &amp; Equity Details</div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Current house value (£) <span class="form-optional">(for equity)</span></label>
                <input type="number" name="house_value" step="0.01" min="0" class="form-input"
                       value="{{ mortgage and mortgage.houseValue ? mortgage.houseValue : '' }}" placeholder="e.g. 250000">
            </div>
            <div class="form-group">
                <label class="form-label">Help to Buy / equity loan balance (£) <span class="form-optional">(if any)</span></label>
                <input type="number" name="htb_loan_balance" step="0.01" min="0" class="form-input"
                       value="{{ mortgage and mortgage.htbLoanBalance ? mortgage.htbLoanBalance : '' }}" placeholder="e.g. 40000">
            </div>
        </div>

        <div class="form-section-divider">Monzo Auto-Sync</div>

        <div class="form-group">
            <label class="form-label">Link to recurring Monzo transaction <span class="form-optional">(auto-reduces principal on sync)</span></label>
            <p class="form-hint">When this transaction appears in a Monzo sync, the interest is calculated and the principal is reduced by the remainder.</p>
            <select name="linked_expense_description" class="form-input" id="mortgageLinkSel" onchange="mortgageLinkChange(this)">
                <option value="">— None (manual only) —</option>
                {% for exp in recurringExpenses %}
                <option value="{{ exp.description }}"
                        data-amount="{{ exp.amount }}"
                        {% if mortgage and mortgage.linkedExpenseDescription == exp.description %}selected{% endif %}>
                    {{ exp.description }} (£{{ exp.amount }})
                </option>
                {% endfor %}
            </select>
            <input type="hidden" name="linked_expense_amount" id="mortgageLinkAmt" value="{{ mortgage ? mortgage.linkedExpenseAmount : '' }}">
        </div>

        <button type="submit" class="btn btn-primary btn-full">{{ mortgage ? 'Save Changes' : 'Add Mortgage' }}</button>
    </form>
</div>

<script>
function mortgageLinkChange(sel) {
    const opt = sel.options[sel.selectedIndex];
    document.getElementById('mortgageLinkAmt').value = opt.dataset.amount || '';
}

function recalcPayment() {
    const p = parseFloat(document.getElementById('principalRemaining').value) || 0;
    const r = parseFloat(document.getElementById('interestRate').value) || 0;
    const totalMonths = parseInt(document.getElementById('termMonths').value) || 0;
    const startDateVal = document.getElementById('startDate').value;

    if (p <= 0 || r <= 0 || totalMonths <= 0) {
        document.getElementById('paymentPreview').style.display = 'none';
        return;
    }

    // Months remaining
    let n = totalMonths;
    if (startDateVal) {
        const start = new Date(startDateVal);
        const now = new Date();
        const elapsed = (now.getFullYear() - start.getFullYear()) * 12 + (now.getMonth() - start.getMonth());
        n = Math.max(1, totalMonths - elapsed);
    }

    const m = r / 100 / 12;
    const payment = p * m / (1 - Math.pow(1 + m, -n));

    const preview = document.getElementById('paymentPreview');
    document.getElementById('paymentPreviewVal').textContent = '£' + payment.toFixed(2) + '/month';
    preview.style.display = 'flex';
}

// Run on page load if editing
document.addEventListener('DOMContentLoaded', recalcPayment);
</script>

{% endblock %}