class Mission {
    constructor(args = null) {
        this.args = args;
        this.config = {
            products: {
                tv: { dn: 'Smart TV\'s', bp: 100, gpd: 10 },
                ha: { dn: 'Home Appliances', bp: 150, gpd: 12 },
                as: { dn: 'Audio Systems', bp: 100, gpd: 50 },
                lp: { dn: 'Laptops', bp: 150, gpd: 100 },
                sp: { dn: 'SmartPhones', bp: 150, gpd: 20 }
            }
        }
        this.create();
        this.spinner = `<i class="fas fa-spinner fa-pulse ms-3"></i>`;
        self.onnetrestoreEvents = self.onnetrestoreEvents ?? [];
        this.cpdet = {}
    }

    init(c) {
        try {
            this.config = { ...this.config, ...c }
        } catch {
            console.log('Invalid initialization object');
        }
        this.start();
    }

    sharePdct() {
        Client.share({ title: mss.pdct?.pname ?? currPdct.dn, text: `@${CALC.parseMoney(currPdct.bp, true)}/-`, url: `${AC.env}${location.pathname.slice(1)}?venture=[0]` });
        sessionStorage.exportImage = mss.pdct?.imgs[0] ?? '';
    }

    create() {
        let x = `
        <header class="theme2 masta sticky-top d-flex align-items-center w3-padding-16 p-2">
            <button type="button" onclick="history.back()" class="icon fs-5" util="chevronLeft">
                <i class="fas fa-chevron-left fa-2x"></i>
            </button>
            <div class="flex-fill text-center">
                <h1 id="ct" class="text-capitalize text-truncate mb-0"></h1>
            </div>
            <button type="button" class="icon fs-5" onclick="mss.sharePdct()" util="menuBars">
                <i class="fas fa-bars fa-2x"></i>
            </button>
        </header>
        <main class="flex-fill rft position-relative"></main>
        <footer id="Amaka">
            <div class="d-grid m-1">
                <button id="bidder" type="button" class="btn d-flex btn-lg w3-paint align-items-center" onclick="self.mss.bid(this)">
                    <span class="flex-fill text-light">Place Bid</span>
                </button>
            </div>
            <div id="checkout" class="fixed-bottom rounded-top"></div>
        </footer>`;
        $('body').addClass('d-flex flex-column h-100').append(x);
    }

