import { generatePieTable } from "../utils/tableGenerator.js";

export function renderPhasePieChart(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 torta
    const phaseData = chartData || [];

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

    const labels = phaseData.map((item) => item.phase || "Unknown");
    const series = phaseData.map((item) => {
        const count = parseInt(item.totalProducts, 10);
        return isNaN(count) ? 0 : count;
    });

    // Verifica se ci sono dati validi da visualizzare
    const hasValidData = series.some((value) => value > 0);

    if (!hasValidData) {
        chartContainer.innerHTML =
            '<p class="text-center text-muted">No valid data to display.</p>';
        const tableContainer = document.querySelector(`#${tableContainerId}`);
        if (tableContainer) {
            tableContainer.innerHTML =
                '<p class="text-center text-muted">No valid data to display.</p>';
        }
        return;
    }

    // Configurazione del grafico a torta
    const options = {
        series: series,
        chart: {
            type: "pie",
            height: 350,
            toolbar: {
                show: true,
                tools: {
                    download: true,
                    selection: false,
                    zoom: false,
                    zoomin: false,
                    zoomout: false,
                    pan: false,
                    reset: false,
                },
            },
        },
        labels: labels,
        colors: [
            "#FF4560",
            "#008FFB",
            "#00E396",
            "#FEB019",
            "#FF66FF",
            "#775DD0",
        ],
        responsive: [
            {
                breakpoint: 480,
                options: {
                    chart: {
                        width: 200,
                    },
                    legend: {
                        position: "bottom",
                    },
                },
            },
        ],
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + " products";
                },
            },
        },
    };

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

    // Forza un aggiornamento del grafico dopo un breve ritardo
    setTimeout(() => {
        chart.updateOptions({});
    }, 100);

    // Genera la tabella usando la funzione esistente
    const tableHTML = generatePieTable(labels, series);

    // 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);
}