export function renderWorstSuppliersChart(
    chartData,
    containerId,
    tableContainerId,
) {
    // Pulizia del contenitore del grafico
    const chartContainer = document.querySelector(`#${containerId}`);
    if (chartContainer) {
        chartContainer.innerHTML = "";
    } else {
        console.error(`Contenitore del grafico non trovato: #${containerId}`);
        return;
    }

    // Estrai i dati per il grafico
    const worstSuppliers = chartData || [];
    const suppliers = worstSuppliers.map((item) => item.supplier);
    const failPercentages = worstSuppliers.map((item) => item.failPercentage);

    // Configurazione del grafico a barre orizzontali
    const options = {
        series: [
            {
                name: "Fail Percentage",
                data: failPercentages,
            },
        ],
        chart: {
            type: "bar",
            height: 600,
            toolbar: {
                show: true,
                tools: {
                    download: true,
                    selection: false,
                    zoom: false,
                    zoomin: false,
                    zoomout: false,
                    pan: false,
                    reset: false,
                },
            },
        },
        plotOptions: {
            bar: {
                horizontal: true,
                barHeight: "80%",
            },
        },
        dataLabels: {
            enabled: true,
            formatter: function (val) {
                return val.toFixed(2) + "%";
            },
        },
        xaxis: {
            categories: suppliers,
            title: {
                text: "Fail Percentage (%)",
            },
        },
        yaxis: {
            title: {
                text: "Supplier",
            },
        },
        colors: ["#FF4D4D"],
        fill: {
            opacity: 1,
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val.toFixed(2) + "%";
                },
            },
        },
    };

    // Render del grafico
    const chart = new ApexCharts(chartContainer, options);
    chart.render();

    // Genera una tabella per i dati
    const tableHTML = `
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Supplier</th>
                    <th>Fail Percentage</th>
                    <th>Total Reports</th>
                    <th>Failed Reports</th>
                </tr>
            </thead>
            <tbody>
                ${worstSuppliers
                    .map(
                        (item) => `
                    <tr>
                        <td>${item.supplier}</td>
                        <td>${item.failPercentage.toFixed(2)}%</td>
                        <td>${item.totalReports}</td>
                        <td>${item.failedReports}</td>
                    </tr>
                `,
                    )
                    .join("")}
            </tbody>
        </table>
    `;

    const tableContainer = document.querySelector(`#${tableContainerId}`);
    if (tableContainer) {
        tableContainer.innerHTML = tableHTML;
    } else {
        console.error(
            `Contenitore della tabella non trovato: #${tableContainerId}`,
        );
    }
}