// import { useEffect, useState } from 'react'

// // ** MUI Imports
// import Card from '@mui/material/Card'
// import CardHeader from '@mui/material/CardHeader'
// import CardContent from '@mui/material/CardContent'
// import { Bar } from 'react-chartjs-2'

// // ** Third Party Imports
// import { ChartData, ChartOptions } from 'chart.js'

// // ** Loader
// import BarChartLoader from './BarChartLoader'

// interface HorizontalBarProps {
//   info: string
//   warning: string
//   labelColor: string
//   borderColor: string
//   legendColor: string
// }

// const MerchantBarChart = (props: HorizontalBarProps) => {
//   // ** Props
//   const { info, warning, labelColor, borderColor, legendColor } = props

//   // ** States
//   const [loading, setLoading] = useState<boolean>(true)

//   useEffect(() => {
//     setTimeout(() => {
//       setLoading(false)
//     }, 4000)

//     return () => setLoading(true)
//   }, [])

//   const options: ChartOptions<'bar'> = {
//     indexAxis: 'x',
//     responsive: true,
//     maintainAspectRatio: false,
//     animation: { duration: 500 },
//     elements: {
//       bar: {
//         borderRadius: {
//           topRight: 15,
//           bottomRight: 15
//         }
//       }
//     },
//     layout: {
//       padding: { top: -4 }
//     },
//     scales: {
//       x: {
//         min: 0,
//         grid: {
//           drawTicks: false,
//           color: borderColor
//         },
//         ticks: { color: labelColor }
//       },
//       y: {
//         grid: {
//           display: false,
//           color: borderColor
//         },
//         ticks: { color: labelColor }
//       }
//     },
//     plugins: {
//       legend: {
//         align: 'end',
//         position: 'top',
//         labels: { color: legendColor }
//       }
//     }
//   }

//   const data: ChartData<'bar'> = {
//     labels: ['MON', 'TUE', 'WED ', 'THU', 'FRI'],
//     datasets: [
//       {
//         maxBarThickness: 15,
//         label: 'Market Data',
//         backgroundColor: warning,
//         borderColor: 'transparent',
//         data: [710, 350, 580, 460, 120]
//       },
//       {
//         maxBarThickness: 15,
//         backgroundColor: info,
//         label: 'Personal Data',
//         borderColor: 'transparent',
//         data: [430, 590, 510, 240, 360]
//       }
//     ]
//   }

//   if (loading) {
//     return <BarChartLoader />
//   }

//   return (
//     <Card>
//       <CardHeader title='Balance' subheader='$74,123' />
//       <CardContent>
//         <Bar data={data} height={400} options={options} />
//       </CardContent>
//     </Card>
//   )
// }

// export default MerchantBarChart


import { useEffect, useState } from 'react'

// ** MUI
import Card from '@mui/material/Card'
import CardHeader from '@mui/material/CardHeader'
import CardContent from '@mui/material/CardContent'
import FormControl from '@mui/material/FormControl'
import Select from '@mui/material/Select'
import MenuItem from '@mui/material/MenuItem'
import Box from '@mui/material/Box'
import { SelectChangeEvent } from '@mui/material/Select'

// ** Chart
import { Bar } from 'react-chartjs-2'
import {
  ChartData,
  ChartOptions
} from 'chart.js'

// ** Loader
import BarChartLoader from './BarChartLoader'

interface HorizontalBarProps {
  info: string
  warning: string
  labelColor: string
  borderColor: string
  legendColor: string
}

