const chartDrawnPlugin = {
    id: 'chartDrawnPlugin',
    afterRender: (chart) => {
        if (chart.options.plugins.chartDrawnCallback) {
            chart.options.plugins.chartDrawnCallback();
        }
    }
};
Chart.register(chartDrawnPlugin);
let ctx = document.getElementById('myChart');
let chart;
function showChart() {
    document.getElementById('report-chart').style.display = 'block';
}

function hideChart() {
    document.getElementById('report-chart').style.display = 'none';
}

function showLoadingSpinner() {
    document.getElementById('loading-spinner').style.display = 'flex';
}

function hideLoadingSpinner() {
    document.getElementById('loading-spinner').style.display = 'none';
}

function getCriteria() {
    const type = document.getElementById('type-select') ? document.getElementById('type-select').value : 'none';
    // const type = 'daily';
    const startDate = document.getElementById('start-date') ? document.getElementById('start-date').value : null;
    const endDate = document.getElementById('end-date') ? document.getElementById('end-date').value : null;
    const searchText = document.getElementById('search-text') ? document.getElementById('search-text').value : null;

    return {
        type,
        start_period: startDate,
        end_period: endDate,
        search_text: searchText
    };
}
async function generateGraph(idChart) {

    if (idChart) {
        ctx = document.getElementById(idChart);
    }
    // Étape 1 : Générer le graphique
    const graphResponse = await fetch(
        macymedAdminScriptAjax.ajax_url + '?action=get_total_clicks',
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(getCriteria())
        }
    );
    if (!graphResponse.ok) {
        console.log('Error:', graphResponse.status);
    } else {
        let jsonResponse = await graphResponse.json();

        await updateChart(jsonResponse);
    }

}

async function saveChartImage() {
    // Convertir le graphique en base64
    const base64Image = chart.toBase64Image(); // ctx.toDataURL('image/png');

    // Envoyer l'image au serveur via AJAX
    let resultImageResponse = await fetch(
        macymedAdminScriptAjax.ajax_url + '?action=save_graph_image',
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(
                {
                    image: base64Image
                }
            )
        }
    );
    if (!resultImageResponse.ok) {
        console.log('Error:', resultImageResponse.status);
    } else {
        let jsonResponse = await resultImageResponse.json();
        console.log(jsonResponse);
        return jsonResponse;
    }

    return null;

}

