import { PieChart as RechartsPieChart, Pie, Cell, Tooltip, ResponsiveContainer, Legend } from 'recharts';
import { CardTitle } from '../ui/Typography';
import { englishToPersian, formatWithThousands } from '@/utils/numberUtils';

interface PieChartProps {
    data: any[];
    title?: string;
    colors?: string[];
}

const DEFAULT_COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];

export const PieChart = ({ data, title, colors = DEFAULT_COLORS }: PieChartProps) => {
    // Custom legend component for left side
    const CustomLegend = (props: any) => {
        const { payload } = props;
        return (
            <div className="flex flex-col gap-2">
                {payload.map((entry: any, index: number) => (
                    <div key={index} className="flex items-center gap-2">
                        <div
                            className="w-3 h-3 rounded-full flex-shrink-0 border border-white dark:border-gray-800"
                            style={{ backgroundColor: entry.color }}
                        />
                        <span className="text-xs sm:text-sm text-gray-700 dark:text-gray-300 whitespace-nowrap">
                            <span className="font-medium">{entry.value}</span>: <span className="font-bold">{englishToPersian(Math.round(entry.payload.value))}%</span>
                        </span>
                    </div>
                ))}
            </div>
        );
    };

    return (
        <div className="card p-3 sm:p-4 lg:p-6">
            {title && (
                <CardTitle className="mb-3 sm:mb-4 text-center">
                    {title}
                </CardTitle>
            )}
            <div className="w-full flex items-center gap-4">
                {/* Legend on the left */}
                <div className="flex-shrink-0">
                    <CustomLegend payload={data.map((item, index) => ({
                        value: item.name,
                        color: colors[index % colors.length],
                        payload: item
                    }))} />
                </div>
                
                {/* Chart on the right */}
                <div className="flex-1">
                    <ResponsiveContainer width="100%" height={280} minHeight={220}>
                        <RechartsPieChart>
                            <Pie
                                data={data}
                                cx="50%"
                                cy="50%"
                                labelLine={false}
                                label={false}
                                outerRadius="75%"
                                innerRadius="35%"
                                fill="#8884d8"
                                dataKey="value"
                                stroke="#fff"
                                strokeWidth={3}
                            >
                                {data.map((_, index) => (
                                    <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
                                ))}
                            </Pie>
                            <Tooltip
                                contentStyle={{
                                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
                                    color: '#1f2937',
                                    border: '1px solid #e5e7eb',
                                    borderRadius: '8px',
                                    boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
                                    fontSize: '14px',
                                    fontWeight: '500',
                                    fontFamily: 'inherit',
                                }}
                                formatter={(value: any, name: any) => [`${englishToPersian(Math.round(value))}%`, name]}
                            />
                        </RechartsPieChart>
                    </ResponsiveContainer>
                </div>
            </div>
        </div>
    );
}; 