var subTable = null;
    discordChannels = [];
    subSearchTimeout = null;
    subOptions = null;

// Create subscription table
async function initSubscriptionTable() {
    subOptions = await getSubscriptionOptions();
    await initTable("#subscriptionsTabPane", "subTable", loadSubscriptions, showEditSubModal, deleteSelectedSubscriptions, subOptions);

    subTable = $("#subTable").DataTable({
        info: false,
        paging: false,
        ordering: false,
        searching: false,
        autoWidth: false,
        order: [],
        select: {
            style: "multi+shift",
            selector: 'th:first-child input[type="checkbox"]'
        },
        columnDefs: [
            { orderable: false, targets: "no-sort" },
            { 
                targets: 0,
                checkboxes: { selectRow: true }
            },
        ],
        columns: [
            {
                // Select row checkbox column
                title: '<input type="checkbox" class="form-check-input table-select-all" />',
                data: null,
                orderable: false,
                className: "text-center col-switch-width",
                render: function() {
                    return '<input type="checkbox" class="form-check-input table-select-row" />'
                }
            },
            { title: "ID", data: "id", visible: false },
            {
                title: "Name",
                data: "name",
                className: "text-truncate",
                render: function(data, type, row) {
                    const name = sanitise(data);
                    return `<button type="button" onclick="showEditSubModal(${row.id})" class="btn btn-link text-start text-decoration-none">${name}</button>`;
                }
            },
            {
                title: "URL",
                data: "url",
                className: "text-truncate",
                render: function(data, type) {
                    const url = sanitise(data);
                    return `<a href="${url}" class="btn btn-link text-start text-decoration-none" target="_blank">${url}</a>`;
                }
            },
            { 
                title: "Channels",
                data: "channels_count",
                className: "text-center",
                render: function(data) {
                    const channelsCount = sanitise(data);
                    return `<span class="badge text-bg-secondary">${channelsCount}</span>`;
                }
            },
            {
                title: "Created",
                data: "creation_datetime",
                render: function(data, type) {
                    let dateTime = new Date(data);
                    return $(`
                        <span data-bs-trigger="hover focus"
                            data-bs-html="true"
                            data-bs-custom-class="text-center"
                            data-bs-toggle="popover"
                            data-bs-content="${formatStringDate(dateTime, "%a, %D %B, %Y<br>%H:%M:%S")}">
                            ${formatStringDate(dateTime, "%D, %b %Y")}
                        </span>
                    `).popover()[0];
                }
            },
            {
                title: "Notes",
                data: "extra_notes",
                orderable: false,
                className: "text-center",
                render: function(data, type) {
                    if (!data) { return "" }
                    const extraNotes = sanitise(data);
                    return $(`
                        <i class="bi bi-chat-left-text"
                            data-bs-trigger="hover focus"
                            data-bs-toggle="popover"
                            data-bs-title="Extra Notes"
                            data-bs-content="${extraNotes}">
                        </i>
                    `).popover()[0];
                }
            },
            { 
                title: "Active",
                data: "active",
                orderable: false,
                className: "text-center form-switch",
                render: function(data, type) {
                    return `<input type="checkbox" class="sub-toggle-active form-check-input ms-0" ${data ? "checked" : ""} />`
                }
            },
            {
                orderable: false,
                className: "p-0",
                render: function(data, type, row) {
                    const embedColour = sanitise(row.embed_colour);
                    return `<div class="h-100" style="background-color: #${embedColour}; width: .25rem;">&nbsp;</div>`
                }
            }
        ]
    });

    bindTableCheckboxes("#subTable", subTable, "#subscriptionsTabPane .table-del-btn");
}

async function updateSubFromObject(sub, handleErrorMsg=true) {
    let data = {
        "name": sub.name,
        "url": sub.url,
        "guild_id": sub.guild_id,
        "extra_notes": sub.extra_notes,
        "embed_colour": sub.embed_colour,
        "article_fetch_image": sub.article_fetch_image,
        "published_threshold": sub.published_threshold,
        "active": sub.active
    };

    let formData = new FormData();

    for (key in data) {
        formData.append(key, data[key]);
    }

    sub.article_title_mutators.forEach(mutator => formData.append("article_title_mutators", mutator.id));
    sub.article_desc_mutators.forEach(mutator => formData.append("article_desc_mutators", mutator.id));
    sub.filters.forEach(filter => formData.append("filters", filter));

    return await saveSubscription(sub.id, formData, handleErrorMsg=handleErrorMsg);
}

