import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';

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

interface BarChartCardProps {
    title: string;
    description?: string;
    data: ChartDataItem[];
    color?: string;
    horizontal?: boolean;
    totalProjects?: number;
}

export function BarChartCard({ 
    title, 
    description, 
    data,
    color = 'hsl(221, 83%, 53%)',
    horizontal = true,
    totalProjects
}: BarChartCardProps) {
    const chartConfig: ChartConfig = {
        value: {
            label: 'Proyectos',
            color: color,
        },
    };

    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="pb-2">
                    <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>
        );
    }

    // Truncar nombres largos para el eje
    const processedData = data.map(item => ({
        ...item,
        displayName: item.name.length > 20 ? item.name.substring(0, 17) + '...' : item.name,
    }));

    return (
        <Card className="flex flex-col">
            <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                    <div>
                        <CardTitle className="text-base">{title}</CardTitle>
                        {description && <CardDescription>{description}</CardDescription>}
                    </div>
                    <div className="text-right">
                        <p className="text-2xl font-bold">{displayTotal}</p>
                        <p className="text-xs text-muted-foreground">Total proyectos</p>
                    </div>
                </div>
            </CardHeader>
            <CardContent className="flex-1 pb-4">
                <ChartContainer config={chartConfig} className="h-[250px] w-full">
                    {horizontal ? (
                        <BarChart
                            data={processedData}
                            layout="vertical"
                            margin={{ left: 0, right: 16 }}
                        >
                            <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} />
                            <YAxis 
                                dataKey="displayName" 
                                type="category" 
                                tickLine={false}
                                axisLine={false}
                                width={120}
                                tick={{ fontSize: 11 }}
                            />
                            <XAxis 
                                type="number" 
                                tickLine={false}
                                axisLine={false}
                                tickMargin={8}
                            />
                            <ChartTooltip
                                cursor={{ fill: 'hsl(var(--muted))' }}
                                content={
                                    <ChartTooltipContent 
                                        formatter={(value, name, item) => (
                                            <div className="flex justify-between gap-2">
                                                <span>{item.payload.name}</span>
                                                <span className="font-bold">{value}</span>
                                            </div>
                                        )}
                                    />
                                }
                            />
                            <Bar 
                                dataKey="value" 
                                fill={color}
                                radius={[0, 4, 4, 0]}
                            />
                        </BarChart>
                    ) : (
                        <BarChart
                            data={processedData}
                            margin={{ left: 0, right: 0, top: 8, bottom: 0 }}
                        >
                            <CartesianGrid strokeDasharray="3 3" vertical={false} />
                            <XAxis 
                                dataKey="displayName" 
                                tickLine={false}
                                axisLine={false}
                                tick={{ fontSize: 10 }}
                                angle={-45}
                                textAnchor="end"
                                height={80}
                            />
                            <YAxis 
                                tickLine={false}
                                axisLine={false}
                                tickMargin={8}
                            />
                            <ChartTooltip
                                cursor={{ fill: 'hsl(var(--muted))' }}
                                content={
                                    <ChartTooltipContent 
                                        formatter={(value, name, item) => (
                                            <div className="flex justify-between gap-2">
                                                <span>{item.payload.name}</span>
                                                <span className="font-bold">{value}</span>
                                            </div>
                                        )}
                                    />
                                }
                            />
                            <Bar 
                                dataKey="value" 
                                fill={color}
                                radius={[4, 4, 0, 0]}
                            />
                        </BarChart>
                    )}
                </ChartContainer>
            </CardContent>
        </Card>
    );
}