const HighImpactColumnChart = ({ rules }) => {
  
  if (!rules || !Array.isArray(rules) || rules.length === 0)
    return  <div
  style={{
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    height: "100%",
    fontSize: 18,
    color: "#666",
    minHeight: 150
  }}
>
  No Data Available
</div>;

  const filteredRules = rules.filter(rule => rule.impact > 0);

  if (filteredRules.length === 0)
    return  <div
  style={{
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    height: "100%",
    fontSize: 18,
    color: "#666",
    minHeight: 150
  }}
>
  No Data Available
</div>;


  // const data = filteredRules.map(rule => ({
  //   name: rule.name || rule.id || `Rule ${rule.rule_id}`,
  //   y: rule.impact
  // }));

  // const totalImpact = filteredRules.reduce((sum, rule) => sum + rule.impact, 0);


  // Helper to count recent 7 comma-separated entries
const countRecentEntries = (impactDiffWithDate, limit = 7) => {
  if (!impactDiffWithDate) return 0;
  const parts = impactDiffWithDate.split(',').filter(Boolean);
  return parts.slice(-limit).length;
};

// Map each rule to its recent 7-day count impact
const data = filteredRules.map(rule => ({
  name: rule.name || rule.id || `Rule ${rule.rule_id}`,
  y: countRecentEntries(rule.impactDiffWithDate, 7)
}));

// Calculate total based on that recent 7-day count impact
const totalImpact = data.reduce((sum, item) => sum + item.y, 0);

  const options = {
    chart: {
      type: 'column',
      height: 400,
    },
    title: { text: '' },
    subtitle: { text: '' },
    xAxis: {
      type: 'category',
      labels: {
        autoRotation: [-45, -90],
        style: {
          fontSize: '13px',
          fontFamily: 'Verdana, sans-serif',
        },
      },
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Impact (tickets affected)',
      },
      labels: {
        formatter: function () {
          return this.value; // Show the actual number without abbreviation
        },
        style: {
          fontSize: '13px',
          fontFamily: 'Verdana, sans-serif',
        },
      },
    },
    legend: { enabled: false },
    tooltip: {
      formatter: function () {
        const percentage = ((this.y / totalImpact) * 100).toFixed(2);
        return `
          <b>Rule Name:</b> ${this.point.name}<br/>
          <b>Impact Count:</b> ${this.y}<br/>
          <b>Percentage:</b> ${percentage}%
        `;
      }
    }
       ,
    series: [
      {
        name: 'Impact',
        colorByPoint: true,
        groupPadding: 0,
        data,
        dataLabels: {
          enabled: true,
          color: '#000000',
          verticalAlign: 'bottom',
          inside: false,
          format: '{y}',
          style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif',
          },
        },
      }
    ],
    colors: [
      '#9b20d9', '#9215ac', '#861ec9', '#7a17e6', '#7010f9', '#691af3',
      '#6225ed', '#5b30e7', '#533be1', '#4c46db', '#4551d5', '#3e5ccf',
      '#3667c9', '#2f72c3', '#277dbd', '#1f88b7', '#1693b1', '#0a9eaa',
      '#03c69b', '#00f194'
    ],
    credits: { enabled: false },
  };

  return <HighchartsReact highcharts={Highcharts} options={options} />;
};

in this, what data are you showing