import { Line, Bar, Pie } from 'react-chartjs-2'
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  Title,
  Tooltip,
  Legend,
  ArcElement,
} from 'chart.js'
import { BarChart3, TrendingUp, AlertCircle } from 'lucide-react'

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  Title,
  Tooltip,
  Legend,
  ArcElement
)

const Chart = ({ data, type, height = 300, options = {}, title, subtitle }) => {
  // Check if data is null, undefined, or not an array
  if (!data || !Array.isArray(data) || data.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center" style={{ height }}>
        <div className="text-center">
          <div className="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-blue-100 to-green-100 dark:from-blue-900/20 dark:to-green-900/20 rounded-2xl flex items-center justify-center">
            {type === 'line' ? (
              <TrendingUp className="h-10 w-10 text-blue-500 dark:text-blue-400" />
            ) : (
              <BarChart3 className="h-10 w-10 text-green-500 dark:text-green-400" />
            )}
          </div>
          <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2">
            {title || 'No Data Available'}
          </h3>
          <p className="text-sm text-gray-500 dark:text-gray-400 max-w-md">
            {subtitle || 'There is no data to display for the selected time period. Try adjusting your filters or check back later.'}
          </p>
          <div className="mt-4 flex items-center justify-center space-x-2 text-xs text-gray-400">
            <AlertCircle className="h-4 w-4" />
            <span>Data will appear here once available</span>
          </div>
        </div>
      </div>
    )
  }

  const defaultOptions = {
    responsive: true,
    maintainAspectRatio: false,
    animation: {
      duration: 2000,
      easing: 'easeInOutQuart',
      delay: (context) => {
        let delay = 0;
        if (context.type === 'data' && context.mode === 'default') {
          delay = context.dataIndex * 200 + context.datasetIndex * 100;
        }
        return delay;
      },
    },
    plugins: {
      legend: {
        position: 'top',
      },
    },
    ...options,
  }

  const renderChart = () => {
    switch (type) {
      case 'line':
        return (
          <Line
            data={{
              labels: data.map(item => new Date(item.date).toLocaleDateString()),
              datasets: [
                {
                  label: 'Transaction Value',
                  data: data.map(item => item.value),
                  borderColor: 'rgb(59, 130, 246)',
                  backgroundColor: 'rgba(59, 130, 246, 0.1)',
                  tension: 0.4,
                },
              ],
            }}
            options={defaultOptions}
          />
        )
      
      case 'bar':
        return (
          <Bar
            data={{
              labels: data.map(item => item.area),
              datasets: [
                {
                  label: 'Transaction Count',
                  data: data.map(item => item.transaction_count),
                  backgroundColor: 'rgba(59, 130, 246, 0.8)',
                  borderColor: 'rgb(59, 130, 246)',
                  borderWidth: 1,
                },
              ],
            }}
            options={defaultOptions}
          />
        )
      
      case 'pie':
        return (
          <Pie
            data={{
              labels: data.map(item => item.area),
              datasets: [
                {
                  data: data.map(item => item.transaction_count),
                  backgroundColor: [
                    'rgba(59, 130, 246, 0.8)',
                    'rgba(16, 185, 129, 0.8)',
                    'rgba(245, 158, 11, 0.8)',
                    'rgba(239, 68, 68, 0.8)',
                    'rgba(139, 92, 246, 0.8)',
                  ],
                },
              ],
            }}
            options={defaultOptions}
          />
        )
      
      default:
        return null
    }
  }

  return (
    <div style={{ height }}>
      {renderChart()}
    </div>
  )
}

export default Chart