async function updateChart(data) {
    const labels = data.map(item => item.period);
    const values = data.map(item => item.total_clicks);

    if (chart) {
        chart.destroy();
    }
    // Prépare une promesse pour attendre que le graphique soit dessiné
    let chartDrawnPromiseResolve;
    const chartDrawnPromise = new Promise(
        (resolve) => {
            chartDrawnPromiseResolve = resolve;
        }
    );
    chart = new Chart(
        ctx,
        {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Évolution des clics',
                    data: values,
                    borderColor: 'blue',
                    backgroundColor: 'rgba(0, 123, 255, 0.2)',
                    borderWidth: 2,
                    // data: datapoints,
                    // borderColor: Utils.CHART_COLORS.blue,
                    fill: false,
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                plugins: {
                    chartDrawnCallback: () => {
                        // Résout la promesse lorsque le graphique est dessiné
                        chartDrawnPromiseResolve();
                    }
                }
            }
        }
    );
    await chartDrawnPromise;
    return;

}
async function generateReport(reportData) {

    // Étape 2 : Générer le rapport PDF
    let reportResponse = await fetch(
        macymedAdminScriptAjax.ajax_url + '?action=generate_report_pdf',
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(reportData)
        }
    );
    if (reportResponse.ok) {
        let data = await reportResponse.json();
        // Afficher le lien vers le rapport
        document.getElementById('report-result').innerHTML = `
		< p > Rapport généré avec succès ! < a href          = "${data.data.file_url}" target = "_blank" > Télécharger le PDF < / a > < / p >
		`;
    } else {
        throw new Error('Erreur lors de la génération du rapport.');
    }
}
jQuery(document).ready(

);
async function initDashboard($){
    if(document.getElementById('chart-dashboard')){
        await generateGraph();
    }
}
async function initListClick($) {
    let ajaxUrlTable = macymedAdminScriptAjax.ajax_url;
    $('.toggle-details').on(
        'click',
        function (e) {
            e.preventDefault();

            var rowId = $(this).data('row');
            var detailsRow = $('#details-' + rowId);

            detailsRow.toggle(); // Affiche ou masque la sous-ligne
            $(this).find('span').toggleClass('dashicons-arrow-down dashicons-arrow-up');
        }
    );
    $('.details-button-referer').on('click', function () {
        const referer = $(this).data('referer');
        const $row = $(this).closest('tr');
        const $toggleIcon = $(this).find('span');

        // Rechercher la ligne ajoutée existante (si elle existe)
        const $existingRow = $row.next('.referer-details-row');

        // Basculer l'icône du toggle
        $toggleIcon.toggleClass('dashicons-arrow-down dashicons-arrow-up');

        if ($toggleIcon.hasClass('dashicons-arrow-down')) {
            // Si le toggle est fermé, supprimer la ligne existante
            $existingRow.remove();
        } else {
            // Si le toggle est ouvert
            if ($existingRow.length) {
                // Si une ligne existe déjà, on ne refait pas d'appel AJAX
                $existingRow.show();
            } else {
                // Sinon, faire l'appel AJAX et ajouter la ligne
                $.ajax({
                    url: ajaxUrlTable,
                    type: 'POST',
                    data: {
                        action: 'get_referer_details',
                        referer: referer,
                        mtl_nonce: macymedAdminScriptAjax.nonce
                    },
                    success: function (response) {
                        // Ajouter une ligne juste après la ligne actuelle
                        $row.after('<tr class="referer-details-row"><td colspan="3">' + response + '</td></tr>');
                    }
                });
            }
        }
    });


    $('.view-details').on('click', function () {
        const id = $(this).data('id');
        // Appel AJAX pour récupérer les détails
        $.post(ajaxUrlTable, {
            action: 'get_details',
            id: id,
            mtl_nonce: macymedAdminScriptAjax.nonce
        }, function (response) {
            if (response.success) {
                $('#modal-details-title').text(response.data.title);
                $('#modal-details-content').html(response.data.html);
                $('#details-modal').show();
            } else {
                alert(response.data.message || 'Une erreur est survenue.');
            }
        });
        // $('#details-modal').show();
    });

    $('#modal-close').on('click', function () {
        $('#details-modal').hide();
    });
    $('#details-modal').on('click', function (e) {
        if (e.target === this) {
            $('#details-modal').hide();
        }
    });

    $('#export-pdf').on('click', function () {
        const id = $('.view-details').data('id');
        window.location.href = ajaxurl + '?action=export_pdf&id=' + id;
    });



}

async function initSideBar(){
        const sidebar = document.querySelector(".macymed-custom-sidebar");
        const hamburger = document.querySelector(".macymed-hamburger");
    
        if(!sidebar || !hamburger){
            return;
        }
        hamburger.addEventListener("click", function() {
            sidebar.classList.toggle("active");
        });
  
}

async function initAdvancedStats() {
    if(!document.getElementById("macymed-link-traker-visualizer-wrap")){
        return;
    }
    document.getElementById("macymed-link-traker-visualizer-wrap").innerHTML += "<div id=\"macymed-link-traker-visualizer\"></div><div id=\"root\"></div>";
    // S\'assurer que notre script est chargé après WordPress
    setTimeout(() => {
        if (window.macymedLinkTrackerStatistiques && window.configGraphMacymedLinkTracker) {
            console.log("Initialisation du tracker...");
            console.log(configGraphMacymedLinkTracker);
            window.macymedLinkTrackerStatistiques("macymed-link-traker-visualizer",  window.configGraphMacymedLinkTracker, false);
        } else {
            console.error("Le tracker n\'est pas chargé correctement");
        }
    }, 500);

}
// }
jQuery(document).ready(function ($) {
    initListClick($);
    initDashboard($);
    initSideBar();
    initAdvancedStats();

    if (document.getElementById('generate-chart')) {
        document.getElementById('generate-chart').addEventListener('click', async function () {
            await generateGraph()
        });
    
    
        document.getElementById('generate-chart').click();
    }

    // initGraphReport($);
})