// components/ReworkAndScrapAnalysis.tsx
import React from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import { Card } from 'antd';

// Sample data: Total units, Reworkable units, and Scrapped units
const data = [1000, -200, -150, 650,400,-300,750]; // Example data where:
// 1000 is the total units produced
// -200 is reworkable units
// -150 is scrapped units
// 650 is good units

const calculateWaterfallData = (data: number[]) => {
  const help: number[] = [];
  const positive: (number | '-')[] = [];
  const negative: (number | '-')[] = [];
  const categories = ['Total Time', 'Planned Downtime', 'Unplanned Downtime', 'Available Time', 'Extra Downtime 1', 'Extra Downtime 2'];

  let sum = 0;

  for (let i = 0; i < data.length; ++i) {
    if (data[i] >= 0) {
      positive.push(data[i]);
      negative.push('-');
    } else {
      positive.push('-');
      negative.push(-data[i]);
    }

    if (i === 0) {
      help.push(0);
    } else {
      sum += data[i - 1];
      help.push(sum + data[i]);
    }
  }

  return { help, positive, negative, categories };
};


const { help, positive, negative, categories } = calculateWaterfallData(data);

const option = {
  title: {
    text: 'Planned vs. Unplanned Downtime Impact',
    left: 'center',
    textStyle: {
      fontSize: 18,
      fontWeight: 'bold',
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    splitLine: { show: false },
    data: categories,
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      type: 'bar',
      stack: 'all',
      itemStyle: {
        normal: {
          barBorderColor: 'rgba(0,0,0,0)',
          color: 'rgba(0,0,0,0)',
        },
        emphasis: {
          barBorderColor: 'rgba(0,0,0,0)',
          color: 'rgba(0,0,0,0)',
        },
      },
      data: help,
    },
    {
      name: 'Available Time',
      type: 'bar',
      stack: 'all',
      data: positive,
      itemStyle: {
        color: '#4CAF50', // Green for available time
      },
    },
    {
      name: 'Planned Downtime',
      type: 'bar',
      stack: 'all',
      data: negative.map((item, index) => (index === 1 ? item : '-')),
      itemStyle: {
        color: '#9E9E9E', // Grey for planned downtime
      },
    },
    {
      name: 'Unplanned Downtime',
      type: 'bar',
      stack: 'all',
      data: negative.map((item, index) => (index === 2 ? item : '-')),
      itemStyle: {
        color: '#FF0000', // Red for unplanned downtime
      },
    },
    // Add new data series for extra downtime
    {
      name: 'Extra Downtime 1',
      type: 'bar',
      stack: 'all',
      data: negative.map((item, index) => (index === 3 ? item : '-')),
      itemStyle: {
        color: '#FF7F50', // Coral for extra downtime 1
      },
    },
    {
      name: 'Extra Downtime 2',
      type: 'bar',
      stack: 'all',
      data: negative.map((item, index) => (index === 4 ? item : '-')),
      itemStyle: {
        color: '#1E90FF', // Dodger blue for extra downtime 2
      },
    },
  ],
  legend: {
    data: ['Available Time', 'Planned Downtime', 'Unplanned Downtime', 'Extra Downtime 1', 'Extra Downtime 2'],
    bottom: '0%',
    itemWidth: 20,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
    },
  },
};


const ReworkAndScrapAnalysis: React.FC = () => (
  <Card title="Rework and Scrap Analysis" style={{ height: '400px' }}> {/* Ensure Card height is full */}
    <div style={{ height: '400px' }}> {/* Ensure container height is set */}
      <ReactECharts option={option} style={{ height: '300px', width: '100%' }} />
    </div>
  </Card>
);

export default ReworkAndScrapAnalysis;
create a data props and interface with any