// Sample data for different date ranges
const generateData = (range: string) => {
  const monthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  const months: string[] = []  // ✅ Changed from let to const
  const expensesData: number[] = []  // ✅ Changed from let to const
  const incomeData: number[] = []  // ✅ Changed from let to const

  // Get current date
  const currentDate = new Date()
  const currentMonth = currentDate.getMonth()
  const currentYear = currentDate.getFullYear()
  
  let count = 0
  if (range === '3') count = 3
  else if (range === '6') count = 6
  else if (range === '12') count = 12

  // Generate last 'count' months from current month going backwards
  for (let i = 0; i < count; i++) {
    let monthIndex = currentMonth - (count - 1 - i)

    // ✅ Removed unused 'year' variable
    
    if (monthIndex < 0) {
      monthIndex += 12

      // year -= 1  // ❌ Removed unused variable
    }
    
    months.push(monthLabels[monthIndex])
    
    // Random data between 100-800 for demo
    expensesData.push(Math.floor(Math.random() * 700) + 100)
    incomeData.push(Math.floor(Math.random() * 700) + 100)
  }

  return { months, expensesData, incomeData }
}

const MerchantBarChart = (
  props: HorizontalBarProps
) => {

  const {
    labelColor,
    borderColor,
    legendColor
  } = props

  const [loading, setLoading] = useState<boolean>(true)
  const [dateRange, setDateRange] = useState<string>('6')
  const [chartData, setChartData] = useState<{ months: string[], expensesData: number[], incomeData: number[] }>({
    months: [],
    expensesData: [],
    incomeData: []
  })

  useEffect(() => {
    const timer = setTimeout(() => {
      setLoading(false)
    }, 1000)

    return () => {
      clearTimeout(timer)
    }
  }, [])

  // Update data when date range changes
  useEffect(() => {
    const newData = generateData(dateRange)
    setChartData(newData)
  }, [dateRange])

  const handleDateRangeChange = (event: SelectChangeEvent) => {
    setDateRange(event.target.value)
  }

  const options: ChartOptions<'bar'> = {

    responsive: true,

    maintainAspectRatio: false,

    animation: {
      duration: 600
    },

    elements: {
      bar: {
        borderRadius: 8
      }
    },

    layout: {
      padding: {
        top: 0,
        left: 0,
        right: 0,
        bottom: 0
      }
    },

    scales: {

      x: {
        grid: {
          drawTicks: false,
          color: borderColor
        },

        ticks: {
          color: labelColor
        }
      },

      y: {

        grid: {
          display: false
        },

        ticks: {
          color: labelColor
        }
      }

    },

    plugins: {

      legend: {
        align: 'end',
        position: 'top',

        labels: {
          color: legendColor
        }
      }

    }
  }

  const data: ChartData<'bar'> = {

    labels: chartData.months.length > 0 ? chartData.months : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],

    datasets: [

      {
        maxBarThickness: 15,
        label: 'Income',
        backgroundColor: '#a0f0c5',
        borderColor: 'transparent',

        data: chartData.incomeData.length > 0 ? chartData.incomeData : [430, 590, 510, 240, 360, 280]
      },

      {
        maxBarThickness: 15,
        label: 'Expenses',
        backgroundColor: '#f3aab5',
        borderColor: 'transparent',

        data: chartData.expensesData.length > 0 ? chartData.expensesData : [710, 350, 580, 460, 120, 430]
      }

    ]
  }

  if (loading) {
    return <BarChartLoader />
  }

  return (
    <Card
      sx={{
        height: '100%'
      }}
    >

      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', pr: 3 }}>
        <CardHeader
          title='Income V/S Expense'
          subheader='$74,123'
          sx={{ flex: 1 }}
        />
        
        <FormControl size="small" sx={{ minWidth: 120 }}>
          <Select
            value={dateRange}
            onChange={handleDateRangeChange}
            displayEmpty
            inputProps={{ 'aria-label': 'Date range' }}
            sx={{
              '& .MuiSelect-select': {
                py: 1
              }
            }}
          >
            <MenuItem value="3">3 Months</MenuItem>
            <MenuItem value="6">6 Months</MenuItem>
            <MenuItem value="12">12 Months</MenuItem>
          </Select>
        </FormControl>
      </Box>

      <CardContent
        sx={{
          pt: 0
        }}
      >

        <Bar
          data={data}
          height={350}
          options={options}
        />

      </CardContent>

    </Card>
  )
}

export default MerchantBarChart