Object.defineProperties(Array.prototype, {
    count: {
        value: function (query) {
            /* 
               Counts number of occurrences of query in array, an integer >= 0 
               Uses the javascript == notion of equality.
            */
            var count = 0;
            for (let i = 0; i < this.length; i++)
                if (this[i] == query)
                    count++;
            return count;
        }
    }
});

const mean = arr => arr.reduce((p, c) => p + c, 0) / arr.length;

tables = $(".table-div");

$("#extra-div").append("<div id='shift-diffs'></div>");


function generateExtra() {
    $(".auto-generated").remove();
    global_shifts = new Set();

    total_summed_shift_diffs = 0;
    total_summed_shift_diffs_abs = 0;

    tables.each((n, table) => {

        rows = $(table).find(".worker-row");

        workers = {};

        rows.each((n, tr) => {


            worker_td = $(tr).find("td:first");

            worker = worker_td.attr("data-worker");

            shift_tds = $(tr).find(".rota-day");
            shifts = []

            shift_tds.each((n, td) => {
                let data_shift = $(td).attr("data-shift");
                if (data_shift && data_shift !== "") {
                    // Split by comma for multiple shifts per day
                    let split_shifts = data_shift.split(",");
                    split_shifts.forEach(s => {
                        if (s && s.trim() !== "") {
                            shifts.push(s.trim());
                        }
                    });
                }
            })

            shifts_unique = new Set(shifts);
            shifts_unique.delete("");
            global_shifts = new Set([...global_shifts, ...shifts_unique]);

            weekends_worked = 0;

            weeks = shift_tds.length / 7;

            whole_weekends_worked = 0;

            for (var i = 1; i <= weeks; i++) {
                if ($(tr).find(`[data-week='${i}'][data-day='Sat']`).attr("data-shift") != "" || $(tr).find(`[data-week='${i}'][data-day='Sun']`).attr("data-shift") != "") {
                    weekends_worked = weekends_worked + 1;
                }
                if ($(tr).find(`[data-week='${i}'][data-day='Sat']`).attr("data-shift") != "" && $(tr).find(`[data-week='${i}'][data-day='Sun']`).attr("data-shift") != "") {
                    whole_weekends_worked = whole_weekends_worked + 1;
                }
            }

            shift_counts = {};

            total_shifts = 0;
            days_lost = 0;
            shifts_unique.forEach(el => {
                shift_counts[el] = shifts.count(el);
                total_shifts = total_shifts + shifts.count(el);

                // why like this?
                if (el == "night_weekend") {
                    whole_weekends_worked = whole_weekends_worked - shifts.count(el) / 3
                }

                if ($("#global-settings").length == 1) {

                    n = $(`#${el}-tdl`).val();
                    if (!isNaN(n)) {
                        days_lost = days_lost + shifts.count(el) * n;
                    }


                }

                // // 5 days for weekday nights
                // if(el == "night_weekday") { days_lost = days_lost + shifts.count(el) / 4 * 5 }
                // // 4 days for weekend nights
                // if(el == "night_weekend") {
                //     days_lost = days_lost + shifts.count(el) / 3 * 4
                //     //whole_weekends_worked = whole_weekends_worked - shifts.count(el) / 3
                // }
                // // 0.5 for twilights
                // if(el.includes("twilight")) {
                //     twilight_days_lost = shifts.count(el) / 2
                //     days_lost = days_lost + twilight_days_lost

                // }

            });

            // Also 1 day for a whole weekend
            days_lost = days_lost + whole_weekends_worked

            // Highlight non working days
            nwds = JSON.parse(worker_td.attr("data-nwds"));
            nwds.forEach(element => {
                // Restrict to date ranges
                start_date = new Date(Date.parse(element[1]))
                end_date = new Date(Date.parse(element[2]))
                $(shift_tds).filter(`.${element[0]}`).each(
                    (n, td_el) => {
                        td_date = new Date(Date.parse(td_el.dataset.date));

                        if (td_date >= start_date && td_date < end_date) {
                            $(td_el).addClass("nwd");
                        }

                    }

                )
            });

            workers[worker] = {
                "site": worker_td.attr("data-site"),
                "nwds": worker_td.attr("data-nwds"),
                "fte": worker_td.attr("data-fte_adj"),
                "end_date": worker_td.attr("data-end_date"),
                "shift_diff": worker_td.attr("data-shift-diff"),
                "shifts": shifts,
                "shift_types": shifts_unique,
                "weekends_worked": weekends_worked,
                "shift_counts": shift_counts,
                "days_lost": days_lost,
                //"shifts"
            }

            sc = JSON.stringify(shift_counts);


            bank_holidays = shift_tds.filter(".bank-holiday").filter(function (i) {
                return $(this).attr('data-shift') != "";
            });

            bank_holidays_worked = bank_holidays.length;

            nights_worked = $(tr).find(".night-shift").length;

            shift_diff = JSON.parse(worker_td.attr("data-shift-diff"));
            summed_shift_diff = Object.values(shift_diff).reduce((a, b) => a + b);

            total_summed_shift_diffs = total_summed_shift_diffs + summed_shift_diff;
            total_summed_shift_diffs_abs = total_summed_shift_diffs_abs + Math.abs(summed_shift_diff);



            worker_td.get(0).dataset.shiftDiffSummed = summed_shift_diff.toPrecision(2);


            worker_td.after(`<div class='worker-summary auto-generated'>
            <span>Total shifts: ${total_shifts}, </span>
            <span>Weekends: ${weekends_worked}, </span>
            <span>Nights: ${nights_worked}, </span>
            <span>Bank holidays: ${bank_holidays_worked}, </span>
            <span class='shift-diff-span'>Summed shift diff: ${summed_shift_diff.toPrecision(2)}, </span>
            
            </div>`)

            if (summed_shift_diff >= 1) {
                worker_td.addClass("large-shift-diff-pos")
                $(tr).find(".shift-diff-span").addClass("large-shift-diff-pos")
            } else if (summed_shift_diff <= -1) {
                worker_td.addClass("large-shift-diff-neg")
                $(tr).find(".shift-diff-span").addClass("large-shift-diff-neg")

            }

        })


        sites = {};
        sites_days_lost = {}
        for (const worker in workers) {
            w = workers[worker];
            if (w.fte == 100) {
                for (let shift of w.shift_types) {
                    if (!(w.site in sites)) {
                        sites[w.site] = {};

                    }
                    if (!(shift in sites[w.site])) {
                        sites[w.site][shift] = [w.shift_counts[shift]];
                    } else {
                        sites[w.site][shift].push(w.shift_counts[shift]);
                    }
                }
                if (!(w.site in sites_days_lost)) {
                    sites_days_lost[w.site] = [w.days_lost];

                } else {
                    sites_days_lost[w.site].push(w.days_lost);
                }
            }
        }

        // Calculate site shift summaries
        // $(table).append("<div class='site-summary auto-generated'>Average shifts for a 100% FTE trainee</div>");

        // for(const site in sites) {
        //     $(table).find(".site-summary").append(`<div class='site site-${site}'><span class='site-name'>${site}</span></div>`);

        //     for(const shift in sites[site]) {
        //         average = mean(sites[site][shift])
        //         $(table).find(`.site-${site}`).append(`<div>${shift}: ${average.toFixed(2)}</div>`);
        //     }

        //     days_lost_avg = mean(sites_days_lost[site]);
        //     $(table).find(`.site-${site}`).append(`<div class='training-days-lost'>Training days lost: ${days_lost_avg.toFixed(2)}</div>`);
        // }

        summary_button = $("<button class='auto-generated'>Toggle Summary</button>").click(() => {
            $(table).find(".rota-day").toggleClass("hidden");
            $(table).find(".worker-summary").toggle();

        });


            $("#shift-diffs").before($(`<span>Total summed shift diff: ${total_summed_shift_diffs}</span><br/>`));
            $("#shift-diffs").before($(`<span>Total summed shift diff (abs): ${total_summed_shift_diffs_abs}</span><br/>`));


        $(table).before(summary_button);



    });
    return global_shifts
}

