<script type="text/javascript">
    jQuery(document).ready(function ($) {

        let ws;
        let pingInterval;
        const CONFIG_ID = "{{ config_id }}";

        function sendPing() {
            if (ws && ws.readyState === WebSocket.OPEN) {
                const payload = {
                    type: "antivirus_current_scan",
                    config_id: CONFIG_ID
                };

                ws.send(JSON.stringify(payload));
            }
        }

        function formatDateTime(isoString) {
            const date = new Date(isoString);

            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');

            return `${hours}:${minutes}`;
        }

        function connect() {
            console.log('start');
            ws = new WebSocket("{{ ws_url }}?token={{ access_token }}");

            ws.onopen = function() {
                sendPing();
                pingInterval = setInterval(sendPing, 5000);
            };

            ws.onmessage = function(e) {

                try {
                    const data = JSON.parse(e.data);

                    if (data.type === "error") {
                        ws.close(1000, "Closed by server status");
                        console.log(data.data);
                    }
                    if (data.data.status === "finished") {
                        ws.close(1000, "Process finished");
                        console.log('Process finished');
                    }

                    if (data.type === "antivirus_current_scan") {

                        jQuery('.antivirus-scan__clean .antivirus-scan__count-num').text(data.data.scanned - data.data.infected);
                        jQuery('.antivirus-scan__infected .antivirus-scan__count-num').text(data.data.infected);
                        jQuery('.antivirus-scan__scanned .antivirus-scan__count-num').text(data.data.scanned);
                        jQuery('.antivirus-scan__progress').css("width", data.data.progress + "%");

                        jQuery('#antivirus-start-time').text(formatDateTime(data.data.start_time));
                        $('.antivirus-scan__icon-container').attr('class', function(i, cls) {
                            return cls.replace(/antivirus-scan__icon-container--\S+/g, '');
                        });

                        if(data.data.status === "finished") {
                            if(data.data.infected > 0){
                                jQuery('#antivirus-scan__icon-image').attr('src', '{{ images_path }}icon_shield_fail.svg');
                                jQuery('.antivirus-scan__icon-container').addClass('antivirus-scan__icon-container--infected');
                                jQuery('.antivirus-scan__step-title').text("{{ 'Result'|trans }}");
                                jQuery('.antivirus-scan__step-description').text("{{ 'Infected files found'|trans }}");

                                jQuery('.antivirus-scan__progress').removeClass('antivirus-scan__progress--active').addClass('antivirus-scan__progress--infected');
                            } else {
                                jQuery('#antivirus-scan__icon-image').attr('src', '{{ images_path }}icon_shield_clean.svg');
                                jQuery('.antivirus-scan__icon-container').addClass('antivirus-scan__icon-container--clean');
                                jQuery('.antivirus-scan__step-title').text("{{ 'Result'|trans }}");
                                jQuery('.antivirus-scan__step-description').text("{{ 'Everything is okay'|trans }}");
                                jQuery('.antivirus-scan__progress').removeClass('antivirus-scan__progress--active').addClass('antivirus-scan__progress--clean');
                            }
                            jQuery('.antivirus-finished').removeClass('d-none');
                            jQuery('.antivirus-scanning').addClass('d-none');

                            jQuery('#start_scan').removeClass('wtotem_loader_spinner').attr('disabled', false);
                        } else {
                            jQuery('.antivirus-scan__icon-container').addClass('antivirus-scan__icon-container--default');

                            if(data.data.status === "sync") {
                                jQuery('.antivirus-scan__step-title').text("{{ 'Synchronization'|trans }}");
                                jQuery('.antivirus-scan__step-description').text("{{ 'Count of suspicious files'|trans }}");
                                jQuery('#antivirus-scan__icon-image').attr('src', '{{ images_path }}icon_scan.svg');
                            } else {
                                jQuery('.antivirus-scan__step-title').text("{{ 'Scanning'|trans }}");
                                jQuery('.antivirus-scan__step-description').text("{{ 'Checking suspicious files'|trans }}");
                                jQuery('#antivirus-scan__icon-image').attr('src', '{{ images_path }}icon_search.svg');
                            }

                            jQuery('.antivirus-scanning').removeClass('d-none');
                            jQuery('.antivirus-finished').addClass('d-none');
                        }
                        jQuery('.antivirus-info').removeClass('d-none');
                    }
                } catch(err) {
                    console.log("Error: " + err);
                }
            };

            ws.onclose = function(e) {
                clearInterval(pingInterval);
            };

            ws.onerror = function(err) {
                console.log("Error: " + err);
            };
        }

        connect();

        jQuery('.wtotem_body').on('click', '#start_scan', function (e) {
            let start_scan_btn = jQuery(this);

            start_scan_btn.addClass('wtotem_loader_spinner');
            start_scan_btn.attr('disabled', 'disabled');

            jQuery.post(ajaxurl, {
                action: 'wtotem_ajax',
                ajax_action: 'force_check',
                wtotem_page_nonce: '{{ page_nonce }}',
                service: 'av',
            }, function (data) {
                setTimeout(connect, 60000);
                jQuery('#wtotem_notifications').html(data.notifications);
            });
        });

        $('body').on('click', '#popup_show', function () {
            $('#antivirus_log_sidebar').removeClass('d-none');
            $('body').addClass('lock');
        }).on('click', '.show_log_popup', function (e) {
            let data = jQuery.parseJSON(jQuery(this).attr('data-log'));

            jQuery('#infected_files_popup').html('').addClass('wtotem_loader_spinner');
            jQuery.post(ajaxurl, {
                action: 'wtotem_ajax',
                ajax_action: 'antivirus',
                wtotem_page_nonce: '{{ page_nonce }}',
                av_action: 'get_infected_files',
                session_id: data.id,
            }, function (response) {
                jQuery('#infected_files_popup').html(response.content).removeClass('wtotem_loader_spinner');
            });

            jQuery('#antivirus_log_popup_date').text(data.date);
            jQuery('#antivirus_log_popup_time').text(data.start_time);
            jQuery('#antivirus_log_popup_scanned').text(data.scanned);
            jQuery('#antivirus_log_popup_infected').text(data.infected);


            $('#antivirus_log_popup').removeClass('d-none');
            $('body').addClass('lock');
        });

    });
