pie charts

export const LeadSourceBreakdown = ({ dashBoardData, heading, dataKey }) => {

    const pieColors = generateColors(size(dashBoardData?.[dataKey]))

    const filteredData = useMemo(() => {
        const withoutZero = filter(dashBoardData?.[dataKey], (d) => d.leadCount !== 0)
        const withZero = filter(dashBoardData?.[dataKey], (d) => d.leadCount === 0)

        return (
            {
                withoutZero: withoutZero,
                withZero: withZero
            }
        )

    }, [dashBoardData, dataKey])

    return <Box w={'50%'}>
        <Box
            p={4}
            bg="white"
            shadow="md"
            borderRadius="lg"
            flex="1"
            minW="550px"
            maxH="450px"
        >
            <Text fontSize="md" fontWeight="semibold" mb={4} color="#333">
                {heading}
            </Text>
            <ResponsiveContainer width="100%" height={300}>
                <PieChart mb={4}>
                    <Pie
                        data={filteredData?.withoutZero || []}
                        dataKey="leadCount"
                        nameKey="name"
                        cx="50%"
                        cy="50%"
                        outerRadius={80}
                        label={({ name, leadCount, convertedLeadCount }) => {
                            const conversionRate = ((convertedLeadCount / leadCount) * 100).toFixed(1);
                            return `${name} (${convertedLeadCount}/${leadCount}) ${conversionRate}%`;
                        }}
                    >
                        {filteredData?.withoutZero?.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={pieColors[index]} />
                        ))}
                    </Pie>
                    <Tooltip />
                </PieChart>
            </ResponsiveContainer>
        </Box>
    </Box>
}




export const EnquiryDashboardBreakdowns = ({ dashboardData }) => {

    const finalData = useMemo(() => {
        if (!dashboardData?.allEnquirySourceWithCount) return [];

        const { merged, grouped } = reduce(dashboardData.allEnquirySourceWithCount, (acc, item) => {
            if (item._id === null || item._id === "") {
                if (!acc.merged) {
                    acc.merged = { _id: "N/A", totalCount: 0, convertedCount: 0 };
                }
                acc.merged.totalCount += item.totalCount;
                acc.merged.convertedCount += item.convertedCount;
            } else {
                acc.grouped.push(item);
            }
            return acc;
        }, { merged: null, grouped: [] });

        const formattedData = [
            ...(merged ? [{ ...merged, name: merged._id }] : []),
            ...grouped.map(item => ({ ...item, name: item._id })),
        ];

        return formattedData;
    }, [dashboardData]);

    const filteredDataStage = useMemo(() => {
        if (!dashboardData?.allEnquiryStgaeWithCount) return [];

        const { merged, grouped } = reduce(dashboardData.allEnquiryStgaeWithCount, (acc, item) => {
            if (item._id !== null && item._id !== "registered" && item._id !== "") {
                acc.grouped.push(item);
            }
            return acc;
        }, { merged: null, grouped: [] });

        const formattedDataStage = [
            ...(merged ? [{ ...merged, name: merged._id }] : []),
            ...grouped.map(item => ({ ...item, name: item._id })),
        ];

        return formattedDataStage;
    }, [dashboardData]);

    const finalDataStage = filteredDataStage;
    const colors = ['#8884d8', '#82ca9d', '#ffc658', '#ff7f50', '#0088fe', '#d0ed57'];

    return <Flex gap={4}>
        <Flex align={'stretch'} w={'50%'}>
            <Box
                p={4}
                bg="white"
                shadow="md"
                borderRadius="lg"
                flex="1"
                minW="700px"
                maxH="450px"
            >
                <Text fontSize="md" fontWeight="semibold" mb={4} color="#333">
                    Enquiry Source Breakdown
                </Text>
                <ResponsiveContainer width="100%" height={300}>
                    <PieChart>
                        <Pie
                            data={finalData}
                            dataKey="totalCount"
                            nameKey="name"
                            cx="50%"
                            cy="50%"
                            outerRadius={120}
                            label={({ name, totalCount, convertedCount }) => {
                                const conversionRate = ((convertedCount / totalCount) * 100).toFixed(1);
                                return `${name} (${convertedCount}/${totalCount}) ${conversionRate}%`;
                            }}
                        >
                            {finalData.map((entry, index) => (
                                <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
                            ))}
                        </Pie>
                        <Tooltip />
                    </PieChart>
                </ResponsiveContainer>
            </Box>
        </Flex>
        <Flex align={'stretch'} w={'50%'}>
            <Box
                p={4}
                bg="white"
                shadow="md"
                borderRadius="lg"
                flex="1"
                minW="700px"
                maxH="450px"
            >
                <Text fontSize="md" fontWeight="semibold" mb={4} color="#333">
                    Active Enquiry Stage Breakdown
                </Text>
                <ResponsiveContainer width="100%" height={300}>
                    <PieChart mb={4}>
                        <Pie
                            data={finalDataStage || []}
                            dataKey="totalCount"
                            nameKey="_id"
                            cx="50%"
                            cy="50%"
                            outerRadius={120}
                            fill="#8884d8"
                            label={({ _id: name, totalCount, convertedCount }) => {
                                return `${name} (${totalCount})`;
                            }}
                        >
                            {map(finalDataStage, (entry, index) => (
                                <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
                            ))}
                        </Pie>
                        <Tooltip />
                    </PieChart>
                </ResponsiveContainer>
            </Box>
        </Flex>
    </Flex>
}