'use client';

import {
  BarChart as RechartsBarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts';
import type { WidgetConfig, ChartData, ChartWidgetConfig } from '@/lib/pipeline-types';
import { WidgetWrapper } from './WidgetWrapper';

interface BarChartWidgetProps {
  config: WidgetConfig;
  data: ChartData | null;
  loading: boolean;
  error?: string;
  onRefresh?: () => void;
}

// Default colors for series
const DEFAULT_COLORS = [
  '#3b82f6', // blue
  '#22c55e', // green
  '#ef4444', // red
  '#eab308', // yellow
  '#8b5cf6', // purple
  '#ec4899', // pink
  '#06b6d4', // cyan
];

/**
 * Bar chart widget using Recharts.
 */
export function BarChartWidget({
  config,
  data,
  loading,
  error,
  onRefresh,
}: BarChartWidgetProps) {
  const chartConfig = config.config as unknown as ChartWidgetConfig;
  const chartData = data?.data || [];

  return (
    <WidgetWrapper config={config} loading={loading} error={error} onRefresh={onRefresh}>
      {chartData.length === 0 ? (
        <div className="flex items-center justify-center h-full text-gray-500">
          No data available
        </div>
      ) : (
        <ResponsiveContainer width="100%" height="100%">
          <RechartsBarChart
            data={chartData}
            margin={{ top: 5, right: 20, left: 0, bottom: 5 }}
          >
            {chartConfig.show_grid !== false && (
              <CartesianGrid strokeDasharray="3 3" stroke="#d1d5db" />
            )}
            <XAxis
              dataKey={chartConfig.x_axis?.key || 'x'}
              tick={{ fontSize: 12, fill: '#374151' }}
              tickLine={false}
              axisLine={{ stroke: '#d1d5db' }}
            />
            <YAxis
              tick={{ fontSize: 12, fill: '#374151' }}
              tickLine={false}
              axisLine={{ stroke: '#d1d5db' }}
              label={
                chartConfig.y_axis?.label
                  ? {
                      value: chartConfig.y_axis.label,
                      angle: -90,
                      position: 'insideLeft',
                      style: { fontSize: 12, fill: '#374151' },
                    }
                  : undefined
              }
            />
            <Tooltip
              contentStyle={{
                backgroundColor: 'white',
                border: '1px solid #e5e7eb',
                borderRadius: '0.375rem',
              }}
            />
            {chartConfig.show_legend !== false && <Legend />}
            {chartConfig.series?.map((series, index) => (
              <Bar
                key={series.key}
                dataKey={series.key}
                name={series.name}
                fill={series.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length]}
                radius={[4, 4, 0, 0]}
              />
            ))}
          </RechartsBarChart>
        </ResponsiveContainer>
      )}
    </WidgetWrapper>
  );
}