import React from 'react';
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';

export default function ExpenseBreakdown({ data, height = 350 }) {
    const defaultData = [
        { name: 'Salaries', value: 45000, color: '#6D4C41' },
        { name: 'Operations', value: 23000, color: '#8b5cf6' },
        { name: 'Marketing', value: 12000, color: '#ec4899' },
        { name: 'Technology', value: 18000, color: '#10b981' },
        { name: 'Facilities', value: 8000, color: '#f59e0b' },
        { name: 'Other', value: 4000, color: '#6b7280' },
    ];

    const chartData = data || defaultData;

    const CustomTooltip = ({ active, payload }) => {
        if (active && payload && payload.length) {
            return (
                <div className="bg-white p-3 rounded-lg shadow-xl border border-gray-200">
                    <p className="font-semibold text-gray-900">{payload[0].name}</p>
                    <p className="text-sm text-gray-600">
                        ${payload[0].value.toLocaleString()}
                    </p>
                    <p className="text-xs text-gray-500">
                        {((payload[0].value / chartData.reduce((a, b) => a + b.value, 0)) * 100).toFixed(1)}%
                    </p>
                </div>
            );
        }
        return null;
    };

    const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent }) => {
        const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
        const x = cx + radius * Math.cos(-midAngle * Math.PI / 180);
        const y = cy + radius * Math.sin(-midAngle * Math.PI / 180);

        return (
            <text 
                x={x} 
                y={y} 
                fill="white" 
                textAnchor={x > cx ? 'start' : 'end'} 
                dominantBaseline="central"
                className="text-sm font-semibold"
            >
                {`${(percent * 100).toFixed(0)}%`}
            </text>
        );
    };

    return (
        <ResponsiveContainer width="100%" height={height}>
            <PieChart>
                <Pie
                    data={chartData}
                    cx="50%"
                    cy="50%"
                    labelLine={false}
                    label={renderCustomizedLabel}
                    outerRadius={120}
                    fill="#8884d8"
                    dataKey="value"
                >
                    {chartData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                </Pie>
                <Tooltip content={<CustomTooltip />} />
                <Legend 
                    verticalAlign="bottom" 
                    height={36}
                    iconType="circle"
                    formatter={(value, entry) => (
                        <span className="text-sm text-gray-700">
                            {value}: ${entry.payload.value.toLocaleString()}
                        </span>
                    )}
                />
            </PieChart>
        </ResponsiveContainer>
    );
}
