'use client';

import React from 'react';
import ClientOnlyRecharts from '@/components/charts/ClientOnlyRecharts';

interface PieChartProps {
    data: Array<{
        name: string;
        value: number;
        color?: string;
        statusKey?: string;
    }>;
    height?: number;
    showLegend?: boolean;
    showTooltip?: boolean;
    innerRadius?: number;
    outerRadius?: number;
    label?: boolean;
    tooltipFormatter?: (
        value: number | string,
        name: string | number
    ) => [React.ReactNode, React.ReactNode];
    onSliceClick?: (entry: { name: string; value: number; color?: string; statusKey?: string }) => void;
}

const COLORS = [
    '#27132e',
    '#3498db',
    '#27ae60',
    '#f39c12',
    '#e3402d',
    '#9b59b6',
    '#1abc9c',
    '#e67e22',
];

export default function PieChart({
    data,
    height = 300,
    showLegend = true,
    showTooltip = true,
    innerRadius = 0,
    outerRadius = 80,
    label = false,
    tooltipFormatter,
    onSliceClick,
}: PieChartProps) {
    const chartData = data.map((item, index) => ({
        ...item,
        color: item.color || COLORS[index % COLORS.length],
    }));

    return (
        <ClientOnlyRecharts minHeight={height}>
            {({
                ResponsiveContainer,
                PieChart: RechartsPieChart,
                Pie,
                Cell,
                Tooltip,
                Legend,
            }) => (
                <ResponsiveContainer width="100%" height={height}>
                    <RechartsPieChart>
                        <Pie
                            data={chartData}
                            cx="50%"
                            cy="50%"
                            labelLine={false}
                            label={label}
                            outerRadius={outerRadius}
                            innerRadius={innerRadius}
                            fill="#8884d8"
                            dataKey="value"
                            onClick={
                                onSliceClick
                                    ? (_data: unknown, index: number) => {
                                          const entry = chartData[index];
                                          if (entry) {
                                              onSliceClick(entry);
                                          }
                                      }
                                    : undefined
                            }
                            style={onSliceClick ? { cursor: 'pointer' } : undefined}
                        >
                            {chartData.map((entry, index) => (
                                <Cell key={`cell-${index}`} fill={entry.color} />
                            ))}
                        </Pie>
                        {showTooltip && <Tooltip formatter={tooltipFormatter} />}
                        {showLegend && <Legend />}
                    </RechartsPieChart>
                </ResponsiveContainer>
            )}
        </ClientOnlyRecharts>
    );
}