/*
<div class="col-xs-8">
                    <div class="row row-cols-5">
                        <div class="col-xs-3 col-xl-3" >
                            <img style="width: 17em;" src="https://media.discordapp.net/attachments/976544929566318613/1035250528554319982/pootisd.png">
                        </div>
                        <div class="col-xs-2 col-xl-2">
                            <img style="width: 17em;" src="https://media.discordapp.net/attachments/976544929566318613/1035250528973754428/pyro.png" >
                        </div>
                        <div class="col-xs-2 col-xl-2">
                            <img style="width: 17em;" src="https://media.discordapp.net/attachments/976544929566318613/1035253201563303967/toilet.png" >
                        </div>
                        <div class="col-xs-2 col-xl-2">
                            <img style="width: 17em;" src="https://media.discordapp.net/attachments/976544929566318613/1035250529389002862/engi_n.png" >
                        </div>
                        <div class="col-xs-3 col-xl-3">
                            <img style="width: 17em;" src="https://media.discordapp.net/attachments/976544929566318613/1035250529883918448/mgesold.png" >
                        </div>
                    </div>
                </div>
*/
//https://icon-icons.com
const Keys = { Enter: 13 };
var api_response;
var api_prices;

function Steam3to64(steam3) {
    var SID64_1 = "7656"
    var SID64_S = Number(1197960265728);
    var PatternSteam3ID = /^\[([Ug]):([0-9]):([0-9]+)\]$/;
    var Steam3ID = PatternSteam3ID.exec(steam3);
    var S3ID_3 = Number(Steam3ID[3]);
    var SID64_2 = S3ID_3 + SID64_S;
    return SID64_1+SID64_2;
}

function check_cookie_name(name) {
    var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    if (match && match[2] != "None") { return true; }
    else { return false; }
}

$(async function() {
    $(document).on("keypress", "input", function (e) {
        var code = e.keyCode || e.which;
        if (code === Keys.Enter) {
            e.preventDefault();
            return false;
        }
    });

    FillCharacters();
    FillRules();
    await RequestAPI();

    if(window.location.href.endsWith("#RulesSection")){
        $("#Rules_Button").trigger("click");
    }else if(window.location.href.endsWith("#VIPSection")){
        $("#Tab_VIP_Button").trigger("click");
    }
});

let servers_active = `
<div class="row text-center">
    <div class="col">
        <hr>
        <h6>Где сейчас играют карлики</h6>
    </div>
</div>
`

let servers_inactive = `
<div class="row text-center">
    <div class="col">
        <hr>
        <h6>Пустую без дела</h6>
    </div>
</div>
`

let servers_dead = `
<div class="row text-center">
    <div class="col">
        <hr>
        <h6>Временно отключены</h6>
    </div>
</div>
`

let invalid_captcha = `
<div class="col" id="InvalidCaptcha">
    <br>
    <h1 style="color: red">ДЯДЯ ТЫ ДУРАЧЕК, КАПЧА НЕПРАВИЛЬНАЯ, ЖМИ СНОВА НА КНОПКУ</h1>
</div>
`
// use templates
function generate_server_card_div(data){
    //////////////////////////////////////////
    return `
<div class="col-auto justify-content-center align-self-center" style="padding: 1rem;">
    <div class="card text-right" style="width: 15rem; height: 15rem;">
        <img class="card-img" src="${data.preview}" alt="${data.name}" style="filter: blur(1px); height: 100%;">
        <div class="card-img-overlay" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.7))"><!--background-color: rgba(0, 0, 0, 0.205);-->
            <a href="#" class="stretched-link" ${data.status ? "" : "disabled"} id="ChoiceServerButton_${data.selfname.replaceAll(".","_")}" data-id="${data.selfname.replaceAll(".","_")}"></a>
            <h4 class="card-title" style="color: whitesmoke;">${data.name}</h4>
            <p class="card-text" style="color: whitesmoke; font-family: tf2build; font-size: 3rem; text-align: center;">${data.player_count}/${data.max_players}</p>
            <h4 class="card-title" style="color: whitesmoke; text-align: right;">${human_name_impl(data)}</h4>
        </div>
    </div>
</div>
`
}

