import {
  BarChart as RechartsBarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from 'recharts'
import { ChartContainer, ChartTooltipContent, type Series, getSeriesColor } from './chart_container'

interface BarChartProps {
  data: Record<string, unknown>[]
  xKey: string
  yKey?: string
  series?: Series[]
  horizontal?: boolean
  showGrid?: boolean
  showLegend?: boolean
  height?: number | string
  className?: string
  xAxisFormatter?: (value: unknown) => string
  yAxisFormatter?: (value: unknown) => string
  valueFormatter?: (value: number) => string
}

function BarChartComponent({
  data, xKey, yKey, series, horizontal = false, showGrid = true, showLegend = false,
  height = 300, className, xAxisFormatter, yAxisFormatter, valueFormatter = (v) => v.toLocaleString(),
}: BarChartProps) {
  const bars = series
    ? series.map((s, i) => ({ dataKey: s.key, name: s.name, fill: getSeriesColor(i, s.color) }))
    : yKey ? [{ dataKey: yKey, name: yKey, fill: getSeriesColor(0) }] : []

  return (
    <ChartContainer className={className} height={height}>
      <RechartsBarChart data={data} layout={horizontal ? 'vertical' : 'horizontal'} margin={{ top: 10, right: 10, left: 10, bottom: 10 }}>
        {showGrid && <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />}
        {horizontal ? (
          <>
            <XAxis type="number" tickFormatter={yAxisFormatter} className="text-xs fill-muted-foreground" />
            <YAxis dataKey={xKey} type="category" tickFormatter={xAxisFormatter} width={80} className="text-xs fill-muted-foreground" />
          </>
        ) : (
          <>
            <XAxis dataKey={xKey} tickFormatter={xAxisFormatter} className="text-xs fill-muted-foreground" />
            <YAxis tickFormatter={yAxisFormatter} className="text-xs fill-muted-foreground" />
          </>
        )}
        <Tooltip content={<ChartTooltipContent valueFormatter={valueFormatter} />} cursor={{ fill: 'hsl(var(--muted) / 0.3)' }} />
        {showLegend && <Legend />}
        {bars.map((bar) => <Bar key={bar.dataKey} dataKey={bar.dataKey} name={bar.name} fill={bar.fill} radius={horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]} />)}
      </RechartsBarChart>
    </ChartContainer>
  )
}

export const BarChart = BarChartComponent
export type { BarChartProps }