import { Card } from '@/components/ui/card';
import { cn } from '@/lib/utils';
import {
    BadgeCheck,
    CalendarDays,
    CircleCheck,
    ClipboardList,
    FileStack,
    Hourglass,
    MessageCircleQuestion,
    TriangleAlert,
    Upload,
    Users,
    type LucideIcon,
} from 'lucide-react';

const iconMap: Record<string, LucideIcon> = {
    users: Users,
    'file-stack': FileStack,
    'clipboard-list': ClipboardList,
    'badge-check': BadgeCheck,
    'message-circle-question': MessageCircleQuestion,
    'triangle-alert': TriangleAlert,
    upload: Upload,
    hourglass: Hourglass,
    'circle-check': CircleCheck,
    'calendar-days': CalendarDays,
};

function resolveIcon(name: string): LucideIcon {
    return iconMap[name] ?? FileStack;
}

type Props = {
    label: string;
    value: string;
    icon: string;
    hint?: string;
    className?: string;
};

export function DashboardStatWidget({
    label,
    value,
    icon,
    hint,
    className,
}: Props) {
    const Icon = resolveIcon(icon);

    return (
        <Card
            className={cn(
                'relative overflow-hidden border-border/80 bg-gradient-to-br from-card to-card/60 shadow-sm transition-shadow hover:shadow-md',
                className,
            )}
        >
            <div className="pointer-events-none absolute -right-6 -top-6 h-24 w-24 rounded-full bg-primary/10 blur-2xl" />
            <div className="relative flex flex-col gap-3 p-5">
                <div className="flex items-start justify-between gap-3">
                    <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                        {label}
                    </p>
                    <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
                        <Icon className="h-5 w-5" aria-hidden />
                    </span>
                </div>
                <p className="text-3xl font-semibold tabular-nums tracking-tight text-foreground">
                    {value}
                </p>
                {hint ? (
                    <p className="text-xs leading-relaxed text-muted-foreground">
                        {hint}
                    </p>
                ) : null}
            </div>
        </Card>
    );
}