function human_name_impl(data){
    let number = Math.abs(data.player_count) % 100;
    let number_post = number % 10;
    if (number > 10 && number < 20) { return data.naming[2]; } 
    if (number_post > 1 && number_post < 5) { return data.naming[1]; }
    if (number_post == 1) { return data.naming[0] }
    return data.naming[2];
}

function bind_ServerAboutClose(){
    $('#Modal_ServerAbout_Close').click(async function (ev) {
        ev.preventDefault();
        $('#Modal_ServerAbout').modal('hide');
    });
}

function bind_ServerAboutReportPlayer_Close(){
    $('#Modal_ServerAboutReportPlayer_Close').click(async function (ev) {
        ev.preventDefault();
        $('#Modal_ServerAboutReportPlayer').modal('hide');
        $('#Modal_ServerAbout').modal('show');
    });

    $("#Modal_ServerAboutReportPlayer_send").click(async function (ev) {
        ev.preventDefault();
        $("#Modal_ServerAboutReportPlayer_error").html("");
        if($('#Modal_ServerAboutReportPlayer_reason').val().length < 32){
            $("#Modal_ServerAboutReportPlayer_error").html("У тебя причина говно, сделай ее более красочной. Опиши подробнее где тебя трогали.");
        } else {
            fetch(`https://tf2.pblr-nyk.pro/api/profile/current/report?steam64=${$('#Modal_ServerAboutReportPlayer_id').text()}&text=${$('#Modal_ServerAboutReportPlayer_reason').val()}`, {headers: {'Cache-Control':'no-cache'}, method:"POST"})
                    .then(res => res.json())
                    .then(res => {
                        if (res > 0) $("#Modal_ServerAboutReportPlayer_error").html("Донос отправлен!");
                        else $("#Modal_ServerAboutReportPlayer_error").html(`Подожди еще ${res*-1} секунд!`);
                    })
            .catch(err => {$("#Modal_ServerAboutReportPlayer_error").html("Ошибка получения");});
        }
        //$("#Modal_ServerAboutReportPlayer_error").html("ЛОХ");
    });
}

function bind_ServerAboutReportPlayerButton(id){
    $(id).click(async function (ev) {
        ev.preventDefault();
        $('#Modal_ServerAbout').modal('hide');
        let data = ev.currentTarget.dataset.id//.replaceAll("_",".").split("|", 2);
        Modal_Fill_Report(data);
        $('#Modal_ServerAboutReportPlayer').modal('show');
    });
}

function Modal_Fill_Report(player_id){
    //$(`#Modal_ServerAboutReportPlayer_name`).html(api_response.servers[srv].players[player_id].name);
    //$(`#Modal_ServerAboutReportPlayer_srv`).html(srv);
    //$(`#Modal_ServerAboutReportPlayer_id`).html(api_response.servers[srv].players[player_id].id);
    $(`#Modal_ServerAboutReportPlayer_id`).html(player_id);
}

function bind_ServerAboutButton(srv_name){
    $(`#ChoiceServerButton_${srv_name.replaceAll(".","_")}`).click(async function (ev) {
        ev.preventDefault();
        let srv = ev.currentTarget.dataset.id.replaceAll("_",".");
        Modal_Fill_Choiced(srv);
        $('#Modal_ServerAbout').modal('show');
    });
}

