/** @odoo-module **/

import { _t } from "@web/core/l10n/translation";
import { patch } from "@web/core/utils/patch";
import { rpc } from "@web/core/network/rpc";
import { loadJS } from "@web/core/assets";

import { PaymentForm } from "@payment/interactions/payment_form";

const CLOVER_SDK_URL_TEST = "https://checkout.sandbox.dev.clover.com/sdk.js";
const CLOVER_SDK_URL_PROD = "https://checkout.clover.com/sdk.js";

patch(PaymentForm.prototype, {

    setup() {
        super.setup();
        this.cloverFormData = {};
        this.cloverInstance = null;
        this.cloverElements = null;
        this.cloverMountedElements = {};
        this._detectedCardType = "other";
        this._selectedCardType = "other";
    },

    // #=== DOM MANIPULATION ===#

    async _prepareInlineForm(providerId, providerCode, paymentOptionId, paymentMethodCode, flow) {
        if (providerCode !== "clover") {
            await super._prepareInlineForm(...arguments);
            return;
        }

        if (flow === "token") {
            return;
        }

        this._setPaymentFlow("direct");

        const radio = document.querySelector('input[name="o_payment_radio"]:checked');
        const inlineForm = this._getInlineForm(radio);
        const cloverContainer = inlineForm.querySelector('[name="o_clover_payment_container"]');

        if (!cloverContainer) {
            return;
        }

        const rawValues = cloverContainer.dataset["cloverInlineFormValues"];
        if (rawValues) {
            this.cloverFormData = JSON.parse(rawValues);
        }

        this._setupTerminalToggle(cloverContainer);
        this._setupSurcharge(cloverContainer);

        try {
            await this._loadCloverSDK(this.cloverFormData.is_test);
            this._initialiseCloverIframe(cloverContainer);
        } catch (error) {
            this._showCloverSdkError(
                cloverContainer,
                error?.message || _t("Could not initialise the Clover payment form."),
            );
        }
    },

    async _loadCloverSDK(isTest) {
        const url = isTest ? CLOVER_SDK_URL_TEST : CLOVER_SDK_URL_PROD;
        await loadJS(url);
        if (typeof window.Clover === "undefined") {
            throw new Error(_t("Clover SDK failed to load."));
        }
    },

    _initialiseCloverIframe(container) {
        const data = this.cloverFormData;
        const apiAccessKey = data.public_key;
        const merchantId = data.merchant_id;

        if (!apiAccessKey) {
            this._showCloverSdkError(
                container,
                _t("This Clover provider has no Public API Key (PAKMS) configured. Add it on the payment provider record before customers can pay online."),
            );
            return;
        }

        const cloverConfig = { merchantId };
        if (data.locale) {
            cloverConfig.locale = data.locale;
        }
        // eslint-disable-next-line no-undef
        this.cloverInstance = new Clover(apiAccessKey, cloverConfig);
        this.cloverElements = this.cloverInstance.elements();

        const styles = {
            input: {
                fontSize: "16px",
                fontFamily: "inherit",
                color: "#212529",
                padding: "10px 12px",
            },
            ".invalid": { color: "#dc3545" },
        };

        const mounts = [
            ["CARD_NUMBER", "#clover-card-number", "#clover-card-number-errors"],
            ["CARD_DATE", "#clover-card-date", "#clover-card-date-errors"],
            ["CARD_CVV", "#clover-card-cvv", "#clover-card-cvv-errors"],
            ["CARD_POSTAL_CODE", "#clover-card-postal-code", "#clover-card-postal-code-errors"],
        ];

        for (const [type, mountSelector, errorSelector] of mounts) {
            const element = this.cloverElements.create(type, styles);
            element.mount(mountSelector);
            element.addEventListener("change", (event) => {
                const errorEl = container.querySelector(errorSelector);
                if (!errorEl) return;
                if (event && event[type] && event[type].error) {
                    errorEl.textContent = event[type].error;
                } else {
                    errorEl.textContent = "";
                }
                if (type === "CARD_NUMBER" && event && event.CARD_NUMBER) {
                    const brand = (event.CARD_NUMBER.brand || "").toLowerCase();
                    if (brand) {
                        const mapped = this._mapCloverBrandToOdoo(brand);
                        if (mapped !== this._detectedCardType) {
                            this._detectedCardType = mapped;
                            if (mapped !== "other") {
                                this._selectedCardType = mapped;
                            }
                            this._updateSurchargeDisplay(container);
                        }
                    }
                }
            });
            this.cloverMountedElements[type] = element;
        }
    },

    _mapCloverBrandToOdoo(brand) {
        const map = {
            visa: "visa",
            mastercard: "mastercard",
            mc: "mastercard",
            amex: "amex",
            "american_express": "amex",
            discover: "other",
            "diners_club": "other",
            jcb: "other",
            unionpay: "other",
            unknown: "other",
        };
        return map[brand] || "other";
    },

    _showCloverSdkError(container, message) {
        const banner = container.querySelector("#clover-sdk-error");
        const messageEl = container.querySelector("#clover-sdk-error-message");
        if (banner) banner.classList.remove("d-none");
        if (messageEl) messageEl.textContent = message;
    },

    _setupSurcharge(container) {
        const surchargeConfig = this.cloverFormData.surcharge;
        if (!surchargeConfig || !surchargeConfig.enabled) return;

        const cardTypeSection = container.querySelector(".o_clover_card_type_section");
        if (cardTypeSection) {
            cardTypeSection.style.display = "block";
        }

        const cardTypeRadios = container.querySelectorAll('input[name="clover_card_type"]');
        cardTypeRadios.forEach((radio) => {
            radio.addEventListener("change", () => {
                this._selectedCardType = radio.value;
                this._updateSurchargeDisplay(container);
            });
        });

        this._updateSurchargeDisplay(container);
    },

    _updateSurchargeDisplay(container) {
        const surchargeConfig = this.cloverFormData.surcharge;
        if (!surchargeConfig || !surchargeConfig.enabled) return;

        const cardType = this._detectedCardType !== "other"
            ? this._detectedCardType
            : this._selectedCardType;

        const rate = surchargeConfig[cardType] || surchargeConfig["other"] || 0;
        const minorAmount = this.cloverFormData.minor_amount || 0;

        const baseAmount = minorAmount / 100;
        const feeAmount = Math.round(baseAmount * rate) / 100;

        const rateEl = container.querySelector("#clover_surcharge_rate");
        const amountEl = container.querySelector("#clover_surcharge_amount");
        const noticeEl = container.querySelector(".o_clover_surcharge_notice");

        if (rateEl) rateEl.textContent = rate.toFixed(2);
        if (amountEl) amountEl.textContent = `$${feeAmount.toFixed(2)}`;
        if (noticeEl) {
            noticeEl.style.display = rate > 0 ? "block" : "none";
        }

        const radioToCheck = container.querySelector(
            `input[name="clover_card_type"][value="${cardType}"]`,
        );
        if (radioToCheck && !radioToCheck.checked) {
            radioToCheck.checked = true;
        }
    },

    _setupTerminalToggle(container) {
        const terminalCheckbox = container.querySelector("#clover_use_terminal");
        const terminalSelect = container.querySelector("#clover_terminal_select_wrapper");
        const iframeForm = container.querySelector(".o_clover_iframe_form");

        if (!terminalCheckbox) {
            return;
        }

        terminalCheckbox.addEventListener("change", () => {
            if (terminalCheckbox.checked) {
                if (terminalSelect) terminalSelect.style.display = "block";
                if (iframeForm) iframeForm.style.display = "none";
                this._loadTerminals(container);
            } else {
                if (terminalSelect) terminalSelect.style.display = "none";
                if (iframeForm) iframeForm.style.display = "block";
            }
        });
    },

    async _loadTerminals(container) {
        const selectEl = container.querySelector("#clover_terminal_select");
        if (!selectEl || selectEl.options.length > 1) {
            return;
        }
        try {
            const terminals = await rpc("/payment/clover/terminals", {
                provider_id: this.cloverFormData.provider_id,
            });
            selectEl.innerHTML = "";
            if (terminals && terminals.length > 0) {
                terminals.forEach((t) => {
                    const option = document.createElement("option");
                    option.value = t.id;
                    option.textContent = `${t.name} (${t.status})`;
                    selectEl.appendChild(option);
                });
            } else {
                const option = document.createElement("option");
                option.value = "";
                option.textContent = _t("No terminals available");
                selectEl.appendChild(option);
            }
        } catch {
            const option = document.createElement("option");
            option.value = "";
            option.textContent = _t("Failed to load terminals");
            selectEl.appendChild(option);
        }
    },

    // #=== PAYMENT FLOW ===#

    async _initiatePaymentFlow(providerCode, paymentOptionId, paymentMethodCode, flow) {
        if (providerCode !== "clover" || flow === "token") {
            await super._initiatePaymentFlow(...arguments);
            return;
        }

        const radio = document.querySelector('input[name="o_payment_radio"]:checked');
        const inlineForm = this._getInlineForm(radio);
        const useTerminal = inlineForm.querySelector("#clover_use_terminal");

        if (useTerminal && useTerminal.checked) {
            const terminalSelect = inlineForm.querySelector("#clover_terminal_select");
            if (!terminalSelect || !terminalSelect.value) {
                this._displayErrorDialog(
                    _t("Terminal Required"),
                    _t("Please select a terminal device."),
                );
                this._enableButton();
                return;
            }
        } else if (!this.cloverInstance) {
            this._displayErrorDialog(
                _t("Payment form not ready"),
                _t("The Clover payment form has not finished loading. Please wait a moment and try again."),
            );
            this._enableButton();
            return;
        }

        await super._initiatePaymentFlow(...arguments);
    },

    async _processDirectFlow(providerCode, paymentOptionId, paymentMethodCode, processingValues) {
        if (providerCode !== "clover") {
            await super._processDirectFlow(...arguments);
            return;
        }

        const radio = document.querySelector('input[name="o_payment_radio"]:checked');
        const inlineForm = this._getInlineForm(radio);
        const useTerminal = inlineForm.querySelector("#clover_use_terminal");

        if (useTerminal && useTerminal.checked) {
            await this._processTerminalPayment(processingValues, inlineForm);
        } else {
            await this._processCardPayment(processingValues, inlineForm);
        }
    },

    _getSelectedCardType(inlineForm) {
        const checked = inlineForm.querySelector('input[name="clover_card_type"]:checked');
        return checked ? checked.value : "other";
    },

    async _processCardPayment(processingValues, inlineForm) {
        if (!this.cloverInstance) {
            this._displayErrorDialog(
                _t("Payment form error"),
                _t("Clover SDK has not been initialised. Please reload the page."),
            );
            this._enableButton();
            return;
        }

        const cardType = this._detectedCardType !== "other"
            ? this._detectedCardType
            : this._getSelectedCardType(inlineForm);

        let result;
        try {
            result = await this.cloverInstance.createToken();
        } catch (error) {
            this._displayErrorDialog(
                _t("Card validation error"),
                error?.message || _t("Could not validate the card details."),
            );
            this._enableButton();
            return;
        }

        if (!result || result.errors) {
            const messages = [];
            if (result && result.errors) {
                Object.values(result.errors).forEach((value) => {
                    if (typeof value === "string") {
                        messages.push(value);
                    } else if (value && value.error) {
                        messages.push(value.error);
                    }
                });
            }
            this._displayErrorDialog(
                _t("Invalid Card Details"),
                messages.join(" ") || _t("Please check the card details and try again."),
            );
            this._enableButton();
            return;
        }

        const token = result.token;
        if (!token) {
            this._displayErrorDialog(
                _t("Tokenization Failed"),
                _t("Clover did not return a card token. Please try again."),
            );
            this._enableButton();
            return;
        }

        try {
            const response = await rpc("/payment/clover/process_card", {
                reference: processingValues.reference,
                card_token: token,
                card_type: cardType,
            });

            if (response.error) {
                this._displayErrorDialog(_t("Payment Failed"), response.error);
                this._enableButton();
                return;
            }

            window.location.href = processingValues.return_url;
        } catch (error) {
            this._displayErrorDialog(
                _t("Payment Processing Error"),
                error.message || _t("An unexpected error occurred."),
            );
            this._enableButton();
        }
    },

    async _processTerminalPayment(processingValues, inlineForm) {
        const terminalId = inlineForm.querySelector("#clover_terminal_select").value;
        const cardType = this._getSelectedCardType(inlineForm);
        try {
            const result = await rpc("/payment/clover/send_to_terminal", {
                reference: processingValues.reference,
                terminal_id: parseInt(terminalId),
                card_type: cardType,
            });
            if (result.error) {
                this._displayErrorDialog(_t("Terminal Payment Failed"), result.error);
                this._enableButton();
                return;
            }
            this._showTerminalWaitingScreen(processingValues, terminalId);
        } catch (error) {
            this._displayErrorDialog(
                _t("Terminal Error"),
                error.message || _t("Failed to send payment to terminal."),
            );
            this._enableButton();
        }
    },

    _showTerminalWaitingScreen(processingValues, terminalId) {
        const container = document.querySelector(".o_clover_payment_form");
        if (container) {
            container.innerHTML = `
                <div class="text-center p-4">
                    <div class="spinner-border text-primary mb-3" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <h5>${_t("Waiting for terminal payment...")}</h5>
                    <p class="text-muted">
                        ${_t("Please complete the payment on the terminal device.")}
                    </p>
                    <p class="text-muted small" id="clover_terminal_status">
                        ${_t("Checking status...")}
                    </p>
                </div>
            `;
        }
        this._pollTerminalStatus(processingValues, terminalId);
    },

    async _pollTerminalStatus(processingValues, terminalId, attempt = 0) {
        const maxAttempts = 60;
        const pollInterval = 3000;
        if (attempt >= maxAttempts) {
            this._displayErrorDialog(
                _t("Timeout"),
                _t("Terminal payment timed out. Please check the device."),
            );
            this._enableButton();
            return;
        }
        try {
            const result = await rpc("/payment/clover/terminal_status", {
                reference: processingValues.reference,
                terminal_id: parseInt(terminalId),
            });
            const statusEl = document.getElementById("clover_terminal_status");
            if (
                result.status === "CLOSED" || result.status === "CAPTURED"
                || result.status === "AUTH" || result.status === "AUTHORIZED"
            ) {
                if (statusEl) {
                    statusEl.textContent = _t("Payment completed! Redirecting...");
                }
                window.location.href = processingValues.return_url;
                return;
            }
            if (
                result.status === "DECLINED" || result.status === "FAILED"
                || result.status === "FAIL"
            ) {
                this._displayErrorDialog(
                    _t("Payment Declined"),
                    _t("The payment was declined at the terminal."),
                );
                this._enableButton();
                return;
            }
            if (statusEl) {
                statusEl.textContent = _t("Status: ") + (result.status || _t("Pending"));
            }
            setTimeout(
                () => this._pollTerminalStatus(processingValues, terminalId, attempt + 1),
                pollInterval,
            );
        } catch {
            setTimeout(
                () => this._pollTerminalStatus(processingValues, terminalId, attempt + 1),
                pollInterval,
            );
        }
    },

});