'use client';

/**
 * BarChartWidget — Reusable bar chart component.
 *
 * Features:
 * - Supports vertical (default) and horizontal layout
 * - ResponsiveContainer for automatic resizing
 * - Custom themed tooltip
 * - Legend support (optional)
 * - Smooth animation on initial render
 * - Axis labels
 *
 * Requirements: 16.1, 16.2, 16.3, 16.4, 16.5
 */

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts';
import CustomTooltip from './CustomTooltip';
import { divisiColors } from '@/lib/constants/theme';
import { useIsMobile } from '@/lib/hooks/useIsMobile';
import { useChartTheme } from '@/lib/hooks/useChartTheme';

interface BarConfig {
  dataKey: string;
  color: string;
  name?: string;
}

interface BarChartWidgetProps {
  data: Array<Record<string, unknown>>;
  xKey: string;
  bars: BarConfig[];
  height?: number;
  layout?: 'vertical' | 'horizontal';
  showLegend?: boolean;
  yAxisFormatter?: (value: number) => string;
}

export default function BarChartWidget({
  data,
  xKey,
  bars,
  height = 300,
  layout = 'vertical',
  showLegend = false,
  yAxisFormatter,
}: BarChartWidgetProps) {
  const isMobile = useIsMobile();
  const chartTheme = useChartTheme();

  // In Recharts, "horizontal" layout means bars go left-to-right (category on Y axis)
  // Our prop: layout="horizontal" means horizontal bars, layout="vertical" means vertical bars
  const isHorizontal = layout === 'horizontal';

  return (
    <ResponsiveContainer width="100%" height={height}>
      <BarChart
        data={data}
        layout={isHorizontal ? 'vertical' : 'horizontal'}
        margin={{ top: 5, right: 10, left: isHorizontal ? 0 : (isMobile ? 0 : 10), bottom: 5 }}
      >
        <CartesianGrid
          strokeDasharray="3 3"
          stroke={chartTheme.gridColor}
          horizontal={!isHorizontal}
          vertical={isHorizontal}
        />
        {isHorizontal ? (
          <>
            <XAxis
              type="number"
              tick={{ fill: chartTheme.tickColor, fontSize: isMobile ? 10 : 12 }}
              axisLine={{ stroke: chartTheme.axisColor }}
              tickLine={false}
              tickFormatter={yAxisFormatter}
            />
            <YAxis
              type="category"
              dataKey={xKey}
              tick={{ fill: chartTheme.tickColor, fontSize: isMobile ? 9 : 11 }}
              axisLine={false}
              tickLine={false}
              width={isMobile ? 80 : 120}
            />
          </>
        ) : (
          <>
            <XAxis
              dataKey={xKey}
              tick={{ fill: chartTheme.tickColor, fontSize: isMobile ? 10 : 12 }}
              axisLine={{ stroke: chartTheme.axisColor }}
              tickLine={false}
              interval={isMobile ? Math.max(1, Math.floor(data.length / 4)) : 'preserveStartEnd'}
            />
            <YAxis
              tick={{ fill: chartTheme.tickColor, fontSize: isMobile ? 10 : 12 }}
              axisLine={false}
              tickLine={false}
              width={isMobile ? (yAxisFormatter ? 50 : 40) : (yAxisFormatter ? 65 : 50)}
              tickFormatter={yAxisFormatter}
            />
          </>
        )}
        <Tooltip content={<CustomTooltip />} cursor={{ fill: 'rgba(128,128,128,0.08)' }} />
        {showLegend && (
          <Legend
            wrapperStyle={{ fontSize: 12 }}
            formatter={(value: string) => (
              <span style={{ color: chartTheme.legendColor }}>{value}</span>
            )}
          />
        )}
        {bars.map((bar) => (
          <Bar
            key={bar.dataKey}
            dataKey={bar.dataKey}
            fill={bar.color}
            name={bar.name ?? bar.dataKey}
            radius={[4, 4, 0, 0]}
            animationDuration={800}
            animationEasing="ease-in-out"
          />
        ))}
      </BarChart>
    </ResponsiveContainer>
  );
}