// How often to query the server?
const REFRESH_INTERVAL_SEC = 60 * 10;
// Last time the alerts list was updated on display.
let lastUpdateTime;

// Storage for the alert data that the server gives us.
let alerts = [];

// Load alerts and populate the table. No need for QRZ/HamQTH credential headers as these won't add any useful data
// to alerts
function loadAlerts() {
    $.ajax({
        url: '/api/v3/alerts' + buildQueryString(), dataType: 'json', success: function (jsonData) {
            // Store last updated time
            lastUpdateTime = moment.utc();
            // Store data
            alerts = jsonData;
            // Update table
            updateTable();
        }
    });
}

// Build a query string for the API, based on the filters that the user has selected.
function buildQueryString() {
    let str = "?";
    ["dx_continent", "source", "activity"].forEach(fn => {
        if (!allFilterOptionsSelected(fn)) {
            str = str + getQueryStringFor(fn) + "&";
        }
    });
    str = str + "limit=" + $("#alerts_to_fetch option:selected").val();
    const maxDur = $("#max-duration option:selected").val();
    if (maxDur !== "9999999999") {
        str = str + "&max_duration=" + maxDur;
    }
    if ($("#dxpeditions_skip_max_duration_check")[0].checked) {
        str = str + "&dxpeditions_skip_max_duration_check=true";
    }
    if ($("#contests_skip_max_duration_check")[0].checked) {
        str = str + "&contests_skip_max_duration_check=true";
    }
    return str;
}

// Update the alerts table
function updateTable() {
    // Use local time instead of UTC?
    const useLocalTime = $("#timeZone")[0].value === "local";

    // Table data toggles
    const showStartTime = $("#tableShowStartTime")[0].checked;
    const showEndTime = $("#tableShowEndTime")[0].checked;
    const showDX = $("#tableShowDX")[0].checked;
    const showFreqsModes = $("#tableShowFreqsModes")[0].checked;
    const showComment = $("#tableShowComment")[0].checked;
    const showActivity = $("#tableShowActivity")[0].checked;
    const showRef = $("#tableShowRef")[0].checked;

    // Populate table with headers
    let table = $("#table");
    table.find('thead tr').empty();
    if (showStartTime) {
        table.find('thead tr').append(`<th class="bg-primary-subtle">${useLocalTime ? "Start&nbsp;(Local)" : "Start&nbsp;UTC"}</th>`);
    }
    if (showEndTime) {
        table.find('thead tr').append(`<th class="bg-primary-subtle">${useLocalTime ? "End&nbsp;(Local)" : "End&nbsp;UTC"}</th>`);
    }
    if (showDX) {
        table.find('thead tr').append(`<th class="bg-primary-subtle">DX</th>`);
    }
    if (showFreqsModes) {
        table.find('thead tr').append(`<th class='bg-primary-subtle hideonmobile'>Freq<span class='hideonmobile'>uencie</span>s & Modes</th>`);
    }
    if (showComment) {
        table.find('thead tr').append(`<th class='bg-primary-subtle hideonmobile'>Comment</th>`);
    }
    if (showActivity) {
        table.find('thead tr').append(`<th class='bg-primary-subtle hideonmobile'>Activity</th>`);
    }
    if (showRef) {
        table.find('thead tr').append(`<th class='bg-primary-subtle hideonmobile'>Reference</th>`);
    }

    table.find('tbody').empty();

    // Split alerts into three types, each of which will get its own table header: On now, next 24h, and later. "On now"
    // is considered to be events with an end_time where start<now<end, or events with no end time that started in the
    // last hour.
    const onNow = alerts.filter(a => (a["end_time"] != null && a["end_time"] !== 0 && moment.unix(a["end_time"]).utc().isSameOrAfter() && moment.unix(a["start_time"]).utc().isBefore())
        || ((a["end_time"] == null || a["end_time"] === 0) && moment.unix(a["start_time"]).utc().add(1, 'hours').isSameOrAfter() && moment.unix(a["start_time"]).utc().isBefore()));
    const next24h = alerts.filter(a => moment.unix(a["start_time"]).utc().isSameOrAfter() && moment.unix(a["start_time"]).utc().subtract(24, 'hours').isBefore());
    const later = alerts.filter(a => moment.unix(a["start_time"]).utc().subtract(24, 'hours').isSameOrAfter());

    if (onNow.length > 0) {
        table.find('tbody').append('<tr><td colspan="100" class="bg-primary-subtle" style="text-align:center;">On Now</td></tr>');
        addAlertRowsToTable(table.find('tbody'), onNow);
    }

    if (next24h.length > 0) {
        table.find('tbody').append('<tr><td colspan="100" class="bg-primary-subtle" style="text-align:center;">Starting within 24 hours</td></tr>');
        addAlertRowsToTable(table.find('tbody'), next24h);
    }

    if (later.length > 0) {
        table.find('tbody').append('<tr><td colspan="100" class="bg-primary-subtle" style="text-align:center;">Starting later </td></tr>');
        addAlertRowsToTable(table.find('tbody'), later);
    }

    if (onNow.length === 0 && next24h.length === 0 && later.length === 0) {
        table.find('tbody').append('<tr class="bg-danger-subtle"><td colspan="100" style="text-align:center;">No alerts match your filters.</td></tr>');
    }
}