</script>


<div class="wtotem_container antivirus-info d-none">
    <div class="antivirus-scan" id="av_status_build">
        {% include 'antivirus_scan_status.html.twig' %}
    </div>
</div>

<div class="popup-overlay d-none" id="antivirus_log_popup">
    <div class="popup-content wt_card">
        <div class="antivirus-scan-popup--active">
            <div class="antivirus-log__item antivirus-log__item--no-hover">
                <div class="antivirus-log__info-container">
                    <div class="antivirus-log__icon-container antivirus-log__icon-container--header">
                        <img src="{{ images_path }}icon_lightning.svg">
                    </div>
                    <div class="antovirus-log__item-info">
                        <p class="antivirus-log__item-date--header">
                            <span id="antivirus_log_popup_date"></span> {{ 'at'|trans }} <span id="antivirus_log_popup_time"></span>
                        </p>
                        <p class="antivirus-log__item-status--header">{{ 'Scan history'|trans }}</p>
                    </div>
                </div>
                <button class="antivirus-log__close">
                    <img src="{{ images_path }}close-dark.svg">
                </button>
            </div>
            <div class="antivirus-scan__popup-wrapper">
                <div class="antivirus-scan__details--popup">
                    <div class="antivirus-scan__count antivirus-scan__scanned">
                        <div class="wt-flex-column wt-gap--8">
                            <div class="antivirus-scan__count-num"><span id="antivirus_log_popup_scanned"></span></div>
                            <p class="wt-margin-0">{{ 'Scanned'|trans }}</p>
                        </div>
                    </div>
                    <div class="antivirus-scan__count">
                        <div class="wt-flex-column wt-gap--8" id="antivirus-scan_popup_status_class">
                            <div class="antivirus-scan__count-num"><span id="antivirus_log_popup_infected"></span></div>
                            <p class="wt-margin-0"><span id="antivirus_log_popup_status">{{ 'Infected'|trans }}</span></p>
                        </div>
                    </div>
                </div>
                <div>
                    <p class="antivirus-scan__popup-title">{{ 'Infected Files'|trans }}</p>
                    <div class="antivirus-scan__popup-content" id="infected_files_popup"></div>
                </div>
            </div>
        </div>
    </div>
</div>