$("#subscriptionsTabPane").on("change", ".sub-toggle-active", async function () {

    /*
        Lock all toggles to soft-prevent spam.
        There is a rate limit, but allowing the user to
        reach it from this toggle would be bad.
    */
    $(".sub-toggle-active").prop("disabled", true);

    try {
        const active = $(this).prop("checked");
        const sub = subTable.row($(this).closest("tr")).data();
        
        // Update the table row
        sub.active = active;
        subTable.data(sub).draw();

        // Update the database
        const subId = await updateSubFromObject(sub, handleErrorMsg=false);

        if (!subId) {
            throw Error("This subscription no longer exists.");
        }

        showToast(
            active ? "success" : "danger",
            "Subscription " + (active ? "Activated" : "Deactivated"),
            "Subscription ID: " + subId
        );
    }
    catch (error) {
        console.error(error);   
        showToast(
            "danger",
            "Error Updating Subscription",
            `Tried to toggle activeness, but encountered a problem. <br><code>${error}</code>`
        );
    }
    finally {
        // Re-enable toggles after 500ms
        setTimeout(() => {
            $(".sub-toggle-active").prop("disabled", false); },
            500
        );
    }    
});

// Open new subscription modal
$("#addSubscriptionBtn").on("click", async function() {
    await showEditSubModal(-1);
});

async function showEditSubModal(subId) {
    if (subId === -1) {
        $("#subFormModal .form-create, #subAdvancedModal .form-create").show();
        $("#subFormModal .form-edit, #subAdvancedModal .form-edit").hide();

        $("#subFormModal input, #subFormModal textarea").val("");
        $("#subChannels").val("").change();
        $("#subFilters").val("").change();
        $("#subTitleMutators").val("").change();
        $("#subDescMutators").val("").change();
        $("#subActive").prop("checked", true);

        $("#subEmbedColour .colour-reset").click();
        $("#subArticleFetchImage").prop("checked", true);

        $("#subPubThreshold").val(getCurrentDateTime());
    }
    else {
        $("#subFormModal .form-create, #subAdvancedModal .form-create").hide();
        $("#subFormModal .form-edit, #subAdvancedModal .form-edit").show();

        const subscription = subTable.row(function(idx, data, node) {
            return data.id === subId;
        }).data();

        $("#subName").val(subscription.name);
        $("#subUrl").val(subscription.url);
        $("#subExtraNotes").val(subscription.extra_notes);
        $("#subActive").prop("checked", subscription.active);

        $("#subTitleMutators").val("").change();
        $("#subTitleMutators").val(subscription.article_title_mutators.map(mutator => mutator.id)).change();

        $("#subDescMutators").val("").change();
        $("#subDescMutators").val(subscription.article_desc_mutators.map(mutator => mutator.id)).change();

        const channels = await getSubChannels(subscription.id);
        $("#subChannels").val("").change();
        $("#subChannels").val(channels.results.map(channel => channel.channel_id)).change();

        $("#subFilters").val("").change();
        $("#subFilters").val(subscription.filters).change();

        updateColourInput("subEmbedColour", `#${subscription.embed_colour}`);
        $("#subArticleFetchImage").prop("checked", subscription.article_fetch_image);

        $("#subPubThreshold").val(subscription.published_threshold.split('+')[0]);
    }

    $("#subId").val(subId);
    $("#subFormModal").modal("show");
}

function getValueFromField(elem) {
    const tagName = elem.tagName.toLowerCase();
    const $elem = $(elem);

    if (tagName) { return $elem.val() }

    switch ($elem.attr("type")) {
        case "checkbox":
            return $elem.prop("checked");

        default:
            return $elem.val();
    }
}