shifts = generateExtra();

if (shifts.size < 1) {
    shifts = $("#shifts-container").data("shifts");
}

oshifts = Array.from(shifts).sort()

$("body").append("<div><button id='show-colour-diff'>Show colour diff</button><table class='tsummary'></table></div>")
$("#show-colour-diff").on("click", (evt) => {
    $("table.tsummary").find(`td.target-assigned`).toggleClass("no-colour");
});

$("table.tsummary").append("<tr class='header'></tr>");
h = $("table.tsummary tr.header");
h.append(`<th>Worker</th>`);
h.append(`<th>Site</th>`);
h.append(`<th>FTE</th>`);
h.append(`<th>FTE (adj)</th>`);


oshifts.forEach((s) => {
    h.append(`<th>${s}</th>`);

});



$(".table-div .worker-row .worker").each((n, tr) => {
    //worker_td = $(tr).find("td").first();
    jtr = $(tr);
    row = $("<tr></tr>");
    row.append(`<td>${jtr.data("worker")}</td>`)
    row.append(`<td>${jtr.data("site")}</td>`)
    row.append(`<td>${jtr.data("fte")}</td>`)
    row.append(`<td>${parseFloat(jtr.data("fte_adj")).toFixed(2)}</td>`)

    if (jtr.data("shift-diff-summed") >= 1) {
        row.addClass("large-shift-diff-pos")
    } else if (jtr.data("shift-diff-summed") <= -1) {
        row.addClass("large-shift-diff-neg")

    }

    shift_counts = jtr.data("shift-counts")
    locum_shift_counts = jtr.data("locum-shift-counts")
    shift_targets = jtr.data("worker-targets")


    oshifts.forEach((s) => {
        if (s in shift_targets && shift_targets[s] > 0) {
            if (s in shift_counts) {
                c = shift_counts[s];
            } else {
                c = 0;
            }
            locum_shifts = ""
            if (s in locum_shift_counts) {
                locum_shifts = `+${locum_shift_counts[s]}`
            }
            row.append(`<td class="target-assigned ${s}" data-assigned=${c} data-target=${shift_targets[s].toFixed(2)} data-diff=${shift_targets[s].toFixed(2) - c}>${c}${locum_shifts} (${shift_targets[s].toFixed(2)})</td>`)

        } else {
            row.append(`<td>-</td>`)
        }
    })

    $("table.tsummary").append(row)
})

