<%- await include('parts/header.ejs', locals) %>

<style>
    /* Discord Live Event stuff */
    .event-time {
        background-color: rgba(0, 0, 0, 0.075);
        padding: 0px 6px;
        border-radius: 4px;
    }
    .event-footer {
        font-weight: 700;
        vertical-align: text-bottom;
    }
    .alert-title-icon {
        vertical-align: sub;
        fill: currentColor
    }

    .alert-success.event-live-glow {
        animation: alertGlow 1s infinite alternate;
    }
    @keyframes alertGlow {
        from {
            box-shadow: 0 0 8px 0px rgb(34, 128, 25);
        }
        to {
            box-shadow: 0 0 8px 4px rgb(34, 128, 25);
        }
    }

    /* Chart stuff */
    #d3-container {
        height: 500px;
        margin: auto;
        overflow: hidden;
    }
    #d3-container svg {
        height: 500px;
        width: 100%;
        margin: auto;
        overflow: hidden;
    }
    #x-axis path{
        stroke: none;
        fill: none;
    }
    #tickBucketsAxis path,
    #tickBucketsAxis line {
        stroke: none;
        fill: none;
    }
    .axis {
        color: dimgrey;
    }
    .axisTitle {
        color: dimgrey;
        font-size: 16px;
        font-weight: 500;
        margin: 2px calc(45px + 10px) 0px calc(27px + 10px);
        line-height: 1;
    }
    .axisTitle .tickTimeLabel{
        min-width: 2em;
        height: 18px;
        border: dimgrey 2px solid;
        background: rgb(35,23,27);
        /* background: linear-gradient(90deg, rgba(35,23,27,1) 10%, rgba(45,161,243,1) 35%, rgba(69,246,139,1) 65%, rgba(224,69,19,1) 90%); */
        background: linear-gradient(90deg, #482475 10%, #2f6c8e 35%, #2fb47c 65%, #bddf26 90%);
    }
    .axisTitle .clientsLabel{
        min-width: 2em;
        height: 18px;
        width: 6px;
        border: dimgrey 2px solid;
        background: rgb(204, 203, 203);
    }
    .axisTitle .labelText {
        
        margin-left: 0.2rem;
        margin-right: 1.2rem;
    }
    #chartThreadSelectBtn{
        padding: .1rem .4rem;
        font-size: .7rem;
    }
    .axisTitle .threadSelectDropdown{
        margin: 0px; position: absolute;
        inset: 0px auto auto 0px;
        transform: translate(0px, 26px);
        min-width: unset;
    }
    #d3-container-message {
        font-size: 2.25em;
        margin-top: 2em;
    }

    /* Other stuff */
    #status-card{
        font-size: 1.15rem;
        font-weight: 500;
        line-height: 2;
    }

    .dashboard-chart {
        width: 100% !important; 
    }
</style>

<!-- Title & outdated message: -->

<% if (discordEvent) { %>
    <br>
    <div class="row justify-content-md-center">
        <div class="col-md-6 text-center">
            <div class="alert <%= (discordEvent.isLive ? 'alert-success border-success' : 'alert-warning border-warning') %> event-live-glow" role="alert">
                <h5 style="margin-bottom: 0px;">
                    <svg class="alert-title-icon" width="22" height="22">
                        <use href="img/coreui_icons.svg#discord-event"></use>
                    </svg>
                    <%= (discordEvent.isLive ? 'The Discord Live Event started' : 'A Discord Live Event will start in') %>:
                    <span class="event-time" title="<%= (new Date(discordEvent.timestamp)).toString() %>"><%= discordEvent.time %></span>
                </h5>
                <i><%= discordEvent.description %></i>
                <div class="event-footer">
                    Join now:
                    <a href="<%= discordEvent.joinLink %>" target="_blank" >
                        <img src="<%= discordEvent.imgSrc %>"></img>
                    </a>
                </div>
            </div>
        </div>
    </div>
<% } %>

<!-- Chart stuff -->
<div class="row justify-content-center">
    <div class="dashboard-chart">
        <div class="card">
            <div class="card-body p-1">
                <div class="text-center axisTitle d-flex">
                    <div class="mt-1x">
                        <span class="badge clientsLabel">&nbsp;</span>
                        <span class="labelText">Players</span>
                        <span class="badge tickTimeLabel">&nbsp;</span>
                        <span class="labelText">Tick Time (at bottom is better)</span>
                    </div>

                    <div class="btn-group ml-auto">
                        <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" 
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" id="chartThreadSelectBtn">svMain</button>
                        <div class="dropdown-menu threadSelectDropdown bg-secondary" data-popper-placement="bottom-start">
                            <button class="dropdown-item bg-secondary text-dark" id="chartThreadSelectBtn-svMain">svMain</button>
                            <button class="dropdown-item bg-secondary text-dark" id="chartThreadSelectBtn-svSync">svSync</button>
                            <button class="dropdown-item bg-secondary text-dark" id="chartThreadSelectBtn-svNetwork">svNetwork</button>
                        </div>
                    </div>
                </div>
                
                <div id="d3-container">
                    <div class="text-center text-muted p-4" id="d3-container-message">loading chart...</div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Benchmark, update, pre-release messages -->