$("#subForm").on("submit", async function(event) {
    event.preventDefault();

    let subId = $("#subId").val();
    let guildId = getCurrentlyActiveServer().guild_id;

    // TODO: move this into a function, so I can fix the active toggle switches which are broken due to this change

    let formData = new FormData();
    formData.append("guild_id", guildId);

    // Populate formdata with [data-field] control values
    $('#subForm [data-field], #subAdvancedModal [data-field]').each(function() {
        const value = getValueFromField(this);
        formData.append($(this).data("field"), value);
    });

    // Add title mutators to formdata
    $("#subTitleMutators option:selected").toArray().map(mutator => parseInt(mutator.value)).forEach(
        mutator => formData.append("article_title_mutators", mutator)
    );

    // Add description mutator to formdata
    $("#subDescMutators option:selected").toArray().map(mutator => parseInt(mutator.value)).forEach(
        mutator => formData.append("article_desc_mutators", mutator)
    );

    // Add Filters to formdata
    $("#subFilters option:selected").toArray().forEach(
        filter => formData.append("filters", parseInt(filter.value))
    );

    // This field is constructed differently, so needs to be specifically added
    formData.append("embed_colour", getColourInputVal("subEmbedColour", false));


    subId = await saveSubscription(subId, formData);

    if (subId) {
        showToast("success", "Subscription Saved", `Subscription ID ${subId}`);
    }
    else {
        showToast("danger", "Error Saving Subscription", "");
        return;
    }

    await deleteSubChannels(subId);
    $("#subChannels option:selected").each(async function() {
        let $channel = $(this);
        let channelFormData = new FormData();
        channelFormData.append("channel_id", $channel.val());
        channelFormData.append("channel_name", $channel.data("name"));
        channelFormData.append("subscription", subId);
        await newSubChannel(channelFormData);
    });

    await loadSubscriptions(guildId);
    $("#subFormModal").modal("hide");
});

async function saveSubscription(id, formData, handleErrorMsg=true) {
    let response

    try {
        response = id === "-1" ? await newSubscription(formData) : await editSubscription(id, formData);
    }
    catch (err) {
        console.error(err);

        if (handleErrorMsg) {
            showToast("danger", "Subscription Error", err.responseText, 18000);
        }

        return false;
    }

    return response.id;
}

async function saveSubChannel(formData) {
    var response

    try {
        response = await newSubChannel(formData);
    }
    catch (error) {
        console.log(error);
        showToast("danger", "Failed to save subchannel", error, 18000);
        return false
    }

    return response.id
}

function clearExistingSubRows() {
    $("#subTable thead .table-select-all").prop("checked", false).prop("indeterminate", false);
    subTable.clear().draw(false);
}

$("#subscriptionsTabPane").on("click", ".table-refresh-btn", async function() {
    loadSubscriptions(getCurrentlyActiveServer().guild_id);
});

async function loadSubscriptions(guildId) {
    if (!guildId)
        return;

    setTableFilter("subTable", "guild_id", guildId);
    ensureTablePagination("subTable");

    $("#subscriptionsTabPane .table-del-btn").prop("disabled", true);
    clearExistingSubRows();

    try {
        var subs = await getSubscriptions(tableFilters["subTable"], tableSorts["subTable"]);
        subTable.rows.add(subs.results).draw(false);
    }
    catch (err) {
        console.error(err)
        showToast("danger", `Error Loading Subscriptions: HTTP ${err.status}`, err, 15000);
        return;
    }

    updateTableContainer(
        "subscriptionsTabPane",
        tableFilters["subTable"]["page"],
        tableFilters["subTable"]["page_size"],
        subs.results.length,
        subs.count,
        subs.next,
        subs.previous
    );

    $("#subTable thead .table-select-all").prop("disabled", subs.results.length === 0);
    console.debug("loading subs, " + subs.results.length + " found");
}

// #region Server Change Event Handler

$(document).on("selectedServerChange", async function() {
    let server = getCurrentlyActiveServer();
        guildId = server.guild_id;

    await updateDefaultSubEmbedColour();

    await loadSubscriptions(guildId);
    await loadChannelOptions(guildId);
    await loadFilterOptions(guildId);
    await loadMutatorOptions();
})

async function updateDefaultSubEmbedColour(settings=null) {
    if (!settings){
        settings = (await getGuildSettings(guildId)).results[0]
    }
    $("#subEmbedColour .colour-reset").attr("data-defaultcolour", "#" + settings.default_embed_colour);
}

// #endregion


// #region Delete Subscriptions

// Delete button on the 'edit subscription' modal
$("#deleteEditSub").on("click", async function() {
    const subId = parseInt($("#subId").val());
    const sub = subTable.row(function(idx, row) { return row.id === subId }).data();
    const subName = sanitise(sub.name);    

    $("#subFormModal").modal("hide");

    await confirmationModal(
        "Delete a Subscription",
        `Do you wish to permanently delete <b>${subName}</b>?`,
        "danger",
        async () => {
            await deleteSubscription(subId);
            await loadSubscriptions(getCurrentlyActiveServer().guild_id);
    
            showToast(
                "danger",
                "Deleted a Subscription",
                subName,
                12000
            );
        },
        async () => {
            $("#subFormModal").modal("show");
        }
    );
});

