// import React, { useEffect, useRef, useState } from 'react';
// import Highcharts from 'highcharts';
// import HighchartsReact from 'highcharts-react-official';
// import "./PieChart.scss"
// const DynamicPieChart = ({ chartData }) => {
//     const [overallValue, setOverallValue] = useState(0);
//     const chartRef = useRef();

//     useEffect(() => {
//         if (chartRef.current && chartData) {
//             const chart = chartRef.current.chart;
//             chart.series[0].setData(chartData);
//             const sum = chartData.reduce((total, dataPoint) => total + dataPoint.y, 0);
//             setOverallValue(sum);

//             // Update the chart title to include the overall value
//             chart.setTitle({ text: `Overall Amount: ${sum}` });
//         }
//     }, [chartData]);

//     return (
//         <div style={{width:"inherit"}}>
//             <HighchartsReact
//                 highcharts={Highcharts}
//                 options={{
//                     chart: {
//                         type: 'pie'
//                     },
//                     title: {
//                         text: `Overall Amount: ${overallValue}` // Initial title with overall value
//                     },
//                     series: [{
//                         name: 'Amount',
//                         data: chartData
//                     }]
//                 }}
//                 ref={chartRef}
//             />
//         </div>
//     );
// };

// export default DynamicPieChart;

// import React, { useEffect, useRef, useState } from 'react';
// import Highcharts from 'highcharts';
// import HighchartsReact from 'highcharts-react-official';
// import "./PieChart.scss"
// const DynamicPieChart = ({ chartData }) => {
//     const [overallValue, setOverallValue] = useState(0);
//     const chartRef = useRef();

//     useEffect(() => {
//         if (chartRef.current && chartData) {
//             const chart = chartRef.current.chart;
//             chart.series[0].setData(chartData);
//             const sum = chartData.reduce((total, dataPoint) => total + dataPoint.y, 0);
//             setOverallValue(sum);

//             // Update the chart title to include the overall value
//             chart.setTitle({ text: `Overall Amount: ${sum}` });
//         }
//     }, [chartData]);

//     return (
//         <div style={{ width: "inherit" }}>
//             <HighchartsReact
//                 highcharts={Highcharts}
//                 options={{
//                     chart: {
//                         type: 'pie'
//                     },
//                     title: {
//                         text: `Overall Amount: ${overallValue}`
//                     },
//                     series: [{
//                         name: 'Amount',
//                         data: chartData
//                     }]
//                 }}
//                 ref={chartRef}
//             />
//         </div>
//     );
// };

// export default DynamicPieChart;

// create by sree
import React, { useMemo } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import './PieChart.scss';

const DynamicPieChart = ({ chartData }) => {
  const safeRound = (val) => {
    if (val == null) return '0.00';
    const num = Number(String(val).replace(/[^0-9.-]+/g, ''));
    return isNaN(num) ? '0.00' : num.toFixed(2);
  };

  const overallValue = useMemo(
    () => chartData?.reduce((total, { y }) => total + (y || 0), 0) || 0,
    [chartData]
  );

  if (!chartData?.length) {
    return <div style={{textAlign:"center",display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '250px',
        backgroundColor: '#fafafa',
        color: '#999',
        fontSize: '16px',
        fontWeight: '500',
        border: '1px dashed #d9d9d9',
        borderRadius: '8px',}}>No Data Found</div>;
  }

  return (
    <div style={{ width: 'inherit' }}>
      <HighchartsReact
        highcharts={Highcharts}
        options={{
          chart: { type: 'pie' },
          title: { text: `Overall Amount : ${safeRound(overallValue)}` },
          series: [{ name: 'Amount', data: chartData }],
        }}
      />
    </div>
  );
};

export default DynamicPieChart;