    #checkStockSize(dot) {
        let eop = new Date(), cpd = Date.now(), tdiff;
        eop.setFullYear(eop.getFullYear() + 1);
        eop.setMonth(0);
        eop.setDate(1);
        tdiff = eop.getTime() - cpd;
        let estss = Math.ceil(tdiff / (1000 * 60 * 60 * 24)) * dot;
        $('#estss').text(estss);
        return estss;
    }

    start() {
        self.currPdct = this.config.products[this.config.cp];
        let view = `
        <section class="d-grid gap-2 m-2">
            <div class="align-self-center px-0" style="height:max(40vh,320px)">
                <div class="cadid bg-light-subtle text-center rounded p-2 mb-2">
                    <h3 id="pdctName" class="fw-light small mb-0">${currPdct.dn}</h3>
                    <small><s id="pdctMprice"></s></small>
                </div>
                <div id="pdctImgs" class="card container bg-light text-dark rounded cadid h-75 overflow-hidden">
                    <div class="position-relative h-100">
                        <div class="w3-display-topleft">
                            <div class="d-flex position-relative rounded-3">
                                <div class="small text-center px-2" style="z-index:2">
                                    <span class="">Countdown:</span>
                                    <span class="text-danger" id="timetodraw"></span>
                                </div>
                            </div>
                        </div>
                        <div class="w3-display-topright small pe-2">
                            <div class="small">Bid price: <span class="text-success fw-bold">Ksh ${currPdct.bp}</span></div>
                        </div>
                        <div class="w3-display-middle mh-100" style="z-index:1">
                            <img id="pdctImg" class="img-fluid mh-100" height="120" src="assets/1024.png" onerror="this.src='assets/1024.png'" alt="-">
                        </div>
                        <div class="w3-display-bottommiddle p-2" style="z-index:2">
                            <div class="text-center"><span class="w3-small">${currPdct.gpd} units available</span></div>
                        </div>
                    </div>
                    <div class="card-footer d-flex justify-content-around small" style="z-index:2">
                        <button type="button" class="icon" util="">Bids</button>
                        <button type="button" class="icon" util="">Comments</button>
                        <button type="button" class="icon" util="">Shares</button>
                    </div>
                </div>
            </div>
            <div id="khamara" class="card flex-fill overflow-auto rounded-3 mt-2">
                <header class="d-flex card-header align-items-center sticky-top gap-3" style="top:0!important">
                    <h3 class="fs-5 flex-fill m-0">Latest Bids</h3>
                    <button type="button" class="icon noe"><i class="fas fa-check-circle w3-text-blue"></i></button>
                </header>
                <section id="hedexArea" class="overflow-auto">
                    <div class="w3-padding-24 text-center">Be the first to place your bid here</div>
                </section>
            </div>
        </section>`;
        $('main').html(view).find('.hedex').children()
        $('header.masta').find('#ct').text(currPdct.dn);
        this.checkDrawTime('#timetodraw,.timetodraw');
        this.#fetchProduct();
        this.#checkStockSize(currPdct.gpd);
        this.syncBids();
    }

    #fetchProduct() {
        $.ajax({
            url: 'promotions/res/.incs/pdts/',
            data: { fetch: this.config.cp },
            dataType: 'json',
            success: pdct => {
                this.#parseProduct(pdct)
            },
            error: err => {
                if (isNetError(err)) return;
                showToast(err.statusText);
            }
        })
    }

    #parseProduct(pdct) {
        mss.pdct = pdct;
        $('#pdctName').text(pdct.pname);
        $('#pdctMprice').text(pdct.price).closest('.card').on('click', function () {
            mss.viewPdct(pdct);
        });
        $('#pdctImg')[0].src = (pdct.imgs[0]);
        mss.cpdet = pdct;
    }

    viewPdct(pdct) {
        let m = `
        <section>
            <div class="text-center">
                <img src="${pdct.imgs[0]}" class="img-fluid">
            </div>
            <h3 class="fs-4">${pdct.pname}</h3>
            <hr>
            <div>Remaining: <span class="fw-bold">${this.#checkStockSize(currPdct.gpd)}units</span></div>
            <div>Today's offer: <span class="fw-bold">${currPdct.gpd} units</span></div>
        </section>`;
        Action.confirm({
            title: "Product Details",
            html: m,
            positive: "Place Bid",
            negative: "Back"
        }).then(res => {
            if (res) return mss.bid('#bidder');
        })
    }

    async #createAccRef(amount) {
        try {
            return new Promise((resolve, reject) => {
                let r;
                try { r = Operator.getSP().venture; } catch (e) { e }
                if (Number(r) < 0) resolve(r);
                $.post('promotions/.inc/api/createTxnRef', {
                    uid: localStorage.user,
                    amount: amount,
                    strict: false
                }).then(res => resolve(res)).fail(err => reject(err.statusText))
            }).catch(err => showToast(err.message ?? err))
        } catch (error) {
            console.log(error.message);
        }
    }

    #createTimestamp() {
        let x = new Date();
        x.setMinutes(x.getMinutes() - x.getTimezoneOffset());
        return x.toJSON().replace(/[^0-9]/g, '').slice(0, -3);
    }

    async bid(t) {
        if (mss.lock) return ActionCentre('*Please confirm the previous transaction to proceed on another bid', 15000, 'Error');
        let pdct = this.config.products[this.config.cp];
        await this.getPhoneNumber().then(async pn => {
            let Timestamp = this.#createTimestamp(), Amount = pdct.bp, AccountReference;
            localStorage.setItem('user', pn);
            await this.#createAccRef(pdct.bp).then(acref => {
                if (!acref) return showToast('Unable to create Account Reference');
                if (isNaN(acref)) return showToast('Invalid Account reference: ' + acref);
                AccountReference = acref;
            });
            if (!AccountReference) return;
            Swal.fire({
                html: `<div class="lh-lg">A payment request has been sent to your phone number, please complete the payment to place your bid.</div>`
            }).then(confirmed => {
                if (!confirmed) return;
                const pmReq = {
                    AccountReference: AccountReference, Amount: Amount, TransactionDesc: pdct.dn, PhoneNumber: pn, Timestamp: Timestamp
                }
                Trigger.reqDeposit(pmReq).then(async res => {
                    if (res && res.status == 200) {
                        mss.lock = true;
                        mss.submitBid(AccountReference);
                        let bidData = {
                            ref: JSON.stringify({ FirstName: localStorage.getItem('user'), MSISDN: pn }),
                            etime: Timestamp,
                            id: AccountReference
                        };
                        mss.parseonSyncBids([bidData], true);
                        setTimeout(() => {
                            mss.lock = false;
                            showToast('Bid placed successfully ✅');
                        }, 5000);
                    } else {
                        showToast(res?.message ?? 'Payment request failed, please try again later');
                    }
                }).catch(err => {
                    mss.lock = false;
                    if (isNetError(err)) {
                        showToast('Network error: Please check your internet connection');
                        return;
                    }
                    showToast(err.message ?? err);
                });
            })
        })
    }

    checkDrawTime(plc) {
        function time() {
            let ctime = new Date(), ctimeOffsetBalancer = ctime.getTimezoneOffset() / 60 + 3;
            ctime.setHours(ctime.getHours() + ctimeOffsetBalancer)
            let dtime = new Date(ctime);
            dtime.setDate(dtime.getDate() + 1);
            dtime.setHours(0);
            dtime.setMinutes(0);
            dtime.setSeconds(0);
            let dtt = dtime.getTime(), ctt = ctime.getTime(), diffTime = dtt - ctt, hoursin = Math.floor(diffTime / (1000 * 60 * 60)), minutesin = Math.floor((diffTime % (1000 * 60 * 60)) / (1000 * 60)), secsin = Math.floor((diffTime % (1000 * 60)) / 1000);
            return `${hoursin}H: ${minutesin}M: ${secsin}S`;
        }

        if (document.querySelector(plc)) return setInterval(() => {
            $(plc).html(time());
        }, 1000);
        return time();
    }

    submitBid(bid) {
        try {
            $.ajax({
                url: 'promotions/res/.incs/stream/',
                type: 'POST',
                data: { bid: bid },
                success: res => {
                    try {
                        if (res && !isNaN(res)) return showToast('Entered to draw successfully ✅');
                        throw JSON.parse(res);
                    } catch {
                        showToast(res);
                    }
                },
                error: err => {
                    if (isNetError(err)) return setTimeout(() => mss.submitBid(bid), 5000)
                }
            })
        } catch (error) {
            console.log(error.message ?? error)
        }
    }

    parseonSyncBids(bids, instate = false) {
        try {
            if (!bids.length) return;
            let bidView = ``;
            if (instate)
                bidView += `<ul id="hedex" class="fa-ul w3-ul">`;
            bids.forEach(bid => {
                let ref = JSON.parse(bid.ref);
                if ($('#hedex').children('#' + bid.id).length)
                    return;
                bidView += `
                <li id="${bid.id}" class="d-flex align-items-center" title="${bid.etime}">
                    <span class="fa-li"><i class="fas fa-check-square"></i></span>
                    <span class="flex-fill">${ref.FirstName} <code>${ref.MSISDN}</code></span>
                    <span class="w3-small border rounded p-1">#${bid.id}</span>
                </li>`;
                mss.pass = bid.id;
            });
            if (!bidView) return;
            if (instate) {
                bidView += `</ul>`;
                $('#hedexArea').html(bidView);
            } else {
                $('#hedex').append(bidView);
            }
            $('#khamara')[0].scrollIntoView();
        } catch (error) {
            console.log(error.message);
        }
    }

    syncBids() {
        try {
            if (!mss.bidStream) mss.bidStream = setInterval(mss.syncBids, 10000);
            if (!document.hasFocus()) return console.log('Stream paused');
            if (mss.passcode && mss.passcode != 1) return;
            const url = `promotions/res/.incs/stream/`;

            $.ajax({
                url: url,
                type: 'POST',
                data: { x: mss.config.cp, pass: mss.pass ?? '' },
                beforeSend: e => {
                    mss.passcode = performance.now();
                },
                complete: e => {
                    mss.passcode = 1;
                },
                dataType: 'json',
                success: data => {
                    return mss.parseonSyncBids(data, mss.pass ? false : true);
                },
                error: err => {
                    mss.passcode = 1;
                    if (isNetError(err))
                        return self.onnetrestoreEvents[0] = () => {
                            mss.syncBids();
                        }
                }
            });

        } catch (error) {
            console.log(error);
        }
    }
}

self.mss = new Mission();