jQuery(document).ready(function ($) {
    // Wait for the DOM to be fully loaded
    $(window).on('load', function () {
        // Ensure the element exists before proceeding
        const heatmapContainer = $('#campaign-timeline-heatmap');
        if (!heatmapContainer.length) {
            console.error('Heatmap container not found.');
            return;
        }

        // Fetch campaign timeline data via AJAX
        $.ajax({
            url: rlMailWarmerHeatmap.ajax_url,
            method: 'POST',
            data: {
                action: 'rl_mailwarmer_get_timeline',
                post_id: rlMailWarmerHeatmap.post_id,
                security: rlMailWarmerHeatmap.nonce,
            },
            success: function (response) {
                if (response.success) {
                    console.log(response.data);
                    // Initialize the heatmap
                    const cal = new CalHeatmap();
                    cal.paint({
                        data: {
                                source: response.data,
                                x: 'date',
                                y: d => +d['target_volume'],
                            },
                        date: {
                                start: new Date(2024, 12, 4),
                            },
                        cellSize: 15,
                        range: 1, // Number of months to display
                        domain: { type: 'year' },
                        subDomain: { type: 'day' }, // Granularity: days
                        legend: [25, 50, 150, 200, 250],
                        legendColors: ["#efefef", "steelblue"],
                        legend: {
                                  show: true,
                                  label: 'Daily Volume',
                                  width: 150,
                                  marginLeft: 10,
                                  marginRight: 10,
                                },
                        scale: {
                                  color: {
                                    range: ['yellow', 'red'],
                                    interpolate: 'hsl',
                                    type: 'quantize',
                                    domain: [0, 150],
                                    scheme: 'YlOrRd',
                                  },
                                },
                        // start: new Date(2024, 12, 06),
                        verticalOrientation: true,
                        itemSelector: '#campaign-timeline-heatmap',
                    });
                } else {
                    heatmapContainer.html('<p>Error: ' + response.data + '</p>');
                }
            },
            error: function () {
                heatmapContainer.html('<p>Failed to load timeline data.</p>');
            },
        });
    });
});