// Add a row to tbody for each alert in the provided list
function addAlertRowsToTable(tbody, alerts) {
    let count = 0;
    alerts.forEach(a => {
        // Create row
        let $tr = $('<tr>');

        // Calculate some values
        let wantThis = false;
        if (a["dx_calls"] != null) {
            for (i in a["dx_calls"]) {
                if (callWanted(a["dx_calls"][i])) {
                    wantThis = true;
                    break;
                }
            }
        }

        // Apply striping to the table. We can't just use Bootstrap's table-striped class because we have all sorts of
        // extra faff to deal with, like the mobile view having extra rows, and the On Now / Next 24h / Later banners
        // which cause the table-striped colouring to go awry. If the call is wanted, suppress the striping so the
        // highlight colour looks right.
        if (count % 2 === 1 && !wantThis) {
            $tr.addClass("table-active");
        }
        // If this is a wanted call, highlight it
        if (wantThis) {
            $tr.addClass("row-wanted");
        }

        // Use local time instead of UTC?
        const useLocalTime = $("#timeZone")[0].value === "local";

        // Table data toggles
        const showStartTime = $("#tableShowStartTime")[0].checked;
        const showEndTime = $("#tableShowEndTime")[0].checked;
        const showDX = $("#tableShowDX")[0].checked;
        const showFreqsModes = $("#tableShowFreqsModes")[0].checked;
        const showComment = $("#tableShowComment")[0].checked;
        const showActivity = $("#tableShowActivity")[0].checked;
        const showRef = $("#tableShowRef")[0].checked;

        // Get times for the alert, and convert to local time if necessary.
        const start_time_utc = moment.unix(a["start_time"]).utc();
        const start_time_local = start_time_utc.clone().local();
        const start_time = useLocalTime ? start_time_local : start_time_utc;
        const end_time_utc = moment.unix(a["end_time"]).utc();
        const end_time_local = end_time_utc.clone().local();
        const end_time = useLocalTime ? end_time_local : end_time_utc;

        // Format the times for display. Start time is displayed as e.g. 7 Oct 12:34 unless the time is in a
        // different year to the current year, in which case the year is inserted between month and hour.
        // If the time is set to local not UTC, and the date in local time is "today", we display that instead.
        // End time is displayed the same as above, except if the end date is the same as the start date, in which case
        // just e.g. 23:45 is used.
        // Overriding all of that, if the start time is 00:00 and the end time is 23:59 when considered in UTC, the
        // hours and minutes are stripped out from the display, as we assume the server is just giving us full days.
        // Finally, if there is no end date set, "---" is displayed.
        const whole_days = start_time_utc.format("HH:mm") === "00:00" &&
            (end_time_utc === 0 || end_time_utc.format("HH:mm") === "23:59");
        const hours_minutes_format = whole_days ? "" : " HH:mm";
        let start_time_formatted = start_time.format("D MMM" + hours_minutes_format);
        if (start_time.format("YYYY") !== moment().format("YYYY")) {
            start_time_formatted = start_time.format("D MMM YYYY" + hours_minutes_format);
        } else if (useLocalTime && start_time.format("D MMM YYYY") === moment().format("D MMM YYYY")) {
            start_time_formatted = start_time.format("[Today]" + hours_minutes_format);
        }
        let end_time_formatted = "---";
        if (end_time_utc > 0 && end_time != null) {
            end_time_formatted = whole_days ? start_time_formatted : end_time.format("HH:mm");
            if (end_time.format("D MMM") !== start_time.format("D MMM")) {
                if (end_time.format("YYYY") !== moment().format("YYYY")) {
                    end_time_formatted = end_time.format("D MMM YYYY" + hours_minutes_format);
                } else if (useLocalTime && end_time.format("D MMM YYYY") === moment().format("D MMM YYYY")) {
                    end_time_formatted = end_time.format("[Today]" + hours_minutes_format);
                } else {
                    end_time_formatted = end_time.format("D MMM" + hours_minutes_format);
                }
            }
        }

        // Format dx country
        let dx_country = a["dx_country"];
        if (dx_country == null) {
            dx_country = "Unknown or not a country"
        }

        // Format DX flag
        let dx_flag = "<i class='fa-solid fa-globe-africa'></i>";
        if (a["dx_dxcc_id"] && a["dx_dxcc_id"] != null && a["dx_dxcc_id"] !== 0) {
            dx_flag = `<img src="static/img/flags/${a['dx_dxcc_id']}.png" class="flag" width="24" alt="${dx_country}" title="${dx_country}"/>`;
        }

        // Format dx calls
        let dx_calls_html = "";
        if (a["dx_calls"] != null) {
            dx_calls_html = a["dx_calls"].map(call => `<a class='dx-link' href='https://qrz.com/db/${call}' target='_new'>${call}</a>`).join(", ");
        }
        if (dx_calls_html === "" && a["activities"] != null && a["activities"].includes("Contest")) {
            // Contest = true and no DX callsigns, so display "Contest"
            dx_calls_html = "Contest"
        }

        // Format DXpedition country
        let dx_country_html = "";
        if (a["activities"] != null && a["activities"].includes("DXpedition") && a["dx_country"] != null && a["dx_country"] !== "") {
            dx_country_html = `<br/>${a["dx_country"]}`;
        }

        // Format freqs & modes
        let freqsModesText = "";
        if (a["freqs_modes"] != null) {
            freqsModesText = escapeHtml(a["freqs_modes"]);
        }

        // Format comment
        let commentText = "";
        if (a["comment"] != null) {
            commentText = escapeHtml(a["comment"]);
        }

        // Format extra text, like URL and attribution
        let subComment = a["url"] != null || a["source"] === "NG3K" || a["source"] === "WA7BNM Contest Calendar";
        if (subComment) {
            let subCommentText = ""
            if (a["url"] != null) {
                subCommentText += `<a href="${escapeHtml(a['url'])}" target="_new" style="text-decoration: none">More info</a>`;
            }
            if ((a["source"] === "NG3K" || a["source"] === "WA7BNM Contest Calendar")) {
                if (subCommentText !== "") {
                    subCommentText += " | ";
                }
                subCommentText += `From ${a["source"]}`;
            }
            commentText += `<div class="mt-2 small text-secondary">${subCommentText}</div>`;
        }


        // Activity or fallback to "General DX"
        let activityText = "General DX";
        if (a["activities"] != null && a["activities"].length > 0) {
            activityText = a["activities"].join(", ");
        }

        // Format activity refs
        let activityRefs = "";
        if (a["activity_refs"] != null) {
            const items = [];
            for (let i = 0; i < a["activity_refs"].length; i++) {
                if (a["activity_refs"][i]["url"] != null) {
                    items[i] = `<a href='${encodeURI(a["activity_refs"][i]["url"])}' title='${escapeHtml(a["activity_refs"][i]["name"])}' target='_new' class='activity-ref-link'>${escapeHtml(a["activity_refs"][i]["id"])}</a>`
                } else {
                    items[i] = `${escapeHtml(a["activity_refs"][i]["id"])}`
                }
                // If this is a satellite alert the ref will just be the satellite, but DX grid is also important, so
                // show that if we can.
                if (a["activity_refs"][i]["activity"] === "Satellite" && a["dx_grid"] != null) {
                    items[i] += " from " + a["dx_grid"];
                }
            }
            activityRefs = items.join(", ");
        }

        // Populate the row
        if (showStartTime) {
            $tr.append(`<td class='nowrap'>${start_time_formatted}</td>`);
        }
        if (showEndTime) {
            $tr.append(`<td class='nowrap'>${end_time_formatted}</td>`);
        }
        if (showDX) {
            $tr.append(`<td><span class='flag-wrapper hideonmobile' title='${dx_country}'>${dx_flag}</span>${dx_calls_html}${dx_country_html}</td>`);
        }
        if (showFreqsModes) {
            $tr.append(`<td class='hideonmobile'>${freqsModesText}</td>`);
        }
        if (showComment) {
            $tr.append(`<td class='hideonmobile'>${commentText}</td>`);
        }
        if (showActivity) {
            $tr.append(`<td class='nowrap hideonmobile'><span class='icon-wrapper'><i class='fa-solid ${a["icon"]}'></i></span> ${activityText}</td>`);
        }
        if (showRef) {
            $tr.append(`<td class='hideonmobile'>${activityRefs}</td>`);
        }
        tbody.append($tr);

        // Second row for mobile view only, containing source, ref, freqs/modes & comment
        const $tr2 = $("<tr class='hidenotonmobile'>");
        if (count % 2 === 1 && !wantThis) {
            $tr2.addClass("table-active");
        }
        if (wantThis) {
            $tr2.addClass("row-wanted");
        }

        const $td2 = $("<td colspan='100'>");
        if (showActivity) {
            $td2.append(`<span class='icon-wrapper'><i class='fa-solid ${a["icon"]}'></i></span> `);
        }
        if (showRef) {
            $td2.append(`${activityRefs} `);
        }
        if (showFreqsModes) {
            $td2.append(`${freqsModesText} `);
        }
        if (showComment) {
            $td2.append(`<br/>${commentText} `);
        }
        $tr2.append($td2);
        tbody.append($tr2);

        count++;
    });
}

// Method called when any filter is changed to reload the alerts and persist the filter settings.
function filtersUpdated() {
    loadAlerts();
    saveSettings();
}

// Startup
$(document).ready(function () {
    // Load URL params. If these ask for "embedded mode", this will suppress loading settings, so this needs to be
    // called first.
    loadURLParams();
    loadSettings();
    setColorScheme($("#color_scheme option:selected").val());

    // Load alerts and set up the timer
    loadAlerts();
    setInterval(loadAlerts, REFRESH_INTERVAL_SEC * 1000);
});

// Reload alerts on becoming visible. This forces a refresh when used as a PWA and the user switches back to the PWA
// after some time has passed with it in the background.
addEventListener("visibilitychange", () => {
    if (!document.hidden) {
        loadAlerts();
    }
});