import { 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;