'use client';

import {
  BarChart as RechartsBarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Legend,
} from 'recharts';

import { ChartContainer, ChartEmptyState } from './chart-container';

interface BarChartDataPoint {
  name: string;
  [key: string]: string | number;
}

interface BarChartSeries {
  dataKey: string;
  name: string;
  color: string;
  stackId?: string;
}

interface BarChartProps {
  /** Chart title */
  title: string;
  /** Optional description */
  description?: string;
  /** Data points to display */
  data: BarChartDataPoint[];
  /** Series configuration */
  series: BarChartSeries[];
  /** Whether data is loading */
  isLoading?: boolean;
  /** Chart height */
  height?: number;
  /** Whether to show grid lines */
  showGrid?: boolean;
  /** Whether to show legend */
  showLegend?: boolean;
  /** Whether bars should be stacked */
  stacked?: boolean;
  /** Layout direction */
  layout?: 'vertical' | 'horizontal';
  /** Additional CSS classes */
  className?: string;
}

/**
 * Bar Chart component using Recharts
 * Supports single or multiple series, stacked bars, and horizontal/vertical layout
 */
export function BarChart({
  title,
  description,
  data,
  series,
  isLoading = false,
  height = 300,
  showGrid = true,
  showLegend = true,
  stacked = false,
  layout = 'horizontal',
  className,
}: BarChartProps) {
  if (!isLoading && data.length === 0) {
    return (
      <ChartContainer title={title} description={description} height={height} className={className}>
        <ChartEmptyState />
      </ChartContainer>
    );
  }

  const isVertical = layout === 'vertical';

  return (
    <ChartContainer
      title={title}
      description={description}
      isLoading={isLoading}
      height={height}
      className={className}
    >
      <ResponsiveContainer width="100%" height="100%">
        <RechartsBarChart
          data={data}
          layout={layout}
          margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
        >
          {showGrid && (
            <CartesianGrid strokeDasharray="3 3" className="stroke-muted" opacity={0.5} />
          )}

          {isVertical ? (
            <>
              <XAxis type="number" className="text-xs" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
              <YAxis
                dataKey="name"
                type="category"
                className="text-xs"
                tick={{ fill: 'hsl(var(--muted-foreground))' }}
                width={100}
              />
            </>
          ) : (
            <>
              <XAxis
                dataKey="name"
                className="text-xs"
                tick={{ fill: 'hsl(var(--muted-foreground))' }}
              />
              <YAxis className="text-xs" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
            </>
          )}

          <Tooltip
            contentStyle={{
              backgroundColor: 'hsl(var(--popover))',
              border: '1px solid hsl(var(--border))',
              borderRadius: '0.5rem',
              color: 'hsl(var(--popover-foreground))',
            }}
          />

          {showLegend && <Legend wrapperStyle={{ paddingTop: '20px' }} />}

          {series.map((s) => (
            <Bar
              key={s.dataKey}
              dataKey={s.dataKey}
              name={s.name}
              fill={s.color}
              stackId={stacked ? 'stack' : s.stackId}
              radius={[4, 4, 0, 0]}
            />
          ))}
        </RechartsBarChart>
      </ResponsiveContainer>
    </ChartContainer>
  );
}