shift_max_diff_map = {};
shift_min_diff_map = {};

oshifts.forEach((s) => {
    shift_max_diff_map[s] = 0;
    shift_min_diff_map[s] = 0;
    $("table.tsummary").find(`td.target-assigned.${s}`).each((n, td) => {
        shift_max_diff_map[s] = Math.max(shift_max_diff_map[s], td.dataset.diff)
        shift_min_diff_map[s] = Math.min(shift_min_diff_map[s], td.dataset.diff)
    })

});

oshifts.forEach((shift) => {
    $("table.tsummary").find(`td.target-assigned.${shift}`).each((n, td) => {
        diff = td.dataset.diff;

        if (diff > 0) {
            max_diff = shift_max_diff_map[shift];
            var h = 120 - Math.floor((max_diff - diff) * 120 / max_diff);
            var s = diff / max_diff;
            //var s = 0.5;
            var v = 1;
            $(td).css({
                backgroundColor: hsv2rgb(h, s, 1)
            })
        } else {
            min_diff = shift_min_diff_map[shift]

            var h = Math.floor((min_diff - diff) * 120 / min_diff);
            var s = diff / min_diff;
            //var s = 0.5;
            var v = 1;
            $(td).css({
                backgroundColor: hsv2rgb(h, s, 1)
            })

        }
        $(td).addClass("no-colour")
        //s = Math.max(shift_max_diff_map[s], td.dataset.diff)
        //shift_min_diff_map[s] = Math.min(shift_max_diff_map[s], td.dataset.diff)
    })

});

let selectedShifts = new Set();

let shiftColors = {};

oshifts.forEach((shift, i) => {
    selectedShifts.add(shift);
    // Assign a unique color for each shift using HSL
    shiftColors[shift] = `hsl(${(i * 360 / oshifts.length)}, 70%, 80%)`;
});

// Add a button to toggle grid view
$("#shift-timetable-options").append(
    `<button id="toggle-grid-view" style="margin-left:10px;">Toggle Linear/Grid View</button><br/>`
);
// Add help text to the shift timetable section
$("#shift-timetable-options").prepend(`
    <details id="shift-timetable-help" style="margin-bottom:8px; font-size: 0.95em; color: #444;">
        <summary><b>Shift Timetables Help:</b></summary>
        <ul style="margin: 4px 0 0 18px; padding: 0;">
            <li>Select one or more shifts below to view which workers are assigned on each day.</li>
            <li>Use the colour pickers to customise shift colours in the timetable and main table.</li>
            <li>Toggle between linear and grid view using the "Toggle Linear/Grid View" button.</li>
        </ul>
    </details>
`);

let gridViewEnabled = false;

$("#toggle-grid-view").on("click", function () {
    gridViewEnabled = !gridViewEnabled;
    renderShiftTimetable();
});


const shiftColourControls = $(`
    <details><summary>Shift Timetable Colours</summary>
    <div id="shift-colour-controls" style="margin:16px 0;">
        <b>Shift timetable colours:</b>
        <span id="shift-colour-buttons"></span>
    </div>
    </details>
`);
$("#shift-timetable-options").append(shiftColourControls);

