import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';
import { Cell, Pie, PieChart } from 'recharts';

// Paleta de colores para los gráficos
const CHART_COLORS = [
    'hsl(221, 83%, 53%)',   // blue
    'hsl(142, 71%, 45%)',   // green
    'hsl(47, 96%, 53%)',    // yellow
    'hsl(0, 84%, 60%)',     // red
    'hsl(262, 83%, 58%)',   // purple
    'hsl(199, 89%, 48%)',   // cyan
    'hsl(24, 95%, 53%)',    // orange
    'hsl(330, 81%, 60%)',   // pink
    'hsl(173, 80%, 40%)',   // teal
    'hsl(280, 65%, 60%)',   // violet
];

interface ChartDataItem {
    name: string;
    value: number;
}

interface PieChartCardProps {
    title: string;
    description?: string;
    data: ChartDataItem[];
    innerRadius?: number;
    outerRadius?: number;
    totalProjects?: number;
}

export function PieChartCard({
    title,
    description,
    data,
    innerRadius = 60,
    outerRadius = 100,
    totalProjects
}: PieChartCardProps) {
    // Generar configuración dinámica basada en los datos
    const chartConfig: ChartConfig = data.reduce((acc, item, index) => {
        acc[item.name] = {
            label: item.name,
            color: CHART_COLORS[index % CHART_COLORS.length],
        };
        return acc;
    }, {} as ChartConfig);

    // Agregar colores al data
    const dataWithColors = data.map((item, index) => ({
        ...item,
        fill: CHART_COLORS[index % CHART_COLORS.length],
    }));

    const totalValue = data.reduce((sum, item) => sum + item.value, 0);
    const displayTotal = totalProjects ?? totalValue;

    if (data.length === 0) {
        return (
            <Card className="flex flex-col">
                <CardHeader className="items-center pb-0">
                    <CardTitle className="text-base">{title}</CardTitle>
                    {description && <CardDescription>{description}</CardDescription>}
                </CardHeader>
                <CardContent className="flex-1 flex items-center justify-center py-8">
                    <p className="text-muted-foreground text-sm">No hay datos disponibles</p>
                </CardContent>
            </Card>
        );
    }

    return (
        <Card className="flex flex-col">
            <CardHeader className="items-center pb-0">
                <CardTitle className="text-base">{title}</CardTitle>
                {description && <CardDescription>{description}</CardDescription>}
            </CardHeader>
            <CardContent className="flex-1 pb-4">
                <div className="flex flex-col lg:flex-row items-center justify-center gap-6">
                    {/* Gráfico de pastel */}
                    <div className="flex flex-col items-center">
                        <ChartContainer
                            config={chartConfig}
                            className="aspect-square h-[200px] w-[200px]"
                        >
                            <PieChart>
                                <ChartTooltip
                                    cursor={false}
                                    content={<ChartTooltipContent hideLabel />}
                                />
                                <Pie
                                    data={dataWithColors}
                                    dataKey="value"
                                    nameKey="name"
                                    innerRadius={innerRadius}
                                    outerRadius={outerRadius}
                                    strokeWidth={2}
                                    paddingAngle={2}
                                >
                                    {dataWithColors.map((entry, index) => (
                                        <Cell
                                            key={`cell-${index}`}
                                            fill={entry.fill}
                                            className="stroke-background"
                                        />
                                    ))}
                                </Pie>
                            </PieChart>
                        </ChartContainer>
                        <div className="text-center mt-2">
                            <p className="text-2xl font-bold">{displayTotal}</p>
                            <p className="text-xs text-muted-foreground">Total de proyectos</p>
                        </div>
                    </div>

                    {/* Leyenda personalizada */}
                    <div className="flex flex-col gap-2 min-w-[200px] max-w-[300px]">
                        {dataWithColors.map((item, index) => (
                            <div key={index} className="flex items-start gap-2">
                                <span
                                    className="mt-1 h-3 w-3 shrink-0 rounded-sm"
                                    style={{ backgroundColor: item.fill }}
                                />
                                <div className="flex flex-col">
                                    <span className="text-sm leading-tight">{item.name}</span>
                                    <span className="text-xs text-muted-foreground">
                                        {item.value} proyecto{item.value !== 1 ? 's' : ''} ({((item.value / displayTotal) * 100).toFixed(1)}%)
                                    </span>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}