{% extends 'base.html' %}
{% load humanize %}

{% block title %}Edit Loan - Haven Grazuri Investment Limited{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <!-- Display Messages -->
    {% if messages %}
    <div class="mb-6">
        {% for message in messages %}
        <div class="rounded-md p-4 {% if message.tags == 'error' %}bg-red-50 text-red-800{% elif message.tags == 'success' %}bg-green-50 text-green-800{% elif message.tags == 'warning' %}bg-yellow-50 text-yellow-800{% else %}bg-blue-50 text-blue-800{% endif %}">
            <div class="flex">
                <div class="flex-shrink-0">
                    {% if message.tags == 'error' %}
                    <span>❌</span>
                    {% elif message.tags == 'success' %}
                    <span>✅</span>
                    {% elif message.tags == 'warning' %}
                    <span>⚠️</span>
                    {% else %}
                    <span>ℹ️</span>
                    {% endif %}
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium">{{ message }}</p>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
    
    <!-- Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-semibold text-gray-900">Edit Loan</h1>
                <p class="mt-2 text-sm text-gray-700">
                    Modify loan details for {{ loan.loan_number }}
                </p>
            </div>
            <div class="flex gap-3">
                <a href="{% url 'loans:loan_detail' pk=loan.pk %}"
                    class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                    <span>←</span>
                    Back to Loan
                </a>
            </div>
        </div>
    </div>

    <!-- Warning Notice -->
    <div class="mb-6 rounded-md bg-yellow-50 p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <span>⚠️</span>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-yellow-800">
                    Important Notice
                </h3>
                <div class="mt-2 text-sm text-yellow-700">
                    <p>
                        Editing the <strong>Principal Amount</strong> directly changes what the customer owes — <code>Total Amount = Principal Amount</code>.
                        Editing <strong>Interest</strong> or <strong>Processing Fee</strong> is for <em>internal accounting records only</em> and will <strong>not</strong> change the customer's balance.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Current Loan Info -->
    <div class="mb-6 overflow-hidden rounded-lg bg-white shadow">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Current Loan Information</h3>
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
                <div>
                    <dt class="text-sm font-medium text-gray-500">Borrower</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ loan.borrower.get_full_name }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Loan Number</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ loan.loan_number }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Status</dt>
                    <dd class="mt-1">
                        <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 
                            {% if loan.status == 'active' %}bg-green-100 text-green-800
                            {% elif loan.status == 'paid' %}bg-blue-100 text-blue-800
                            {% elif loan.status == 'defaulted' %}bg-red-100 text-red-800
                            {% elif loan.status == 'written_off' %}bg-gray-100 text-gray-800
                            {% elif loan.status == 'rolled_over' %}bg-green-100 text-green-800
                            {% endif %}">
                            {{ loan.get_status_display }}
                        </span>
                    </dd>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Form -->
    <div class="overflow-hidden rounded-lg bg-white shadow">
        <form method="post" class="space-y-6 px-4 py-5 sm:p-6">
            {% csrf_token %}

            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <!-- Principal Amount (editable — changing this also changes what the customer owes) -->
                <div>
                    <label for="principal_amount" class="block text-sm font-medium text-gray-700">
                        Principal Amount (KES)
                    </label>
                    <div class="mt-1">
                        <input type="number" name="principal_amount" id="principal_amount" step="0.01" min="0"
                            value="{{ loan.principal_amount }}" required
                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6">
                    </div>
                    <p class="mt-1 text-xs text-gray-500">
                        This is the amount the customer must repay. Changing it updates the total balance directly.
                    </p>
                </div>

                <!-- Interest Amount (accounting only) -->
                <div>
                    <label for="interest_amount" class="block text-sm font-medium text-gray-700">
                        Interest Amount (KES) — <span class="text-blue-600 font-normal">Accounting Record Only</span>
                    </label>
                    <div class="mt-1 relative">
                        <input type="number" name="interest_amount" id="interest_amount" step="0.01" min="0"
                            value="{{ loan.interest_amount }}" required
                            class="block w-full rounded-md border-0 py-1.5 pr-24 text-gray-900 shadow-sm ring-1 ring-inset ring-blue-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm sm:leading-6">
                        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                            <span id="interest_pct_badge"
                                class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-semibold text-blue-800">
                                {{ loan.get_effective_interest_rate_total }}% total
                            </span>
                        </div>
                    </div>
                    <p class="mt-1 text-xs text-blue-600">
                        ℹ️ Type any amount — the badge updates to show what % of principal that is.
                        <span id="interest_rate_breakdown" class="text-gray-500">
                            ({{ loan.get_effective_interest_rate }}%/month × {{ loan.duration_days }} days)
                        </span>
                    </p>
                </div>

                <!-- Processing Fee (accounting only) -->
                <div>
                    <label for="processing_fee" class="block text-sm font-medium text-gray-700">
                        Processing Fee (KES) — <span class="text-blue-600 font-normal">Accounting Record Only</span>
                    </label>
                    <div class="mt-1 relative">
                        <input type="number" name="processing_fee" id="processing_fee" step="0.01" min="0"
                            value="{{ loan.processing_fee }}" required
                            class="block w-full rounded-md border-0 py-1.5 pr-20 text-gray-900 shadow-sm ring-1 ring-inset ring-blue-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm sm:leading-6">
                        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                            <span id="fee_pct_badge"
                                class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-semibold text-blue-800">
                                {{ loan.get_effective_processing_fee_rate }}%
                            </span>
                        </div>
                    </div>
                    <p class="mt-1 text-xs text-blue-600">
                        ℹ️ Type any amount — badge shows the % of principal.
                    </p>
                </div>

                <!-- Duration -->
                <div>
                    <label for="duration_days" class="block text-sm font-medium text-gray-700">
                        Duration (Days)
                    </label>
                    <div class="mt-1">
                        <input type="number" name="duration_days" id="duration_days" min="1"
                            value="{{ loan.duration_days }}" required
                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6">
                    </div>
                    <p class="mt-1 text-xs text-gray-500">Current: {{ loan.duration_days }} days — any positive number is accepted</p>
                </div>

                <!-- Repayment Method -->
                <div>
                    <label for="repayment_method" class="block text-sm font-medium text-gray-700">
                        Repayment Method
                    </label>
                    <div class="mt-1">
                        <select name="repayment_method" id="repayment_method"
                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6">
                            {% for value, label in repayment_method_choices %}
                            <option value="{{ value }}" {% if loan.repayment_method == value %}selected{% endif %}>
                                {% if value == 'monthly' %}📅 {{ label }} — Regular monthly payments
                                {% elif value == 'weekly' %}⏰ {{ label }} — Weekly installments
                                {% else %}🗓️ {{ label }} — Daily repayments
                                {% endif %}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <p class="mt-1 text-xs text-gray-500">Current: {{ loan.repayment_method|capfirst }}</p>
                </div>

                <!-- Disbursement Date -->
                <div>
                    <label for="disbursement_date" class="block text-sm font-medium text-gray-700">
                        Disbursement Date
                    </label>
                    <div class="mt-1">
                        <input type="date" name="disbursement_date" id="disbursement_date"
                            value="{{ loan.disbursement_date|date:'Y-m-d' }}"
                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6">
                    </div>
                    <p class="mt-1 text-xs text-gray-500">Current: {{ loan.disbursement_date|date:"Y-m-d" }}</p>
                </div>

                <!-- Due Date -->
                <div>
                    <label for="due_date" class="block text-sm font-medium text-gray-700">
                        Due Date
                    </label>
                    <div class="mt-1">
                        <input type="date" name="due_date" id="due_date"
                            value="{{ loan.due_date|date:'Y-m-d' }}"
                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6">
                    </div>
                    <p class="mt-1 text-xs text-gray-500">Current: {{ loan.due_date|date:"Y-m-d" }}</p>
                </div>

                <!-- Status Dropdown -->
                <div class="sm:col-span-2">
                    <label for="status" class="block text-sm font-medium text-gray-700">
                        Loan Status
                    </label>
                    <div class="mt-1">
                        <select name="status" id="status"
                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6">
                            {% for value, label in status_choices %}
                            <option value="{{ value }}" {% if loan.status == value %}selected{% endif %}>
                                {{ label }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <p class="mt-1 text-xs text-gray-500">
                        Current: {{ loan.get_status_display }}
                        <br>
                        <span class="text-yellow-600">⚠️ Status transitions are validated. Not all transitions are allowed.</span>
                    </p>
                </div>

                <!-- Calculated Fields (Read-only display) -->
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700">
                        Balance Summary
                    </label>
                    <div class="mt-1 space-y-1 p-3 bg-gray-50 rounded-md">
                        <p class="text-sm text-gray-600">Total Amount (= Principal): <strong>KES {{ loan.total_amount|floatformat:2 }}</strong></p>
                        <p class="text-sm text-gray-600">Amount Paid: KES {{ loan.amount_paid|floatformat:2 }}</p>
                        <p class="text-sm text-gray-600">Outstanding Balance: KES {{ loan.outstanding_amount|floatformat:2 }}</p>
                        <p class="text-sm text-gray-600">Total Penalties: KES {{ loan.total_penalties|floatformat:2 }}</p>
                        <p class="text-xs text-blue-600 mt-2">ℹ️ Interest ({{ loan.interest_amount|floatformat:2 }}) and Processing Fee ({{ loan.processing_fee|floatformat:2 }}) are internal accounting records and do not add to the balance.</p>
                    </div>
                </div>
            </div>

            <!-- Repayment Impact Warning -->
            {% if loan.repayments.exists %}
            <div class="rounded-md bg-red-50 p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <span>⚠️</span>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-red-800">
                            Repayment Impact
                        </h3>
                        <div class="mt-2 text-sm text-red-700">
                            <p>This loan has {{ loan.repayments.count }} existing repayment(s). Changing the loan amount
                                or interest rate may affect the outstanding balance calculations.</p>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Action Buttons -->
            <div class="flex justify-end space-x-3 pt-6 border-t border-gray-200">
                <p id="calc_note" class="flex-1 text-xs text-green-700 self-center"></p>
                <a href="{% url 'loans:loan_detail' pk=loan.pk %}"
                    class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                    Cancel
                </a>
                <button type="submit"
                    class="rounded-md bg-primary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                    <span>💾</span>
                    Update Loan
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const principalInput  = document.getElementById('principal_amount');
        const durationInput   = document.getElementById('duration_days');
        const interestInput   = document.getElementById('interest_amount');
        const feeInput        = document.getElementById('processing_fee');

        const interestBadge   = document.getElementById('interest_pct_badge');
        const interestBreak   = document.getElementById('interest_rate_breakdown');
        const feeBadge        = document.getElementById('fee_pct_badge');
        const calcNote        = document.getElementById('calc_note');

        // Product default rate (for auto-fill when principal/duration change)
        const PRODUCT_RATE    = {{ loan.application.loan_product.interest_rate }};
        const PRODUCT_FEE     = {{ loan.application.loan_product.processing_fee }};
        const IS_GRAZURI      = {{ loan.application.loan_product.is_grazuri_product|yesno:"true,false" }};

        function fmt(n) {
            return n.toLocaleString('en-KE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        }

        // ── Recalculate interest badge from whatever is in the interest field ──
        function updateInterestBadge() {
            const principal = parseFloat(principalInput.value) || 0;
            const duration  = parseInt(durationInput.value)    || 1;
            const interest  = parseFloat(interestInput.value)  || 0;
            const fee       = parseFloat(feeInput.value)       || 0;

            if (principal <= 0) return;

            // Total % = interest / principal × 100
            const totalPct   = (interest / principal * 100);
            // Monthly % = totalPct / months
            const months     = Math.max(1, duration / 30);
            const monthlyPct = totalPct / months;

            if (interestBadge) {
                interestBadge.textContent = totalPct.toFixed(2) + '% total';
            }
            if (interestBreak) {
                interestBreak.textContent =
                    '(' + monthlyPct.toFixed(2) + '%/month × ' + duration + ' days)';
            }

            // Fee badge
            const feePct = (fee / principal * 100);
            if (feeBadge) feeBadge.textContent = feePct.toFixed(2) + '%';

            if (calcNote) {
                calcNote.textContent =
                    'Interest: KES ' + fmt(interest) +
                    ' = ' + totalPct.toFixed(2) + '% of principal' +
                    ' (' + monthlyPct.toFixed(2) + '%/month)' +
                    '   |   Fee: KES ' + fmt(fee) +
                    ' = ' + feePct.toFixed(2) + '% of principal';
            }
        }

        // ── When principal or duration changes, auto-fill interest from product rate ──
        function refillFromRate() {
            const principal = parseFloat(principalInput.value) || 0;
            const duration  = parseInt(durationInput.value)    || 1;
            if (principal <= 0 || duration <= 0) return;

            let newInterest;
            if (IS_GRAZURI) {
                newInterest = principal * (PRODUCT_RATE / 100);
            } else {
                const months = Math.max(1, duration / 30);
                newInterest = principal * (PRODUCT_RATE / 100) * months;
            }
            const newFee = principal * (PRODUCT_FEE / 100);

            interestInput.value = newInterest.toFixed(2);
            feeInput.value      = newFee.toFixed(2);

            updateInterestBadge();
        }

        // Interest or fee typed manually → just update badges, don't overwrite the amount
        interestInput.addEventListener('input', updateInterestBadge);
        feeInput.addEventListener('input',      updateInterestBadge);

        // Principal or duration changed → recalculate interest amount from product rate
        principalInput.addEventListener('input', refillFromRate);
        durationInput.addEventListener('input',  refillFromRate);

        // Run once on load so badges are correct from the start
        updateInterestBadge();
    });
</script>
{% endblock %}