import { BarChart as RechartsBarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import { CardTitle } from '../ui/Typography';
import { englishToPersian, formatWithThousands } from '@/utils/numberUtils';

const formatNumber = (value: number | string) => {
    const formatted = formatWithThousands(value);
    return englishToPersian(formatted);
};


interface BarChartProps {
    data: any[];
    title?: string;
    color?: string;
}

export const BarChart = ({ data, title, color = '#3b82f6' }: BarChartProps) => {
    return (
        <div className="card p-3 sm:p-4 lg:p-6">
            {title && (
                <CardTitle className="mb-3 sm:mb-4">
                    {title}
                </CardTitle>
            )}
            <div className="w-full">
                <ResponsiveContainer width="100%" height={250} minHeight={200}>
                    <RechartsBarChart data={data} margin={{ top: 10, right: 10, left: 10, bottom: 10 }}>
                        <defs>
                            <linearGradient id="barFill" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="5%" stopColor={color} stopOpacity={0.9} />
                                <stop offset="95%" stopColor={color} stopOpacity={0.4} />
                            </linearGradient>
                        </defs>
                        <CartesianGrid strokeDasharray="4 4" className="stroke-gray-200 dark:stroke-gray-700" />
                        <XAxis
                            dataKey="name"
                            className="text-gray-600 dark:text-gray-400"
                            tick={{ fontSize: 11, fontFamily: 'inherit' }}
                            tickFormatter={(value) => englishToPersian(value)}
                            interval="preserveStartEnd"
                            height={40}
                        />
                        <YAxis
                            className="text-gray-600 dark:text-gray-400"
                            tick={{ fontSize: 11, fontFamily: 'inherit' }}
                            tickFormatter={(value) => formatNumber(value)}
                            width={72}
                            tickMargin={8}
                            tickCount={4}
                            allowDecimals={false}
                        />
                        <Tooltip
                            contentStyle={{
                                backgroundColor: 'var(--toast-bg)',
                                color: 'var(--toast-color)',
                                border: 'none',
                                borderRadius: '8px',
                                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
                                fontSize: '12px',
                                fontFamily: 'inherit',
                            }}
                            formatter={(value: any) => formatNumber(value)}
                            labelFormatter={(label: any) => englishToPersian(label)}
                        />
                        <Bar dataKey="value" fill="url(#barFill)" radius={[8, 8, 0, 0]} barSize={28} />
                    </RechartsBarChart>
                </ResponsiveContainer>
            </div>
        </div>
    );
}; 