/* =============================== */
/* DemoBank Transfer Module         */
/* =============================== */

document.addEventListener("DOMContentLoaded", function () {

    const form = document.querySelector("#transferForm");
    const transferType = document.querySelector("select[name='transfer_type']");
    const intlFields = document.getElementById("intlFields");
    const amountInput = document.querySelector("input[name='amount']");
    const submitBtn = form ? form.querySelector("button[type='submit']") : null;

    // ===============================
    // TRANSFER TYPE SWITCH
    // ===============================
    function handleTransferType() {
        if (!transferType || !intlFields) return;

        if (transferType.value === "international") {
            intlFields.style.display = "block";
        } else {
            intlFields.style.display = "none";
        }
    }

    if (transferType) {
        transferType.addEventListener("change", handleTransferType);
        handleTransferType();
    }

    // ===============================
    // GET FEE (FIXED RULE)
    // Local = 3, International = 10
    // ===============================
    function getFee(type) {
        if (type === "international") return 10;
        return 3;
    }

    // ===============================
    // VALIDATE AMOUNT + BALANCE
    // ===============================
    function validateTransfer(balance) {

        if (!transferType || !amountInput) return true;

        const type = transferType.value;
        const amount = parseFloat(amountInput.value || 0);
        const fee = getFee(type);

        if (amount <= 0) {
            alert("Enter a valid amount.");
            return false;
        }

        const total = amount + fee;

        if (total > balance) {
            alert(`Insufficient balance. Total required: ${total} (including fee).`);
            return false;
        }

        return true;
    }

    // ===============================
    // FORM SUBMIT HANDLER
    // ===============================
    if (form) {

        form.addEventListener("submit", function (e) {

            // Balance injected from backend (VERY IMPORTANT)
            const balance = parseFloat(form.dataset.balance || 0);

            // prevent double submit
            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.innerText = "Processing...";
            }

            const isValid = validateTransfer(balance);

            if (!isValid) {
                e.preventDefault();

                if (submitBtn) {
                    submitBtn.disabled = false;
                    submitBtn.innerText = "Submit Transfer";
                }

                return false;
            }

        });
    }

    // ===============================
    // LIVE FEE DISPLAY (UX FEATURE)
    // ===============================
    function showLiveFee() {

        const feeBox = document.querySelector("#fee_display");
        if (!feeBox || !transferType) return;

        const fee = getFee(transferType.value);

        feeBox.innerHTML = `
            <strong>Transfer Fee:</strong> ${fee}
        `;
    }

    if (transferType) {
        transferType.addEventListener("change", showLiveFee);
        showLiveFee();
    }

    // ===============================
    // CONFIRM TRANSFER BEFORE SUBMIT
    // ===============================
    window.confirmTransfer = function () {

        const type = transferType ? transferType.value : "local";
        const amount = amountInput ? amountInput.value : 0;
        const fee = getFee(type);

        return confirm(
            `Confirm ${type.toUpperCase()} transfer:\nAmount: ${amount}\nFee: ${fee}\nProceed?`
        );
    };

});