$(async function() {
    RequestAPI();
    CheckProfile();
});

let servers_active = `
<div class="col text-center rounded border border-dark gy-3" style="background-color: #E2EFDE;">
    <h2>Где сейчас играют карлики</h2>
</div>
`

let servers_inactive = `
<div class="col text-center rounded border border-dark gy-3" style="background-color: #E2EFDE;">
    <h2>Пустуют без дела</h2>
</div>
`

let servers_dead = `
<div class="col text-center rounded border border-dark gy-3" style="background-color: #E2EFDE;">
    <h2>Временно выключены</h2>
</div>
`

let invalid_captcha = `
<div class="col" id="InvalidCaptcha">
    <br>
    <h1 style="color: red">ДЯДЯ ТЫ ДУРАЧЕК, КАПЧА НЕПРАВИЛЬНАЯ, ЖМИ СНОВА НА КНОПКУ</h1>
</div>
`

function generate_working_server_div(data) {
    let workshop = ``
    let direct_url = ``
    let connect_url = ``
    /////////////////////
    let w_disabled = ``
    let d_disabled = ``
    let c_disabled = ``

    if (data.status == true) {
        if ("workshop" in data && data.workshop != "") {
            workshop = data.workshop
        } else {
            w_disabled = `disabled`
        }
        /////////////////////////////
        if ("direct_url" in data && data.direct_url != "") {
            direct_url = data.direct_url
        } else {
            d_disabled = `disabled`
        }
        /////////////////////////////
        if ("address" in data && data.address != "") {   
            connect_url = data.address
        } else {
            c_disabled = `disabled`
        }
    } else {
        w_disabled = `disabled`
        d_disabled = `disabled`
        c_disabled = `disabled`
    }

    workshop = `
<div class="col border" style="background-color: #d86800">
    <a class="btn btn-link btn-lg ${w_disabled}" target="_blank" role="button" href="${data.workshop}" style="font-family: tf2build;">Workshop</a>
</div>
`
    direct_url = `
<div class="col border" style="background-color: #d86800">
    <a class="btn btn-link btn-lg ${d_disabled}" target="_blank" role="button" href="${data.direct_url}" style="font-family: tf2build;">Скачать карту</a>
</div>
`
    connect_url = `
<div class="col border" style="background-color: #d86800">
    <a class="btn btn-link btn-lg ${c_disabled}" role="button" href="steam://${data.address}" style="font-family: tf2build;">Подключиться</a>
</div>
`

    return `
    <div class="col text-center border gy-3 rounded">
    <div class="row align-items-center" style="background-color: ${data.color};">
        <div class="col align-self-center p-4" style="background-size: cover; background-image: url('${data.preview}');">
            <div class="row justify-content-md-center">
                <div class="col" style="background-color:rgba(255, 255, 255, 0.5); background-size: 100%;">
                    <h1>${data.name}</h1>
                    <h4>${data.player_count}/${data.max_players} ${data.human_name}</h4>
                </div>
            </div>
        </div>
        <div class="col row-cols-1 p-2" style="background-color: ${data.color};">
            ${connect_url}
            ${workshop}
            ${direct_url}
        </div>
    </div>
</div>
`;
}

async function RequestAPI() {
    //, {headers: {'Cache-Control':'no-cache'}}
    await fetch("https://tf2.pblr-nyk.pro/api/stats", {headers: {'Cache-Control':'no-cache'}})
        .then(res => res.json())
        .then(res => {
            console.log(res.servers.statistic);
            document.getElementById("current_players").innerHTML = res.servers.statistic.player_now;
            document.getElementById("max_per_day").innerHTML = res.servers.statistic.player_max;
            document.getElementById("servers_works").innerHTML = res.servers.statistic.working_servers + '/' + res.servers.statistic.total_servers;
            document.getElementById("uniq_day_players").innerHTML = res.uniq.day;
            document.getElementById("uniq_month_players").innerHTML = res.uniq.month;
            document.getElementById("uniq_year_players").innerHTML = res.uniq.year;
            
            let active = false;
            let inactive = false;
            let dead = false;

            let insert_type = "beforeend";
            //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;}
                if(res.servers[server].status == true && res.servers[server].player_count > 0) {
                    if(!active) {
                        document.getElementById("servers_list").insertAdjacentHTML(insert_type,servers_active)
                        active = true;
                    }
                    document.getElementById("servers_list").insertAdjacentHTML(insert_type,generate_working_server_div(res.servers[server]));
                }
            }

            //inactive server
            for (const server in res.servers) {
                if (server == `statistic`) {continue;}
                if(res.servers[server].status == true && res.servers[server].player_count == 0) {
                    if(!inactive) {
                        document.getElementById("servers_list").insertAdjacentHTML(insert_type,servers_inactive)
                        inactive = true;
                    }
                    document.getElementById("servers_list").insertAdjacentHTML(insert_type,generate_working_server_div(res.servers[server]));
                }
            }

            //dead server
            for (const server in res.servers) {
                if (server == `statistic`) {continue;}
                if(res.servers[server].status == false) {
                    if(!dead) {
                        document.getElementById("servers_list").insertAdjacentHTML(insert_type,servers_dead)
                        dead = true;
                    }
                    document.getElementById("servers_list").insertAdjacentHTML(insert_type,generate_working_server_div(res.servers[server]));
                }
            }
        });
}

function UNIX2TIMESTAMP(unix) {
    return new Date(unix * 1000);
}