function Modal_Fill_Choiced(srv){
    $("#Modal_ServerAboutBody").empty();
    $("#Modal_ServerAbout_Label").html(api_response.servers[srv].name);
    let modal_body = `
<div class="row justify-content-center">
    <div class="col text-center">
        <!--<img class="w-100 h-50 rounded-5" src="${api_response.servers[srv].preview}" alt="server preview">-->
        <h6>${api_response.servers[srv].description}</h6>
    </div>
</div>
<hr>
<div class="row justify-content-center" id="Modal_ServerAbout_SelectButtons">`;

    if (api_response.servers[srv].status) {
        modal_body += `
<div class="col">
    <div class="card">
        <img class="card-img" src="site_content/images/logo/terminal.svg" alt="connect">
        <div class="card-img-overlay d-flex flex-column">
            <a href="steam://connect/${api_response.servers[srv].address}" class="stretched-link"></a>
        </div>
    </div>
    <h5 style="text-align:center">Подключиться</h5>
</div>
`;
        if (api_response.servers[srv].workshop.length != 0) {
            modal_body += `
    <div class="col">
        <div class="card">
            <img class="card-img" src="site_content/images/logo/steam.svg" alt="workshop">
            <div class="card-img-overlay d-flex flex-column">
                <a href="${api_response.servers[srv].workshop}" class="stretched-link"></a>
            </div>
        </div>
        <h5 style="text-align:center">Workshop</h5>
    </div>
    `;} else {
            modal_body += `
    <div class="col">
        <div class="card">
            <img class="card-img" src="site_content/images/logo/steam.svg" alt="workshop">
            <div class="card-img-overlay d-flex flex-column">
                <a href="https://tf2.pblr-nyk.pro/tf/maps/${api_response.servers[srv].map}.bsp.bz2" class="stretched-link"></a>
            </div>
        </div>
        <h5 style="text-align:center">Скачать карту</h5>
    </div>`
    }
} else {
    modal_body += `<div class="col"><h5 style="text-align:center">Сервер в отключке...</h5></div>`
}
    modal_body += "</div><hr>";
  
    let allow_report = check_cookie_name("steam64");
    if (api_response.servers[srv].status) {
        if(api_response.servers[srv].player_count > 0) {
            modal_body += `
            <div class="row justify-content-center" id="Modal_ServerAbout_Players_Current">
                <div class="col">
                    <h3 style="text-align:center">Сейчас играет ${api_response.servers[srv].player_count}/${api_response.servers[srv].max_players}</h3>
                </div>
            </div>`;
            modal_body += `
            <div class="row justify-content-center" id="Modal_ServerAbout_Players_list">
                <div class="col">
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">Имя игрока</th>
                                <th scope="col">Очки</th>
                                <th scope="col">Время игры</th>
                                ${allow_report?'<th scope="col">Репорт</th>':''}
                            </tr>
                        </thead>
                        <tbody>`;
            ///////////////////////////////////////////////////////////
            let sorted_players = Object.keys(api_response.servers[srv].players).sort((a, b) => {
                return api_response.servers[srv].players[b].score - api_response.servers[srv].players[a].score;
            });
            for (const player_id in sorted_players) {
                if (api_response.servers[srv].players[sorted_players[player_id]].id == 0) continue;
                let player = api_response.servers[srv].players[sorted_players[player_id]];
                modal_body += `
                <tr>
                    <th scope="row"><a href="${player.steam.community_url}" target="_blank" class="player-in-list">${player.name}</a></th>
                    <td>${player.score ? player.score : 0}</td>
                    <td>${player.duration}</td>
                    ${allow_report?`<td><a href="#" id="Modal_ReportButton_${player.steam.steam64}" data-id="${player.steam.steam64}"><img style="height:1rem" src="site_content/images/logo/report.svg" alt="report"></td>`:''}
                </tr>
                `;
            }
            ///////////////////////////////////////////////////////////
            modal_body += `</tbody>
                    </table>
                </div>
            </div>`
        } else {
            modal_body += `
            <div class="row justify-content-center" id="Modal_ServerAbout_Players_Current">
                <div class="col">
                    <h3 style="text-align:center">Сейчас никто не играет</h3>
                </div>
            </div>`;
        }
}

    $(modal_body).appendTo("#Modal_ServerAboutBody");

    if(allow_report && api_response.servers[srv].status && api_response.servers[srv].player_count > 0) {
        for (const player_id in api_response.servers[srv].players) {
            player = api_response.servers[srv].players[player_id];
            bind_ServerAboutReportPlayerButton(`#Modal_ReportButton_${player.steam.steam64}`);
        }
    }
}

