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

<div class="page-header">
    <div>
        <h1 class="page-title">Edit Debt</h1>
        <p class="page-sub">{{ debt.label }}</p>
    </div>
    <a href="{{ path('app_debts_index') }}" class="btn btn-ghost">← Back</a>
</div>

<div class="form-card">
    <form method="post" action="{{ path('app_debts_edit', {id: debt.id}) }}" class="notion-form">

        <div class="form-group">
            <label class="form-label">Debt type</label>
            <div class="type-radio-group">
                <label class="type-radio-option">
                    <input type="radio" name="type" value="loan" {{ debt.type == 'loan' ? 'checked' : '' }}>
                    <span class="type-radio-btn">🏦 Loan</span>
                </label>
                <label class="type-radio-option">
                    <input type="radio" name="type" value="credit_card" {{ debt.type == 'credit_card' ? 'checked' : '' }}>
                    <span class="type-radio-btn">💳 Credit Card</span>
                </label>
                <label class="type-radio-option">
                    <input type="radio" name="type" value="bnpl" {{ debt.type == 'bnpl' ? 'checked' : '' }}>
                    <span class="type-radio-btn">🛍️ Buy Now Pay Later</span>
                </label>
            </div>
        </div>

        <div class="form-group">
            <label class="form-label">Label</label>
            <input type="text" name="label" class="form-input" value="{{ debt.label }}" required autofocus>
        </div>

        <div class="form-group">
            <label class="form-label">Creditor <span class="form-optional">(optional)</span></label>
            <input type="text" name="creditor" class="form-input" value="{{ debt.creditor }}">
        </div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Total amount (£)</label>
                <input type="number" name="total_amount" step="0.01" min="0" class="form-input" value="{{ debt.totalAmount }}" required>
            </div>
            <div class="form-group">
                <label class="form-label">Remaining amount (£)</label>
                <input type="number" name="remaining_amount" step="0.01" min="0" class="form-input" value="{{ debt.remainingAmount }}" required>
            </div>
        </div>

        {# Credit card only: credit limit for utilization display #}
        <div class="form-group" id="creditLimitGroup" style="display:{{ debt.type == 'credit_card' ? 'block' : 'none' }}">
            <label class="form-label">Credit limit (£) <span class="form-optional">(shows utilization % on the debt card)</span></label>
            <input type="number" name="credit_limit" step="0.01" min="0" class="form-input" placeholder="e.g. 3000.00" value="{{ debt.creditLimit }}">
        </div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Interest rate % <span class="form-optional">(optional)</span></label>
                <input type="number" name="interest_rate" step="0.01" min="0" class="form-input" value="{{ debt.interestRate }}">
            </div>
            <div class="form-group">
                <label class="form-label">Monthly payment (£) <span class="form-optional">(optional)</span></label>
                <input type="number" name="monthly_payment" step="0.01" min="0" class="form-input" value="{{ debt.monthlyPayment }}">
            </div>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Settlement date <span class="form-optional">(optional)</span></label>
                <input type="date" name="due_date" class="form-input" value="{{ debt.dueDate ? debt.dueDate|date('Y-m-d') : '' }}">
            </div>
            <div class="form-group form-toggle">
                <label class="toggle-label">
                    <input type="checkbox" name="is_personal" value="1" class="toggle-input" {{ debt.isPersonal ? 'checked' : '' }}>
                    <span class="toggle-switch"></span>
                    <span>🔒 Personal (visible only to me)</span>
                </label>
            </div>
        </div>

        {% if recurringExpenses is not empty %}
        <div class="form-group">
            <label class="form-label">Link to recurring bill <span class="form-optional">(auto-reduces balance on Monzo sync)</span></label>
            <select name="linked_expense_description" class="form-input" id="debtLinkSelect" onchange="updateDebtLinkAmount(this)">
                <option value="">— None —</option>
                {% for exp in recurringExpenses %}
                <option value="{{ exp.description }}"
                        data-amount="{{ exp.amount }}"
                        {{ debt.linkedExpenseDescription == exp.description and debt.linkedExpenseAmount == exp.amount ? 'selected' : '' }}>
                    {{ exp.description }} (£{{ exp.amount }})
                </option>
                {% endfor %}
            </select>
            <input type="hidden" name="linked_expense_amount" id="debtLinkAmount" value="{{ debt.linkedExpenseAmount }}">
        </div>
        {% endif %}

        <button type="submit" class="btn btn-primary btn-full">Save Changes</button>
    </form>
</div>

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

document.querySelectorAll('input[name="type"]').forEach(radio => {
    radio.addEventListener('change', () => {
        const isCc = document.querySelector('input[name="type"]:checked')?.value === 'credit_card';
        document.getElementById('creditLimitGroup').style.display = isCc ? '' : 'none';
    });
});
</script>

{% endblock %}