export function renderHorizontalBarChart(
    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 a barre orizzontali
    const horizontalBarData = chartData || [];
    const categories = horizontalBarData.map((item) => item.groupingValue);
    const passData = horizontalBarData.map((item) => item.passCount);
    const failData = horizontalBarData.map((item) => item.failCount);
    const otherData = horizontalBarData.map((item) => item.otherCount);

    // Configurazione del grafico a barre orizzontali
    const options = {
        series: [
            {
                name: "Pass",
                data: passData,
            },
            {
                name: "Fail",
                data: failData,
            },
            {
                name: "Others",
                data: otherData,
            },
        ],
        chart: {
            type: "bar",
            height: 600,
            stacked: true,
            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: false,
        },
        xaxis: {
            categories: categories,
            title: {
                text: "Number of Reports",
            },
        },
        yaxis: {
            title: {
                text: "Grouping Value",
            },
        },
        colors: ["#28A745", "#FF4D4D", "#FFA500"],
        fill: {
            opacity: 1,
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + " reports";
                },
            },
        },
        legend: {
            position: "top",
            horizontalAlign: "left",
            offsetX: 40,
        },
    };

    // 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>Grouping Value</th>
                    <th>Pass</th>
                    <th>Fail</th>
                    <th>Others</th>
                </tr>
            </thead>
            <tbody>
                ${horizontalBarData
                    .map(
                        (item) => `
                    <tr>
                        <td>${item.groupingValue}</td>
                        <td>${item.passCount}</td>
                        <td>${item.failCount}</td>
                        <td>${item.otherCount}</td>
                    </tr>
                `,
                    )
                    .join("")}
            </tbody>
        </table>
    `;

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