import type { LucideIcon } from 'lucide-react';
import { ArrowDownRight, ArrowUpRight, Minus } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { cn } from '@/lib/utils';

type DashboardKpiCardProps = {
    label: string;
    value: string;
    detail: string;
    icon: LucideIcon;
    tone?: 'primary' | 'positive' | 'warning' | 'negative' | 'neutral';
    trend?: number | null;
};

const toneClasses = {
    primary: 'bg-primary/10 text-primary',
    positive: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
    warning: 'bg-amber-500/10 text-amber-700 dark:text-amber-400',
    negative: 'bg-red-500/10 text-red-600 dark:text-red-400',
    neutral: 'bg-muted text-muted-foreground',
};

export function DashboardKpiCard({
    label,
    value,
    detail,
    icon: Icon,
    tone = 'neutral',
    trend,
}: DashboardKpiCardProps) {
    const TrendIcon =
        trend === null || trend === undefined
            ? Minus
            : trend > 0
              ? ArrowUpRight
              : trend < 0
                ? ArrowDownRight
                : Minus;
    const trendClass =
        trend === null || trend === undefined
            ? 'text-muted-foreground'
            : trend > 0
              ? 'text-emerald-600 dark:text-emerald-400'
              : trend < 0
                ? 'text-red-600 dark:text-red-400'
                : 'text-muted-foreground';

    return (
        <Card className="overflow-hidden shadow-sm transition-shadow hover:shadow-md">
            <CardContent className="flex items-start justify-between gap-3 p-4">
                <div className="min-w-0 space-y-2">
                    <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                        {label}
                    </p>
                    <p className="truncate text-2xl font-bold tracking-tight">
                        {value}
                    </p>
                    <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
                        {trend !== undefined && (
                            <TrendIcon className={cn('size-3.5', trendClass)} />
                        )}
                        <span>{detail}</span>
                    </div>
                </div>
                <span
                    className={cn(
                        'flex size-10 shrink-0 items-center justify-center rounded-xl',
                        toneClasses[tone],
                    )}
                >
                    <Icon className="size-5" />
                </span>
            </CardContent>
        </Card>
    );
}