<div class="row justify-content-md-center">
    <div class="col-md-6 text-center">
        <div id="tsMessage" class="d-none">
            🏆 With <span id="tsMedianPlayerCount">?</span> median players, your server may be in the worldwide Top 1000 servers. <br>
            Join <strong><a href="https://discord.gg/qmMq79D59T" target="_blank">discord.gg/txAdmin</a></strong> and use the <code>/server</code> command to check the rank see if you are eligible for the <i>TOP SERVER</i> role (Top 500 only).
        </div>
        <% if (txAdminVersion.includes('-')) { %>
            <span class="text-danger font-weight-bold">
                You are using a pre-release version of txAdmin destined for developers and beta testers only! <br>
                Your server stability might be impacted by this.
            </span>
        <% } %>
    </div>
</div>


<%- await include('parts/footer.ejs', locals) %>

<script src="https://d3js.org/d3.v6.min.js"></script>
<script type="module">
    import { drawHeatmap } from "<%= basePath %>js/txadmin/chart.js?txVer=<%= txAdminVersion %>";

    //Elements & vars
    let perfData;
    const chartThreadSelectBtn = document.getElementById('chartThreadSelectBtn');
    const d3Container = document.getElementById('d3-container');
    const chartOptions = {
        // colorScheme: d3[`<%= uiTheme ? 'interpolateViridis' : 'interpolateTurbo' %>`],
        // colorScheme: d3.interpolateInferno,
        // colorScheme: d3.interpolateTurbo,
        colorScheme: d3.interpolateViridis,
    }

    //Draws the chart or sets the message
    const draw = (data) => {
        if(Array.isArray(data)){
            const tsStart = Date.now();
            const rects = drawHeatmap(d3Container, perfData, chartOptions);
            const duration = Date.now() - tsStart;
        }else if(typeof data == 'string'){
            d3Container.innerHTML = `<div class="text-center text-muted p-4" id="d3-container-message">${data}</div>`;
        }else{
            d3Container.innerHTML = `<div class="text-center text-muted p-4" id="d3-container-message">unknown data type</div>`;
        }
        d3Container.style.opacity = 1;
    }

    //Sets the chart data
    const setChartThread = async (thread) => {
        chartThreadSelectBtn.textContent = thread;
        perfData = false;
        try {
            const rawPerfData = await fetch(TX_BASE_PATH + `chartData/${thread}`);
            const parsedPerfData = JSON.parse(await rawPerfData.text());
            if(Array.isArray(parsedPerfData)){
                perfData = parsedPerfData;
                const medianPlayers = d3.median(perfData, x => x.clients);
                if(medianPlayers > 55){
                    document.getElementById('tsMedianPlayerCount').textContent = medianPlayers.toFixed(0);
                    document.getElementById('tsMessage').classList.remove('d-none');
                }
                draw(parsedPerfData);
            }else{
                if(parsedPerfData.failReason == 'not_set'){
                    draw('chart database still loading');
                }else if(parsedPerfData.failReason == 'not_enough_data'){
                    draw('Players & Performance chart will be available in an hour.');
                }else if(parsedPerfData.failReason == 'data_processing'){
                    draw('chart data processing failed');
                }else if(parsedPerfData.failReason == 'rate_limiter'){
                    draw('too many chart requests');
                }else{
                    draw('invalid chart data');
                }
            }
        } catch (error) {
            draw('failed to load chart data');
            console.log(error);
        }
    }
    setChartThread('svMain');
    document.getElementById('chartThreadSelectBtn-svMain').addEventListener('click', () => {
        setChartThread('svMain');
    }, false);
    document.getElementById('chartThreadSelectBtn-svSync').addEventListener('click', () => {
        setChartThread('svSync')
    }, false);
    document.getElementById('chartThreadSelectBtn-svNetwork').addEventListener('click', () => {
        setChartThread('svNetwork')
    }, false);

    //Every 2.5 minutes
    setInterval(() => {
        setChartThread(chartThreadSelectBtn.textContent);
    }, 2.5*60*1000);

    //Renders it again when resized
    let redrawTimeout;
    window.addEventListener("resize", () => {
        if(!perfData) return;
        clearTimeout(redrawTimeout);
        d3Container.style.opacity = 0.5;
        redrawTimeout = setTimeout(() => {
            draw(perfData);
        }, 250);
    });
</script>