// Add colour pickers for each shift
oshifts.forEach(shift => {
    // Colour picker for the shift
    let colorInput = $(`<input type="color" class="shift-colour-picker" data-shift="${shift}" value="${rgb2hex(shiftColors[shift])}" style="margin-left:2px; vertical-align:middle;" title="Pick colour for ${shift}">`);
    // Label for the shift
    let label = $(`<label style="margin-right:10px;">${shift}</label>`);
    // On change, update the shiftColors map, button color, and re-render the timetable
    colorInput.on("input", function () {
        shiftColors[shift] = $(this).val();
        // Update the corresponding shift button color
        $(`#shift-timetable-options button[data-shift='${shift}']`).css("background", selectedShifts.has(shift) ? shiftColors[shift] : "");
        renderShiftTimetable();
    });
    $("#shift-colour-buttons").append(label.append(colorInput));
});
// Add the toggle button if not already present
if ($("#show-all-shifts").length === 0) {
    $("#shift-timetable-options").append(
        `<button id="show-all-shifts" style="margin-left:10px;">Show All Shifts</button>`
    );
}

let allShiftsShown = false; // Start with all shifts shown by default

function updateShowAllShiftsButton() {
    if (allShiftsShown) {
        $("#show-all-shifts").addClass("active").text("Hide All Shifts");
    } else {
        $("#show-all-shifts").removeClass("active").text("Show All Shifts");
    }
}

// Toggle logic
$("#show-all-shifts").off("click").on("click", function () {
    allShiftsShown = !allShiftsShown;
    if (allShiftsShown) {
        // Select all shifts
        oshifts.forEach((shift) => {
            selectedShifts.add(shift);
            $(`#shift-timetable-options button[data-shift='${shift}']`)
                .addClass("selected")
                .css("background", shiftColors[shift]);
        });
    } else {
        // Deselect all shifts
        oshifts.forEach((shift) => {
            selectedShifts.delete(shift);
            $(`#shift-timetable-options button[data-shift='${shift}']`)
                .removeClass("selected")
                .css("background", "");
        });
    }
    updateShowAllShiftsButton();
    renderShiftTimetable();
});

