"use client"

import type React from "react"
import {
  LineChart as RechartsLineChart,
  Line,
  BarChart as RechartsBarChart,
  Bar,
  PieChart as RechartsPieChart,
  Pie,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  Cell,
} from "recharts"

interface ChartProps {
  data: any
  height?: number
}

export const LineChart: React.FC<ChartProps> = ({ data, height = 300 }) => {
  return (
    <ResponsiveContainer width="100%" height={height}>
      <RechartsLineChart
        data={data.labels.map((label: string, index: number) => {
          const dataPoint: any = { name: label }
          data.datasets.forEach((dataset: any, datasetIndex: number) => {
            dataPoint[dataset.label] = dataset.data[index]
          })
          return dataPoint
        })}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        {data.datasets.map((dataset: any, index: number) => (
          <Line
            key={index}
            type="monotone"
            dataKey={dataset.label}
            stroke={dataset.borderColor}
            fill={dataset.backgroundColor}
            activeDot={{ r: 8 }}
          />
        ))}
      </RechartsLineChart>
    </ResponsiveContainer>
  )
}

export const BarChart: React.FC<ChartProps> = ({ data, height = 300 }) => {
  return (
    <ResponsiveContainer width="100%" height={height}>
      <RechartsBarChart
        data={data.labels.map((label: string, index: number) => {
          const dataPoint: any = { name: label }
          data.datasets.forEach((dataset: any, datasetIndex: number) => {
            dataPoint[dataset.label] = dataset.data[index]
          })
          return dataPoint
        })}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        {data.datasets.map((dataset: any, index: number) => (
          <Bar
            key={index}
            dataKey={dataset.label}
            fill={dataset.backgroundColor || `rgba(59, 130, 246, ${0.8 - index * 0.2})`}
          />
        ))}
      </RechartsBarChart>
    </ResponsiveContainer>
  )
}

export const PieChart: React.FC<ChartProps> = ({ data, height = 300 }) => {
  return (
    <ResponsiveContainer width="100%" height={height}>
      <RechartsPieChart>
        <Tooltip />
        <Legend />
        {data.datasets.map((dataset: any, datasetIndex: number) => (
          <Pie
            key={datasetIndex}
            data={data.labels.map((label: string, index: number) => ({
              name: label,
              value: dataset.data[index],
            }))}
            cx="50%"
            cy="50%"
            outerRadius={80}
            fill="#8884d8"
            dataKey="value"
            label
          >
            {data.labels.map((entry: any, index: number) => (
              <Cell
                key={`cell-${index}`}
                fill={
                  dataset.backgroundColor instanceof Array
                    ? dataset.backgroundColor[index]
                    : `rgba(59, 130, 246, ${0.8 - index * 0.1})`
                }
              />
            ))}
          </Pie>
        ))}
      </RechartsPieChart>
    </ResponsiveContainer>
  )
}