export function renderPhaseBarChart(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
    const phaseRatingsData = chartData || [];

    // Validazione dei dati
    if (!Array.isArray(phaseRatingsData) || phaseRatingsData.length === 0) {
        chartContainer.innerHTML =
            '<p class="text-center text-muted">No data available for Phase Rating Distribution.</p>';
        const tableContainer = document.querySelector(`#${tableContainerId}`);
        if (tableContainer) {
            tableContainer.innerHTML =
                '<p class="text-center text-muted">No data available.</p>';
        }
        return;
    }

    const phases = phaseRatingsData.map((item) => item.phase || "Unknown");
    const passData = phaseRatingsData.map(
        (item) => parseInt(item.passCount) || 0,
    );
    const failData = phaseRatingsData.map(
        (item) => parseInt(item.failCount) || 0,
    );
    const otherData = phaseRatingsData.map(
        (item) => parseInt(item.otherCount) || 0,
    );

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

    // 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: phases,
            title: {
                text: "Number of Reports",
            },
        },
        yaxis: {
            title: {
                text: "Phase",
            },
        },
        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>Phase</th>
                    <th>Pass</th>
                    <th>Fail</th>
                    <th>Others</th>
                </tr>
            </thead>
            <tbody>
                ${phaseRatingsData
                    .map(
                        (item) => `
                    <tr>
                        <td>${item.phase || "Unknown"}</td>
                        <td>${parseInt(item.passCount) || 0}</td>
                        <td>${parseInt(item.failCount) || 0}</td>
                        <td>${parseInt(item.otherCount) || 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;
            tableContainer.style.display = "block"; // Forza la visibilità
        } else {
            console.error(
                `Contenitore della tabella non trovato: #${tableContainerId}`,
            );
        }
    };

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