async function deleteSelectedSubscriptions() {
    const rows = subTable.rows(".selected").data().toArray();
    const names = rows.map(row => row.name);    
    const namesString = arrayToHtmlList(names, true).prop("outerHTML");
    const isMany = names.length > 1;

    await confirmationModal(
        `Delete ${isMany ? "Many Subscriptions" : "a Subscription"}`,
        `Do you wish to permanently delete ${isMany ? "these" : "this"} <b>${names.length}</b> subscription${isMany ? "s" : ""}?<br><br>${namesString}`,
        "danger",
        async () => {
            rows.forEach(async row => { await deleteSubscription(row.id) });
    
            showToast(
                "danger",
                `Deleted ${names.length} Subscription${isMany ? "s" : ""}`,
                `${arrayToHtmlList(names, false).prop("outerHTML")}`,
                12000
            );
    
            // Multi-deletion can take time, this timeout ensures the refresh is accurate
            setTimeout(async () => {
                await loadSubscriptions(getCurrentlyActiveServer().guild_id);
            }, 600);
        },
        null
        
    );
}

// #endregion


// #region Load Modal Options

async function loadChannelOptions(guildId) {

    // Disable input while options are loading
    $("#subChannels").prop("disabled", true);

    // Delete existing options
    $("#subChannels option").each(function() {
        if ($(this).val())
            $(this).remove();
    });

    // Clear select2 input
    $("#subChannels").val("").change();
    try {
        const channels = await loadChannels(guildId);

        // If we have reached the discord API rate limit
        if (channels.message && channels.message.includes("rate limit")) {
            throw new Error(
                `${channels.message} Retry after ${channels.retry_after} seconds.`
            )
        }

        // If we can't fetch channels due to error
        if (channels.code === 50001) {
            
            // Also check that the user hasn't changed the currently active guild, otherwise
            // the alert will show under the wrong server.
            if (getCurrentlyActiveServer().guild_id === guildId)
                $("#serverJoinAlert").show();

            const guildName = sanitise(getServerFromSnowflake(guildId).name);

            throw new Error(
                `Unable to retrieve channels from Guild <b>${guildName}</b>.
                Ensure that @PYRSS is a member with permissions
                to view channels.`
            );
        }

        // Sort by the specified position of each channel object
        channels.sort((a, b) => a.position - b.position);

        discordChannels = [];
        channels.forEach(channel => {

            // We only want TextChannels, which have a type of 0
            if (channel.type !== 0)
                return;

            let channelObj = {text: `#${channel.name}`, value: channel.id, "data-name": channel.name}
            $("#subChannels").append($("<option>", channelObj));
            discordChannels.push(channelObj);
        });
    }
    catch(error) {
        console.error(error);
        showToast("danger", "Error loading channels", error, 18000);       
    }
    finally {
        // Re-enable the input
        $("#subChannels").prop("disabled", false);
    }
}

async function loadMutatorOptions() {

    // Disable input while options are loading
    $(".sub-mutators-field").prop("disabled", true);

    // Delete existing options
    $(".sub-mutators-field option").each(function() {
        if ($(this).val())
            $(this).remove();
    });

    // Clear select2 input
    $(".sub-mutators-field").val("").change();

    try {
        const mutators = await getMutators();
        console.log(JSON.stringify(mutators));

        mutators.forEach(mutator => {
            $(".sub-mutators-field").append($("<option>", {
                text: mutator.name,
                value: mutator.id
            }));
        });
    }
    catch(error) {
        console.error(error);
        showToast("danger", "Error loading sub mutators", error, 18000);       
    }
    finally {
        // Re-enable the input
        $(".sub-mutators-field").prop("disabled", false);
    }
}

async function loadFilterOptions(guildId) {

    // Disable input while options are loading
    $("#subFilters").prop("disabled", true);

    // Delete existing options
    $("#subFilters option").each(function() {
        if ($(this).val())
            $(this).remove();
    });

    // Clear select2 input
    $("#subFilters").val("").change();

    try {
        const filters = await getFilters({guild_id: guildId});
        console.log(JSON.stringify(filters));

        filters.results.forEach(filter => {
            $("#subFilters").append($("<option>", {
                text: filter.name,
                value: filter.id
            }));
        });
    }
    catch(error) {
        console.error(error);
        showToast("danger", "Error loading sub filters", error, 18000);       
    }
    finally {
        // Re-enable the input
        $("#subFilters").prop("disabled", false);
    }

}

// #endregion