async function RequestAPI() {
    //let api_request_time = (new Date).getTime();
    //, {headers: {'Cache-Control':'no-cache'}}
    let api_request_time = (new Date).getTime();
    await fetch("https://tf2.pblr-nyk.pro/api/stats", {headers: {'Cache-Control':'no-cache'}})
        .then(res => res.json())
        .then(res => {
            api_request_time = (new Date).getTime() - api_request_time
            FillFooter("", api_request_time, "disabled");
            api_response = res;
            FillServices(res);
            // $('#current_players').text(res.statistic.player_now)
            $("#current_players").html(res.statistic.player_now);
            $("#max_per_day").html(res.statistic.player_max);
            $("#servers_works").html(`${res.statistic.working_servers}/${res.statistic.total_servers}`);
            $("#uniq_day_players").html(res.uniq.day);
            $("#uniq_month_players").html(res.uniq.month);
            $("#uniq_year_players").html(res.uniq.year);
            $("#ServersSectionLastUpdate").html(`Информация обновлена: ${UNIX2TIMESTAMP(res.updates.servers)}`);
            $("#AboutSection_discord").html(`${res.discord_users} ГЕЙмеров `);
            $("#AboutSection_vk").html(`${res.vk_users} Участников `);
            $("#AboutSection_BuildDate").html(`${UNIX2TIMESTAMP(parseInt(res.builddate))}`);
            $("#Section_VIP_users").html(`${res.vip_players} карликов уже имеют випку!`);
                        
            let active = false;
            let inactive = false;
            let dead = false;

            //active servers
            let sorted_servers = Object.keys(res.servers).sort((a, b) => {
                return res.servers[b].player_count - res.servers[a].player_count;
            });
            //console.log(sorted_servers);
            for (let sort_id in sorted_servers) {
                let server = sorted_servers[sort_id];
                if (server == `statistic`) {continue;}
                res.servers[server].selfname = server;
                if(res.servers[server].status == true && res.servers[server].player_count > 0) {
                    if(!active) {
                        $(servers_active).appendTo("#servers_list_v2");
                        active = true;
                    }
                }
                else if (res.servers[server].status == true && res.servers[server].player_count == 0) {
                    if(!inactive) {
                        $(servers_inactive).appendTo("#servers_list_v2");
                        inactive = true;
                    }
                }
                $(generate_server_card_div(res.servers[server])).appendTo("#servers_list_v2");
                bind_ServerAboutButton(server);
            }

            for (let sort_id in sorted_servers) {
                let server = sorted_servers[sort_id];
                if (res.servers[server].status == false) {
                    if(!dead) {
                        $(servers_dead).appendTo("#servers_list_v2");
                        dead = true;
                    }
                    $(generate_server_card_div(res.servers[server])).appendTo("#servers_list_v2");
                    bind_ServerAboutButton(server);
                }
            }
            ////////////////
            bind_ServerAboutClose();
            bind_ServerAboutReportPlayer_Close();
        }).catch((err) => {
            console.log(err);
            //FillFooter("", 0, 0);
        });

    await fetch("https://tf2.pblr-nyk.pro/api/external/vip", {headers: {'Cache-Control':'no-cache'}})
        .then(res => res.json())
        .then(res => {
            api_prices = res;
        })

    //FillFooter("", api_request_time, "");
}

function FillFooter(data, api_time, player_api_time){
    const text = `<p class="current-profile-text">{text}</p>`;
    const text_bad = `<p class="current-profile-text current-profile-text-color-alarm">{text}</p>`;
    const text_good = `<p class="current-profile-text current-profile-text-color-normal">{text}</p>`;

    $("#Footer_Text").empty();
    $(text.replace("{text}", `2018-${(new Date()).getFullYear()} | Факты 13 | JS: `)).appendTo("#Footer_Text");
    $(text_good.replace("{text}", `on`)).appendTo("#Footer_Text");

    document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text.replace("{text}", ` | API: `));//${api_time} ms
    if(api_time == 0) {
        document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text_bad.replace("{text}", `not work`));
    } else {
        document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text_good.replace("{text}", `${api_time} ms`));
    }
    /*
    document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text.replace("{text}", ` | Player API: `));
    if(player_api_time == 0) {
        document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text_bad.replace("{text}", `not work`));
    } else {
        document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text_good.replace("{text}", `${player_api_time} ms`));
    }*/
}

