export function renderAnalytesFailChart(
    analytesData,
    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;
    }

    // Validazione dei dati
    if (!Array.isArray(analytesData) || analytesData.length === 0) {
        chartContainer.innerHTML =
            '<p class="text-center text-muted">No failures to display.</p>';
        const tableContainer = document.querySelector(`#${tableContainerId}`);
        if (tableContainer) {
            tableContainer.innerHTML =
                '<p class="text-center text-muted">No failures to display.</p>';
        }
        return;
    }

    const labels = analytesData.map((item) => item.AnalyteName || "Unknown");
    const data = analytesData.map((item) => parseInt(item.FailCount, 10) || 0);

    // Verifica se ci sono dati validi da visualizzare
    const hasValidData = analytesData.some((item) => item.FailCount > 0);
    if (!hasValidData) {
        chartContainer.innerHTML =
            '<p class="text-center text-muted">No failures to display.</p>';
        const tableContainer = document.querySelector(`#${tableContainerId}`);
        if (tableContainer) {
            tableContainer.innerHTML =
                '<p class="text-center text-muted">No failures to display.</p>';
        }
        return;
    }

    // Configurazione del grafico a barre orizzontali
    const options = {
        series: [
            {
                name: "Failures",
                data: data,
            },
        ],
        chart: {
            type: "bar",
            height: 400,
            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: labels,
            title: {
                text: "Number of Failures",
            },
        },
        yaxis: {
            title: {
                text: "Analyte",
            },
        },
        colors: ["#FF4D4D"],
        fill: {
            opacity: 1,
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + " failures";
                },
            },
        },
    };

    // 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>Analyte</th>
                    <th>Failures</th>
                </tr>
            </thead>
            <tbody>
                ${analytesData
                    .map(
                        (item) => `
                    <tr>
                        <td>${item.AnalyteName || "Unknown"}</td>
                        <td>${parseInt(item.FailCount, 10) || 0}</td>
                    </tr>
                `,
                    )
                    .join("")}
            </tbody>
        </table>
    `;

    // Riprova a trovare il contenitore della tabella con un ritardo
    const renderTable = () => {
        const tableContainer = document.querySelector(`#${tableContainerId}`);
        if (tableContainer) {
            tableContainer.innerHTML = tableHTML;
        } else {
            console.error(
                `Contenitore della tabella non trovato: #${tableContainerId}`,
            );
        }
    };

    // Prova immediatamente e riprova dopo un breve ritardo
    renderTable();
    setTimeout(renderTable, 100);
}