// How often to query the server?
const REFRESH_INTERVAL_SEC = 60;

// Storage for the spot data that the server gives us.
var spots = []

// Load spots and populate the table.
function loadSpots() {
    $.getJSON('/api/v1/spots' + buildQueryString(), function(jsonData) {
        // Store last updated time
        lastUpdateTime = moment.utc();
        updateRefreshDisplay();
        // Store data
        spots = jsonData;
        // Update table
        updateTable();
    });
}

// Build a query string for the API, based on the filters that the user has selected.
function buildQueryString() {
    var str =  "?";
    ["dx_continent", "de_continent", "mode_type", "source", "band"].forEach(fn => {
        if (!allFilterOptionsSelected(fn)) {
            str = str + getQueryStringFor(fn) + "&";
        }
    });
    str = str + "limit=" + $("#spots-to-fetch option:selected").val();
    return str;
}

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

    // Populate table with headers
    let table = $('<table class="table table-striped-custom table-hover">').append('<thead><tr class="table-primary"></tr></thead><tbody></tbody>');
    table.find('thead tr').append(`<th>${useLocalTime ? "Local" : "UTC"}</th>`);
    table.find('thead tr').append(`<th>DX</th>`);
    table.find('thead tr').append(`<th>Freq<span class='hideonmobile'>uency</span></th>`);
    table.find('thead tr').append(`<th>Mode</th>`);
    table.find('thead tr').append(`<th class='hideonmobile'>Comment</th>`);
    table.find('thead tr').append(`<th class='hideonmobile'>Source</th>`);
    table.find('thead tr').append(`<th class='hideonmobile'>Ref.</th>`);
    table.find('thead tr').append(`<th class='hideonmobile'>DE</th>`);

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

    spots.forEach(s => {
        // Create row
        let $tr = $('<tr>');

        // Show faded out if QRT
        if (s["qrt"] == true) {
          $tr.addClass("table-faded");
        }

        // Format a UTC or local time for display
        var time = moment.unix(s["time"]).utc();
        if (useLocalTime) {
            time = time.local();
        }
        var time_formatted = time.format("HH:mm");

        // Format DX flag
        var dx_flag = "<i class='fa-solid fa-globe-africa'></i>";
        if (s["dx_flag"] && s["dx_flag"] != null && s["dx_flag"] != "") {
            dx_flag = s["dx_flag"];
        }

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

        // Format the frequency
        var mhz = Math.floor(s["freq"] / 1000000.0);
        var khz = Math.floor((s["freq"] - (mhz * 1000000.0)) / 1000.0);
        var hz = Math.floor(s["freq"] - (mhz * 1000000.0) - (khz * 1000.0));
        var hz_string = (hz > 0) ? hz.toFixed(0)[0] : "";
        var freq_string = `<span class='freq-mhz'>${mhz.toFixed(0)}</span><span class='freq-khz'>${khz.toFixed(0).padStart(3, '0')}</span><span class='freq-hz hideonmobile'>${hz_string}</span>`

        // Format the mode
        mode_string = s["mode"];
        if (s["mode"] == null) {
            mode_string = "???";
        }
        if (s["mode_source"] == "BANDPLAN") {
            mode_string = mode_string + "<span class='mode-q hideonmobile'><i class='fa-solid fa-circle-question' title='The mode was not reported via the spotting service. This is a guess based on the frequency.'></i></span>"
        }

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

        // Sig or fallback to source
        var sigSourceText = s["source"];
        if (s["sig"]) {
            sigSourceText = s["sig"];
        }

        // Format sig_refs
        var sig_refs = "";
        if (s["sig_refs"]) {
            sig_refs = s["sig_refs"].map(s => `<span class='nowrap'>${s}</span>`).join(", ");
        }

        // Format sig_refs title
        var sig_refs_title_string = "";
        if (s["sig_refs_names"]) {
            sig_refs_title_string = " title=\"" + s["sig_refs_names"].join(", ") + "\"";
        }

        // Format DE flag
        var de_flag = "<i class='fa-solid fa-circle-question'></i>";
        if (s["de_flag"] && s["de_flag"] != null && s["de_flag"] != "") {
            de_flag = s["de_flag"];
        }

        // Format de country
        var de_country = s["de_country"];
        if (de_country == null) {
            de_country = "Unknown or not a country";
        }

        // Format de call
        var de_call = s["de_call"];
        if (de_call == null) {
            de_call = "";
            de_flag = "";
        }

        // CSS doesn't like classes with decimal points in, so we need to replace that in the same way as when we originally
        // queried the options endpoint and set our CSS.
        var cssFormattedBandName = s['band'] ? s['band'].replace('.', 'p') : "unknown";
        var bandFullName = s['band'] ? s['band'] + " band": "Unknown band";

        // Populate the row
        $tr.append(`<td class='nowrap'>${time_formatted}</td>`);
        $tr.append(`<td class='nowrap'><span class='flag-wrapper hideonmobile' title='${dx_country}'>${dx_flag}</span><a class='dx-link' href='https://qrz.com/db/${s["dx_call"]}' target='_new'>${s["dx_call"]}</a></td>`);
        $tr.append(`<td class='nowrap'><span class='band-bullet band-bullet-${cssFormattedBandName}' title='${bandFullName}'>&#9632;</span>${freq_string}</td>`);
        $tr.append(`<td class='nowrap'>${mode_string}</td>`);
        $tr.append(`<td class='hideonmobile'>${commentText}</td>`);
        $tr.append(`<td class='nowrap hideonmobile'><span class='icon-wrapper'><i class='fa-solid fa-${s["icon"]}'></i></span> ${sigSourceText}</td>`);
        $tr.append(`<td class='hideonmobile'><span ${sig_refs_title_string}>${sig_refs}</span></td>`);
        $tr.append(`<td class='nowrap hideonmobile'><span class='flag-wrapper' title='${de_country}'>${de_flag}</span>${de_call}</td>`);
        table.find('tbody').append($tr);

        // Second row for mobile view only, containing source, ref & comment
        $tr2 = $("<tr class='hidenotonmobile'>");
        if (s["qrt"] == true) {
          $tr2.addClass("table-faded");
        }
        $tr2.append(`<td colspan="100"><span class='icon-wrapper'><i class='fa-solid fa-${s["icon"]}'></i></span> ${sig_refs} ${commentText}</td>`);
        table.find('tbody').append($tr2);
    });

    // Update DOM
    $('#table-container').html(table);
}

