import { LineChart as RechartsLineChart, Line, 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 LineChartProps {
    data: any[];
    title?: string;
    color?: string;
}

export const LineChart = ({ data, title, color = '#10b981' }: LineChartProps) => {
    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}>
                    <RechartsLineChart data={data} margin={{ top: 10, right: 10, left: 10, bottom: 10 }}>
                        <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)}
                        />
                        <Line
                            type="monotone"
                            dataKey="value"
                            stroke={color}
                            strokeWidth={3}
                            dot={false}
                            activeDot={{ r: 5 }}
                        />
                    </RechartsLineChart>
                </ResponsiveContainer>
            </div>
        </div>
    );
};