(function () {
    const INSERT_POSITION = 'beforeend';
    const HIDDEN_CLASS = 'hidden';

    const insertHTML = (html, target, position = INSERT_POSITION) => {
        target.insertAdjacentHTML(position, html);
    };

    const padNumber = (value) => String(value).length === 1 ? `0${value}` : value;

    class FullscreenBanner {
        #originalHTML = null;
        #bannerElement = null;
        #countdownTime = null;
        #bannerContainer = null;
        #closeButton = null;
        #contentContainer = null;
        #contentFrame = null;
        #bannerItem = null;
        #countdownElement = null;
        #timerInterval = null;
        #bannerId = null;
        #imageElements = null;
        #storage = localStorage;

        constructor(bannerContent) {
            this.#originalHTML = bannerContent.outerHTML;
            this.#bannerContainer = document.querySelector('.gc-main-content');
        }

        get templateStyle() {
            return `
                <style>
                    @keyframes animationButton {
                        from { left: -50%; }
                        to { left: 100%; }
                    }

                    .ip-banner-full {
                        width: 100% !important;
                        left: 0 !important;
                        top: 0 !important;
                        bottom: 0 !important;
                        right: 0 !important;
                        z-index: 10002 !important;
                        position: fixed !important;
                        background: rgba(0, 0, 0, .6);
                        border-radius: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .ip-banner-full__container {
                        position: relative;
                    }

                    .ip-banner-full__close {
                        padding: 0 !important;
                        margin: 0 !important;
                        font-size: 0 !important;
                        line-height: 0 !important;
                        border: none !important;
                        outline: none !important;
                        background: url('//fs22.getcourse.ru/fileservice/file/download/a/298472/sc/142/h/3fc021137b5c4f3ac5e4623dd91888a5.svg') no-repeat;
                        background-size: contain;
                        background-position: center;
                        display: block;
                        width: 40px;
                        height: 40px;
                        position: absolute;
                        top: -20px;
                        right: -20px;
                        cursor: pointer;
                        z-index: 100;
                    }

                    .gc-user-user .ip-banner-full {
                        left: 0 !important;
                        top: 0 !important;
                        bottom: 0 !important;
                        right: 0 !important;
                    }

                    @media screen and (max-width: 990px) {
                        .gc-user-user .ip-banner-full,
                        .ip-banner-full {
                            width: 100% !important;
                            margin: 0 auto !important;
                        }

                        .ip-banner-full__close {
                            top: -10px !important;
                            right: 0px !important;
                            width: 20px;
                            height: 20px;
                        }
                    }
                </style>
            `;
        }

        get template() {
            return `
                <section class="ip-banner-full">
                    <div class="ip-banner-full__container">
                        <div class="ip-banner-full__content">
                            ${this.#originalHTML}
                        </div>
                        <button class="ip-banner-full__close">Close banner</button>
                    </div>
                </section>
            `;
        }

        get element() {
            if (!this.#bannerElement) {
                this.#bannerElement = this.template;
            }
            return this.#bannerElement;
        }

        init() {
            // Insert banner styles and HTML
            insertHTML(this.templateStyle, this.#bannerContainer);
            insertHTML(this.element, this.#bannerContainer);

            // Show first banner item
            this.#showFirstBannerItem();

            // Get banner elements
            this.#bannerContainer = document.querySelector('.ip-banner-full');
            this.#closeButton = this.#bannerContainer.querySelector('.ip-banner-full__close');
            this.#contentContainer = this.#bannerContainer.querySelector('.ip-banner-full__content');
            this.#contentFrame = this.#contentContainer.querySelector('.lite-page.block-set');

            // Modify content frame classes
            this.#contentFrame.classList.add('ip-banner-full__content-frame');
            this.#contentFrame.classList.remove('lite-page');
            this.#contentFrame.classList.remove('block-set');

            // Get banner item and images
            this.#bannerItem = this.#bannerContainer.querySelector('.ip-banner-full-item');
            this.#imageElements = this.#bannerContainer.querySelectorAll('.image-box img');

            if (this.#bannerItem) {
                this.#countdownElement = this.#bannerItem.querySelector('.countdown-el');
                this.#countdownTime = this.#countdownElement.dataset.time;
                this.#bannerId = this.#bannerItem.className.split('ip-banner-full-item-')[1];

                if (this.#countdownElement) {
                    this.#startCountdown(this.#countdownTime);
                }
            } else {
                this.#bannerContainer.classList.add(HIDDEN_CLASS);
            }

            // Load lazy images
            if (this.#imageElements.length) {
                for (const image of this.#imageElements) {
                    image.src = image.dataset.src;
                }
            }

            // Add event listeners
            this.#closeButton.addEventListener('click', this.#handleCloseClick);
            this.#bannerContainer.addEventListener('click', this.#handleBackgroundClick);
            document.addEventListener('keydown', this.#handleKeyPress);

            // Check banner state from localStorage
            this.#checkBannerState();
        }

        #loadScript(src) {
            const script = document.createElement('script');
            script.setAttribute('src', src);
            document.body.appendChild(script);
        }

        #showFirstBannerItem() {
            const bannerItems = document.querySelectorAll('.ip-banner-full-item');

            if (bannerItems.length) {
                for (const item of bannerItems) {
                    item.style = 'display: none !important';
                }
                bannerItems[0].style = 'display: block !important';
            }
        }

        #startCountdown(endTime) {
            const [date, time] = endTime.split(' ');
            const endDateTime = moment(`${date}T${time}:00Z`);
            const now = moment(new Date());
            let timeLeft = endDateTime.valueOf() - now.valueOf();
            const intervalMs = 1000;
            const countdownDisplay = document.querySelector(`.ip-banner-full-item-${this.#bannerId} .countdown-el`);

            setInterval(() => {
                timeLeft = moment.duration(timeLeft - intervalMs, 'milliseconds');

                countdownDisplay.textContent = timeLeft - intervalMs > 0
                    ? `${padNumber(timeLeft.days())}Д : ${padNumber(timeLeft.hours())}Ч : ${padNumber(timeLeft.minutes())}М : ${padNumber(timeLeft.seconds())}С`
                    : '00Д : 00Ч : 00М : 00С';
            }, intervalMs);
        }

        #saveBannerState = () => {
            const bannerId = this.#bannerId;

            if (bannerId >= 1) {
                const currentTime = moment(new Date());
                const storedState = this.#storage.getItem(`ipBannerFullStateId-${bannerId}`);
                let clickCount;

                if (storedState) {
                    clickCount = JSON.parse(storedState).count;
                }

                this.#storage.setItem(
                    `ipBannerFullStateId-${bannerId}`,
                    JSON.stringify({
                        id: bannerId,
                        count: clickCount ? ++clickCount : 1,
                        timeCloseClick: currentTime
                    })
                );
            }
        };

        #handleCloseClick = () => {
            this.#bannerContainer.classList.add(HIDDEN_CLASS);
            this.#saveBannerState();
            document.removeEventListener('keydown', this.#handleKeyPress);
        };

        #handleBackgroundClick = (event) => {
            if (event.target.classList.contains('ip-banner-full')) {
                this.#bannerContainer.classList.add(HIDDEN_CLASS);
                this.#saveBannerState();
                document.removeEventListener('keydown', this.#handleKeyPress);
            }
        };

        #handleKeyPress = (event) => {
            if (event.key === 'Escape') {
                this.#bannerContainer.classList.add(HIDDEN_CLASS);
                this.#saveBannerState();
                document.removeEventListener('keydown', this.#handleKeyPress);
            }
        };

        #checkBannerState() {
            const storedState = this.#storage.getItem(`ipBannerFullStateId-${this.#bannerId}`);
            console.log(`ipBannerFullStateId-${this.#bannerId}`);

            if (storedState) {
                const parsedState = JSON.parse(storedState);
                const bannerId = parsedState.id;
                const clickCount = parsedState.count;
                const sixHoursInMs = 21600000; // 6 hours

                if (moment(new Date()).valueOf() - moment(parsedState.timeCloseClick).valueOf() >= sixHoursInMs && clickCount < 1) {
                    console.log('count < 1');
                } else {
                    document.querySelector(`.ip-banner-full-item-${bannerId}`).classList.add(HIDDEN_CLASS);

                    if (document.querySelectorAll('.ip-banner-full-item')[0].classList.contains('hidden')) {
                        this.#bannerContainer.classList.add(HIDDEN_CLASS);
                    }
                    console.log('count > 1');
                }
            }
        }
    }

    // Check if current page should show banner
    const shouldShowBanner = () => {
        const currentPath = location.pathname;
        const allowedPaths = [
            '/teach/control/stream',
            '/pl/teach/control/lesson',
            '/sales/control',
            '/profile',
            '/src-main',
            '/src-library/cases',
            '/cst-banner-manipulator'
        ];

        return allowedPaths.some(path => currentPath.indexOf(path) !== -1);
    };

    const bannerDeleted = localStorage.getItem('DeleteCSTBanner');
    const isShow = shouldShowBanner();

    if (isShow) {
        fetch('/cst-banner-full')
            .then(response => response.text())
            .then(html => {
                return new DOMParser()
                    .parseFromString(html, 'text/html')
                    .querySelector('.lite-page.block-set');
            })
            .then(bannerContent => {
                if (isShow && !bannerDeleted) {
                    new FullscreenBanner(bannerContent).init();
                }
            })
            .catch(error => console.log('Failed to fetch page: ', error));
    }
})();