import React from "react";
import ReactApexChart from "react-apexcharts";
import PropTypes from "prop-types";

const LineChart = ({
  seriesData = [],
  categories = [],
  colors = ["#1E90FF", "#FF6347"],
  loading = false,
  lineChartCategoriesDates = [],
}) => {
    const hasValidData =
        Array.isArray(seriesData) &&
        seriesData.length > 0 &&
        Array.isArray(categories) &&
        categories.length > 0;

    if (loading) {
        return (
            <div className="flex justify-center items-center h-[350px] text-gray-500">
                <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mr-2" />
                Loading chart...
            </div>
        );
    }

    if (!hasValidData) {
        return <div className="text-center text-gray-500">No data to display</div>;
    }

  const chartOptions = {
    chart: {
      type: "line",
      height: 350,
      zoom: {
        enabled: true,
        type: 'x',
        autoScaleYaxis: true
      },
      toolbar: {
        show: true,
        tools: {
          zoom: true,
          zoomin: true,
          zoomout: true,
          pan: true,
          reset: true
        }
      },
      background: 'transparent'
    },
    colors,
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'smooth',
      width: 2
    },
    grid: {
      show: false,
      xaxis: {
        lines: {
          show: false
        }
      },
      yaxis: {
        lines: {
          show: false
        }
      }
    },
    markers: {
      size: 5,
      strokeWidth: 0,
      hover: {
        size: 7
      }
    },
    xaxis: {
      type: 'category',
      categories,
      labels: {
        show: true,
        rotate: -45,
        style: {
          fontSize: '12px'
        }
      },
      tooltip: { enabled: false }
    },
    yaxis: {
      labels: { show: false },
      axisBorder: { show: false },
      axisTicks: { show: false },
      min: 0
    },
    legend: {
      show: true
    },
    tooltip: {
      enabled: true,
      x: {
        formatter: (value, { dataPointIndex }) => {
          if (
            lineChartCategoriesDates &&
            lineChartCategoriesDates.length > dataPointIndex
          ) {
            return lineChartCategoriesDates[dataPointIndex];
          }
          return value;
        }
      }
    }

  };


  return (
    <div className="w-full overflow-x-false">
      <ReactApexChart
        options={chartOptions}
        series={seriesData}
        type="line"
        height={350}
      />
    </div>
  );
};

LineChart.propTypes = {
    seriesData: PropTypes.arrayOf(
        PropTypes.shape({
            name: PropTypes.string.isRequired,
            data: PropTypes.arrayOf(PropTypes.number).isRequired
        })
    ),
    categories: PropTypes.arrayOf(PropTypes.string),
    colors: PropTypes.arrayOf(PropTypes.string),
    title: PropTypes.string,
    loading: PropTypes.bool
};

export default LineChart;