function FillServices(data) {
    const ping_time = 90;
    const text = `<p class="current-profile-text" id="{service_id}"></p>`;

    //console.log(`${((new Date()).getTime() / 1000) - data.updates.qiwi_bot}`);
    //console.log(`${((new Date()).getTime() / 1000) - data.updates.steam_bot}`);

    if(data.updates.qiwi_bot && ((new Date()).getTime() / 1000) - data.updates.qiwi_bot < ping_time) {
        document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text.replace("{service_id}","Footer_Services_QIWI"));
    }

    if(data.updates.steam_bot && ((new Date()).getTime() / 1000) - data.updates.steam_bot < ping_time) {
        document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text.replace("{service_id}","Footer_Services_STEAM"));
    }
}

function UNIX2TIMESTAMP(unix) {
    return (new Date((unix + 3600 * 3) * 1000)).toGMTString().replace("GMT", "MSK");
}

function FillCharacters() {
    let CharactersArray = new Array(
        ["site_content/images/characters/pootisd.png","site_content/sounds/pootis.mp3", ""],
        ["site_content/images/characters/pyro.png","site_content/sounds/alertmgs.mp3", ""],
        ["site_content/images/characters/toilet.png","site_content/sounds/puk.mp3", ""],
        ["site_content/images/characters/engi_n.png","site_content/sounds/nigger.mp3", ""],
        ["site_content/images/characters/mgesold.png","site_content/sounds/soldier_laughevil03.mp3", ""]
        );

    let InjectCharacter = ``;
    
    $(`<div class="col-3"></div>`).appendTo("#Main_FunnyСharacters");
    for (const element in CharactersArray) {
        InjectCharacter = `<div class="col"><img class="img-fluid" src="${CharactersArray[element][0]}" onclick="(new Audio('${CharactersArray[element][1]}')).play();"></div>`;
        if(CharactersArray[element][2]){
            $(`<div class="col-5"></div>`).appendTo(`#${CharactersArray[element][2]}`);
            //querySelec
            //document.getElementById(CharactersArray[element][2]).insertAdjacentHTML("beforeend", `<div class="col-5"></div>`);
            document.getElementById(CharactersArray[element][2]).insertAdjacentHTML("beforeend", InjectCharacter);
            document.getElementById(CharactersArray[element][2]).insertAdjacentHTML("beforeend", `<div class="col-5"></div>`);
        }
        document.getElementById("Main_FunnyСharacters").insertAdjacentHTML("beforeend", InjectCharacter);
    }
    document.getElementById("Main_FunnyСharacters").insertAdjacentHTML("beforeend", `<div class="col-3"></div>`);
    
}

function FillRules() {
    const rules = new Array(
        {"name":"Читы", "about":"Бан навсегда сука", "image":"site_content/images/rules/cheats.jpg"},
        {"name":"Реклама серверов", "about":"Кроме мге, бан навсегда сука", "image":"site_content/images/rules/ads.jpg"},
        {"name":"Багоюз", "about":"Пиздец тебе, бан навсегда", "image":"site_content/images/rules/bug_use.jpg"},
        {"name":"Абуз команды !mir", "about":"Блокировка дверей, открытие спавна и т.д", "image":"site_content/images/rules/abuse.jpg"},
        {"name":"Абуз випки на сервере", "about":"Модеры сам решат как и за что", "image":"site_content/images/rules/abuse_vip.jpg"},
        {"name":"Делай короче чё хочешь", "about":":troll_face:", "image":"site_content/images/rules/make_everyone.jpg"}
        )

    let card = ``;

    for(const rule in rules) {
        card = `
        <div class="col-4 pb-4">
            <div class="card" style="height: 18rem; background-image: url('${rules[rule].image}'); background-size: cover;">
                <!--<img class="card-img" src="${rules[rule].image}" alt="читы">-->
                <div class="card-img-overlay d-flex flex-column" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.7));">
                    <div class="mt-auto" style="text-align: right;">
                        <h5 style="color: white;" >${rules[rule].name}</h5>
                        <hr style="color: white;">
                        <p style="font-family: tf2secondary; color: white;">${rules[rule].about}</p>
                    </div>
                </div>
            </div>
        </div>`
        $(card).appendTo("#Rules_List");
    }
}