// Ensure the button state is correct on page load and after timetable render
updateShowAllShiftsButton();
// Utility to convert hsl to hex for initial value
function rgb2hex(rgb) {
    // Accepts hsl() or rgb() or hex
    if (rgb.startsWith("#")) return rgb;
    if (rgb.startsWith("hsl")) {
        // Convert hsl to rgb
        let hsl = rgb.match(/hsl\(([\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)/);
        if (!hsl) return "#ffe066";
        let h = Number(hsl[1]), s = Number(hsl[2]) / 100, l = Number(hsl[3]) / 100;
        let a = s * Math.min(l, 1 - l);
        function f(n) {
            let k = (n + h / 30) % 12;
            let color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
            return Math.round(255 * color);
        }
        return "#" + [f(0), f(8), f(4)].map(x => x.toString(16).padStart(2, "0")).join("");
    }
    if (rgb.startsWith("rgb")) {
        let rgbArr = rgb.match(/\d+/g).map(Number);
        return "#" + rgbArr.map(x => x.toString(16).padStart(2, "0")).join("");
    }
    return "#ffe066";
}

// Add a worker filter input to the shift timetable section
$("#shift-timetable-options").prepend(`
    <div id="shift-timetable-worker-filter" style="margin-bottom:8px;">
        <label for="worker-filter-input"><b>Filter workers:</b></label>
        <input type="text" id="worker-filter-input" placeholder="Type to filter by name..." style="margin-left:4px; padding:2px 6px;"/>
    </div>
`);

// Store the current filter value
let workerFilterValue = "";

// Update the filter value on input
$("#worker-filter-input").on("input", function() {
    workerFilterValue = $(this).val().toLowerCase();
    renderShiftTimetable();
});

// Patch renderShiftTimetable to filter workers in both linear and grid views
function renderShiftTimetable() {
    $("#shift-timetable-div").empty();
    if (selectedShifts.size === 0) return;

    // Helper: returns true if worker name matches filter
    function workerMatchesFilter(workerName) {
        if (!workerFilterValue) return true;
        return workerName.toLowerCase().includes(workerFilterValue);
    }

    if (!gridViewEnabled) {
        // Linear view
        let table = $("<table id='linear-shift-timetable'>");
        let headerRow = $("<tr>");
        headerRow.append("<th>Date</th><th>Week</th><th>Day</th><th>Worker(s)</th>");
        table.append(headerRow);

        $("table#main-table th.date").each((n, th) => {
            let date = th.dataset.date;
            let week = "";
            let day = "";
            let firstTd = $(`table#main-table td[data-date='${date}']`).first();
            if (firstTd.length) {
                week = firstTd.attr("data-week") || "";
                day = firstTd.attr("data-day") || "";
            }

            let row = $("<tr>");
            row.append(`<td>${date}</td>`);
            row.append(`<td>${week}</td>`);
            row.append(`<td>${day}</td>`);

            let workerCells = [];
            $(`table#main-table td[data-date='${date}']`).filter(function () {
                let shifts = $(this).attr("data-shift");
                if (!shifts) return false;
                let cell_shifts = shifts.split(",").map(s => s.trim());
                return Array.from(selectedShifts).some(s => cell_shifts.includes(s));
            }).each((n, td) => {
                let workerTd = $(td).closest("tr").children("td:first");
                let workerName = workerTd.find("span.name").text().trim();
                if (!workerMatchesFilter(workerName)) return;
                let cell_shifts = $(td).attr("data-shift").split(",").map(s => s.trim());
                let matchedShifts = Array.from(selectedShifts).filter(s => cell_shifts.includes(s));
                let color = "#fff";
                if (matchedShifts.length === 1) {
                    color = shiftColors[matchedShifts[0]];
                } else if (matchedShifts.length > 1) {
                    color = `linear-gradient(90deg, ${shiftColors[matchedShifts[0]]} 0 50%, ${shiftColors[matchedShifts[1]]} 50% 100%)`;
                }
                workerCells.push(`<td style="background:${color}">${workerName}</td>`);
            });

            if (workerCells.length === 0) {
                row.append("<td></td>");
            } else {
                row.append(workerCells.join(""));
            }

            table.append(row);
        });
        $("#shift-timetable-div").append(table);
        return;
    }

    // Grid view
    let weeks = [];
    let daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
    $("table#main-table td[data-week]").each(function () {
        let week = $(this).attr("data-week");
        if (week && !weeks.includes(week)) weeks.push(week);
    });
    weeks = weeks.sort((a, b) => parseInt(a) - parseInt(b));

    let workerIds = [];
    let workerIdToName = {};
    $("table#main-table td.worker").each(function () {
        let workerId = $(this).attr("data-worker-id");
        if (workerId && !workerIds.includes(workerId)) {
            let workerName = $(this).find("span.name").text().trim();
            if (workerMatchesFilter(workerName)) {
                workerIds.push(workerId);
                workerIdToName[workerId] = workerName;
            }
        }
    });

    let cellMap = {};
    $("table#main-table td.worker").each(function () {
        let workerId = $(this).attr("data-worker-id");
        let workerName = $(this).find("span.name").text().trim();
        if (!cellMap[workerId]) cellMap[workerId] = { name: workerName, cells: {} };
    });
    $("table#main-table td[data-week][data-day]").each(function () {
        let td = $(this);
        let tr = td.closest("tr");
        let workerTd = tr.find("td.worker");
        let workerId = workerTd.attr("data-worker-id");
        let week = td.attr("data-week");
        let day = td.attr("data-day");
        let shifts = (td.attr("data-shift") || "").split(",").map(s => s.trim()).filter(Boolean);
        if (workerId && week && day) {
            if (!cellMap[workerId].cells[week]) cellMap[workerId].cells[week] = {};
            cellMap[workerId].cells[week][day] = shifts;
        }
    });

    let gridTable = $(`<table class="shift-grid-table" style="margin-bottom:20px; border-collapse:collapse; width:auto;"><caption>Shift Grid</caption></table>`);
    let header = $("<tr><th style='border:1px solid #888; min-width:60px; width:80px;'>Week</th></tr>");
    daysOfWeek.forEach(day => header.append(`<th style='border:1px solid #888;'>${day}</th>`));
    gridTable.append(header);

    weeks.forEach(week => {
        let row = $(`<tr></tr>`);
        row.append(`<td style="border:1px solid #888; min-width:60px; width:80px; font-weight:bold;">${week}</td>`);
        daysOfWeek.forEach(day => {
            let cellContent = "";
            for (const workerId of workerIds) {
                let worker = cellMap[workerId];
                let shifts = (worker.cells[week] && worker.cells[week][day]) || [];
                let matchedShifts = Array.from(selectedShifts).filter(s => shifts.includes(s));
                if (matchedShifts.length > 0) {
                    let color = "#fff";
                    if (matchedShifts.length === 1) {
                        color = shiftColors[matchedShifts[0]];
                    } else if (matchedShifts.length > 1) {
                        color = `linear-gradient(90deg, ${shiftColors[matchedShifts[0]]} 0 50%, ${shiftColors[matchedShifts[1]]} 50% 100%)`;
                    }
                    cellContent += `<div style="background:${color};margin:1px 0;padding:0 2px;border-radius:3px;display:inline-block;">${worker.name}</div> `;
                }
            }
            row.append(`<td style="border:1px solid #888; min-width:40px; text-align:center;">${cellContent}</td>`);
        });
        gridTable.append(row);
    });
    $("#shift-timetable-div").append(gridTable);
}

// Patch the timetable button logic to use renderShiftTimetable
oshifts.forEach((shift) => {
    let button = $(`<button data-shift='${shift}'>${shift}</button>`);
    button.css({
        background: "",
        border: "1px solid #888",
        margin: "2px",
        color: "#222"
    });

    button.on("click", function (evt) {
        let s = evt.target.dataset.shift;
        if (selectedShifts.has(s)) {
            selectedShifts.delete(s);
            $(this).removeClass("selected");
            $(this).css("background", "");
        } else {
            selectedShifts.add(s);
            $(this).addClass("selected");
            $(this).css("background", shiftColors[shift]);
        }
        renderShiftTimetable();
    });

    $("#shift-timetable-options").append(button);
});
//$("table.summary")

// $("body").prepend("<div id='global-settings'>Settings:<br />Customise training days lost per shift (you need to press recalculate for changes to take effect)<form></form></div>")

// shifts.forEach((s) => {

//     disable = false;
//     if(s.includes("twilight")) {
//         value = 0.5;
//     } else if(s == "night_weekend") {
//         value = 4 / 3;
//     } else if(s == "night_weekday") {
//         value = 5 / 4;
//     } else {
//         disable = true;
//         value = 0;
//     }

//     if(!disable) {
//         $("#global-settings form").append(`<span class='tdl-settings'><label for="${s}-tdl">${s}</label><input type="number" id="${s}-tdl" name="${s}-tdl" value='${value}'></span>`);
//     }


// })
// $("#global-settings").append($("<button >Recalculate</button>").click(() => {
//     generateExtra();
// }))

// generateExtra();

$(".table-div + pre").each((n, pre) => {

    $(pre).before($("<button class='shift-breakdown-button'>Show shift breakdown</button>").click(() => {
        $(pre).toggle();
    }));

})


$("td").hover((e) => {
    // start hover
    worker_td = $(e.target).closest('tr').find('td:first')[0]
    pair = worker_td.dataset.pair;
    index = $(e.target).index() - 1;
    if (pair > 0) {
        $(`td[data-pair=${pair}]`).each((n, el) => {
            $($(el).closest('tr').find('td').get(index)).addClass("pair-match")
        })
    }

    // Find the span under the mouse, if any
    let targetSpan = $(e.target).closest("span.multi-shift-shift").get(0) ||
        ($(e.target).hasClass("multi-shift-shift") ? e.target : null);

    if (targetSpan) {
        // Only highlight spans with the same text
        let shiftDisplay = $(targetSpan).text().trim();
        $("span.multi-shift-shift").filter(function () {
            return $(this).text().trim() === shiftDisplay;
        }).addClass("shift-highlight");
    } else if (e.target.dataset.shift != undefined && e.target.dataset.shift.length > 0) {
        // Fallback: highlight all cells containing ANY of the hovered shifts (legacy)
        let hovered_shifts = e.target.dataset.shift.split(",").map(s => s.trim());
        $("td").filter(function () {
            let shifts = $(this).attr("data-shift");
            if (!shifts) return false;
            let cell_shifts = shifts.split(",").map(s => s.trim());
            return hovered_shifts.some(s => cell_shifts.includes(s));
        }).addClass("shift-highlight");
    }

}, (e) => {
    // end hover
    $("td.pair-match").removeClass("pair-match")
    $("td.shift-highlight").removeClass("shift-highlight")
    $("span.shift-highlight").removeClass("shift-highlight")
    $("td.remote-site-match").removeClass("remote-site-match")
});


$("#rota-table tr td:first-child").each((n, td) => {
    $(td).click(() => {
        viewWorker(td);
    })
})

function viewWorker(worker) {
    ds = worker.dataset;
    dlg = $(`<div class='dialog' title='${ds.worker}'>
    Site: ${ds.site}</br>
    FTE: ${ds.fte} (${ds.fte_adj})</br>
    Start date: ${ds.start_date}</br>
    End date: ${ds.end_date}</br>
    Non working days: ${ds.nwds}</br>
    Remote site: ${ds.remoteSite}</br>
    Summed shift diff: ${ds.shiftDiffSummed}
    </div>`)
    $("body").append(dlg)

    shifts = JSON.parse(ds.shiftCounts)
    shift_targets = JSON.parse(ds.workerTargets)
    shift_diffs = JSON.parse(ds.shiftDiff)

    let shift_count_table = document.createElement("table")
    shift_count_table.classList.add("shift-table")
    let header_row = shift_count_table.createTHead().insertRow();
    header_row.insertCell().appendChild(document.createTextNode("Shift"))
    header_row.insertCell().appendChild(document.createTextNode("Count"))
    header_row.insertCell().appendChild(document.createTextNode("Target"))
    header_row.insertCell().appendChild(document.createTextNode("Diffs"))


    table_body = shift_count_table.createTBody()

    for (const shift in shifts) {
        let row = table_body.insertRow();
        row.insertCell().appendChild(document.createTextNode(shift))
        row.insertCell().appendChild(document.createTextNode(shifts[shift]))
        row.insertCell().appendChild(document.createTextNode(shift_targets[shift].toPrecision(2)))
        row.insertCell().appendChild(document.createTextNode(shift_diffs[shift].toPrecision(2)))
    }

    dlg.get(0).appendChild(shift_count_table)
    dlg.dialog()



}

$("#export-div").append($("#main-table").clone().attr("id", "gen-table").addClass("transposed"))

$("#gen-table").each(function () {
    var $this = $(this);
    var newrows = [];
    //$this.find("th.site-title").parent().remove();
    $this.find("tr").each(function (rowToColIndex) {
        $(this).find("td, th").each(function (colToRowIndex) {
            if (newrows[colToRowIndex] === undefined) {
                newrows[colToRowIndex] = $("<tr></tr>");
            }
            while (newrows[colToRowIndex].find("td, th").length < rowToColIndex) {
                newrows[colToRowIndex].append($("<td></td>"));
            }
            newrows[colToRowIndex].append($(this));
        });
    });
    $this.find("tr").remove();
    $.each(newrows, function () {
        $this.append(this);
    });

    $this.find("td.rota-day").each((n, el) => {
        $(el).text(el.dataset.shift)
    });
});

function hsv2rgb(h, s, v) {
    // adapted from http://schinckel.net/2012/01/10/hsv-to-rgb-in-javascript/
    var rgb, i, data = [];
    if (s === 0) {
        rgb = [v, v, v];
    } else {
        h = h / 60;
        i = Math.floor(h);
        data = [v * (1 - s), v * (1 - s * (h - i)), v * (1 - s * (1 - (h - i)))];
        switch (i) {
            case 0:
                rgb = [v, data[2], data[0]];
                break;
            case 1:
                rgb = [data[1], v, data[0]];
                break;
            case 2:
                rgb = [data[0], v, data[2]];
                break;
            case 3:
                rgb = [data[0], data[1], v];
                break;
            case 4:
                rgb = [data[2], data[0], v];
                break;
            default:
                rgb = [v, data[0], data[1]];
                break;
        }
    }
    return '#' + rgb.map(function (x) {
        return ("0" + Math.round(x * 255).toString(16)).slice(-2);
    }).join('');
};

//$("#workers-json-target").append(syntaxHighlight(JSON.stringify(JSON.parse(($("#worker_details").data("workers"))))))

function syntaxHighlight(json) {
    if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, 2);
    }
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

(function() {
    const mainTable = document.getElementById("main-table");
    if (!mainTable) return;

    // Helper to remove highlight from all headers
    function clearColHover() {
        const ths = mainTable.querySelectorAll("th.col-hover");
        ths.forEach(th => th.classList.remove("col-hover"));
    }

    // Mouseover handler for all cells
    mainTable.addEventListener("mouseover", function(e) {
        let cell = e.target.closest("td,th");
        if (!cell) return;
        // Find the column index
        let colIdx = cell.cellIndex;
        if (colIdx === undefined) return;
        clearColHover();
        // Highlight the header in this column (first row)
        let headerRow = mainTable.tHead ? mainTable.tHead.rows[0] : mainTable.rows[0];
        if (headerRow && headerRow.cells[colIdx]) {
            headerRow.cells[colIdx].classList.add("col-hover");
        }
    });

    // Mouseout handler to clear highlight
    mainTable.addEventListener("mouseout", function(e) {
        clearColHover();
    });


})();

// --- Add a button to show the Display Settings modal ---
$("#main-table").before(
    `<button id="show-display-settings" style="margin:8px 0 8px 0; float:right;">Display Settings</button>`
);

// --- Modal show/hide logic ---
$("#show-display-settings").on("click", function() {
    $("#display-settings-modal").show();
});
// Attach the event handler after the modal is added to the DOM
$(document).on("click", "#close-display-settings", function() {
    $("#display-settings-modal").hide();
});

// --- Modal HTML (replace the highlight-days-controls div with this) ---
const displaySettingsModal = $(`
<div id="display-settings-modal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:10000; background:#fff; border:2px solid #888; border-radius:8px; box-shadow:0 4px 24px #0002; padding:24px; min-width:320px;">
    <h3 style="margin-top:0;">Display Settings</h3>
    <div id="highlight-days-controls" style="margin:8px 0;">
        <b>Highlight days of week:</b>
        <span id="highlight-days-buttons"></span>
    </div>
    <div style="text-align:right; margin-top:16px;">
        <button id="close-display-settings">Close</button>
    </div>
</div>
`);
$("body").append(displaySettingsModal);

// --- Highlight day buttons in modal with color pickers ---
const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
let highlightedDays = new Set();
let highlightDayColors = {}; // day -> color

// Default highlight color
const defaultHighlightColor = "#ffe066";

// --- Add force assigned highlight controls to the Display Settings modal ---
const forceAssignedControls = $(`
    <div id="force-assigned-controls" style="margin:16px 0;">
        <label>
            <input type="checkbox" id="highlight-force-assigned" checked>
            Highlight force assigned shifts
        </label>
    </div>
`);
$("#display-settings-modal #highlight-days-controls").after(forceAssignedControls);

// --- Highlighting logic ---
function updateDayHighlights() {
    // Remove previous highlights and reset borders/backgrounds
    $("#main-table td, #main-table th").removeClass("day-highlighted")
        .css("border-left", "").css("border-right", "").css("background", "");

    // For each selected day, highlight all cells in that column
    highlightedDays.forEach(day => {
        let color = highlightDayColors[day] || defaultHighlightColor;
        // Highlight th: only change border color, not background
        $(`#main-table th[data-day='${day}']`)
            .addClass("day-highlighted")
            .css("border-left", `3px solid ${color}`)
            .css("border-right", `3px solid ${color}`)
            .css("background", "");
        // Highlight td: only change border color, not background
        $(`#main-table td[data-day='${day}']`)
            .addClass("day-highlighted")
            .css("border-left", `3px solid ${color}`)
            .css("border-right", `3px solid ${color}`)
            .css("background", "");
    });
    // Update modal button states
    $("#highlight-days-buttons .highlight-day-btn").each(function() {
        let day = $(this).data("day");
        if (highlightedDays.has(day)) {
            $(this).addClass("highlighted");
        } else {
            $(this).removeClass("highlighted");
        }
    });
}

// --- Highlighting logic for force assigned shifts ---
function updateForceAssignedHighlights() {
    if ($("#highlight-force-assigned").prop("checked")) {
        // Add highlight to all force assigned cells
        $("#main-table td.force-assigned").addClass("force-assigned-highlight");
    } else {
        // Remove highlight
        $("#main-table td.force-assigned").removeClass("force-assigned-highlight");
    }
}

// --- Update both day and force assigned highlights together ---
function updateAllHighlights() {
    updateDayHighlights();
    updateForceAssignedHighlights();
}

// --- Update force assigned highlights when checkbox changes ---
$("#display-settings-modal").on("change", "#highlight-force-assigned", function() {
    updateForceAssignedHighlights();
});




// --- Also call updateAllHighlights on modal open ---
$("#show-display-settings").on("click", function() {
    $("#display-settings-modal").show();
    updateAllHighlights();
});

// --- Highlight day buttons in modal with color pickers ---
daysOfWeek.forEach(day => {
    // Button to toggle highlight
    let btn = $(`<button type="button" class="highlight-day-btn" data-day="${day}" style="margin:0 2px;">${day}</button>`);
    // Color picker
    let colorInput = $(`<input type="color" class="highlight-day-color" data-day="${day}" value="${defaultHighlightColor}" style="margin-left:2px; vertical-align:middle;" title="Pick highlight color for ${day}">`);
    highlightDayColors[day] = defaultHighlightColor;

    btn.on("click", function () {
        if (highlightedDays.has(day)) {
            highlightedDays.delete(day);
            $(this).removeClass("highlighted");
        } else {
            highlightedDays.add(day);
            $(this).addClass("highlighted");
        }
        updateAllHighlights();
    });

    colorInput.on("input", function () {
        highlightDayColors[day] = $(this).val();
        updateAllHighlights();
    });

    $("#highlight-days-buttons").append(btn).append(colorInput);
});


// --- Initial highlight on page load ---
$(function() {
    updateAllHighlights();

});