// Load server options. Once a successful callback is made from this, we then query spots and set up the timer to query
// spots repeatedly.
function loadOptions() {
    $.getJSON('/api/v1/options', function(jsonData) {
        // Store options
        options = jsonData;

        // Add CSS for band bullets and band toggle buttons
        addBandColourCSS(options["bands"]);

        // Populate the filters panel
        $("#filters-container-1").append(generateBandsMultiToggleFilterCard(options["bands"]));
        $("#filters-container-2").append(generateMultiToggleFilterCard("DX Continent", "dx_continent", options["continents"]));
        $("#filters-container-2").append(generateMultiToggleFilterCard("DE Continent", "de_continent", options["continents"]));
        $("#filters-container-2").append(generateMultiToggleFilterCard("Modes", "mode_type", options["mode_types"]));
        $("#filters-container-2").append(generateMultiToggleFilterCard("Sources", "source", options["spot_sources"]));

        // Load filters from settings storage
        loadSettings();

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

// Dynamically add CSS code for the band bullets and band toggle buttons to be in the appropriate colour.
// Some band names contain decimal points which are not allowed in CSS classes, so we text-replace them to "p".
function addBandColourCSS(band_options) {
    var $style = $('<style>');
    band_options.forEach(o => {
        // CSS doesn't like IDs with decimal points in, so we need to replace that
        var cssFormattedBandName = o['name'] ? o['name'].replace('.', 'p') : "unknown";
        $style.append(`.band-bullet-${cssFormattedBandName} { color: ${o['color']}; }`);
        $style.append(`#filter-button-label-band-${cssFormattedBandName} { border-color: ${o['color']}; color: var(--bs-primary);}`);
        $style.append(`.btn-check:checked + #filter-button-label-band-${cssFormattedBandName} { background-color: ${o['color']}; color: ${o['contrast_color']};}`);
    });
    $('html > head').append($style);
}

// Generate bands filter card. This one is a special case.
function generateBandsMultiToggleFilterCard(band_options) {
    let $col = $("<div class='col'>")
    let $card = $("<div class='card'>");
    let $card_body = $("<div class='card-body'>");
    $card_body.append(`<h5 class='card-title'>Bands</h5>`);
    $p = $("<p class='card-text spothole-card-text'>");
    // Create a button for each option
    band_options.forEach(o => {
        // CSS doesn't like IDs with decimal points in, so we need to replace that in the same way as when we originally
        // queried the options endpoint and set our CSS.
        var cssFormattedBandName = o['name'] ? o['name'].replace('.', 'p') : "unknown";
        $p.append(`<input type="checkbox" class="btn-check filter-button-band storeable-checkbox" name="options" id="filter-button-band-${cssFormattedBandName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline" id="filter-button-label-band-${cssFormattedBandName}" for="filter-button-band-${cssFormattedBandName}">${o['name']}</label> `);
    });
    // Create All/None buttons
    $p.append(` <span style="display: inline-block"><button id="filter-button-band-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', true);">All</button>&nbsp;<button id="filter-button-band-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', false);">None</button></span>`);
    // Compile HTML elements to return
    $card_body.append($p);
    $card.append($card_body);
    $col.append($card);
    return $col;
}

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

// React to toggling/closing panels
function toggleFiltersPanel() {
    // If we are going to display the filters panel, hide the display panel
    if (!$("#filters-area").is(":visible") && $("#display-area").is(":visible")) {
        $("#display-area").hide();
        $("#display-button").button("toggle");
    }
    $("#filters-area").toggle();
}
function closeFiltersPanel() {
    $("#filters-button").button("toggle");
    $("#filters-area").hide();
}

function toggleDisplayPanel() {
    // If we are going to display status, load the data for the status panel, and hide the filters panel
    if (!$("#display-area").is(":visible") && $("#filters-area").is(":visible")) {
        $("#filters-area").hide();
        $("#filters-button").button("toggle");
    }
    $("#display-area").toggle();
}
function closeDisplayPanel() {
    $("#display-button").button("toggle");
    $("#display-area").hide();
}

// Display the intro box, unless the user has already dismissed it once.
function displayIntroBox() {
    if (localStorage.getItem("intro-box-dismissed") == null) {
        $("#intro-box").show();
    }
    $("#intro-box-dismiss").click(function() {
        localStorage.setItem("intro-box-dismissed", true);
    });
}

// Startup
$(document).ready(function() {
    // Call loadOptions(), this will then trigger loading spots and setting up timers.
    loadOptions();
    // Update the refresh timing display every second
    setInterval(updateRefreshDisplay, 1000);
    // Display intro box
    displayIntroBox();
});